From 35194cf345527aae1f2fea18adecfaad2465e841 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Sat, 27 Oct 2018 10:56:03 +0200
Subject: [PATCH 01/67] Extract navigate mixin (#1865)

* Extract navigate to function

* Remove eventsmixin properly and side effects
---
 src/common/navigate.ts                             | 14 ++++++++++++++
 src/mixins/navigate-mixin.js                       | 13 ++++---------
 src/panels/config/dashboard/ha-config-dashboard.js |  2 +-
 src/panels/config/users/ha-config-users.js         |  5 +++--
 4 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 src/common/navigate.ts

diff --git a/src/common/navigate.ts b/src/common/navigate.ts
new file mode 100644
index 0000000000..6c9675a246
--- /dev/null
+++ b/src/common/navigate.ts
@@ -0,0 +1,14 @@
+import { fireEvent } from "./dom/fire_event.js";
+
+export const navigate = (
+  node: HTMLElement,
+  path: string,
+  replace: boolean = false
+) => {
+  if (replace) {
+    history.replaceState(null, "", path);
+  } else {
+    history.pushState(null, "", path);
+  }
+  fireEvent(node, "location-changed");
+};
diff --git a/src/mixins/navigate-mixin.js b/src/mixins/navigate-mixin.js
index 17a55994c9..c00a502b00 100644
--- a/src/mixins/navigate-mixin.js
+++ b/src/mixins/navigate-mixin.js
@@ -1,5 +1,5 @@
 import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import EventsMixin from "./events-mixin";
+import { navigate } from "../common/navigate";
 
 /*
  * @polymerMixin
@@ -7,14 +7,9 @@ import EventsMixin from "./events-mixin";
  */
 export default dedupingMixin(
   (superClass) =>
-    class extends EventsMixin(superClass) {
-      navigate(path, replace = false) {
-        if (replace) {
-          history.replaceState(null, null, path);
-        } else {
-          history.pushState(null, null, path);
-        }
-        this.fire("location-changed");
+    class extends superClass {
+      navigate(...args) {
+        navigate(this, ...args);
       }
     }
 );
diff --git a/src/panels/config/dashboard/ha-config-dashboard.js b/src/panels/config/dashboard/ha-config-dashboard.js
index 7b097e78d8..56da4e2fb8 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.js
+++ b/src/panels/config/dashboard/ha-config-dashboard.js
@@ -52,7 +52,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
           <template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
             <paper-card>
               <a href='/config/cloud' tabindex="-1">
-                <paper-item on-click="_navigate">
+                <paper-item>
                   <paper-item-body two-line="">
                     [[localize('ui.panel.config.cloud.caption')]]
                     <template is="dom-if" if="[[cloudStatus.logged_in]]">
diff --git a/src/panels/config/users/ha-config-users.js b/src/panels/config/users/ha-config-users.js
index ff8bb0c2ac..4e5791d53e 100644
--- a/src/panels/config/users/ha-config-users.js
+++ b/src/panels/config/users/ha-config-users.js
@@ -8,6 +8,7 @@ import NavigateMixin from "../../../mixins/navigate-mixin.js";
 
 import "./ha-user-picker.js";
 import "./ha-user-editor.js";
+import { fireEvent } from "../../../common/dom/fire_event.js";
 
 /*
  * @appliesMixin NavigateMixin
@@ -68,8 +69,8 @@ class HaConfigUsers extends NavigateMixin(PolymerElement) {
   _checkRoute(route) {
     if (!route || route.path.substr(0, 6) !== "/users") return;
 
-    // prevent list gettung under toolbar
-    this.fire("iron-resize");
+    // prevent list getting under toolbar
+    fireEvent(this, "iron-resize");
 
     this._debouncer = Debouncer.debounce(
       this._debouncer,

From 6cab3bbc8e27676149e6e35f1346e0383a05fab6 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sat, 27 Oct 2018 04:59:33 -0400
Subject: [PATCH 02/67] Thermostat fix (#1867)

* Thermostat fix

* Fix for unknown operation mode

* No title for you

* I suck at removing unnecessary things

* Fixing pointless Ternary operator
---
 .../lovelace/cards/hui-thermostat-card.ts     | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 748d48d8f2..bf066ed007 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -9,6 +9,7 @@ import { roundSliderStyle } from "../../../resources/jquery.roundslider";
 import { HomeAssistant } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
+import computeStateName from "../../../common/entity/compute_state_name.js";
 
 const thermostatConfig = {
   radius: 150,
@@ -66,18 +67,21 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     }
     const stateObj = this.hass.states[this.config.entity];
     const broadCard = this.clientWidth > 390;
+    const mode = modeIcons[stateObj.attributes.operation_mode]
+      ? stateObj.attributes.operation_mode
+      : "unknown-mode";
     return html`
       ${this.renderStyle()}
       <ha-card
         class="${classMap({
-          [stateObj.attributes.operation_mode]: true,
+          [mode]: true,
           large: broadCard,
           small: !broadCard,
         })}">
         <div id="root">
           <div id="thermostat"></div>
           <div id="tooltip">
-            <div class="title">Upstairs</div>
+            <div class="title">${computeStateName(stateObj)}</div>
             <div class="current-temperature">
               <span class="current-temperature-text">${
                 stateObj.attributes.current_temperature
@@ -94,7 +98,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
             )}</div>
             <div class="modes">
               ${stateObj.attributes.operation_list.map((modeItem) =>
-                this._renderIcon(modeItem, stateObj.attributes.operation_mode)
+                this._renderIcon(modeItem, mode)
               )}
             </div>
           </div>
@@ -105,10 +109,10 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
 
   protected shouldUpdate(changedProps) {
     if (changedProps.get("hass")) {
-      return changedProps.get("hass").states[this.config!.entity] !==
+      return (
+        changedProps.get("hass").states[this.config!.entity] !==
         this.hass!.states[this.config!.entity]
-        ? true
-        : false;
+      );
     }
     return changedProps;
   }
@@ -178,6 +182,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       .off {
         --mode-color: #8a8a8a;
       }
+      .unknown-mode {
+        --mode-color: #bac;
+      }
+      .no-title {
+        --title-margin-top: 33% !important;
+      }
       .large {
         --thermostat-padding-top: 25px;
         --thermostat-margin-bottom: 25px;
@@ -324,6 +334,9 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   private _renderIcon(mode, currentMode) {
+    if (!modeIcons[mode]) {
+      return html``;
+    }
     return html`<ha-icon
       class="${classMap({ "selected-icon": currentMode === mode })}"
       .mode="${mode}"

From 8b02371786a49c33ac2f3ef78c38ae009ce13d94 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Sat, 27 Oct 2018 12:00:40 +0200
Subject: [PATCH 03/67] Fix hass setting on stack (#1868)

* Fix hass setting on stack

* Don't set hass on pic elements if undefined

* Don't set hass on entity rows if undefined

* prefix config prop

* Pic elements set hass yoooo

* Remove interface

* Make stack config private

* Fix import

* Lint
---
 .../lovelace/cards/hui-entities-card.ts       | 26 ++++----
 .../cards/hui-horizontal-stack-card.ts        | 11 +---
 src/panels/lovelace/cards/hui-stack-card.ts   | 15 ++---
 .../lovelace/cards/hui-vertical-stack-card.ts | 62 ++-----------------
 4 files changed, 29 insertions(+), 85 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index e8f052c076..32cc353d7d 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -31,8 +31,8 @@ interface Config extends LovelaceConfig {
 class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   protected _hass?: HomeAssistant;
-  protected config?: Config;
-  protected configEntities?: ConfigEntity[];
+  protected _config?: Config;
+  protected _configEntities?: ConfigEntity[];
 
   set hass(hass) {
     this._hass = hass;
@@ -45,16 +45,16 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
   public getCardSize() {
-    if (!this.config) {
+    if (!this._config) {
       return 0;
     }
     // +1 for the header
-    return (this.config.title ? 1 : 0) + this.config.entities.length;
+    return (this._config.title ? 1 : 0) + this._config.entities.length;
   }
 
   public setConfig(config: Config) {
@@ -77,15 +77,15 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
       }
     }
 
-    this.config = config;
-    this.configEntities = entities;
+    this._config = config;
+    this._configEntities = entities;
   }
 
   protected render() {
-    if (!this.config || !this._hass) {
+    if (!this._config || !this._hass) {
       return html``;
     }
-    const { show_header_toggle, title } = this.config;
+    const { show_header_toggle, title } = this._config;
 
     return html`
       ${this.renderStyle()}
@@ -102,7 +102,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
                   : html`
                   <hui-entities-toggle
                     .hass="${this._hass}"
-                    .entities="${this.configEntities!.map(
+                    .entities="${this._configEntities!.map(
                       (conf) => conf.entity
                     )}"
                   >
@@ -111,7 +111,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
             </div>`
         }
         <div id="states">
-          ${this.configEntities!.map((entityConf) =>
+          ${this._configEntities!.map((entityConf) =>
             this.renderEntity(entityConf)
           )}
         </div>
@@ -156,7 +156,9 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   private renderEntity(entityConf) {
     const element = createRowElement(entityConf);
-    element.hass = this._hass;
+    if (this._hass) {
+      element.hass = this._hass;
+    }
     if (
       entityConf.entity &&
       !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index bd93a6c9e8..ba9d1dff0f 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -3,16 +3,9 @@ import { TemplateResult } from "lit-html";
 
 import computeCardSize from "../common/compute-card-size.js";
 
-import { LovelaceCard, LovelaceConfig } from "../types";
-import HuiStackCard from "./hui-stack-card";
-
-interface Config extends LovelaceConfig {
-  cards: LovelaceConfig[];
-}
-
-class HuiHorizontalStackCard extends HuiStackCard implements LovelaceCard {
-  protected config?: Config;
+import { HuiStackCard } from "./hui-stack-card";
 
+class HuiHorizontalStackCard extends HuiStackCard {
   public getCardSize(): number {
     let totalSize = 0;
 
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 0e8a0472b7..7c2e69651a 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -10,15 +10,14 @@ interface Config extends LovelaceConfig {
   cards: LovelaceConfig[];
 }
 
-export default abstract class HuiStackCard extends LitElement
-  implements LovelaceCard {
-  protected config?: Config;
+export abstract class HuiStackCard extends LitElement implements LovelaceCard {
   protected _cards?: LovelaceCard[];
+  private _config?: Config;
   private _hass?: HomeAssistant;
 
   static get properties() {
     return {
-      config: {},
+      _config: {},
     };
   }
 
@@ -40,16 +39,18 @@ export default abstract class HuiStackCard extends LitElement
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error("Card config incorrect");
     }
-    this.config = config;
+    this._config = config;
     this._cards = config.cards.map((card) => {
       const element = createCardElement(card) as LovelaceCard;
-      element.hass = this._hass;
+      if (this._hass) {
+        element.hass = this._hass;
+      }
       return element;
     });
   }
 
   protected render(): TemplateResult {
-    if (!this.config) {
+    if (!this._config) {
       return html``;
     }
 
diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
index 502655c827..863641cf1d 100644
--- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
@@ -1,38 +1,11 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html } from "@polymer/lit-element";
 
 import computeCardSize from "../common/compute-card-size.js";
-import createCardElement from "../common/create-card-element.js";
 
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { HomeAssistant } from "../../../types";
-
-interface Config extends LovelaceConfig {
-  cards: LovelaceConfig[];
-}
-
-class HuiVerticalStackCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
-  private _cards?: LovelaceCard[];
-  private _hass?: HomeAssistant;
-
-  static get properties() {
-    return {
-      config: {},
-    };
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._cards) {
-      return;
-    }
-
-    for (const element of this._cards) {
-      element.hass = this._hass;
-    }
-  }
+import { HuiStackCard } from "./hui-stack-card";
+import { TemplateResult } from "lit-html";
 
+class HuiVerticalStackCard extends HuiStackCard {
   public getCardSize() {
     let totalSize = 0;
 
@@ -47,32 +20,7 @@ class HuiVerticalStackCard extends LitElement implements LovelaceCard {
     return totalSize;
   }
 
-  public setConfig(config: Config) {
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      throw new Error("Card config incorrect");
-    }
-    this.config = config;
-    this._cards = config.cards.map((card) => {
-      const element = createCardElement(card) as LovelaceCard;
-      element.hass = this._hass;
-      return element;
-    });
-  }
-
-  protected render() {
-    if (!this.config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <div id="root">
-        ${this._cards!}
-      </div>
-    `;
-  }
-
-  private renderStyle() {
+  protected renderStyle(): TemplateResult {
     return html`
       <style>
         #root {

From 2758e86fab92bf97fda22cc1f042691e5beb1dd4 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 26 Oct 2018 20:24:12 -0500
Subject: [PATCH 04/67] Convert hui-icon-element to TypeScript/LitElement and
 extract ElementClick mixin functions

---
 src/common/dom/handle-click.ts                | 44 ++++++++++++
 src/common/string/compute-tooltip.ts          | 38 +++++++++++
 .../lovelace/common/create-hui-element.js     |  2 +-
 .../lovelace/elements/hui-icon-element.js     | 53 ---------------
 .../lovelace/elements/hui-icon-element.ts     | 67 ++++++++++++++++++
 src/panels/lovelace/elements/types.ts         |  6 ++
 .../lovelace/mixins/element-click-mixin.js    | 68 ++-----------------
 7 files changed, 163 insertions(+), 115 deletions(-)
 create mode 100644 src/common/dom/handle-click.ts
 create mode 100644 src/common/string/compute-tooltip.ts
 delete mode 100644 src/panels/lovelace/elements/hui-icon-element.js
 create mode 100644 src/panels/lovelace/elements/hui-icon-element.ts

diff --git a/src/common/dom/handle-click.ts b/src/common/dom/handle-click.ts
new file mode 100644
index 0000000000..284644070a
--- /dev/null
+++ b/src/common/dom/handle-click.ts
@@ -0,0 +1,44 @@
+import { HomeAssistant } from "../../types";
+import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
+import { fireEvent } from "../dom/fire_event.js";
+import toggleEntity from "../../../src/panels/lovelace/common/entity/toggle-entity";
+
+export const handleClick = (
+  node: HTMLElement,
+  hass: HomeAssistant,
+  config: LovelaceElementConfig,
+  hold: boolean
+): void => {
+  let action = config.tap_action || "more-info";
+
+  if (hold && config.hold_action) {
+    action = config.hold_action;
+  }
+
+  if (action === "none") {
+    return;
+  }
+
+  switch (action) {
+    case "more-info":
+      fireEvent(node, "hass-more-info", { entityId: config.entity });
+      break;
+    case "navigate":
+      // this.navigate(config.navigation_path); // TODO wait for balloob's navigate function
+      break;
+    case "toggle":
+      toggleEntity(hass, config.entity);
+      break;
+    case "call-service": {
+      if (config.service) {
+        const [domain, service] = config.service.split(".", 2);
+        const serviceData = Object.assign(
+          {},
+          { entity_id: config.entity },
+          config.service_data
+        );
+        hass.callService(domain, service, serviceData);
+      }
+    }
+  }
+};
diff --git a/src/common/string/compute-tooltip.ts b/src/common/string/compute-tooltip.ts
new file mode 100644
index 0000000000..4346e97234
--- /dev/null
+++ b/src/common/string/compute-tooltip.ts
@@ -0,0 +1,38 @@
+import computeStateName from "../../common/entity/compute_state_name";
+import { HomeAssistant } from "../../types";
+import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
+
+export const computeTooltip = (
+  hass: HomeAssistant,
+  config: LovelaceElementConfig
+): string => {
+  if (config.title) {
+    return config.title;
+  }
+
+  let stateName = "";
+  let tooltip: string;
+
+  if (config.entity) {
+    stateName =
+      config.entity in hass.states
+        ? computeStateName(hass.states[config.entity])
+        : config.entity;
+  }
+
+  switch (config.tap_action) {
+    case "navigate":
+      tooltip = `Navigate to ${config.navigation_path}`;
+      break;
+    case "toggle":
+      tooltip = `Toggle ${stateName}`;
+      break;
+    case "call-service":
+      tooltip = `Call service ${config.service}`;
+      break;
+    default:
+      tooltip = `Show more-info: ${stateName}`;
+  }
+
+  return tooltip;
+};
diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index e74985ca13..8394c12115 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,4 +1,4 @@
-import "../elements/hui-icon-element.js";
+import "../elements/hui-icon-element";
 import "../elements/hui-image-element.js";
 import "../elements/hui-service-button-element.js";
 import "../elements/hui-state-badge-element.js";
diff --git a/src/panels/lovelace/elements/hui-icon-element.js b/src/panels/lovelace/elements/hui-icon-element.js
deleted file mode 100644
index 5eb2bb2631..0000000000
--- a/src/panels/lovelace/elements/hui-icon-element.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-icon.js";
-
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- */
-class HuiIconElement extends ElementClickMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-      <ha-icon
-        icon="[[_config.icon]]"
-        title$="[[computeTooltip(hass, _config)]]"
-      ></ha-icon>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    longPressBind(this);
-    this.addEventListener("ha-click", () =>
-      this.handleClick(this.hass, this._config, false)
-    );
-    this.addEventListener("ha-hold", () =>
-      this.handleClick(this.hass, this._config, true)
-    );
-  }
-
-  setConfig(config) {
-    if (!config || !config.icon) {
-      throw Error("Error in element configuration");
-    }
-
-    this._config = config;
-  }
-}
-customElements.define("hui-icon-element", HuiIconElement);
diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
new file mode 100644
index 0000000000..8fc4236c01
--- /dev/null
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -0,0 +1,67 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/ha-icon.js";
+
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import { handleClick } from "../../../common/dom/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+
+interface Config extends LovelaceElementConfig {
+  icon: string;
+}
+
+export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config) {
+    if (!config.icon) {
+      throw Error("Invalid Configuration: 'icon' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render() {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon
+        .icon="${this._config.icon}"
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${(ev) => handleClick(ev, this.hass!, this._config!, false)}"
+        @ha-hold="${(ev) => handleClick(ev, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      ></ha-icon>
+    `;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-icon-element": HuiIconElement;
+  }
+}
+
+customElements.define("hui-icon-element", HuiIconElement);
diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts
index 7b8b2c59cd..71407adf19 100644
--- a/src/panels/lovelace/elements/types.ts
+++ b/src/panels/lovelace/elements/types.ts
@@ -4,6 +4,12 @@ export interface LovelaceElementConfig {
   type: string;
   entity?: string;
   style: object;
+  tap_action?: string;
+  navigation_path?: string;
+  service?: string;
+  title?: string;
+  hold_action?: string;
+  service_data?: object;
 }
 
 export interface LovelaceElement extends HTMLElement {
diff --git a/src/panels/lovelace/mixins/element-click-mixin.js b/src/panels/lovelace/mixins/element-click-mixin.js
index 02a7cdb9fd..0832139f0f 100644
--- a/src/panels/lovelace/mixins/element-click-mixin.js
+++ b/src/panels/lovelace/mixins/element-click-mixin.js
@@ -1,70 +1,16 @@
 import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import toggleEntity from "../common/entity/toggle-entity.js";
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name";
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import { handleClick } from "../../../common/dom/handle-click";
 
-/*
- * @polymerMixin
- * @appliesMixin EventsMixin
- * @appliesMixin NavigateMixin
- */
 export default dedupingMixin(
   (superClass) =>
-    class extends NavigateMixin(EventsMixin(superClass)) {
-      handleClick(hass, config, hold) {
-        let action = config.tap_action || "more-info";
-        if (hold) {
-          action = config.hold_action;
-        }
-        if (action === "none") return;
-
-        switch (action) {
-          case "more-info":
-            this.fire("hass-more-info", { entityId: config.entity });
-            break;
-          case "navigate":
-            this.navigate(config.navigation_path);
-            break;
-          case "toggle":
-            toggleEntity(hass, config.entity);
-            break;
-          case "call-service": {
-            const [domain, service] = config.service.split(".", 2);
-            const serviceData = Object.assign(
-              {},
-              { entity_id: config.entity },
-              config.service_data
-            );
-            hass.callService(domain, service, serviceData);
-          }
-        }
+    class extends superClass {
+      handleClick(...args) {
+        handleClick(this, ...args);
       }
 
-      computeTooltip(hass, config) {
-        if (config.title) return config.title;
-
-        const stateName =
-          config.entity in hass.states
-            ? computeStateName(hass.states[config.entity])
-            : config.entity;
-
-        let tooltip;
-        switch (config.tap_action) {
-          case "navigate":
-            tooltip = `Navigate to ${config.navigation_path}`;
-            break;
-          case "toggle":
-            tooltip = `Toggle ${stateName}`;
-            break;
-          case "call-service":
-            tooltip = `Call service ${config.service}`;
-            break;
-          default:
-            tooltip = `Show more-info: ${stateName}`;
-        }
-
-        return tooltip;
+      computeTooltip(...args) {
+        computeTooltip(...args);
       }
     }
 );

From 5a7841e6bf7eed35e00a5593740a45b6eaf75ebd Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 26 Oct 2018 20:37:32 -0500
Subject: [PATCH 05/67] Pass correct node to handleClick

---
 src/panels/lovelace/elements/hui-icon-element.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
index 8fc4236c01..4cb714bb5c 100644
--- a/src/panels/lovelace/elements/hui-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -40,8 +40,8 @@ export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
       <ha-icon
         .icon="${this._config.icon}"
         .title="${computeTooltip(this.hass!, this._config)}"
-        @ha-click="${(ev) => handleClick(ev, this.hass!, this._config!, false)}"
-        @ha-hold="${(ev) => handleClick(ev, this.hass!, this._config!, true)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
         .longPress="${longPress()}"
       ></ha-icon>
     `;

From 8afc3812b7fcf677d189a7df5a5f7f16b9d68960 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sat, 27 Oct 2018 16:40:43 -0500
Subject: [PATCH 06/67] Remove element-click refactor

Was unable to get computeTooltip to work for non-converted elements. There are not many elements that use this so will just remove this mixin once conversion of all to TS has been completed.
---
 .../lovelace/mixins/element-click-mixin.js    | 68 +++++++++++++++++--
 1 file changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/mixins/element-click-mixin.js b/src/panels/lovelace/mixins/element-click-mixin.js
index 0832139f0f..02a7cdb9fd 100644
--- a/src/panels/lovelace/mixins/element-click-mixin.js
+++ b/src/panels/lovelace/mixins/element-click-mixin.js
@@ -1,16 +1,70 @@
 import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import { computeTooltip } from "../../../common/string/compute-tooltip";
-import { handleClick } from "../../../common/dom/handle-click";
+import toggleEntity from "../common/entity/toggle-entity.js";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import EventsMixin from "../../../mixins/events-mixin.js";
+import computeStateName from "../../../common/entity/compute_state_name";
 
+/*
+ * @polymerMixin
+ * @appliesMixin EventsMixin
+ * @appliesMixin NavigateMixin
+ */
 export default dedupingMixin(
   (superClass) =>
-    class extends superClass {
-      handleClick(...args) {
-        handleClick(this, ...args);
+    class extends NavigateMixin(EventsMixin(superClass)) {
+      handleClick(hass, config, hold) {
+        let action = config.tap_action || "more-info";
+        if (hold) {
+          action = config.hold_action;
+        }
+        if (action === "none") return;
+
+        switch (action) {
+          case "more-info":
+            this.fire("hass-more-info", { entityId: config.entity });
+            break;
+          case "navigate":
+            this.navigate(config.navigation_path);
+            break;
+          case "toggle":
+            toggleEntity(hass, config.entity);
+            break;
+          case "call-service": {
+            const [domain, service] = config.service.split(".", 2);
+            const serviceData = Object.assign(
+              {},
+              { entity_id: config.entity },
+              config.service_data
+            );
+            hass.callService(domain, service, serviceData);
+          }
+        }
       }
 
-      computeTooltip(...args) {
-        computeTooltip(...args);
+      computeTooltip(hass, config) {
+        if (config.title) return config.title;
+
+        const stateName =
+          config.entity in hass.states
+            ? computeStateName(hass.states[config.entity])
+            : config.entity;
+
+        let tooltip;
+        switch (config.tap_action) {
+          case "navigate":
+            tooltip = `Navigate to ${config.navigation_path}`;
+            break;
+          case "toggle":
+            tooltip = `Toggle ${stateName}`;
+            break;
+          case "call-service":
+            tooltip = `Call service ${config.service}`;
+            break;
+          default:
+            tooltip = `Show more-info: ${stateName}`;
+        }
+
+        return tooltip;
       }
     }
 );

From bf0eb798d9b0e4d6477d901329a9cfe9b63b4370 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sat, 27 Oct 2018 16:51:44 -0500
Subject: [PATCH 07/67] Implemented navigate function

Fix linting error
---
 src/common/dom/handle-click.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/common/dom/handle-click.ts b/src/common/dom/handle-click.ts
index 284644070a..99bd776524 100644
--- a/src/common/dom/handle-click.ts
+++ b/src/common/dom/handle-click.ts
@@ -1,6 +1,7 @@
 import { HomeAssistant } from "../../types";
 import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
 import { fireEvent } from "../dom/fire_event.js";
+import { navigate } from "../../common/navigate";
 import toggleEntity from "../../../src/panels/lovelace/common/entity/toggle-entity";
 
 export const handleClick = (
@@ -24,7 +25,7 @@ export const handleClick = (
       fireEvent(node, "hass-more-info", { entityId: config.entity });
       break;
     case "navigate":
-      // this.navigate(config.navigation_path); // TODO wait for balloob's navigate function
+      navigate(node, config.navigation_path ? config.navigation_path : "");
       break;
     case "toggle":
       toggleEntity(hass, config.entity);
@@ -32,11 +33,10 @@ export const handleClick = (
     case "call-service": {
       if (config.service) {
         const [domain, service] = config.service.split(".", 2);
-        const serviceData = Object.assign(
-          {},
-          { entity_id: config.entity },
-          config.service_data
-        );
+        const serviceData = {
+          entity_id: config.entity,
+          ...config.service_data,
+        };
         hass.callService(domain, service, serviceData);
       }
     }

From 5617416932de3904cd9fb5ef4daabd1f0faf9457 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sat, 27 Oct 2018 16:54:27 -0500
Subject: [PATCH 08/67] cleaned up elementconfig type order

---
 src/panels/lovelace/elements/types.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts
index 71407adf19..105ac3d2d9 100644
--- a/src/panels/lovelace/elements/types.ts
+++ b/src/panels/lovelace/elements/types.ts
@@ -2,14 +2,14 @@ import { HomeAssistant } from "../../../types";
 
 export interface LovelaceElementConfig {
   type: string;
-  entity?: string;
   style: object;
-  tap_action?: string;
+  entity?: string;
+  hold_action?: string;
   navigation_path?: string;
   service?: string;
-  title?: string;
-  hold_action?: string;
   service_data?: object;
+  tap_action?: string;
+  title?: string;
 }
 
 export interface LovelaceElement extends HTMLElement {

From d0acef3ecbb87165ea84878846da220ad94ea6ee Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sat, 27 Oct 2018 18:01:07 -0500
Subject: [PATCH 09/67] Add return types

---
 src/panels/lovelace/elements/hui-icon-element.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
index 4cb714bb5c..00c291a0c2 100644
--- a/src/panels/lovelace/elements/hui-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -8,6 +8,7 @@ import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types.js";
 import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceElementConfig {
   icon: string;
@@ -22,7 +23,7 @@ export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
     return { hass: {}, _config: {} };
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.icon) {
       throw Error("Invalid Configuration: 'icon' required");
     }
@@ -30,7 +31,7 @@ export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
     this._config = config;
   }
 
-  protected render() {
+  protected render(): TemplateResult {
     if (!this._config) {
       return html``;
     }
@@ -47,7 +48,7 @@ export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         :host {

From bb483c9d72e92857cbd404c07ca2a903c59869df Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sat, 27 Oct 2018 21:00:06 -0500
Subject: [PATCH 10/67] Make hass optional within EntityRow as it may not be
 defined

---
 src/panels/lovelace/entity-rows/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index 6d145f2698..f343d9c4e5 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/src/panels/lovelace/entity-rows/types.ts
@@ -23,6 +23,6 @@ export type EntityRowConfig =
   | WeblinkConfig;
 
 export interface EntityRow {
-  hass: HomeAssistant;
+  hass?: HomeAssistant;
   setConfig(config: EntityRowConfig);
 }

From f3ef4cef74fad37924d3f004743abe11b32fb07d Mon Sep 17 00:00:00 2001
From: eyager1 <44526531+eyager1@users.noreply.github.com>
Date: Sun, 28 Oct 2018 03:57:54 -0400
Subject: [PATCH 11/67] Change icon to set operation_mode to "off" (#1883)

The choice of the "fan-off" icon to set the climate operation_mode to off should be changed . Many HVAC thermostats have a manual fan control.   The use of the fan icon in this card would imply that it would change or toggle the fan_mode of a climate component, not the operation_mode.  If setting the fan_mode of a climate component via this card were to be implemented in the future the use of "fan" and "fan-off" icons would be the most logical choices for icons.   I propose changing the icon that would set the operation_mode to off to generic power icon such as "power", or "power-off" to avoid confusion and to reserve the "fan" and "fan-off" icons for future use to change the the state of fan_mode.
---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index bf066ed007..a09d73127d 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -26,7 +26,7 @@ const modeIcons = {
   auto: "hass:autorenew",
   heat: "hass:fire",
   cool: "hass:snowflake",
-  off: "hass:fan-off",
+  off: "hass:power",
 };
 
 interface Config extends LovelaceConfig {

From d31195fc875af3829c74f796a4cc688dcf9d2c4e Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 03:00:37 -0500
Subject: [PATCH 12/67] Add to HTML tag name map (#1900)

---
 src/panels/lovelace/cards/hui-picture-elements-card.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index d5d662b8b6..0a3c7b9e12 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -14,7 +14,7 @@ interface Config extends LovelaceConfig {
 }
 
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
-  protected _config?: Config;
+  private _config?: Config;
   private _hass?: HomeAssistant;
 
   static get properties() {
@@ -102,4 +102,10 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
   }
 }
 
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-picture-elements-card": HuiPictureElementsCard;
+  }
+}
+
 customElements.define("hui-picture-elements-card", HuiPictureElementsCard);

From ecfdb16957a8e9f4db20507be8f7b678ce23fd3a Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 03:09:43 -0500
Subject: [PATCH 13/67] Convert hui-state-label-element to
 TypeScript/LitElement (#1893)

---
 .../lovelace/common/create-hui-element.js     |  2 +-
 .../elements/hui-state-label-element.js       | 74 ------------------
 .../elements/hui-state-label-element.ts       | 78 +++++++++++++++++++
 3 files changed, 79 insertions(+), 75 deletions(-)
 delete mode 100644 src/panels/lovelace/elements/hui-state-label-element.js
 create mode 100644 src/panels/lovelace/elements/hui-state-label-element.ts

diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index 8394c12115..3ee45b3466 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -3,7 +3,7 @@ import "../elements/hui-image-element.js";
 import "../elements/hui-service-button-element.js";
 import "../elements/hui-state-badge-element.js";
 import "../elements/hui-state-icon-element.js";
-import "../elements/hui-state-label-element.js";
+import "../elements/hui-state-label-element";
 
 import { fireEvent } from "../../../common/dom/fire_event.js";
 import createErrorCardConfig from "./create-error-card-config.js";
diff --git a/src/panels/lovelace/elements/hui-state-label-element.js b/src/panels/lovelace/elements/hui-state-label-element.js
deleted file mode 100644
index e22ab9ac9c..0000000000
--- a/src/panels/lovelace/elements/hui-state-label-element.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-
-import "../../../components/entity/ha-state-label-badge.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- * @appliesMixin LocalizeMixin
- */
-class HuiStateLabelElement extends LocalizeMixin(
-  ElementClickMixin(PolymerElement)
-) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-        .state-label {
-          padding: 8px;
-          white-space: nowrap;
-        }
-      </style>
-      <div class="state-label" title$="[[computeTooltip(hass, _config)]]">
-        [[_config.prefix]][[_computeStateDisplay(_stateObj)]][[_config.suffix]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      _config: Object,
-      _stateObj: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    longPressBind(this);
-    this.addEventListener("ha-click", () =>
-      this.handleClick(this.hass, this._config, false)
-    );
-    this.addEventListener("ha-hold", () =>
-      this.handleClick(this.hass, this._config, true)
-    );
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw Error("Error in element configuration");
-    }
-
-    this._config = config;
-  }
-
-  _hassChanged(hass) {
-    this._stateObj = hass.states[this._config.entity];
-  }
-
-  _computeStateDisplay(stateObj) {
-    return stateObj ? computeStateDisplay(this.localize, stateObj) : "-";
-  }
-}
-customElements.define("hui-state-label-element", HuiStateLabelElement);
diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
new file mode 100644
index 0000000000..50bf3d4e89
--- /dev/null
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -0,0 +1,78 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge.js";
+
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import computeStateDisplay from "../../../common/entity/compute_state_display.js";
+import { handleClick } from "../../../common/dom/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  prefix?: string;
+  suffix?: string;
+}
+
+class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <div
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      >
+      ${this._config.prefix}${
+      state ? computeStateDisplay(this.localize, state) : "-"
+    }${this._config.suffix}
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+        div {
+          padding: 8px;
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-label-element": HuiStateLabelElement;
+  }
+}
+
+customElements.define("hui-state-label-element", HuiStateLabelElement);

From 7cd5f36c7a4f63c644861d941dcc411534013744 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 07:57:52 -0500
Subject: [PATCH 14/67]  Convert hui-service-button-element to
 TypeScript/LitElement (#1888)

* Convert hui-service-button-element to TypeScript/LitElement

Will need to rebase once hui-icon-element PR is merged

* Added return types

* Convert ha-call-service-button attributes to properties

* Re-order imports
---
 .../lovelace/common/create-hui-element.js     |  2 +-
 .../elements/hui-service-button-element.js    | 46 ------------
 .../elements/hui-service-button-element.ts    | 74 +++++++++++++++++++
 3 files changed, 75 insertions(+), 47 deletions(-)
 delete mode 100644 src/panels/lovelace/elements/hui-service-button-element.js
 create mode 100644 src/panels/lovelace/elements/hui-service-button-element.ts

diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index 3ee45b3466..502a4aa17f 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,6 +1,6 @@
 import "../elements/hui-icon-element";
 import "../elements/hui-image-element.js";
-import "../elements/hui-service-button-element.js";
+import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element.js";
 import "../elements/hui-state-icon-element.js";
 import "../elements/hui-state-label-element";
diff --git a/src/panels/lovelace/elements/hui-service-button-element.js b/src/panels/lovelace/elements/hui-service-button-element.js
deleted file mode 100644
index c58ad4ebe0..0000000000
--- a/src/panels/lovelace/elements/hui-service-button-element.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/buttons/ha-call-service-button.js";
-
-class HuiServiceButtonElement extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-call-service-button {
-          color: var(--primary-color);
-          white-space: nowrap;
-        }
-      </style>
-      <ha-call-service-button
-        hass="[[hass]]"
-        domain="[[_domain]]"
-        service="[[_service]]"
-        service-data="[[_config.service_data]]"
-      >[[_config.title]]</ha-call-service-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _domain: String,
-      _service: String,
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.service) {
-      throw Error("Error in element configuration");
-    }
-
-    const [domain, service] = config.service.split(".", 2);
-    this.setProperties({
-      _config: config,
-      _domain: domain,
-      _service: service,
-    });
-  }
-}
-customElements.define("hui-service-button-element", HuiServiceButtonElement);
diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts
new file mode 100644
index 0000000000..c87e3099de
--- /dev/null
+++ b/src/panels/lovelace/elements/hui-service-button-element.ts
@@ -0,0 +1,74 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/buttons/ha-call-service-button.js";
+
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+
+export class HuiServiceButtonElement extends LitElement
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+  private _domain?: string;
+  private _service?: string;
+
+  static get properties() {
+    return { _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config || !config.service) {
+      throw Error("Invalid Configuration: 'service' required");
+    }
+
+    [this._domain, this._service] = config.service.split(".", 2);
+
+    if (!this._domain) {
+      throw Error("Invalid Configuration: 'service' does not have a domain");
+    }
+
+    if (!this._service) {
+      throw Error(
+        "Invalid Configuration: 'service' does not have a service name"
+      );
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-call-service-button
+        .hass="${this.hass}"
+        .domain="${this._domain}"
+        .service="${this._service}"
+        .service-data="${this._config.service_data}"
+      >${this._config.title}</ha-call-service-button>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-call-service-button {
+          color: var(--primary-color);
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-service-button-element": HuiServiceButtonElement;
+  }
+}
+
+customElements.define("hui-service-button-element", HuiServiceButtonElement);

From a4fa0ae64b88d7a3bbdea8bfa5e160cbbcecfa0e Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Sun, 28 Oct 2018 20:07:05 +0100
Subject: [PATCH 15/67] Handle no operation mode (#1901)

* Handle no operation mode

* Upgrade HAWS so we can use correct types

* Lint
---
 package.json                                  |  2 +-
 .../lovelace/cards/hui-thermostat-card.ts     | 32 ++++++++++++-------
 src/types.ts                                  | 26 +++++++++++++++
 yarn.lock                                     |  8 ++---
 4 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 9e1794b488..a6af340147 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "es6-object-assign": "^1.1.0",
     "eslint-import-resolver-webpack": "^0.10.1",
     "fecha": "^2.3.3",
-    "home-assistant-js-websocket": "^3.1.4",
+    "home-assistant-js-websocket": "^3.1.5",
     "intl-messageformat": "^2.2.0",
     "jquery": "^3.3.1",
     "js-yaml": "^3.12.0",
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index a09d73127d..8d590bcf9d 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -6,7 +6,7 @@ import "../../../components/ha-card.js";
 import "../../../components/ha-icon.js";
 import { roundSliderStyle } from "../../../resources/jquery.roundslider";
 
-import { HomeAssistant } from "../../../types.js";
+import { HomeAssistant, ClimateEntity } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
@@ -65,10 +65,10 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     if (!this.hass || !this.config) {
       return html``;
     }
-    const stateObj = this.hass.states[this.config.entity];
+    const stateObj = this.hass.states[this.config.entity] as ClimateEntity;
     const broadCard = this.clientWidth > 390;
-    const mode = modeIcons[stateObj.attributes.operation_mode]
-      ? stateObj.attributes.operation_mode
+    const mode = modeIcons[stateObj.attributes.operation_mode || ""]
+      ? stateObj.attributes.operation_mode!
       : "unknown-mode";
     return html`
       ${this.renderStyle()}
@@ -97,7 +97,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
               `state.climate.${stateObj.state}`
             )}</div>
             <div class="modes">
-              ${stateObj.attributes.operation_list.map((modeItem) =>
+              ${(stateObj.attributes.operation_list || []).map((modeItem) =>
                 this._renderIcon(modeItem, mode)
               )}
             </div>
@@ -118,7 +118,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected firstUpdated() {
-    const stateObj = this.hass!.states[this.config!.entity];
+    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
 
     const _sliderType =
       stateObj.attributes.target_temp_low &&
@@ -138,16 +138,24 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected updated() {
-    const attrs = this.hass!.states[this.config!.entity].attributes;
+    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
 
     let sliderValue;
     let uiValue;
 
-    if (attrs.target_temp_low && attrs.target_temp_high) {
-      sliderValue = `${attrs.target_temp_low}, ${attrs.target_temp_high}`;
-      uiValue = formatTemp([attrs.target_temp_low, attrs.target_temp_high]);
+    if (
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+    ) {
+      sliderValue = `${stateObj.attributes.target_temp_low}, ${
+        stateObj.attributes.target_temp_high
+      }`;
+      uiValue = formatTemp([
+        stateObj.attributes.target_temp_low,
+        stateObj.attributes.target_temp_high,
+      ]);
     } else {
-      sliderValue = uiValue = attrs.temperature;
+      sliderValue = uiValue = stateObj.attributes.temperature;
     }
 
     jQuery("#thermostat", this.shadowRoot).roundSlider({
@@ -307,7 +315,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   private _setTemperature(e) {
-    const stateObj = this.hass!.states[this.config!.entity];
+    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
     if (
       stateObj.attributes.target_temp_low &&
       stateObj.attributes.target_temp_high
diff --git a/src/types.ts b/src/types.ts
index 632f07d82d..359425876a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,6 +4,8 @@ import {
   Auth,
   Connection,
   MessageBase,
+  HassEntityBase,
+  HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
 
 export interface Credential {
@@ -85,3 +87,27 @@ export interface HomeAssistant {
   sendWS: (msg: MessageBase) => Promise<void>;
   callWS: <T>(msg: MessageBase) => Promise<T>;
 }
+
+export type ClimateEntity = HassEntityBase & {
+  attributes: HassEntityAttributeBase & {
+    current_temperature: number;
+    min_temp: number;
+    max_temp: number;
+    temperature: number;
+    target_temp_step?: number;
+    target_temp_high?: number;
+    target_temp_low?: number;
+    target_humidity?: number;
+    target_humidity_low?: number;
+    target_humidity_high?: number;
+    fan_mode?: string;
+    fan_list?: string[];
+    operation_mode?: string;
+    operation_list?: string[];
+    hold_mode?: string;
+    swing_mode?: string;
+    swing_list?: string[];
+    away_mode?: "on" | "off";
+    aux_heat?: "on" | "off";
+  };
+};
diff --git a/yarn.lock b/yarn.lock
index 6b32265093..acec776d59 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8114,10 +8114,10 @@ hoek@4.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
   integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
 
-home-assistant-js-websocket@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-3.1.4.tgz#4ff338a51d272650db96cd5c67aa05878ef234a4"
-  integrity sha512-lkAglJ04ja98awHPqI09On8v1wHr0/QmjLYlPGC6LWF7HBMAtYMasQ2mPEb5nLLZrD0DroxNVQK2owlRy3+NOQ==
+home-assistant-js-websocket@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-3.1.5.tgz#56358660bbccb5f24e16f9197bbad12739f9b756"
+  integrity sha512-BlANSkA9ob6wlUJCYS26n1tfMla+aJzB2rhhXSFi0iiTtWWfuOlcSOw8pxjeWhh1I9oAcbQ4qxhB7Np1EXG+Og==
 
 home-or-tmp@^2.0.0:
   version "2.0.0"

From 4959b861bd1d080e8e435113181a40c2dfac0b3d Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 14:25:12 -0500
Subject: [PATCH 16/67]  Convert hui-image-element to TypeScript/LitElement
 (#1890)

* Convert hui-image-element to TypeScript/LitElement

WIP
Some of the state portions passed down to ha-image are not updating the view.

* Fixed setting of properties

* Add tagnamemap interface

* Address review comments
---
 .../lovelace/common/create-hui-element.js     |  2 +-
 .../lovelace/elements/hui-image-element.js    | 66 -------------
 .../lovelace/elements/hui-image-element.ts    | 94 +++++++++++++++++++
 3 files changed, 95 insertions(+), 67 deletions(-)
 delete mode 100644 src/panels/lovelace/elements/hui-image-element.js
 create mode 100644 src/panels/lovelace/elements/hui-image-element.ts

diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index 502a4aa17f..01bdded3ea 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,5 +1,5 @@
 import "../elements/hui-icon-element";
-import "../elements/hui-image-element.js";
+import "../elements/hui-image-element";
 import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element.js";
 import "../elements/hui-state-icon-element.js";
diff --git a/src/panels/lovelace/elements/hui-image-element.js b/src/panels/lovelace/elements/hui-image-element.js
deleted file mode 100644
index 67b67ba60f..0000000000
--- a/src/panels/lovelace/elements/hui-image-element.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-image.js";
-
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- */
-class HuiImageElement extends ElementClickMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host(.clickable) {
-          cursor: pointer;
-          overflow: hidden;
-          -webkit-touch-callout: none !important;
-        }
-        hui-image {
-          -webkit-user-select: none !important;
-        }
-      </style>
-      <hui-image
-        hass="[[hass]]"
-        entity="[[_config.entity]]"
-        image="[[_config.image]]"
-        state-image="[[_config.state_image]]"
-        camera-image="[[_config.camera_image]]"
-        filter="[[_config.filter]]"
-        state-filter="[[_config.state_filter]]"
-        title$="[[computeTooltip(hass, _config)]]"
-        aspect-ratio="[[_config.aspect_ratio]]"
-      ></hui-image>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    longPressBind(this);
-    this.addEventListener("ha-click", () =>
-      this.handleClick(this.hass, this._config, false)
-    );
-    this.addEventListener("ha-hold", () =>
-      this.handleClick(this.hass, this._config, true)
-    );
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw Error("Error in element configuration");
-    }
-
-    this.classList.toggle("clickable", config.tap_action !== "none");
-    this._config = config;
-  }
-}
-customElements.define("hui-image-element", HuiImageElement);
diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts
new file mode 100644
index 0000000000..1b79f5a14c
--- /dev/null
+++ b/src/panels/lovelace/elements/hui-image-element.ts
@@ -0,0 +1,94 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../components/hui-image.js";
+
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import { handleClick } from "../../../common/dom/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  image?: string;
+  state_image?: string;
+  camera_image?: string;
+  filter?: string;
+  state_filter?: string;
+  aspect_ratio?: string;
+}
+
+export class HuiImageElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config) {
+      throw Error("Error in element configuration");
+    }
+
+    this.classList.toggle("clickable", config.tap_action !== "none");
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-image
+        .hass=${this.hass}
+        .entity="${this._config.entity}"
+        .image="${this._config.image}"
+        .stateImage=${this._config.state_image}
+        .cameraImage=${this._config.camera_image}
+        .filter=${this._config.filter}
+        .stateFilter=${this._config.state_filter}
+        .title="${computeTooltip(this.hass!, this._config)}"
+        .aspectRatio="${this._config.aspect_ratio}"
+        @ha-click="${this._handleClick}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+      ></hui-image>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host(.clickable) {
+          cursor: pointer;
+          overflow: hidden;
+          -webkit-touch-callout: none !important;
+        }
+        hui-image {
+          -webkit-user-select: none !important;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-image-element": HuiImageElement;
+  }
+}
+
+customElements.define("hui-image-element", HuiImageElement);

From bdf5d0f5c6915793ddb43e44bcc9068a957af4a8 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 14:35:48 -0500
Subject: [PATCH 17/67]  Convert hui-state-icon-element to
 TypeScript/LitElement (#1891)

* Convert hui-state-icon-element to TypeScript/LitElement

The icon is not currently dispalying and therefor cannot determine if changing as well. Everything else is working. Should probably create a base class for all these elements to extend for simple things like checking for the entity and setting hass correctly once I get that sorted out.

* Fixed setting of properties

* Remove ! on this._config

* Addressed review comments

* Moved event handlers to private functions to avoid arrow function creation on each render
* Check for `hass` before looking for state
* Movevd absolute import above relative imports
---
 .../lovelace/common/create-hui-element.js     |  2 +-
 .../elements/hui-state-icon-element.js        | 61 ---------------
 .../elements/hui-state-icon-element.ts        | 77 +++++++++++++++++++
 3 files changed, 78 insertions(+), 62 deletions(-)
 delete mode 100644 src/panels/lovelace/elements/hui-state-icon-element.js
 create mode 100644 src/panels/lovelace/elements/hui-state-icon-element.ts

diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index 01bdded3ea..c68f1fee08 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -2,7 +2,7 @@ import "../elements/hui-icon-element";
 import "../elements/hui-image-element";
 import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element.js";
-import "../elements/hui-state-icon-element.js";
+import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
 
 import { fireEvent } from "../../../common/dom/fire_event.js";
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.js b/src/panels/lovelace/elements/hui-state-icon-element.js
deleted file mode 100644
index 1ad1a3b4a7..0000000000
--- a/src/panels/lovelace/elements/hui-state-icon-element.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/entity/state-badge.js";
-
-import ElementClickMixin from "../mixins/element-click-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-/*
- * @appliesMixin ElementClickMixin
- */
-class HuiStateIconElement extends ElementClickMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-      <state-badge
-        state-obj="[[_stateObj]]"
-        title$="[[computeTooltip(hass, _config)]]"
-      ></state-badge>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      _config: Object,
-      _stateObj: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    longPressBind(this);
-    this.addEventListener("ha-click", () =>
-      this.handleClick(this.hass, this._config, false)
-    );
-    this.addEventListener("ha-hold", () =>
-      this.handleClick(this.hass, this._config, true)
-    );
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw Error("Error in element configuration");
-    }
-
-    this._config = config;
-  }
-
-  _hassChanged(hass) {
-    this._stateObj = hass.states[this._config.entity];
-  }
-}
-customElements.define("hui-state-icon-element", HuiStateIconElement);
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
new file mode 100644
index 0000000000..d75098586a
--- /dev/null
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -0,0 +1,77 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/entity/state-badge.js";
+
+import { computeTooltip } from "../../../common/string/compute-tooltip";
+import { handleClick } from "../../../common/dom/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+
+export class HuiStateIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.hass.states[this._config.entity!]
+    ) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <state-badge
+        .stateObj=${state}
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${this._handleClick}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+      ></state-badge>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-icon-element": HuiStateIconElement;
+  }
+}
+
+customElements.define("hui-state-icon-element", HuiStateIconElement);

From 8c155d4d0e90422c7d99c98a6612970cad36d644 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 14:36:53 -0500
Subject: [PATCH 18/67]  Convert hui-state-badge-element to
 TypeScript/LitElement (#1892)

* Convert hui-state-badge-element to TypeScript/LitElement

The state image is not updating. This is true with the image-element as well. There's probably something simple between them both that I'm missing in my syntax for defining them

* Added htmlmap interface

* Addressed review comments
---
 .../lovelace/common/create-hui-element.js     |  2 +-
 .../elements/hui-state-badge-element.js       | 49 -----------------
 .../elements/hui-state-badge-element.ts       | 53 +++++++++++++++++++
 3 files changed, 54 insertions(+), 50 deletions(-)
 delete mode 100644 src/panels/lovelace/elements/hui-state-badge-element.js
 create mode 100644 src/panels/lovelace/elements/hui-state-badge-element.ts

diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index c68f1fee08..39d99926c9 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,7 +1,7 @@
 import "../elements/hui-icon-element";
 import "../elements/hui-image-element";
 import "../elements/hui-service-button-element";
-import "../elements/hui-state-badge-element.js";
+import "../elements/hui-state-badge-element";
 import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
 
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.js b/src/panels/lovelace/elements/hui-state-badge-element.js
deleted file mode 100644
index 224f55ae50..0000000000
--- a/src/panels/lovelace/elements/hui-state-badge-element.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "../../../components/entity/ha-state-label-badge.js";
-import computeStateName from "../../../common/entity/compute_state_name";
-
-class HuiStateBadgeElement extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  static get observers() {
-    return ["_updateBadge(hass, _config)"];
-  }
-
-  _updateBadge(hass, config) {
-    if (!hass || !config || !(config.entity in hass.states)) return;
-
-    if (!this._badge) {
-      this._badge = document.createElement("ha-state-label-badge");
-    }
-
-    const stateObj = hass.states[config.entity];
-    this._badge.setProperties({
-      hass,
-      state: stateObj,
-      title: computeStateName(stateObj),
-    });
-
-    if (!this.lastChild) {
-      this.appendChild(this._badge);
-    }
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw Error("Error in element configuration");
-    }
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    this._badge = null;
-    this._config = config;
-  }
-}
-customElements.define("hui-state-badge-element", HuiStateBadgeElement);
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts
new file mode 100644
index 0000000000..9a5a461e89
--- /dev/null
+++ b/src/panels/lovelace/elements/hui-state-badge-element.ts
@@ -0,0 +1,53 @@
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge.js";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { LovelaceElement, LovelaceElementConfig } from "./types.js";
+import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
+
+export class HuiStateBadgeElement extends LitElement
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.hass.states[this._config.entity!]
+    ) {
+      return html``;
+    }
+
+    const state = this.hass.states[this._config.entity!];
+    return html`
+      <ha-state-label-badge
+        .hass=${this.hass}
+        .state=${state}
+        .title="${computeStateName(state)}"
+      ></ha-state-label-badge>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-badge-element": HuiStateBadgeElement;
+  }
+}
+
+customElements.define("hui-state-badge-element", HuiStateBadgeElement);

From b6d0d777bf766f64cd456218fe42d049417fb6b3 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sun, 28 Oct 2018 15:47:21 -0400
Subject: [PATCH 19/67] Gauge convert and fix issues (#1886)

* Gauge convert and fix issues

* Fixing Unit_of_Measurement

* Addressing Reviews

* Updating typing
---
 src/panels/lovelace/cards/hui-gauge-card.js   | 211 --------------
 src/panels/lovelace/cards/hui-gauge-card.ts   | 266 ++++++++++++++++++
 .../lovelace/common/create-card-element.js    |   2 +-
 3 files changed, 267 insertions(+), 212 deletions(-)
 delete mode 100644 src/panels/lovelace/cards/hui-gauge-card.js
 create mode 100644 src/panels/lovelace/cards/hui-gauge-card.ts

diff --git a/src/panels/lovelace/cards/hui-gauge-card.js b/src/panels/lovelace/cards/hui-gauge-card.js
deleted file mode 100644
index ee8be76cff..0000000000
--- a/src/panels/lovelace/cards/hui-gauge-card.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-
-import EventsMixin from "../../../mixins/events-mixin.js";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HuiGaugeCard extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          --base-unit: 50px;
-          height: calc(var(--base-unit)*3);
-          position: relative;
-          cursor: pointer;
-        }
-        .container{
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          position: absolute;
-          top: calc(var(--base-unit)*1.5);
-          left: 50%;
-          overflow: hidden;
-          text-align: center;
-          transform: translate(-50%, -50%);
-        }
-        .gauge-a{
-          z-index: 1;
-          position: absolute;
-          background-color: var(--primary-background-color);
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          top: 0%;
-          border-radius:calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
-        }
-        .gauge-b{
-          z-index: 3;
-          position: absolute;
-          background-color: var(--paper-card-background-color);
-          width: calc(var(--base-unit) * 2.5);
-          height: calc(var(--base-unit) * 1.25);
-          top: calc(var(--base-unit) * 0.75);
-          margin-left: calc(var(--base-unit) * 0.75);
-          margin-right: auto;
-          border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
-        }
-        .gauge-c{
-          z-index: 2;
-          position: absolute;
-          background-color: var(--label-badge-blue);
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          top: calc(var(--base-unit) * 2);
-          margin-left: auto;
-          margin-right: auto;
-          border-radius: 0px 0px calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) ;
-          transform-origin: center top;
-          transition: all 1.3s ease-in-out;
-        }
-        .gauge-data{
-          z-index: 4;
-          color: var(--primary-text-color);
-          line-height: calc(var(--base-unit) * 0.3);
-          position: absolute;
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2.1);
-          top: calc(var(--base-unit) * 1.2);
-          margin-left: auto;
-          margin-right: auto;
-          transition: all 1s ease-out;
-        }
-        .gauge-data #percent{
-          font-size: calc(var(--base-unit) * 0.55);
-        }
-        .gauge-data #title{
-          padding-top: calc(var(--base-unit) * 0.15);
-          font-size: calc(var(--base-unit) * 0.30);
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-      <ha-card  on-click='_handleClick'>
-        <div class='container'>
-          <div class='gauge-a'></div>
-          <div class='gauge-b'></div>
-          <div class='gauge-c' id='gauge'></div>
-          <div class='gauge-data'>
-            <div id='percent'>[[_computeStateDisplay(_stateObj)]]</div>
-            <div id='title'>[[_computeTitle(_stateObj)]]</div>
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-    };
-  }
-
-  getCardSize() {
-    return 1;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity)
-      throw new Error("Invalid card configuration");
-    this._config = { min: 0, max: 100, ...config };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _stateObjChanged(stateObj) {
-    if (!stateObj || isNaN(stateObj.state)) return;
-
-    const config = this._config;
-    const turn = this._translateTurn(stateObj.state, config) / 10;
-
-    this.$.gauge.style.transform = `rotate(${turn}turn)`;
-    this.$.gauge.style.backgroundColor = this._computeSeverity(
-      stateObj.state,
-      config.severity
-    );
-  }
-
-  _computeStateDisplay(stateObj) {
-    if (!stateObj || isNaN(stateObj.state)) return "";
-    const unitOfMeasurement =
-      this._config.unit_of_measurement ||
-      stateObj.attributes.unit_of_measurement ||
-      "";
-    return `${stateObj.state} ${unitOfMeasurement}`;
-  }
-
-  _computeTitle(stateObj) {
-    if (!stateObj) {
-      this.$.title.className = "not-found";
-      return "Entity not available: " + this._config.entity;
-    }
-    if (isNaN(stateObj.state)) {
-      this.$.title.className = "not-found";
-      return "Entity is non-numeric: " + this._config.entity;
-    }
-    this.$.title.className = "";
-    return this._config.title;
-  }
-
-  _computeSeverity(stateValue, sections) {
-    const numberValue = Number(stateValue);
-    const severityMap = {
-      red: "var(--label-badge-red)",
-      green: "var(--label-badge-green)",
-      yellow: "var(--label-badge-yellow)",
-      normal: "var(--label-badge-blue)",
-    };
-
-    if (!sections) return severityMap.normal;
-
-    const sectionsArray = Object.keys(sections);
-    const sortable = sectionsArray.map((severity) => [
-      severity,
-      sections[severity],
-    ]);
-
-    for (var i = 0; i < sortable.length; i++) {
-      if (severityMap[sortable[i][0]] == null || isNaN(sortable[i][1])) {
-        return severityMap.normal;
-      }
-    }
-    sortable.sort((a, b) => a[1] - b[1]);
-
-    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
-      return severityMap[sortable[0][0]];
-    }
-    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
-      return severityMap[sortable[1][0]];
-    }
-    if (numberValue >= sortable[2][1]) {
-      return severityMap[sortable[2][0]];
-    }
-    return severityMap.normal;
-  }
-
-  _translateTurn(value, config) {
-    return (5 * (value - config.min)) / (config.max - config.min);
-  }
-
-  _handleClick() {
-    this.fire("hass-more-info", { entityId: this._config.entity });
-  }
-}
-
-customElements.define("hui-gauge-card", HuiGaugeCard);
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
new file mode 100644
index 0000000000..6fcd7b4f85
--- /dev/null
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -0,0 +1,266 @@
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { HomeAssistant } from "../../../types.js";
+import isValidEntityId from "../../../common/entity/valid_entity_id.js";
+import { fireEvent } from "../../../common/dom/fire_event.js";
+
+import "../../../components/ha-card.js";
+
+interface Config extends LovelaceConfig {
+  entity: string;
+  title?: string;
+  unit_of_measurement?: string;
+  min?: number;
+  max?: number;
+  severity?: object;
+}
+
+const severityMap = {
+  red: "var(--label-badge-red)",
+  green: "var(--label-badge-green)",
+  yellow: "var(--label-badge-yellow)",
+  normal: "var(--label-badge-blue)",
+};
+
+class HuiGaugeCard extends LitElement implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize() {
+    return 2;
+  }
+
+  public setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Invalid card configuration");
+    }
+    if (!isValidEntityId(config.entity)) {
+      throw new Error("Invalid Entity");
+    }
+    this._config = { min: 0, max: 100, ...config };
+  }
+
+  protected render() {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+    const stateObj = this.hass.states[this._config.entity];
+    let error;
+    if (!stateObj) {
+      error = "Entity not available: " + this._config.entity;
+    } else if (isNaN(Number(stateObj.state))) {
+      error = "Entity is non-numeric: " + this._config.entity;
+    }
+
+    return html`
+    ${this.renderStyle()}
+    <ha-card @click="${this._handleClick}">
+    ${
+      error
+        ? html`<div class="not-found">${error}</div>`
+        : html`
+          <div class='container'>
+            <div class='gauge-a'></div>
+            <div class='gauge-b'></div>
+            <div class='gauge-c' id='gauge'></div>
+            <div class='gauge-data'>
+              <div id='percent'>${stateObj.state}
+              ${this._config.unit_of_measurement ||
+                stateObj.attributes.unit_of_measurement ||
+                ""}
+              </div>
+              <div id='title'>${this._config.title}
+
+              </div>
+            </div>
+          </div>
+        `
+    }
+    </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    if (changedProps.get("_config")) {
+      return changedProps.get("_config") !== this._config;
+    }
+    return (changedProps as unknown) as boolean;
+  }
+
+  protected updated() {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.shadowRoot!.getElementById("gauge")
+    ) {
+      return;
+    }
+    const stateObj = this.hass.states[this._config.entity];
+    if (isNaN(Number(stateObj.state))) {
+      return;
+    }
+
+    const turn = this._translateTurn(Number(stateObj.state), this._config);
+
+    this.shadowRoot!.getElementById(
+      "gauge"
+    )!.style.cssText = `transform: rotate(${turn}turn); background-color: ${this._computeSeverity(
+      stateObj.state,
+      this._config.severity!
+    )}`;
+
+    (this.shadowRoot!.querySelector(
+      "ha-card"
+    )! as HTMLElement).style.setProperty(
+      "--base-unit",
+      this._computeBaseUnit()
+    );
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        ha-card {
+          --base-unit: 50px;
+          height: calc(var(--base-unit)*3);
+          position: relative;
+          cursor: pointer;
+        }
+        .container{
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          position: absolute;
+          top: calc(var(--base-unit)*1.5);
+          left: 50%;
+          overflow: hidden;
+          text-align: center;
+          transform: translate(-50%, -50%);
+        }
+        .gauge-a{
+          z-index: 1;
+          position: absolute;
+          background-color: var(--primary-background-color);
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          top: 0%;
+          border-radius:calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
+        }
+        .gauge-b{
+          z-index: 3;
+          position: absolute;
+          background-color: var(--paper-card-background-color);
+          width: calc(var(--base-unit) * 2.5);
+          height: calc(var(--base-unit) * 1.25);
+          top: calc(var(--base-unit) * 0.75);
+          margin-left: calc(var(--base-unit) * 0.75);
+          margin-right: auto;
+          border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
+        }
+        .gauge-c{
+          z-index: 2;
+          position: absolute;
+          background-color: var(--label-badge-blue);
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          top: calc(var(--base-unit) * 2);
+          margin-left: auto;
+          margin-right: auto;
+          border-radius: 0px 0px calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) ;
+          transform-origin: center top;
+          transition: all 1.3s ease-in-out;
+        }
+        .gauge-data{
+          z-index: 4;
+          color: var(--primary-text-color);
+          line-height: calc(var(--base-unit) * 0.3);
+          position: absolute;
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2.1);
+          top: calc(var(--base-unit) * 1.2);
+          margin-left: auto;
+          margin-right: auto;
+          transition: all 1s ease-out;
+        }
+        .gauge-data #percent{
+          font-size: calc(var(--base-unit) * 0.55);
+        }
+        .gauge-data #title{
+          padding-top: calc(var(--base-unit) * 0.15);
+          font-size: calc(var(--base-unit) * 0.30);
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  private _computeSeverity(stateValue: string, sections: object) {
+    const numberValue = Number(stateValue);
+
+    if (!sections) {
+      return severityMap.normal;
+    }
+
+    const sectionsArray = Object.keys(sections);
+    const sortable = sectionsArray.map((severity) => [
+      severity,
+      sections[severity],
+    ]);
+
+    for (const severity of sortable) {
+      if (severityMap[severity[0]] == null || isNaN(severity[1])) {
+        return severityMap.normal;
+      }
+    }
+    sortable.sort((a, b) => a[1] - b[1]);
+
+    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
+      return severityMap[sortable[0][0]];
+    }
+    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
+      return severityMap[sortable[1][0]];
+    }
+    if (numberValue >= sortable[2][1]) {
+      return severityMap[sortable[2][0]];
+    }
+    return severityMap.normal;
+  }
+
+  private _translateTurn(value: number, config: Config) {
+    const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
+    return (
+      (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
+    );
+  }
+
+  private _computeBaseUnit() {
+    return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
+  }
+
+  private _handleClick() {
+    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
+  }
+}
+
+customElements.define("hui-gauge-card", HuiGaugeCard);
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index 3cadc4b052..3759bc814c 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/src/panels/lovelace/common/create-card-element.js
@@ -22,7 +22,7 @@ import "../cards/hui-sensor-card.js";
 import "../cards/hui-vertical-stack-card.ts";
 import "../cards/hui-thermostat-card.ts";
 import "../cards/hui-weather-forecast-card";
-import "../cards/hui-gauge-card.js";
+import "../cards/hui-gauge-card";
 
 import createErrorCardConfig from "./create-error-card-config.js";
 

From b8752c4158e50f6c78e82ff3b5ab11c2af02496f Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 15:07:30 -0500
Subject: [PATCH 20/67] Convert hui-divider-row to TypeScript/LitElement
 (#1896)

* Convert hui-divider-row to TypeScript/LitElement

* Add return types

* Fixed style issues

* Address review comments
---
 .../lovelace/common/create-row-element.js     |  2 +-
 .../lovelace/special-rows/hui-divider-row.js  | 43 ---------------
 .../lovelace/special-rows/hui-divider-row.ts  | 53 +++++++++++++++++++
 3 files changed, 54 insertions(+), 44 deletions(-)
 delete mode 100644 src/panels/lovelace/special-rows/hui-divider-row.js
 create mode 100644 src/panels/lovelace/special-rows/hui-divider-row.ts

diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index eaff2bdce1..af3d91269f 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -15,7 +15,7 @@ import "../entity-rows/hui-timer-entity-row.js";
 import "../entity-rows/hui-toggle-entity-row.js";
 
 import "../special-rows/hui-call-service-row.js";
-import "../special-rows/hui-divider-row.js";
+import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row.js";
 import "../special-rows/hui-weblink-row.js";
 
diff --git a/src/panels/lovelace/special-rows/hui-divider-row.js b/src/panels/lovelace/special-rows/hui-divider-row.js
deleted file mode 100644
index 453ee8b538..0000000000
--- a/src/panels/lovelace/special-rows/hui-divider-row.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-class HuiDividerRow extends PolymerElement {
-  static get template() {
-    return html``;
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-    this._createDivider();
-  }
-
-  ready() {
-    super.ready();
-    this._createDivider();
-  }
-
-  _createDivider() {
-    const root = this.shadowRoot;
-    if (root === null) return;
-
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    const style = this._config.style || {
-      height: "1px",
-      "background-color": "var(--secondary-text-color)",
-    };
-
-    const el = document.createElement("div");
-    Object.keys(style).forEach((prop) => {
-      el.style.setProperty(prop, style[prop]);
-    });
-
-    root.appendChild(el);
-  }
-}
-customElements.define("hui-divider-row", HuiDividerRow);
diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts
new file mode 100644
index 0000000000..1720063db7
--- /dev/null
+++ b/src/panels/lovelace/special-rows/hui-divider-row.ts
@@ -0,0 +1,53 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, DividerConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+class HuiDividerRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: DividerConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = {
+      style: {
+        height: "1px",
+        "background-color": "var(--secondary-text-color)",
+      },
+      ...config,
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const el = document.createElement("div");
+
+    Object.keys(this._config.style).forEach((prop) => {
+      el.style.setProperty(prop, this._config!.style[prop]);
+    });
+
+    return html`
+      ${el}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-divider-row": HuiDividerRow;
+  }
+}
+
+customElements.define("hui-divider-row", HuiDividerRow);

From 4f6bae193dfed1a3609c01c2a5b8ef39b97b212e Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 15:08:58 -0500
Subject: [PATCH 21/67] Convert hui-weblink-row to TypeScript/LitElement
 (#1898)

* Convert hui-weblink-row to TypeScript/LitElement

* Addressed review comments

* Made name and icon fields optional. Will create a corresponding PR to the docs to update them as Optional
* Updated entities-card to not check weblink config as that is the job of the element (entities-card should be updated to not check service-call config either as that is the job of the row element as well)

* Addressed review comments

That's cool!
---
 .../lovelace/cards/hui-entities-card.ts       |  5 --
 .../lovelace/common/create-row-element.js     |  2 +-
 src/panels/lovelace/entity-rows/types.ts      |  4 +-
 .../lovelace/special-rows/hui-weblink-row.js  | 55 --------------
 .../lovelace/special-rows/hui-weblink-row.ts  | 75 +++++++++++++++++++
 5 files changed, 78 insertions(+), 63 deletions(-)
 delete mode 100644 src/panels/lovelace/special-rows/hui-weblink-row.js
 create mode 100644 src/panels/lovelace/special-rows/hui-weblink-row.ts

diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 32cc353d7d..c443764501 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -69,11 +69,6 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
           !entity.action_name)
       ) {
         throw new Error("Missing required property when type is call-service");
-      } else if (
-        entity.type === "weblink" &&
-        (!entity.name || !entity.icon || !entity.url)
-      ) {
-        throw new Error("Missing required property when type is weblink");
       }
     }
 
diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index af3d91269f..28931e06de 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -17,7 +17,7 @@ import "../entity-rows/hui-toggle-entity-row.js";
 import "../special-rows/hui-call-service-row.js";
 import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row.js";
-import "../special-rows/hui-weblink-row.js";
+import "../special-rows/hui-weblink-row";
 
 import createErrorCardConfig from "./create-error-card-config.js";
 
diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index f343d9c4e5..c4fcb7dc20 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/src/panels/lovelace/entity-rows/types.ts
@@ -12,8 +12,8 @@ export interface SectionConfig {
   label: string;
 }
 export interface WeblinkConfig {
-  name: string;
-  icon: string;
+  name?: string;
+  icon?: string;
   url: string;
 }
 export type EntityRowConfig =
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.js b/src/panels/lovelace/special-rows/hui-weblink-row.js
deleted file mode 100644
index 91a6106df3..0000000000
--- a/src/panels/lovelace/special-rows/hui-weblink-row.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-icon.js";
-
-class HuiWeblinkRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <a href="[[_config.url]]">
-        <ha-icon icon="[[_config.icon]]"></ha-icon>
-        <div>
-          [[_config.name]]
-        </div>
-      </a>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        a {
-          display: flex;
-          align-items: center;
-          color: var(--primary-color);
-        }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
-        div {
-          flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-left: 16px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.icon || !config.name || !config.url) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-weblink-row", HuiWeblinkRow);
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts
new file mode 100644
index 0000000000..e49690ece5
--- /dev/null
+++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts
@@ -0,0 +1,75 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, WeblinkConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-icon.js";
+
+import { TemplateResult } from "lit-html";
+
+class HuiWeblinkRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: WeblinkConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config: WeblinkConfig): void {
+    if (!config || !config.url) {
+      throw new Error("Invalid Configuration: 'url' required");
+    }
+
+    this._config = {
+      icon: "hass:link",
+      name: config.url,
+      ...config,
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <a href="${this._config.url}">
+        <ha-icon .icon="${this._config.icon}"></ha-icon>
+        <div>${this._config.name}</div>
+      </a>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        a {
+          display: flex;
+          align-items: center;
+          color: var(--primary-color);
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        div {
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-left: 16px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-weblink-row": HuiWeblinkRow;
+  }
+}
+
+customElements.define("hui-weblink-row", HuiWeblinkRow);

From 82eb33a7d488beb421e24abf4f0d637adf8b2028 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 28 Oct 2018 15:09:41 -0500
Subject: [PATCH 22/67] Convert hui-climate-entity-row to TypeScript/LitElement
 (#1899)

* Convert hui-climate-entity-row to TypeScript/LitElement

* Address review comments

* Address review comments
---
 .../lovelace/common/create-row-element.js     |  2 +-
 .../entity-rows/hui-climate-entity-row.js     | 61 -----------------
 .../entity-rows/hui-climate-entity-row.ts     | 65 +++++++++++++++++++
 3 files changed, 66 insertions(+), 62 deletions(-)
 delete mode 100644 src/panels/lovelace/entity-rows/hui-climate-entity-row.js
 create mode 100644 src/panels/lovelace/entity-rows/hui-climate-entity-row.ts

diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index 28931e06de..e2b02e9712 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -1,6 +1,6 @@
 import { fireEvent } from "../../../common/dom/fire_event.js";
 
-import "../entity-rows/hui-climate-entity-row.js";
+import "../entity-rows/hui-climate-entity-row";
 import "../entity-rows/hui-cover-entity-row.js";
 import "../entity-rows/hui-group-entity-row.js";
 import "../entity-rows/hui-input-number-entity-row.js";
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.js b/src/panels/lovelace/entity-rows/hui-climate-entity-row.js
deleted file mode 100644
index 78ac84d2b6..0000000000
--- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-climate-state.js";
-import "../components/hui-generic-entity-row.js";
-
-class HuiClimateEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.climateControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        ha-climate-state {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-
-  static get climateControlTemplate() {
-    return html`
-      <ha-climate-state
-        hass="[[hass]]"
-        state-obj="[[_stateObj]]"
-      ></ha-climate-state>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-climate-entity-row", HuiClimateEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
new file mode 100644
index 0000000000..074ef40c33
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
@@ -0,0 +1,65 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-climate-state.js";
+import "../components/hui-generic-entity-row.js";
+
+import { HomeAssistant } from "../../../types.js";
+import { EntityRow, EntityConfig } from "./types.js";
+
+class HuiClimateEntityRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: EntityConfig;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: EntityConfig): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+      >
+        <ha-climate-state
+          .hass=${this.hass}
+          .stateObj=${this.hass.states[this._config.entity]}
+        ></ha-climate-state>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-climate-state {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-climate-entity-row": HuiClimateEntityRow;
+  }
+}
+
+customElements.define("hui-climate-entity-row", HuiClimateEntityRow);

From c347be6f3542f65f6b19e18e907a0c6a9f8ce774 Mon Sep 17 00:00:00 2001
From: Timmo <contact@timmo.xyz>
Date: Mon, 29 Oct 2018 07:30:56 +0000
Subject: [PATCH 23/67] Lovelace - Weather Card: Adjust margins and move text
 (#1880)

* Thermostat fix (#1867)

* Thermostat fix

* Fix for unknown operation mode

* No title for you

* I suck at removing unnecessary things

* Fixing pointless Ternary operator

* Add version bump script

* Fix hass setting on stack (#1868)

* Fix hass setting on stack

* Don't set hass on pic elements if undefined

* Don't set hass on entity rows if undefined

* prefix config prop

* Pic elements set hass yoooo

* Remove interface

* Make stack config private

* Fix import

* Lint

* Bumped version to 20181026.1

* :hammer: move not text to header and name to secondary text

* :hammer: reduce some other margins
---
 src/cards/ha-weather-card.js | 38 ++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index 849ba6b9fa..90b49d97a3 100644
--- a/src/cards/ha-weather-card.js
+++ b/src/cards/ha-weather-card.js
@@ -26,6 +26,25 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--paper-item-icon-color);
         }
 
+        .header {
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
+          opacity: var(--dark-primary-opacity);
+          padding: 24px 16px 16px;
+          display: flex;
+        }
+
+        .name {
+          margin-left: 16px;
+          font-size: 16px;
+          color: var(--secondary-text-color);
+        }
+
         .now {
           display: flex;
           justify-content: space-between;
@@ -58,12 +77,8 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           top: 4px;
         }
 
-        .now-text {
-          font-size: 24px;
-        }
-
         .forecast {
-          margin-top: 24px;
+          margin-top: 16px;
           display: flex;
           justify-content: space-between;
         }
@@ -74,7 +89,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .forecast .icon {
-          margin: 8px 0;
+          margin: 4px 0;
           text-align: center;
         }
 
@@ -88,7 +103,13 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--secondary-text-color);
         }
       </style>
-      <ha-card header="[[stateObj.attributes.friendly_name]]">
+      <ha-card>
+        <div class="header">
+          [[computeState(stateObj.state, localize)]]
+          <div class="name">
+            [[stateObj.attributes.friendly_name]]
+          </div>
+        </div>
         <div class="content">
           <div class="now">
             <div class="main">
@@ -120,9 +141,6 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               </template>
             </div>
           </div>
-          <div class="now-text">
-            [[computeState(stateObj.state, localize)]]
-          </div>
           <template is="dom-if" if="[[forecast]]">
             <div class="forecast">
               <template is="dom-repeat" items="[[forecast]]">

From 5ab15dc27ff1aaf7070dad95b531547695d6dd1a Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 03:59:33 -0400
Subject: [PATCH 24/67] add arm night (#1908)

---
 src/translations/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/translations/en.json b/src/translations/en.json
index 2afdb60567..bc0df3a9aa 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -338,7 +338,8 @@
         "clear_code": "Clear",
         "disarm": "Disarm",
         "arm_home": "Arm home",
-        "arm_away": "Arm away"
+        "arm_away": "Arm away",
+        "arm_night": "Arm night"
       },
       "automation": {
         "last_triggered": "Last triggered",

From 1d014bf6e3ca9626c6661103c95a875d6610897b Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Mon, 29 Oct 2018 04:53:17 -0500
Subject: [PATCH 25/67] Convert hui-section-row to TypeScript/LitElement
 (#1897)

* Convert hui-section-row to TypeScript/LitElement

* Address review comments
---
 .../lovelace/common/create-row-element.js     |  3 +-
 .../lovelace/special-rows/hui-section-row.js  | 53 --------------
 .../lovelace/special-rows/hui-section-row.ts  | 70 +++++++++++++++++++
 3 files changed, 72 insertions(+), 54 deletions(-)
 delete mode 100644 src/panels/lovelace/special-rows/hui-section-row.js
 create mode 100644 src/panels/lovelace/special-rows/hui-section-row.ts

diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index e2b02e9712..c269ff86c5 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -16,9 +16,10 @@ import "../entity-rows/hui-toggle-entity-row.js";
 
 import "../special-rows/hui-call-service-row.js";
 import "../special-rows/hui-divider-row";
-import "../special-rows/hui-section-row.js";
+import "../special-rows/hui-section-row";
 import "../special-rows/hui-weblink-row";
 
+
 import createErrorCardConfig from "./create-error-card-config.js";
 
 const CUSTOM_TYPE_PREFIX = "custom:";
diff --git a/src/panels/lovelace/special-rows/hui-section-row.js b/src/panels/lovelace/special-rows/hui-section-row.js
deleted file mode 100644
index 97f1690fad..0000000000
--- a/src/panels/lovelace/special-rows/hui-section-row.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-icon.js";
-
-class HuiSectionRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <div class=divider></div>
-      <template is="dom-if" if="[[_config.label]]">
-        <div class=label>
-          [[_config.label]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        .label {
-          color: var(--primary-color);
-          margin-left: 8px;
-          margin-bottom: 16px;
-          margin-top: 16px;
-        }
-        .divider {
-          height: 1px;
-          background-color: var(--secondary-text-color);
-          opacity: 0.25;
-          margin-left: -16px;
-          margin-right: -16px;
-          margin-top: 8px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-section-row", HuiSectionRow);
diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts
new file mode 100644
index 0000000000..f590c4d96d
--- /dev/null
+++ b/src/panels/lovelace/special-rows/hui-section-row.ts
@@ -0,0 +1,70 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, SectionConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-icon.js";
+import { TemplateResult } from "lit-html";
+
+class HuiSectionRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: SectionConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config: SectionConfig): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div class=divider></div>
+      ${
+        this._config.label
+          ? html`<div class="label">${this._config.label}</div>`
+          : html``
+      }
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        .label {
+          color: var(--primary-color);
+          margin-left: 8px;
+          margin-bottom: 16px;
+          margin-top: 16px;
+        }
+        .divider {
+          height: 1px;
+          background-color: var(--secondary-text-color);
+          opacity: 0.25;
+          margin-left: -16px;
+          margin-right: -16px;
+          margin-top: 8px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-section-row": HuiSectionRow;
+  }
+}
+
+customElements.define("hui-section-row", HuiSectionRow);

From 0d339e0cba3ceca359644071c47ddfc23695546c Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 11:33:01 -0400
Subject: [PATCH 26/67] add arm_custom_bypass

---
 src/translations/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/translations/en.json b/src/translations/en.json
index bc0df3a9aa..cc04a89269 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -339,7 +339,8 @@
         "disarm": "Disarm",
         "arm_home": "Arm home",
         "arm_away": "Arm away",
-        "arm_night": "Arm night"
+        "arm_night": "Arm night",
+        "armed_custom_bypass": "Custom bypass"
       },
       "automation": {
         "last_triggered": "Last triggered",

From b717402d26ed65dd56c50a55a19e64492513a762 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 11:37:23 -0400
Subject: [PATCH 27/67] Fixes errors in PRs based on dev

---
 src/panels/lovelace/common/create-row-element.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index c269ff86c5..9d196d96e1 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -19,7 +19,6 @@ import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row";
 import "../special-rows/hui-weblink-row";
 
-
 import createErrorCardConfig from "./create-error-card-config.js";
 
 const CUSTOM_TYPE_PREFIX = "custom:";

From 3dde78cadff415af8c10c6b6fca3b27fb02d0391 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 13:54:10 -0400
Subject: [PATCH 28/67] Adding div arround each row to deal with spacing

---
 src/panels/lovelace/cards/hui-entities-card.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index c443764501..c44577dfd1 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -124,9 +124,9 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
           margin: -4px 0;
         }
         #states > * {
-          margin: 4px 0;
+          margin: 8px 0;
         }
-        #states > * {
+        #states > div > * {
           overflow: hidden;
         }
         .header {
@@ -162,7 +162,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
       element.addEventListener("click", () => this._handleClick(entityConf));
     }
 
-    return element;
+    return html`<div>${element}</div>`;
   }
 
   private _handleClick(entityConf: ConfigEntity) {

From 00935c86d09adad6516010cc9ff69a075bc5148f Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 14:29:27 -0400
Subject: [PATCH 29/67] Add themes to entities (#1909)

---
 src/panels/lovelace/cards/hui-entities-card.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index c443764501..544559a06b 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -6,12 +6,13 @@ import "../components/hui-entities-toggle.js";
 import { fireEvent } from "../../../common/dom/fire_event.js";
 import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import createRowElement from "../common/create-row-element.js";
-import computeDomain from "../../../common/entity/compute_domain.js";
-import processConfigEntities from "../common/process-config-entities";
 import { HomeAssistant } from "../../../types.js";
 import { EntityConfig, EntityRow } from "../entity-rows/types.js";
+import { LovelaceCard, LovelaceConfig } from "../types.js";
+import processConfigEntities from "../common/process-config-entities";
+import createRowElement from "../common/create-row-element.js";
+import computeDomain from "../../../common/entity/compute_domain.js";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
 
 interface ConfigEntity extends EntityConfig {
   type?: string;
@@ -26,6 +27,7 @@ interface Config extends LovelaceConfig {
   show_header_toggle?: boolean;
   title?: string;
   entities: ConfigEntity[];
+  theme?: string;
 }
 
 class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
@@ -72,7 +74,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
       }
     }
 
-    this._config = config;
+    this._config = { theme: "default", ...config };
     this._configEntities = entities;
   }
 
@@ -82,6 +84,8 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     }
     const { show_header_toggle, title } = this._config;
 
+    applyThemesOnElement(this, this._hass.themes, this._config.theme);
+
     return html`
       ${this.renderStyle()}
       <ha-card>

From 7178d208d3b5280266ae5f6a7e8f44744c331f0b Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 14:33:05 -0400
Subject: [PATCH 30/67] Light Card addition

---
 gallery/src/demos/demo-hui-light-card.js      |  48 +++
 src/panels/lovelace/cards/hui-light-card.ts   | 312 ++++++++++++++++++
 .../lovelace/common/create-card-element.js    |   2 +
 src/types.ts                                  |   9 +
 4 files changed, 371 insertions(+)
 create mode 100644 gallery/src/demos/demo-hui-light-card.js
 create mode 100644 src/panels/lovelace/cards/hui-light-card.ts

diff --git a/gallery/src/demos/demo-hui-light-card.js b/gallery/src/demos/demo-hui-light-card.js
new file mode 100644
index 0000000000..8f5b2cca28
--- /dev/null
+++ b/gallery/src/demos/demo-hui-light-card.js
@@ -0,0 +1,48 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+
+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
+import "../components/demo-cards.js";
+
+const ENTITIES = [
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+    brightness: 130,
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: `
+- type: light
+  entity: light.bed_light
+    `,
+  },
+];
+
+class DemoLightEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id='demos' configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-light-card", DemoLightEntity);
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
new file mode 100644
index 0000000000..2cb22acdf9
--- /dev/null
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -0,0 +1,312 @@
+import { html, LitElement, PropertyValues } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event.js";
+import { styleMap } from "lit-html/directives/styleMap.js";
+import computeStateName from "../../../common/entity/compute_state_name.js";
+import stateIcon from "../../../common/entity/state_icon.js";
+import { jQuery } from "../../../resources/jquery";
+
+import "../../../components/ha-card.js";
+import "../../../components/ha-icon.js";
+import { roundSliderStyle } from "../../../resources/jquery.roundslider";
+
+import { HomeAssistant, LightEntity } from "../../../types.js";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { longPress } from "../common/directives/long-press-directive";
+
+const lightConfig = {
+  radius: 80,
+  step: 1,
+  circleShape: "pie",
+  startAngle: 315,
+  width: 5,
+  min: 1,
+  max: 100,
+  sliderType: "min-range",
+  lineCap: "round",
+  handleSize: "+12",
+  showTooltip: false,
+};
+
+interface Config extends LovelaceConfig {
+  entity: string;
+  name?: string;
+}
+
+export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private _brightnessTimout?: NodeJS.Timer;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize() {
+    return 2;
+  }
+
+  public setConfig(config: Config) {
+    if (!config.entity || config.entity.split(".")[0] !== "light") {
+      throw new Error("Specify an entity from within the light domain.");
+    }
+
+    this._config = config;
+  }
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config!.entity] as LightEntity;
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card>
+        ${
+          !stateObj
+            ? html`
+              <div class="not-found">Entity not available: ${
+                this._config.entity
+              }</div>`
+            : html`
+              <div id="light"></div>
+              <div id="tooltip">
+                <div class="icon-state">
+                  <ha-icon
+                    data-state="${stateObj.state}"
+                    .icon="${stateIcon(stateObj)}"
+                    style="${styleMap({
+                      filter: this._computeBrightness(stateObj),
+                      color: this._computeColor(stateObj),
+                    })}"
+                    @ha-click="${() => this._handleClick(false)}"
+                    @ha-hold="${() => this._handleClick(true)}"
+                    .longPress="${longPress()}"
+                  ></ha-icon>
+                  <div
+                    class="brightness"
+                    @ha-click="${() => this._handleClick(false)}"
+                    @ha-hold="${() => this._handleClick(true)}"
+                    .longPress="${longPress()}"
+                  ></div>
+                  <div class="name">${this._config.name ||
+                    computeStateName(stateObj)}</div>
+                </div>
+              </div>
+            `
+        }
+
+      </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    return (changedProps as unknown) as boolean;
+  }
+
+  protected firstUpdated() {
+    const brightness = this.hass!.states[this._config!.entity].attributes
+      .brightness;
+    jQuery("#light", this.shadowRoot).roundSlider({
+      ...lightConfig,
+      change: (value) => this._setBrightness(value),
+      drag: (value) => this._dragEvent(value),
+      start: () => this._showBrightness(),
+      stop: () => this._hideBrightness(),
+    });
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
+      (Math.round((brightness / 254) * 100) || 0) + "%";
+  }
+
+  protected updated() {
+    const attrs = this.hass!.states[this._config!.entity].attributes;
+
+    jQuery("#light", this.shadowRoot).roundSlider({
+      value: Math.round((attrs.brightness / 254) * 100) || 0,
+    });
+  }
+
+  private renderStyle() {
+    return html`
+    ${roundSliderStyle}
+    <style>
+      :host {
+        display: block;
+      }
+      ha-card {
+        position: relative;
+        overflow: hidden;
+      }
+      #tooltip {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        text-align: center;
+        z-index: 15;
+      }
+      .icon-state {
+        display: block;
+        margin: auto;
+        width: 100%;
+        height: 100%;
+        transform: translate(0,25%);
+      }
+      #light {
+        margin: 0 auto;
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
+      #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
+        z-index: 20 !important;
+      }
+      #light .rs-range-color  {
+        background-color: var(--primary-color);
+      }
+      #light .rs-path-color  {
+          background-color: #d6d6d6;
+      }
+      #light .rs-handle  {
+          background-color: #FFF;
+          padding: 7px;
+          border: 2px solid #d6d6d6;
+      }
+      #light .rs-handle.rs-focus  {
+          border-color:var(--primary-color);
+      }
+      #light .rs-handle:after  {
+          border-color: var(--primary-color);
+          background-color: var(--primary-color);
+      }
+      #light .rs-border  {
+        border-color: transparent;
+      }
+      ha-icon {
+        margin: auto;
+        width: 76px;
+        height: 76px;
+        color: var(--paper-item-icon-color, #44739e);
+        cursor: pointer;
+      }
+      ha-icon[data-state=on] {
+        color: var(--paper-item-icon-active-color, #FDD835);
+      }
+      ha-icon[data-state=unavailable] {
+        color: var(--state-icon-unavailable-color);
+      }
+      .name {
+        padding-top: 40px;
+        font-size: 1.2rem;
+      }
+      .brightness {
+        font-size: 1.2rem;
+        position: absolute;
+        margin: 0 auto;
+        left: 50%;
+        top: 10%;
+        transform: translate(-50%);
+        opacity: 0;
+        transition: opacity .5s ease-in-out;
+        -moz-transition: opacity .5s ease-in-out;
+        -webkit-transition: opacity .5s ease-in-out;
+        cursor: pointer;
+        color: white;
+        text-shadow:
+          -1px -1px 0 #000,
+          1px -1px 0 #000,
+          -1px 1px 0 #000,
+          1px 1px 0 #000;
+      }
+      .show_brightness {
+        opacity: 1;
+      }
+      .not-found {
+        flex: 1;
+        background-color: yellow;
+        padding: 8px;
+      }
+    </style>
+    `;
+  }
+
+  private _dragEvent(e) {
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
+  }
+
+  private _showBrightness() {
+    clearTimeout(this._brightnessTimout);
+    this.shadowRoot!.querySelector(".brightness")!.classList.add(
+      "show_brightness"
+    );
+  }
+
+  private _hideBrightness() {
+    this._brightnessTimout = setTimeout(() => {
+      this.shadowRoot!.querySelector(".brightness")!.classList.remove(
+        "show_brightness"
+      );
+    }, 500);
+  }
+
+  private _setBrightness(e) {
+    this.hass!.callService("light", "turn_on", {
+      entity_id: this._config!.entity,
+      brightness_pct: e.value,
+    });
+  }
+
+  private _computeBrightness(stateObj: LightEntity) {
+    if (!stateObj.attributes.brightness) {
+      return "";
+    }
+    const brightness = stateObj.attributes.brightness;
+    return `brightness(${(brightness + 245) / 5}%)`;
+  }
+
+  private _computeColor(stateObj: LightEntity) {
+    if (!stateObj.attributes.hs_color) {
+      return "";
+    }
+    const [hue, sat] = stateObj.attributes.hs_color;
+    if (sat <= 10) {
+      return "";
+    }
+    return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
+  }
+
+  private _handleClick(hold: boolean) {
+    const entityId = this._config!.entity;
+
+    if (hold) {
+      fireEvent(this, "hass-more-info", {
+        entityId,
+      });
+      return;
+    }
+
+    this.hass!.callService("light", "toggle", {
+      entity_id: entityId,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-light-card": HuiLightCard;
+  }
+}
+
+customElements.define("hui-light-card", HuiLightCard);
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index 3759bc814c..92db6f4a6f 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/src/panels/lovelace/common/create-card-element.js
@@ -10,6 +10,7 @@ import "../cards/hui-glance-card.ts";
 import "../cards/hui-history-graph-card.js";
 import "../cards/hui-horizontal-stack-card.ts";
 import "../cards/hui-iframe-card.ts";
+import "../cards/hui-light-card";
 import "../cards/hui-map-card.js";
 import "../cards/hui-markdown-card.ts";
 import "../cards/hui-media-control-card.js";
@@ -38,6 +39,7 @@ const CARD_TYPES = new Set([
   "history-graph",
   "horizontal-stack",
   "iframe",
+  "light",
   "map",
   "markdown",
   "media-control",
diff --git a/src/types.ts b/src/types.ts
index 359425876a..b0d3fd2a88 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -111,3 +111,12 @@ export type ClimateEntity = HassEntityBase & {
     aux_heat?: "on" | "off";
   };
 };
+
+export type LightEntity = HassEntityBase & {
+  attributes: HassEntityAttributeBase & {
+    min_mireds: number;
+    max_mireds: number;
+    friendly_name: string;
+    brightness: number;
+  };
+};

From bb4ce278b08fe8bd9b79672e684e422e16562ff2 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 18:07:57 -0400
Subject: [PATCH 31/67] Fixing Gallery and updating timeout type

---
 gallery/src/data/entity.js                  | 4 +++-
 src/panels/lovelace/cards/hui-light-card.ts | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/gallery/src/data/entity.js b/gallery/src/data/entity.js
index b2b90a50ca..d705322d81 100644
--- a/gallery/src/data/entity.js
+++ b/gallery/src/data/entity.js
@@ -55,7 +55,9 @@ export class LightEntity extends Entity {
 
     if (service === "turn_on") {
       // eslint-disable-next-line
-      const { brightness, hs_color } = data;
+      let { brightness, hs_color, brightness_pct } = data;
+      // eslint-disable-next-line
+      brightness = (255 * brightness_pct) / 100;
       this.update(
         "on",
         Object.assign(this.attributes, {
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 2cb22acdf9..c3761b2724 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -37,7 +37,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
   private _config?: Config;
-  private _brightnessTimout?: NodeJS.Timer;
+  private _brightnessTimout?: number;
 
   static get properties() {
     return {
@@ -254,7 +254,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
   }
 
   private _hideBrightness() {
-    this._brightnessTimout = setTimeout(() => {
+    this._brightnessTimout = window.setTimeout(() => {
       this.shadowRoot!.querySelector(".brightness")!.classList.remove(
         "show_brightness"
       );

From 1fcf510278be91909bcc69bd8bfbc3a146128913 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 18:11:34 -0400
Subject: [PATCH 32/67] Adding Type to Returns

---
 src/panels/lovelace/cards/hui-light-card.ts | 201 ++++++++++----------
 1 file changed, 101 insertions(+), 100 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index c3761b2724..cde25a7135 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -13,6 +13,7 @@ import { HomeAssistant, LightEntity } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import { longPress } from "../common/directives/long-press-directive";
+import { TemplateResult } from "lit-html";
 
 const lightConfig = {
   radius: 80,
@@ -138,107 +139,107 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     });
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
     ${roundSliderStyle}
-    <style>
-      :host {
-        display: block;
-      }
-      ha-card {
-        position: relative;
-        overflow: hidden;
-      }
-      #tooltip {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 100%;
-        text-align: center;
-        z-index: 15;
-      }
-      .icon-state {
-        display: block;
-        margin: auto;
-        width: 100%;
-        height: 100%;
-        transform: translate(0,25%);
-      }
-      #light {
-        margin: 0 auto;
-        padding-top: 16px;
-        padding-bottom: 16px;
-      }
-      #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
-        z-index: 20 !important;
-      }
-      #light .rs-range-color  {
-        background-color: var(--primary-color);
-      }
-      #light .rs-path-color  {
-          background-color: #d6d6d6;
-      }
-      #light .rs-handle  {
-          background-color: #FFF;
-          padding: 7px;
-          border: 2px solid #d6d6d6;
-      }
-      #light .rs-handle.rs-focus  {
-          border-color:var(--primary-color);
-      }
-      #light .rs-handle:after  {
-          border-color: var(--primary-color);
+      <style>
+        :host {
+          display: block;
+        }
+        ha-card {
+          position: relative;
+          overflow: hidden;
+        }
+        #tooltip {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 100%;
+          text-align: center;
+          z-index: 15;
+        }
+        .icon-state {
+          display: block;
+          margin: auto;
+          width: 100%;
+          height: 100%;
+          transform: translate(0,25%);
+        }
+        #light {
+          margin: 0 auto;
+          padding-top: 16px;
+          padding-bottom: 16px;
+        }
+        #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
+          z-index: 20 !important;
+        }
+        #light .rs-range-color  {
           background-color: var(--primary-color);
-      }
-      #light .rs-border  {
-        border-color: transparent;
-      }
-      ha-icon {
-        margin: auto;
-        width: 76px;
-        height: 76px;
-        color: var(--paper-item-icon-color, #44739e);
-        cursor: pointer;
-      }
-      ha-icon[data-state=on] {
-        color: var(--paper-item-icon-active-color, #FDD835);
-      }
-      ha-icon[data-state=unavailable] {
-        color: var(--state-icon-unavailable-color);
-      }
-      .name {
-        padding-top: 40px;
-        font-size: 1.2rem;
-      }
-      .brightness {
-        font-size: 1.2rem;
-        position: absolute;
-        margin: 0 auto;
-        left: 50%;
-        top: 10%;
-        transform: translate(-50%);
-        opacity: 0;
-        transition: opacity .5s ease-in-out;
-        -moz-transition: opacity .5s ease-in-out;
-        -webkit-transition: opacity .5s ease-in-out;
-        cursor: pointer;
-        color: white;
-        text-shadow:
-          -1px -1px 0 #000,
-          1px -1px 0 #000,
-          -1px 1px 0 #000,
-          1px 1px 0 #000;
-      }
-      .show_brightness {
-        opacity: 1;
-      }
-      .not-found {
-        flex: 1;
-        background-color: yellow;
-        padding: 8px;
-      }
-    </style>
+        }
+        #light .rs-path-color  {
+            background-color: #d6d6d6;
+        }
+        #light .rs-handle  {
+            background-color: #FFF;
+            padding: 7px;
+            border: 2px solid #d6d6d6;
+        }
+        #light .rs-handle.rs-focus  {
+            border-color:var(--primary-color);
+        }
+        #light .rs-handle:after  {
+            border-color: var(--primary-color);
+            background-color: var(--primary-color);
+        }
+        #light .rs-border  {
+          border-color: transparent;
+        }
+        ha-icon {
+          margin: auto;
+          width: 76px;
+          height: 76px;
+          color: var(--paper-item-icon-color, #44739e);
+          cursor: pointer;
+        }
+        ha-icon[data-state=on] {
+          color: var(--paper-item-icon-active-color, #FDD835);
+        }
+        ha-icon[data-state=unavailable] {
+          color: var(--state-icon-unavailable-color);
+        }
+        .name {
+          padding-top: 40px;
+          font-size: 1.2rem;
+        }
+        .brightness {
+          font-size: 1.2rem;
+          position: absolute;
+          margin: 0 auto;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%);
+          opacity: 0;
+          transition: opacity .5s ease-in-out;
+          -moz-transition: opacity .5s ease-in-out;
+          -webkit-transition: opacity .5s ease-in-out;
+          cursor: pointer;
+          color: white;
+          text-shadow:
+            -1px -1px 0 #000,
+            1px -1px 0 #000,
+            -1px 1px 0 #000,
+            1px 1px 0 #000;
+        }
+        .show_brightness {
+          opacity: 1;
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
     `;
   }
 
@@ -268,7 +269,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     });
   }
 
-  private _computeBrightness(stateObj: LightEntity) {
+  private _computeBrightness(stateObj: LightEntity): string {
     if (!stateObj.attributes.brightness) {
       return "";
     }
@@ -276,7 +277,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     return `brightness(${(brightness + 245) / 5}%)`;
   }
 
-  private _computeColor(stateObj: LightEntity) {
+  private _computeColor(stateObj: LightEntity): string {
     if (!stateObj.attributes.hs_color) {
       return "";
     }

From 410b66d40f70c1494390f8b6ac2ac6246f1ec154 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 18:15:35 -0400
Subject: [PATCH 33/67] Adding more types

---
 src/panels/lovelace/cards/hui-light-card.ts | 31 ++++++++++++---------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index cde25a7135..83058920c9 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -1,4 +1,9 @@
-import { html, LitElement, PropertyValues } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  PropertyValues,
+  PropertyDeclarations,
+} from "@polymer/lit-element";
 import { fireEvent } from "../../../common/dom/fire_event.js";
 import { styleMap } from "lit-html/directives/styleMap.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
@@ -40,18 +45,18 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
   private _config?: Config;
   private _brightnessTimout?: number;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
       hass: {},
       _config: {},
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 2;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.entity || config.entity.split(".")[0] !== "light") {
       throw new Error("Specify an entity from within the light domain.");
     }
@@ -59,7 +64,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     this._config = config;
   }
 
-  protected render() {
+  protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
@@ -107,7 +112,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.get("hass")) {
       return (
         (changedProps.get("hass") as any).states[this._config!.entity] !==
@@ -117,7 +122,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     return (changedProps as unknown) as boolean;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     const brightness = this.hass!.states[this._config!.entity].attributes
       .brightness;
     jQuery("#light", this.shadowRoot).roundSlider({
@@ -131,7 +136,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
       (Math.round((brightness / 254) * 100) || 0) + "%";
   }
 
-  protected updated() {
+  protected updated(): void {
     const attrs = this.hass!.states[this._config!.entity].attributes;
 
     jQuery("#light", this.shadowRoot).roundSlider({
@@ -243,18 +248,18 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private _dragEvent(e) {
+  private _dragEvent(e: any): void {
     this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
   }
 
-  private _showBrightness() {
+  private _showBrightness(): void {
     clearTimeout(this._brightnessTimout);
     this.shadowRoot!.querySelector(".brightness")!.classList.add(
       "show_brightness"
     );
   }
 
-  private _hideBrightness() {
+  private _hideBrightness(): void {
     this._brightnessTimout = window.setTimeout(() => {
       this.shadowRoot!.querySelector(".brightness")!.classList.remove(
         "show_brightness"
@@ -262,7 +267,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     }, 500);
   }
 
-  private _setBrightness(e) {
+  private _setBrightness(e: any): void {
     this.hass!.callService("light", "turn_on", {
       entity_id: this._config!.entity,
       brightness_pct: e.value,
@@ -288,7 +293,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
     return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
   }
 
-  private _handleClick(hold: boolean) {
+  private _handleClick(hold: boolean): void {
     const entityId = this._config!.entity;
 
     if (hold) {

From f7458b8d41a661628b28d3d5329f5c984d4767d3 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 20:12:20 -0400
Subject: [PATCH 34/67] Add Hs_color to types

---
 src/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/types.ts b/src/types.ts
index b0d3fd2a88..5a3e209cfa 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -118,5 +118,6 @@ export type LightEntity = HassEntityBase & {
     max_mireds: number;
     friendly_name: string;
     brightness: number;
+    hs_color: string[];
   };
 };

From a5304115f0d29860eed3fb7360d6c01519b76b4f Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 22:24:23 -0400
Subject: [PATCH 35/67] UPdate Type for color

---
 src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types.ts b/src/types.ts
index 5a3e209cfa..6cc016d2ee 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -118,6 +118,6 @@ export type LightEntity = HassEntityBase & {
     max_mireds: number;
     friendly_name: string;
     brightness: number;
-    hs_color: string[];
+    hs_color: number[];
   };
 };

From 5a1ca3855b2ffd3394519fc50156f86d0f09177b Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 08:38:27 +0100
Subject: [PATCH 36/67] Propagate hass correctly (#1918)

---
 .../lovelace/cards/hui-entities-card.ts       | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 55eddca2bc..ff064930f4 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -1,4 +1,10 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
 
 import "../../../components/ha-card.js";
 import "../components/hui-entities-toggle.js";
@@ -36,13 +42,19 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
   protected _config?: Config;
   protected _configEntities?: ConfigEntity[];
 
-  set hass(hass) {
+  set hass(hass: HomeAssistant) {
     this._hass = hass;
-    this.shadowRoot!.querySelectorAll("#states > *").forEach(
+    this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
       (element: unknown) => {
         (element as EntityRow).hass = hass;
       }
     );
+    const entitiesToggle = this.shadowRoot!.querySelector(
+      "hui-entities-toggle"
+    );
+    if (entitiesToggle) {
+      (entitiesToggle as any).hass = hass;
+    }
   }
 
   static get properties(): PropertyDeclarations {
@@ -51,7 +63,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     if (!this._config) {
       return 0;
     }
@@ -59,7 +71,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     return (this._config.title ? 1 : 0) + this._config.entities.length;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     const entities = processConfigEntities(config.entities);
     for (const entity of entities) {
       if (
@@ -78,14 +90,18 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     this._configEntities = entities;
   }
 
-  protected render() {
+  protected updated(_changedProperties: PropertyValues): void {
+    if (this._hass && this._config) {
+      applyThemesOnElement(this, this._hass.themes, this._config.theme);
+    }
+  }
+
+  protected render(): TemplateResult {
     if (!this._config || !this._hass) {
       return html``;
     }
     const { show_header_toggle, title } = this._config;
 
-    applyThemesOnElement(this, this._hass.themes, this._config.theme);
-
     return html`
       ${this.renderStyle()}
       <ha-card>
@@ -104,8 +120,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
                     .entities="${this._configEntities!.map(
                       (conf) => conf.entity
                     )}"
-                  >
-                  </hui-entities-toggle>`
+                  ></hui-entities-toggle>`
               }
             </div>`
         }
@@ -118,7 +133,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         ha-card {
@@ -153,7 +168,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private renderEntity(entityConf) {
+  private renderEntity(entityConf: ConfigEntity): TemplateResult {
     const element = createRowElement(entityConf);
     if (this._hass) {
       element.hass = this._hass;
@@ -169,9 +184,8 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
     return html`<div>${element}</div>`;
   }
 
-  private _handleClick(entityConf: ConfigEntity) {
+  private _handleClick(entityConf: ConfigEntity): void {
     const entityId = entityConf.entity;
-
     fireEvent(this, "hass-more-info", { entityId });
   }
 }

From 91966f676ad9544cf16ded2d9492139e68f59a08 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 09:25:04 +0100
Subject: [PATCH 37/67] Update polymer (#1921)

---
 package.json |    3 +-
 yarn.lock    | 2970 ++++++++++++++++----------------------------------
 2 files changed, 950 insertions(+), 2023 deletions(-)

diff --git a/package.json b/package.json
index a6af340147..0e19a0fe04 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,6 @@
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^1.4.0",
     "html-loader": "^0.5.5",
-    "html-minifier": "^3.5.20",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.1.0",
     "lint-staged": "^7.3.0",
@@ -154,7 +153,7 @@
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
     "type-detect": "1.0.0",
-    "@polymer/polymer": "3.0.5",
+    "@polymer/polymer": "3.1.0",
     "@webcomponents/webcomponentsjs": "2.1.3",
     "@webcomponents/shadycss": "^1.5.2",
     "@vaadin/vaadin-overlay": "3.2.0-alpha3",
diff --git a/yarn.lock b/yarn.lock
index acec776d59..4905a9ec53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,22 +2,6 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.35.tgz#04eeb6dca7efef8f65776a4c214157303b85ad51"
-  integrity sha512-l0SE8cl9DUIY4hYAFAKTLX3F2Yr14Qri7uTsuI7iegB5E4KyQy4XY72L3VOxmj6kwR/RDQURoKYr2NzyETGo7A==
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
-"@babel/code-frame@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz#becd805482734440c9d137e46d77340e64d7f51b"
-  integrity sha1-vs2AVIJzREDJ0TfkbXc0DmTX9Rs=
-  dependencies:
-    "@babel/highlight" "7.0.0-beta.49"
-
 "@babel/code-frame@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
@@ -25,28 +9,7 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/core@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.49.tgz#73de2081dd652489489f0cb4aa97829a1133314e"
-  integrity sha1-c94ggd1lJIlInwy0qpeCmhEzMU4=
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.49"
-    "@babel/generator" "7.0.0-beta.49"
-    "@babel/helpers" "7.0.0-beta.49"
-    "@babel/parser" "7.0.0-beta.49"
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-    convert-source-map "^1.1.0"
-    debug "^3.1.0"
-    json5 "^0.5.0"
-    lodash "^4.17.5"
-    micromatch "^2.3.11"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.1.2":
+"@babel/core@^7.0.0", "@babel/core@^7.1.2":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.2.tgz#f8d2a9ceb6832887329a7b60f9d035791400ba4e"
   integrity sha512-IFeSSnjXdhDaoysIlev//UzHZbdEmm7D0EIH2qtse9xK7mXEZQpYjs2P00XlP1qYsYvid79p+Zgg6tz1mp6iVw==
@@ -66,17 +29,6 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@7.0.0-beta.49", "@babel/generator@^7.0.0-beta.42":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.49.tgz#e9cffda913996accec793bbc25ab91bc19d0bf7a"
-  integrity sha1-6c/9qROZaszseTu8JauRvBnQv3o=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-    jsesc "^2.5.1"
-    lodash "^4.17.5"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
 "@babel/generator@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0.tgz#1efd58bffa951dc846449e58ce3a1d7f02d393aa"
@@ -88,7 +40,7 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@^7.1.2", "@babel/generator@^7.1.3":
+"@babel/generator@^7.0.0-beta.42", "@babel/generator@^7.1.2", "@babel/generator@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.3.tgz#2103ec9c42d9bdad9190a6ad5ff2d456fd7b8673"
   integrity sha512-ZoCZGcfIJFJuZBqxcY9OjC1KW2lWK64qrX1o4UYL3yshVhwKFYgzpWZ0vvtGMNJdTlvkw0W+HR1VnYN8q3QPFQ==
@@ -99,20 +51,6 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/helper-annotate-as-pure@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.35.tgz#d391e76ccb1a6b417007a2b774c688539e115fdb"
-  integrity sha512-bc2idaE5XgHlyZX7TT+9ij2hhUFa21KVffQY6FTwDRT8BgqgFhIzLMFLRfk7Bd9jj+YwuydHCbdp5jXbeGFfRg==
-  dependencies:
-    "@babel/types" "7.0.0-beta.35"
-
-"@babel/helper-annotate-as-pure@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.49.tgz#7d9005d54fe7ad6cb876790251e75575419186e9"
-  integrity sha1-fZAF1U/nrWy4dnkCUedVdUGRhuk=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -120,14 +58,6 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.0.0-beta.49.tgz#c62dd5042b54a590d5e71e6020c46b91d6c6c875"
-  integrity sha1-xi3VBCtUpZDV5x5gIMRrkdbGyHU=
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
@@ -144,15 +74,6 @@
     "@babel/types" "^7.0.0"
     esutils "^2.0.0"
 
-"@babel/helper-call-delegate@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.0.0-beta.49.tgz#4b5d41782a683d5dc6497834a32310a8d02a3af9"
-  integrity sha1-S11BeCpoPV3GSXg0oyMQqNAqOvk=
-  dependencies:
-    "@babel/helper-hoist-variables" "7.0.0-beta.49"
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-call-delegate@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.1.0.tgz#6a957f105f37755e8645343d3038a22e1449cc4a"
@@ -162,15 +83,6 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-define-map@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.0.0-beta.35.tgz#38dea093c57565dc50ac96ead46e355e12985ced"
-  integrity sha512-bS+6/gvj/iq4TtGZuL2//X7RunihWjS+Hp2o/3cPopvU3CK9IPFPpPZc7NiqjPcvlUc47lzHRO+uk77GBONojQ==
-  dependencies:
-    "@babel/helper-function-name" "7.0.0-beta.35"
-    "@babel/types" "7.0.0-beta.35"
-    lodash "^4.2.0"
-
 "@babel/helper-define-map@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
@@ -180,14 +92,6 @@
     "@babel/types" "^7.0.0"
     lodash "^4.17.10"
 
-"@babel/helper-explode-assignable-expression@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.0.0-beta.49.tgz#2bfb95df7ec130735bf655e44a217a70d3b13e93"
-  integrity sha1-K/uV337BMHNb9lXkSiF6cNOxPpM=
-  dependencies:
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-explode-assignable-expression@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
@@ -196,24 +100,6 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-function-name@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.35.tgz#b2fc51a59fe95fcc56ee5e9db21c500606ea2fab"
-  integrity sha512-+216NxQ7/Lvj+iehFBKEhYU/BQ1aqHTWz1bxCDiQWms0qi23iqHA4r+WdRKW/o5dAV5mlTUL4nCBFaNx8LNnRQ==
-  dependencies:
-    "@babel/helper-get-function-arity" "7.0.0-beta.35"
-    "@babel/template" "7.0.0-beta.35"
-    "@babel/types" "7.0.0-beta.35"
-
-"@babel/helper-function-name@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.49.tgz#a25c1119b9f035278670126e0225c03041c8de32"
-  integrity sha1-olwRGbnwNSeGcBJuAiXAMEHI3jI=
-  dependencies:
-    "@babel/helper-get-function-arity" "7.0.0-beta.49"
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-function-name@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
@@ -223,20 +109,6 @@
     "@babel/template" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-get-function-arity@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.35.tgz#7f3c86d6646527a03423d42cf0fd06a26718d7cb"
-  integrity sha512-8co9nT1MgbNoGl6too2/jwldu5F7O1rMi+/QsM9bmFuCu76rU5okFWi4cb4Uv0WXZ4BWk6x+Lpdzzu7EgvkAwA==
-  dependencies:
-    "@babel/types" "7.0.0-beta.35"
-
-"@babel/helper-get-function-arity@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.49.tgz#cf5023f32d2ad92d087374939cec0951bcb51441"
-  integrity sha1-z1Aj8y0q2S0Ic3STnOwJUby1FEE=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-get-function-arity@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
@@ -244,13 +116,6 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-hoist-variables@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0-beta.49.tgz#d9740651c93bb4fa79c1b6bac634051fc4d03ff5"
-  integrity sha1-2XQGUck7tPp5wba6xjQFH8TQP/U=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-hoist-variables@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0.tgz#46adc4c5e758645ae7a45deb92bab0918c23bb88"
@@ -258,13 +123,6 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-member-expression-to-functions@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0-beta.49.tgz#2f642b003d45155e0a9e7a4ad0e688d91bbc1583"
-  integrity sha1-L2QrAD1FFV4KnnpK0OaI2Ru8FYM=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-member-expression-to-functions@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.0.0.tgz#8cd14b0a0df7ff00f009e7d7a436945f47c7a16f"
@@ -272,14 +130,6 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-module-imports@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.49.tgz#41d7d59891016c493432a46f7464446552890c75"
-  integrity sha1-QdfVmJEBbEk0MqRvdGREZVKJDHU=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-    lodash "^4.17.5"
-
 "@babel/helper-module-imports@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@@ -287,18 +137,6 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-module-transforms@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.0.0-beta.49.tgz#fc660bda9d6497412e18776a71aed9a9e2e5f7ad"
-  integrity sha1-/GYL2p1kl0EuGHdqca7ZqeLl960=
-  dependencies:
-    "@babel/helper-module-imports" "7.0.0-beta.49"
-    "@babel/helper-simple-access" "7.0.0-beta.49"
-    "@babel/helper-split-export-declaration" "7.0.0-beta.49"
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-    lodash "^4.17.5"
-
 "@babel/helper-module-transforms@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.1.0.tgz#470d4f9676d9fad50b324cdcce5fbabbc3da5787"
@@ -311,20 +149,6 @@
     "@babel/types" "^7.0.0"
     lodash "^4.17.10"
 
-"@babel/helper-optimise-call-expression@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-beta.35.tgz#3adc8c5347b4a8d4ef8b117d99535f6fa3b61a71"
-  integrity sha512-hr/P3XTAtN5wppGLP4yrOUbvIyOQPmEG6EVsCSE5z0yUueNQzuCxXp0v7sx7/V+c0eP3XLy/lVsuM96cS3VUKQ==
-  dependencies:
-    "@babel/types" "7.0.0-beta.35"
-
-"@babel/helper-optimise-call-expression@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0-beta.49.tgz#a98b43c3a6c54bef48f87b10dc4568dec0b41bf7"
-  integrity sha1-qYtDw6bFS+9I+HsQ3EVo3sC0G/c=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-optimise-call-expression@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
@@ -332,23 +156,11 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-plugin-utils@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0-beta.49.tgz#0e9fcbb834f878bb365d2a8ea90eee21ba3ccd23"
-  integrity sha1-Dp/LuDT4eLs2XSqOqQ7uIbo8zSM=
-
 "@babel/helper-plugin-utils@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
-"@babel/helper-regex@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0-beta.49.tgz#ff244f19c2a2f167ff4b3165a636b08fd641816b"
-  integrity sha1-/yRPGcKi8Wf/SzFlpjawj9ZBgWs=
-  dependencies:
-    lodash "^4.17.5"
-
 "@babel/helper-regex@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
@@ -356,17 +168,6 @@
   dependencies:
     lodash "^4.17.10"
 
-"@babel/helper-remap-async-to-generator@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.0.0-beta.49.tgz#b3fdaab412784d7e8657bacab286923efc9498b8"
-  integrity sha1-s/2qtBJ4TX6GV7rKsoaSPvyUmLg=
-  dependencies:
-    "@babel/helper-annotate-as-pure" "7.0.0-beta.49"
-    "@babel/helper-wrap-function" "7.0.0-beta.49"
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-remap-async-to-generator@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
@@ -378,26 +179,6 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-replace-supers@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-beta.35.tgz#fb59070aba45002d09898c8dfb8f8ac05bde4d19"
-  integrity sha512-ez6sOMdXeFzGlg2Qbyi//2nbBrftC7RzMpN671Hd87ITP2af3feEWYEKC5O0EXLCcgaNBzNntkScRGV9ez03wg==
-  dependencies:
-    "@babel/helper-optimise-call-expression" "7.0.0-beta.35"
-    "@babel/template" "7.0.0-beta.35"
-    "@babel/traverse" "7.0.0-beta.35"
-    "@babel/types" "7.0.0-beta.35"
-
-"@babel/helper-replace-supers@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.0.0-beta.49.tgz#e7444c718057f6a0a3645caf8e78fb546ffb0d9f"
-  integrity sha1-50RMcYBX9qCjZFyvjnj7VG/7DZ8=
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "7.0.0-beta.49"
-    "@babel/helper-optimise-call-expression" "7.0.0-beta.49"
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-replace-supers@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.1.0.tgz#5fc31de522ec0ef0899dc9b3e7cf6a5dd655f362"
@@ -408,15 +189,6 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-simple-access@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.0.0-beta.49.tgz#97a41e2789a9bf8a6c30536a258b79e7444c5d82"
-  integrity sha1-l6QeJ4mpv4psMFNqJYt550RMXYI=
-  dependencies:
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-    lodash "^4.17.5"
-
 "@babel/helper-simple-access@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
@@ -425,13 +197,6 @@
     "@babel/template" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-split-export-declaration@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.49.tgz#40d78eda0968d011b1c52866e5746cfb23e57548"
-  integrity sha1-QNeO2glo0BGxxShm5XRs+yPldUg=
-  dependencies:
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-split-export-declaration@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813"
@@ -439,16 +204,6 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-wrap-function@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.0.0-beta.49.tgz#385591460b4d93ef96ee3819539c0cdc9bbd4758"
-  integrity sha1-OFWRRgtNk++W7jgZU5wM3Ju9R1g=
-  dependencies:
-    "@babel/helper-function-name" "7.0.0-beta.49"
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helper-wrap-function@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.1.0.tgz#8cf54e9190706067f016af8f75cb3df829cc8c66"
@@ -459,15 +214,6 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helpers@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.0.0-beta.49.tgz#054d84032d4e94286a80586500068e41005a51d0"
-  integrity sha1-BU2EAy1OlChqgFhlAAaOQQBaUdA=
-  dependencies:
-    "@babel/template" "7.0.0-beta.49"
-    "@babel/traverse" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-
 "@babel/helpers@^7.1.2":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.2.tgz#ab752e8c35ef7d39987df4e8586c63b8846234b5"
@@ -477,15 +223,6 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.1.2"
 
-"@babel/highlight@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.49.tgz#96bdc6b43e13482012ba6691b1018492d39622cc"
-  integrity sha1-lr3GtD4TSCASumaRsQGEktOWIsw=
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 "@babel/highlight@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
@@ -495,11 +232,6 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.0.0-beta.49.tgz#944d0c5ba2812bb159edbd226743afd265179bdc"
-  integrity sha1-lE0MW6KBK7FZ7b0iZ0Ov0mUXm9w=
-
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.0.tgz#a7cd42cb3c12aec52e24375189a47b39759b783e"
@@ -517,23 +249,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-external-helpers@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.0.0-beta.49.tgz#c67ffa9e23d7063810b0d4304857bf5c16f8a35b"
-  integrity sha1-xn/6niPXBjgQsNQwSFe/XBb4o1s=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-proposal-async-generator-functions@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.0.0-beta.49.tgz#8761a5e2d8b5251e70df28f4d0aa64aa28a596b1"
-  integrity sha1-h2Gl4ti1JR5w3yj00KpkqiillrE=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    "@babel/helper-remap-async-to-generator" "7.0.0-beta.49"
-    "@babel/plugin-syntax-async-generators" "7.0.0-beta.49"
-
-"@babel/plugin-proposal-async-generator-functions@^7.1.0":
+"@babel/plugin-proposal-async-generator-functions@^7.0.0", "@babel/plugin-proposal-async-generator-functions@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce"
   integrity sha512-Fq803F3Jcxo20MXUSDdmZZXrPe6BWyGcWBPPNB/M7WaUYESKDeKMOGIxEzQOjGSmW/NWb6UaPZrtTB2ekhB/ew==
@@ -558,14 +274,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0-beta.49.tgz#6d0cd60f7a7bd7c444a371c4e9470bff02f5777c"
-  integrity sha1-bQzWD3p718REo3HE6UcL/wL1d3w=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    "@babel/plugin-syntax-object-rest-spread" "7.0.0-beta.49"
-
 "@babel/plugin-proposal-optional-catch-binding@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.0.0.tgz#b610d928fe551ff7117d42c8bb410eec312a6425"
@@ -583,13 +291,6 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.2.0"
 
-"@babel/plugin-syntax-async-generators@7.0.0-beta.49", "@babel/plugin-syntax-async-generators@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0-beta.49.tgz#50ee943002aedc9ab3a8d12292bd35dd9edb1df8"
-  integrity sha1-UO6UMAKu3JqzqNEikr013Z7bHfg=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-syntax-async-generators@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.0.0.tgz#bf0891dcdbf59558359d0c626fdc9490e20bc13c"
@@ -604,19 +305,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-dynamic-import@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0-beta.49.tgz#f0af7ac6b53676a496093d4a6e2a2ec655c07b78"
-  integrity sha1-8K96xrU2dqSWCT1KbiouxlXAe3g=
+"@babel/plugin-syntax-import-meta@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.0.0.tgz#ca946b73216c29c39a55ef2d739097fee8a85d69"
+  integrity sha512-FEoGvhXVAiWzpDjyZIlBGzKyNk/lnRPy7aPke3PjVkiAY0QFsvFfkjUg5diRwVfowBA8SJqvFt0ZoXNSjl70hQ==
   dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-syntax-import-meta@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.0.0-beta.49.tgz#c7acc8a536658313f624f4f595cf09147ac8426c"
-  integrity sha1-x6zIpTZlgxP2JPT1lc8JFHrIQmw=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-syntax-json-strings@^7.0.0":
   version "7.0.0"
@@ -632,13 +326,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-object-rest-spread@7.0.0-beta.49", "@babel/plugin-syntax-object-rest-spread@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0-beta.49.tgz#4784b3880823ff12e742c26b41e9857f701d639e"
-  integrity sha1-R4SziAgj/xLnQsJrQemFf3AdY54=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-syntax-object-rest-spread@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0.tgz#37d8fbcaf216bd658ea1aebbeb8b75e88ebc549b"
@@ -667,23 +354,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.0.0-beta.49.tgz#dd3845b63c683d187d5186ee0e882c4046c4f0e3"
-  integrity sha1-3ThFtjxoPRh9UYbuDogsQEbE8OM=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-async-to-generator@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.0.0-beta.49.tgz#911a40eb93040186ceb693105ca76def7fe97d03"
-  integrity sha1-kRpA65MEAYbOtpMQXKdt73/pfQM=
-  dependencies:
-    "@babel/helper-module-imports" "7.0.0-beta.49"
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    "@babel/helper-remap-async-to-generator" "7.0.0-beta.49"
-
-"@babel/plugin-transform-async-to-generator@^7.1.0":
+"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.1.0.tgz#109e036496c51dd65857e16acab3bafdf3c57811"
   integrity sha512-rNmcmoQ78IrvNCIt/R9U+cixUHeYAzgusTFgIAv+wQb9HJU4szhpDD6e5GCACmj/JP5KxuCwM96bX3L9v4ZN/g==
@@ -699,13 +370,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-block-scoped-functions@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.0.0-beta.49.tgz#7aa9f46fdf873b7211aaa2eb0d37c4c371a1abd2"
-  integrity sha1-eqn0b9+HO3IRqqLrDTfEw3Ghq9I=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-block-scoping@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.0.0.tgz#1745075edffd7cdaf69fab2fb6f9694424b7e9bc"
@@ -714,26 +378,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.10"
 
-"@babel/plugin-transform-block-scoping@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.0.0-beta.49.tgz#dd5a9ddd986775c8b20cf5b61065afb3dd9eaac9"
-  integrity sha1-3Vqd3ZhndciyDPW2EGWvs92eqsk=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    lodash "^4.17.5"
-
-"@babel/plugin-transform-classes@=7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.0.0-beta.35.tgz#ae1367d9c41081528f87d5770f6b8c6ee7141b52"
-  integrity sha512-D71nw+Brh7IWSHiW4/JDux5EhT4gyMYG1WJVjaXl6D6DQhOFlZf5otUVrVX6IxEQaco3B2dlEBDEt/UXvf9E2Q==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "7.0.0-beta.35"
-    "@babel/helper-define-map" "7.0.0-beta.35"
-    "@babel/helper-function-name" "7.0.0-beta.35"
-    "@babel/helper-optimise-call-expression" "7.0.0-beta.35"
-    "@babel/helper-replace-supers" "7.0.0-beta.35"
-
-"@babel/plugin-transform-classes@^7.1.0":
+"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.1.0.tgz#ab3f8a564361800cbc8ab1ca6f21108038432249"
   integrity sha512-rNaqoD+4OCBZjM7VaskladgqnZ1LO6o2UxuWSDzljzW21pN1KXkB7BstAVweZdxQkHAujps5QMNOTWesBciKFg==
@@ -754,13 +399,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-computed-properties@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.0.0-beta.49.tgz#b8259d174bf07ab4b56566562b46ee6520c3dfd2"
-  integrity sha1-uCWdF0vwerS1ZWZWK0buZSDD39I=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-destructuring@^7.0.0":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.1.3.tgz#e69ff50ca01fac6cb72863c544e516c2b193012f"
@@ -768,13 +406,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.0.0-beta.49.tgz#4366392c9c82d1231056c1d0029438a60d362b82"
-  integrity sha1-Q2Y5LJyC0SMQVsHQApQ4pg02K4I=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-dotall-regex@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.0.0.tgz#73a24da69bc3c370251f43a3d048198546115e58"
@@ -791,22 +422,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-duplicate-keys@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.0.0-beta.49.tgz#fac244809ddecbf095e375558ccb716da1042316"
-  integrity sha1-+sJEgJ3ey/CV43VVjMtxbaEEIxY=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-exponentiation-operator@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.0.0-beta.49.tgz#457b2d09004794684aa6e1b04015080b80a08a14"
-  integrity sha1-RXstCQBHlGhKpuGwQBUIC4CgihQ=
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "7.0.0-beta.49"
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-exponentiation-operator@^7.1.0":
+"@babel/plugin-transform-exponentiation-operator@^7.0.0", "@babel/plugin-transform-exponentiation-operator@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.1.0.tgz#9c34c2ee7fd77e02779cfa37e403a2e1003ccc73"
   integrity sha512-uZt9kD1Pp/JubkukOGQml9tqAeI8NkE98oZnHZ2qHRElmeKCodbTZgOEUtujSCSLhHSBWbzNiFSDIMC4/RBTLQ==
@@ -821,22 +437,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-for-of@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.0.0-beta.49.tgz#3ec72726bf1d89a0d4d511be7a9549066f57aade"
-  integrity sha1-PscnJr8diaDU1RG+epVJBm9Xqt4=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-function-name@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.0.0-beta.49.tgz#af39f60e7aefce9b25eb4adcedd04d50866ce218"
-  integrity sha1-rzn2Dnrvzpsl60rc7dBNUIZs4hg=
-  dependencies:
-    "@babel/helper-function-name" "7.0.0-beta.49"
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-function-name@^7.1.0":
+"@babel/plugin-transform-function-name@^7.0.0", "@babel/plugin-transform-function-name@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.1.0.tgz#29c5550d5c46208e7f730516d41eeddd4affadbb"
   integrity sha512-VxOa1TMlFMtqPW2IDYZQaHsFrq/dDoIjgN098NowhexhZcz3UGlvPgZXuE1jEvNygyWyxRacqDpCZt+par1FNg==
@@ -844,12 +445,12 @@
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-instanceof@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-instanceof/-/plugin-transform-instanceof-7.0.0-beta.49.tgz#e325f9c771b1f9fb26df953d7780210bb587abf8"
-  integrity sha1-4yX5x3Gx+fsm35U9d4AhC7WHq/g=
+"@babel/plugin-transform-instanceof@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-instanceof/-/plugin-transform-instanceof-7.0.0.tgz#0cdbd26ba85825b0bc94ea3aca2224442b0a8400"
+  integrity sha512-Dv6MtJZOjjGjnHlSwQVpYlwZBkPzaWX/1zoHUW82fmKmUNOp+XnYA1lCYCB+7RXkX8rBa6IuNZ9Y8u3MLJCxuQ==
   dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-literals@^7.0.0":
   version "7.0.0"
@@ -858,22 +459,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-literals@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.0.0-beta.49.tgz#07c838254d65e6867e86513eb0f22d5f26b0a56a"
-  integrity sha1-B8g4JU1l5oZ+hlE+sPItXyawpWo=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-modules-amd@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.0.0-beta.49.tgz#16d07480954b0415ea70f1ec3edbd0597bd3ddfe"
-  integrity sha1-FtB0gJVLBBXqcPHsPtvQWXvT3f4=
-  dependencies:
-    "@babel/helper-module-transforms" "7.0.0-beta.49"
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-modules-amd@^7.1.0":
+"@babel/plugin-transform-modules-amd@^7.0.0", "@babel/plugin-transform-modules-amd@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.1.0.tgz#f9e0a7072c12e296079b5a59f408ff5b97bf86a8"
   integrity sha512-wt8P+xQ85rrnGNr2x1iV3DW32W8zrB6ctuBkYBbf5/ZzJY99Ob4MFgsZDFgczNU76iy9PWsy4EuxOliDjdKw6A==
@@ -913,15 +499,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-object-super@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.0.0-beta.49.tgz#b302f55702847343c10ff4fb8435cc3574755fe3"
-  integrity sha1-swL1VwKEc0PBD/T7hDXMNXR1X+M=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    "@babel/helper-replace-supers" "7.0.0-beta.49"
-
-"@babel/plugin-transform-object-super@^7.1.0":
+"@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.1.0.tgz#b1ae194a054b826d8d4ba7ca91486d4ada0f91bb"
   integrity sha512-/O02Je1CRTSk2SSJaq0xjwQ8hG4zhZGNjE8psTsSNPXyLRCODv7/PBozqT5AmQMzp7MI3ndvMhGdqp9c96tTEw==
@@ -929,16 +507,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.1.0"
 
-"@babel/plugin-transform-parameters@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.0.0-beta.49.tgz#1cad71a2a33281e5efbb1a4623a964c073ce9a2d"
-  integrity sha1-HK1xoqMygeXvuxpGI6lkwHPOmi0=
-  dependencies:
-    "@babel/helper-call-delegate" "7.0.0-beta.49"
-    "@babel/helper-get-function-arity" "7.0.0-beta.49"
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
-"@babel/plugin-transform-parameters@^7.1.0":
+"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.1.0.tgz#44f492f9d618c9124026e62301c296bf606a7aed"
   integrity sha512-vHV7oxkEJ8IHxTfRr3hNGzV446GAb+0hgbA7o/0Jd76s+YzccdWuTU296FOCOl/xweU4t/Ya4g41yWz80RFCRw==
@@ -963,13 +532,6 @@
   dependencies:
     regenerator-transform "^0.13.3"
 
-"@babel/plugin-transform-regenerator@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.0.0-beta.49.tgz#d4ed7967033f4f5b49363c203503899b8357cae2"
-  integrity sha1-1O15ZwM/T1tJNjwgNQOJm4NXyuI=
-  dependencies:
-    regenerator-transform "^0.12.3"
-
 "@babel/plugin-transform-shorthand-properties@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.0.0.tgz#85f8af592dcc07647541a0350e8c95c7bf419d15"
@@ -977,13 +539,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.0.0-beta.49.tgz#49f134dbde4f655834c21524e9e61a58d4e17900"
-  integrity sha1-SfE0295PZVg0whUk6eYaWNTheQA=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-spread@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.0.0.tgz#93583ce48dd8c85e53f3a46056c856e4af30b49b"
@@ -991,13 +546,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-spread@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.0.0-beta.49.tgz#6abab05fc0cca829aaf9e2a85044b79763e681ca"
-  integrity sha1-arqwX8DMqCmq+eKoUES3l2Pmgco=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-sticky-regex@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.0.0.tgz#30a9d64ac2ab46eec087b8530535becd90e73366"
@@ -1006,14 +554,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
 
-"@babel/plugin-transform-sticky-regex@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.0.0-beta.49.tgz#08cc5b64cf6a5942a87bdd9b4a4818d4cba12df3"
-  integrity sha1-CMxbZM9qWUKoe92bSkgY1MuhLfM=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    "@babel/helper-regex" "7.0.0-beta.49"
-
 "@babel/plugin-transform-template-literals@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.0.0.tgz#084f1952efe5b153ddae69eb8945f882c7a97c65"
@@ -1022,14 +562,6 @@
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-template-literals@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.0.0-beta.49.tgz#e609aed6b8fcc7e1ebccacf22138a647202940a2"
-  integrity sha1-5gmu1rj8x+HrzKzyITimRyApQKI=
-  dependencies:
-    "@babel/helper-annotate-as-pure" "7.0.0-beta.49"
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-typeof-symbol@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.0.0.tgz#4dcf1e52e943e5267b7313bff347fdbe0f81cec9"
@@ -1037,13 +569,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typeof-symbol@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.0.0-beta.49.tgz#365141ba355bf739eefd6c2bb9df1c3b7146e450"
-  integrity sha1-NlFBujVb9znu/Wwrud8cO3FG5FA=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-
 "@babel/plugin-transform-typescript@^7.0.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.1.0.tgz#81e7b4be90e7317cbd04bf1163ebf06b2adee60b"
@@ -1061,15 +586,6 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.0.0-beta.49.tgz#c375db5709757621523d41acb62a9abf0d4374b8"
-  integrity sha1-w3XbVwl1diFSPUGstiqavw1DdLg=
-  dependencies:
-    "@babel/helper-plugin-utils" "7.0.0-beta.49"
-    "@babel/helper-regex" "7.0.0-beta.49"
-    regexpu-core "^4.1.3"
-
 "@babel/preset-env@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.0.tgz#e67ea5b0441cfeab1d6f41e9b5c79798800e8d11"
@@ -1125,26 +641,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.0.0"
 
-"@babel/template@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.35.tgz#459230417f51c29401cf71162aeeff6cef2bcca7"
-  integrity sha512-NLd3Dfs8hmkxPvaD8ohNtEp9WXp48lxpW//6fXcT9bJWIO3isrH3OTYL9kjX7xFPPasJ1E9bUNSaPFUUgvPZSQ==
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.35"
-    "@babel/types" "7.0.0-beta.35"
-    babylon "7.0.0-beta.35"
-    lodash "^4.2.0"
-
-"@babel/template@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.49.tgz#e38abe8217cb9793f461a5306d7ad745d83e1d27"
-  integrity sha1-44q+ghfLl5P0YaUwbXrXRdg+HSc=
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.49"
-    "@babel/parser" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-    lodash "^4.17.5"
-
 "@babel/template@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.0.tgz#58cc9572e1bfe24fe1537fdf99d839d53e517e22"
@@ -1163,36 +659,6 @@
     "@babel/parser" "^7.1.2"
     "@babel/types" "^7.1.2"
 
-"@babel/traverse@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.35.tgz#c91819807b7ac256d2f6dd5aaa94d4c66e06bbc5"
-  integrity sha512-oj2mjz/20iiDt+X0mlzE2IEkzLyM0nmT1zSUy/6i6vyzitVeoyRaHoM7O81gmAHSfBSqyjWRU0OuD9VIUgj8Vg==
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.35"
-    "@babel/helper-function-name" "7.0.0-beta.35"
-    "@babel/types" "7.0.0-beta.35"
-    babylon "7.0.0-beta.35"
-    debug "^3.0.1"
-    globals "^10.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-"@babel/traverse@7.0.0-beta.49", "@babel/traverse@^7.0.0-beta.42", "@babel/traverse@^7.0.0-beta.46":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.49.tgz#4f2a73682a18334ed6625d100a8d27319f7c2d68"
-  integrity sha1-TypzaCoYM07WYl0QCo0nMZ98LWg=
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.49"
-    "@babel/generator" "7.0.0-beta.49"
-    "@babel/helper-function-name" "7.0.0-beta.49"
-    "@babel/helper-split-export-declaration" "7.0.0-beta.49"
-    "@babel/parser" "7.0.0-beta.49"
-    "@babel/types" "7.0.0-beta.49"
-    debug "^3.1.0"
-    globals "^11.1.0"
-    invariant "^2.2.0"
-    lodash "^4.17.5"
-
 "@babel/traverse@^7.0.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.0.tgz#503ec6669387efd182c3888c4eec07bcc45d91b2"
@@ -1208,7 +674,7 @@
     globals "^11.1.0"
     lodash "^4.17.10"
 
-"@babel/traverse@^7.1.0":
+"@babel/traverse@^7.0.0-beta.42", "@babel/traverse@^7.1.0":
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.4.tgz#f4f83b93d649b4b2c91121a9087fa2fa949ec2b4"
   integrity sha512-my9mdrAIGdDiSVBuMjpn/oXYpva0/EZwWL3sm3Wcy/AVWO2eXnsoZruOT9jOGNRXU8KbCIu5zsKnXcAJ6PcV6Q==
@@ -1223,24 +689,6 @@
     globals "^11.1.0"
     lodash "^4.17.10"
 
-"@babel/types@7.0.0-beta.35":
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.35.tgz#cf933a9a9a38484ca724b335b88d83726d5ab960"
-  integrity sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@7.0.0-beta.49", "@babel/types@^7.0.0-beta.42":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.49.tgz#b7e3b1c3f4d4cfe11bdf8c89f1efd5e1617b87a6"
-  integrity sha1-t+Oxw/TUz+Eb34yJ8e/V4WF7h6Y=
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.5"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0.tgz#6e191793d3c854d19c6749989e3bc55f0e962118"
@@ -1250,7 +698,7 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.1.2", "@babel/types@^7.1.3":
+"@babel/types@^7.0.0-beta.42", "@babel/types@^7.1.2", "@babel/types@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.3.tgz#3a767004567060c2f40fca49a304712c525ee37d"
   integrity sha512-RpPOVfK+yatXyn8n4PB1NW6k9qjinrXrRR8ugBN8fD6hCy5RXI6PSbVqpOJBO9oSaY7Nom4ohj35feb0UR9hSA==
@@ -1322,9 +770,9 @@
     glob-to-regexp "^0.3.0"
 
 "@nodelib/fs.stat@^1.0.1":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.0.tgz#50c1e2260ac0ed9439a181de3725a0168d59c48a"
-  integrity sha512-LAQ1d4OPfSJ/BMbI2DuizmYrrkD9JMaTdi2hQTlI53lQ4kRQPyZQRS4CYQ7O66bnBBnP/oYdRxbk++X0xuFU6A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.2.tgz#54c5a964462be3d4d78af631363c18d6fa91ac26"
+  integrity sha512-yprFYuno9FtNsSHVlSWd+nRlmGoAbqbeCwOryP6sC/zoCjhpArcRMYp19EvpSUSizJAlsXEwJv+wcWS9XaXdMw==
 
 "@polymer/app-layout@^3.0.1":
   version "3.0.1"
@@ -1362,21 +810,16 @@
     "@polymer/polymer" "^3.0.0"
 
 "@polymer/esm-amd-loader@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@polymer/esm-amd-loader/-/esm-amd-loader-1.0.0.tgz#7180ae2bce061511b48fb9b8fac1b8213ae6718b"
-  integrity sha512-8ZDZzuu2jkg2A6hC7NeH2GqAwxpS9ADI2PYOGi/n06h6ouyoQK2cWTarUPiCAwmHLvVVQ1ySJsags37H33caZQ==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@polymer/esm-amd-loader/-/esm-amd-loader-1.0.3.tgz#231c47229da323f5a9ba89cf0696040021e66982"
+  integrity sha512-j7fDIkNeR8cekqK2WRH5YV1VtIdPwqrgb5OzAN5QUIWEBkFj5OsxTvrkJiSaFgEMdKZoozs/vz+oq83Qehp4wA==
 
 "@polymer/font-roboto-local@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@polymer/font-roboto-local/-/font-roboto-local-3.0.2.tgz#563cd6cabbcaef54999d654c0f3d476bcc49ce58"
   integrity sha512-mCd9TcjwnCxU+7uVHCkbREGU+OmzStvYh3ru5DSaftOQDnMrLAzernEv/QCcfSPRgTMHij+pIUN4tcaGeDGcYg==
 
-"@polymer/font-roboto@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/font-roboto/-/font-roboto-3.0.1.tgz#0f3e184ce1c09e132653e34cbbbf1014164a986c"
-  integrity sha512-vNVKKaDBggg1lqJh3q8Yiylxe2UkQnxWd97/HpcalNyKdMtmqwINWd0FLggdlBVlPceZJc2egzdkmn5blvp89w==
-
-"@polymer/font-roboto@^3.0.2":
+"@polymer/font-roboto@^3.0.1", "@polymer/font-roboto@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@polymer/font-roboto/-/font-roboto-3.0.2.tgz#80cdaa7225db2359130dfb2c6d9a3be1820020c3"
   integrity sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA==
@@ -1643,9 +1086,9 @@
     "@polymer/polymer" "^3.0.0"
 
 "@polymer/paper-checkbox@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-checkbox/-/paper-checkbox-3.0.1.tgz#4dead448e853885dc2f4fc6a2c92f1768c9d2103"
-  integrity sha512-uliJWKTgE1NN+80qZpzygfbQh5SfTVyBKOs3tyyTHFVJNNkMaZGn2fJghg3Jb//KNqYueBLwRLxe3FPbey+91g==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-checkbox/-/paper-checkbox-3.1.0.tgz#66b903ae5814db237d027deb4a3f3430f48d905b"
+  integrity sha512-kXm6yDG1tT8if0XuJ2cc9NF+g8Ev4wG+rnf0a+Sx+O7J6fn1jcnBlYn72FlrfjVjDQZDBFmT6nynhD5PvFw8iQ==
   dependencies:
     "@polymer/iron-a11y-keys-behavior" "^3.0.0-pre.26"
     "@polymer/iron-checked-element-behavior" "^3.0.0-pre.26"
@@ -1900,12 +1343,12 @@
     "@polymer/paper-styles" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/polymer@3.0.5", "@polymer/polymer@^3.0.0", "@polymer/polymer@^3.0.5":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.0.5.tgz#eaa42e70df7de818b5e1839452c82a5f83e39929"
-  integrity sha512-Zbmhtr5vZ3NoHWwFYLKI4ff7yfE6DZopI8vaS7HvmUIuNqsv/EpEDXfNEYjqePQmkMX5LU9OIKV1eX/+9aveow==
+"@polymer/polymer@3.1.0", "@polymer/polymer@^3.0.0", "@polymer/polymer@^3.0.5":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.1.0.tgz#3e1b7447a1e350fd654e1823def655d0f0828a70"
+  integrity sha512-hwN8IMERsFATz/9dSMxYHL+84J9uBkPuuarxJWlTsppZ4CAYTZKnepBfNrKoyNsafBmA3yXBiiKPPf+fJtza7A==
   dependencies:
-    "@webcomponents/shadycss" "^1.2.0"
+    "@webcomponents/shadycss" "^1.5.2"
 
 "@polymer/sinonjs@^1.14.1":
   version "1.17.1"
@@ -1957,31 +1400,24 @@
   dependencies:
     array-from "^2.1.1"
 
-"@types/acorn@^4.0.3":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.3.tgz#d1f3e738dde52536f9aad3d3380d14e448820afd"
-  integrity sha512-gou/kWQkGPMZjdCKNZGDpqxLm9+ErG/pFZKPX4tvCjr0Xf4FCYYX3nAsu7aDVKJV3KUe27+mvqqyWT/9VZoM/A==
-  dependencies:
-    "@types/estree" "*"
-
 "@types/babel-generator@^6.25.1":
-  version "6.25.1"
-  resolved "https://registry.yarnpkg.com/@types/babel-generator/-/babel-generator-6.25.1.tgz#f86ab3cf132b04597fe6c431d3083aaf1b76b530"
-  integrity sha512-nKNz9Ch4WP2TFZjQROhxqqS2SCk0OoDzGazJI6S+2sGgW9P7N4o3vluZAXFuPEnRqtz2A0vrrkK3tjQktxIlRw==
+  version "6.25.2"
+  resolved "https://registry.yarnpkg.com/@types/babel-generator/-/babel-generator-6.25.2.tgz#fa13653ec2d34a4037be9c34dec32ae75bea04cc"
+  integrity sha512-W7PQkeDlYOqJblfNeqZARwj4W8nO+ZhQQZksU8+wbaKuHeUdIVUAdREO/Qb0FfNr3CY5Sq1gNtqsyFeZfS3iSw==
   dependencies:
     "@types/babel-types" "*"
 
 "@types/babel-traverse@^6.25.2", "@types/babel-traverse@^6.25.3":
-  version "6.25.3"
-  resolved "https://registry.yarnpkg.com/@types/babel-traverse/-/babel-traverse-6.25.3.tgz#34dd69d1e469aee75e20ba00fbc52c7bc717b1c8"
-  integrity sha512-4FaulWyA7nrXPkzoukL2VmSpxCnBZwc+MgwZqO30gtHCrtaUXnoxymdYfxzf3CZN80zjtrVzKfLlZ7FPYvrhQQ==
+  version "6.25.4"
+  resolved "https://registry.yarnpkg.com/@types/babel-traverse/-/babel-traverse-6.25.4.tgz#269af6a25c80419b635c8fa29ae42b0d5ce2418c"
+  integrity sha512-+/670NaZE7qPvdh8EtGds32/2uHFKE5JeS+7ePH6nGwF8Wj8r671/RkTiJQP2k22nFntWEb9xQ11MFj7xEqI0g==
   dependencies:
     "@types/babel-types" "*"
 
 "@types/babel-types@*":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.2.tgz#63dc3e5e7f6367e1819d2bba5213783cd926c5d5"
-  integrity sha512-ylggu8DwwxT6mk3jVoJeohWAePWMNWEYm06MSoJ19kwp3hT9eY2Z4NNZn3oevzgFmClgNQ2GQF500hPDvNsGHg==
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.4.tgz#bfd5b0d0d1ba13e351dff65b6e52783b816826c8"
+  integrity sha512-WiZhq3SVJHFRgRYLXvpf65XnV6ipVHhnNaNvE8yCimejrGglkg38kEj0JcizqwSHxmPSjcTlig/6JouxLGEhGw==
 
 "@types/babel-types@^6.25.1":
   version "6.25.2"
@@ -1989,16 +1425,16 @@
   integrity sha512-+3bMuktcY4a70a0KZc8aPJlEOArPuAKQYHU5ErjkOqGJdx8xuEEVK6nWogqigBOJ8nKPxRpyCUDTCPmZ3bUxGA==
 
 "@types/babylon@^6.16.2":
-  version "6.16.2"
-  resolved "https://registry.yarnpkg.com/@types/babylon/-/babylon-6.16.2.tgz#062ce63b693d9af1c246f5aedf928bc9c30589c8"
-  integrity sha512-+Jty46mPaWe1VAyZbfvgJM4BAdklLWxrT5tc/RjvCgLrtk6gzRY6AOnoWFv4p6hVxhJshDdr2hGVn56alBp97Q==
+  version "6.16.3"
+  resolved "https://registry.yarnpkg.com/@types/babylon/-/babylon-6.16.3.tgz#c2937813a89fcb5e79a00062fc4a8b143e7237bb"
+  integrity sha512-lyJ8sW1PbY3uwuvpOBZ9zMYKshMnQpXmeDHh8dj9j2nJm/xrW0FgB5gLSYOArj5X0IfaXnmhFoJnhS4KbqIMug==
   dependencies:
     "@types/babel-types" "*"
 
 "@types/bluebird@*":
-  version "3.5.20"
-  resolved "https://registry.yarnpkg.com/@types/bluebird/-/bluebird-3.5.20.tgz#f6363172add6f4eabb8cada53ca9af2781e8d6a1"
-  integrity sha512-Wk41MVdF+cHBfVXj/ufUHJeO3BlIQr1McbHZANErMykaCWeDSZbH5erGjNBw2/3UlRdSxZbLfSuQTzFmPOYFsA==
+  version "3.5.24"
+  resolved "https://registry.yarnpkg.com/@types/bluebird/-/bluebird-3.5.24.tgz#11f76812531c14f793b8ecbf1de96f672905de8a"
+  integrity sha512-YeQoDpq4Lm8ppSBqAnAeF/xy1cYp/dMTif2JFcvmAbETMRlvKHT2iLcWu+WyYiJO3b3Ivokwo7EQca/xfLVJmg==
 
 "@types/body-parser@*":
   version "1.17.0"
@@ -2016,9 +1452,9 @@
     "@types/chai" "*"
 
 "@types/chai@*":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.3.tgz#b8a74352977a23b604c01aa784f5b793443fb7dc"
-  integrity sha512-f5dXGzOJycyzSMdaXVhiBhauL4dYydXwVpavfQ1mVCaGjR56a9QfklXObUxlIY9bGTmCPHEEZ04I16BZ/8w5ww==
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.7.tgz#1b8e33b61a8c09cbe1f85133071baa0dbf9fa71a"
+  integrity sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==
 
 "@types/chalk@^0.4.30", "@types/chalk@^0.4.31":
   version "0.4.31"
@@ -2030,7 +1466,7 @@
   resolved "https://registry.yarnpkg.com/@types/clean-css/-/clean-css-3.4.30.tgz#0052c136f5248002428e3638b37de4a39818641d"
   integrity sha1-AFLBNvUkgAJCjjY4s33ko5gYZB0=
 
-"@types/clone@^0.1.29", "@types/clone@^0.1.30":
+"@types/clone@^0.1.30":
   version "0.1.30"
   resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
   integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=
@@ -2076,46 +1512,34 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-0.0.20.tgz#cae698714dd61ebee5ab3f2aeb9a34ba1011735a"
   integrity sha512-6dhZJLbA7aOwkYB2GDGdIqJ20wmHnkDzaxV9PJXe7O02I2dSFTERzRB6JrX6cWKaS+VqhhY7cQUMCbO5kloFUw==
 
-"@types/estree@*":
+"@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/estree@0.0.38":
-  version "0.0.38"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"
-  integrity sha512-F/v7t1LwS4vnXuPooJQGBRKRGIoxWUTmA4VHfqjOccFsNDThD5bfUNpITive6s352O7o384wcpEaDV8rHCehDA==
-
 "@types/events@*":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-1.2.0.tgz#81a6731ce4df43619e5c8c945383b3e62a89ea86"
   integrity sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA==
 
 "@types/express-serve-static-core@*":
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.11.1.tgz#f6f7212382d59b19d696677bcaa48a37280f5d45"
-  integrity sha512-EehCl3tpuqiM8RUb+0255M8PhhSwTtLfmO7zBBdv0ay/VTd/zmrqDfQdZFsa5z/PVMbH2yCMZPXsnrImpATyIw==
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.16.0.tgz#fdfe777594ddc1fe8eb8eccce52e261b496e43e7"
+  integrity sha512-lTeoCu5NxJU4OD9moCgm0ESZzweAx0YqsAcab6OB0EB3+As1OaHtKnaGJvcngQxYsi9UNv0abn4/DRavrRxt4w==
   dependencies:
     "@types/events" "*"
     "@types/node" "*"
+    "@types/range-parser" "*"
 
-"@types/express@*", "@types/express@^4.0.36":
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.11.1.tgz#f99663b3ab32d04cb11db612ef5dd7933f75465b"
-  integrity sha512-ttWle8cnPA5rAelauSWeWJimtY2RsUf2aspYZs7xPHiWgOlPn6nnUfBMtrkcnjFJuIHJF4gNOdVvpLK2Zmvh6g==
+"@types/express@*", "@types/express@^4.0.30", "@types/express@^4.0.36":
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.16.0.tgz#6d8bc42ccaa6f35cf29a2b7c3333cb47b5a32a19"
+  integrity sha512-TtPEYumsmSTtTetAPXlJVf3kEqb6wZK0bZojpJQrnD/djV4q1oB6QQ8aKvKqwNPACoe02GNiy5zDzcYivR5Z2w==
   dependencies:
     "@types/body-parser" "*"
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
-"@types/express@^4.0.30":
-  version "4.0.37"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.37.tgz#625ac3765169676e01897ca47011c26375784971"
-  integrity sha512-tIULTLzQpFFs5/PKnFIAFOsXQxss76glppbVKR3/jddPK26SBsD5HF5grn5G2jOGtpRWSBvYmDYoduVv+3wOXg==
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/serve-static" "*"
-
 "@types/fast-levenshtein@0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@types/fast-levenshtein/-/fast-levenshtein-0.0.1.tgz#3a3615cf173645c8fca58d051e4e32824e4bd286"
@@ -2149,9 +1573,9 @@
     "@types/node" "*"
 
 "@types/glob@*":
-  version "5.0.35"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-5.0.35.tgz#1ae151c802cece940443b5ac246925c85189f32a"
-  integrity sha512-wc+VveszMLyMWFvXLkloixT4n0harUIVZjnpzztaZ0nKLuul7Z32iMt2fUFGAaZ4y1XWjFRMtCI5ewvyh4aIeg==
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
   dependencies:
     "@types/events" "*"
     "@types/minimatch" "*"
@@ -2182,9 +1606,9 @@
     "@types/uglify-js" "*"
 
 "@types/inquirer@*":
-  version "0.0.41"
-  resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-0.0.41.tgz#0c33027dcd0b0dde234e22afa454f2c75d8b30d2"
-  integrity sha512-kIWkK3FECGKt9OrURxRvi59gwMNiWTePXWOvaJn+xhplbEvu91hIDMfLe5PUu+cEEMmD6EFU4VFJJKKp5kzCtw==
+  version "0.0.43"
+  resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-0.0.43.tgz#1eb0bbb4648e6cc568bd396c1e989f620ad01273"
+  integrity sha512-xgyfKZVMFqE8aIKy1xfFVsX2MxyXUNgjgmbF6dRbR3sL+ZM5K4ka/9L4mmTwX8eTeVYtduyXu0gUVwVJa1HbNw==
   dependencies:
     "@types/rx" "*"
     "@types/through" "*"
@@ -2208,22 +1632,17 @@
   integrity sha1-NylhCbfyd/bmxf1+DAcGvJGPu1E=
 
 "@types/merge-stream@^1.0.28":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@types/merge-stream/-/merge-stream-1.1.0.tgz#7bed9fa3fb5a0b3d13712c7c7099bf0939d96a8c"
-  integrity sha512-mdbxuhPC4+kx37R3mO4nTTMFVJn5IRLdRqa7WL3Kf9haMh0DNnaU9Pt/naTZdBIWIg8jQb/EWoPyCGh0Hj+6tg==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/merge-stream/-/merge-stream-1.1.2.tgz#a880ff66b1fbbb5eef4958d015c5947a9334dbb1"
+  integrity sha512-7faLmaE99g/yX0Y9pF1neh2IUqOf/fXMOWCVzsXjqI1EJ91lrgXmaBKf6bRWM164lLyiHxHt6t/ZO/cIzq61XA==
   dependencies:
     "@types/node" "*"
 
-"@types/mime@*":
+"@types/mime@*", "@types/mime@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
   integrity sha512-A2TAGbTFdBw9azHbpVd+/FkdW2T6msN1uct1O9bH3vTerEHKZhTXJUQXy+hNq1B0RagfU8U+KBdqiZpxjhOUQA==
 
-"@types/mime@0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-0.0.29.tgz#fbcfd330573b912ef59eeee14602bface630754b"
-  integrity sha1-+8/TMFc7kS71nu7hRgK/rOYwdUs=
-
 "@types/minimatch@*", "@types/minimatch@^3.0.1":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2245,24 +1664,19 @@
     "@types/node" "*"
 
 "@types/node@*":
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.1.2.tgz#1b928a0baa408fc8ae3ac012cc81375addc147c6"
-  integrity sha512-bjk1RIeZBCe/WukrFToIVegOf91Pebr8cXYBwLBIsfiGWVQ+ifwWsT59H3RxrWzWrzd1l/Amk1/ioY5Fq3/bpA==
+  version "10.12.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.1.tgz#da61b64a2930a80fa708e57c45cd5441eb379d5b"
+  integrity sha512-i1sl+WCX2OCHeUi9oi7PiCNUtYFrpWhpcx878vpeq/tlZTKzcFdHePlyFHVbWqeuKN0SRPl/9ZFDSTsfv9h7VQ==
 
 "@types/node@^4.0.30", "@types/node@^4.2.3":
-  version "4.2.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-4.2.23.tgz#9241f00d64eb91084f68367746ef10d5fb2f2fc4"
-  integrity sha512-U6IchCNLRyswc9p6G6lxWlbE+KwAhZp6mGo6MD2yWpmFomhYmetK+c98OpKyvphNn04CU3aXeJrXdOqbXVTS/w==
-
-"@types/node@^6.0.0":
-  version "6.0.111"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.111.tgz#85f880a1bab78d395a5de9bcb5319e73a0c31400"
-  integrity sha512-DoWK5a544Jcr6C1qBadalyj3gQT5V9B87qFBb+uOOq1Id309Lbe10zwsCGCURZEOBoS/pOsmbDN4FnD4sOwJaw==
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-4.9.0.tgz#5f90c43115a25ecdb945377001fdf6285cf3b2c3"
+  integrity sha512-xUFkZ+er9gUGw0x9qyfmr/Th0LuX6IB0m7HrRMB6sO6vcBVRFZ/3YV1EeiOC2fG50RX09avDfKwGBHOnPVxFeg==
 
 "@types/node@^9.6.4":
-  version "9.6.18"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.18.tgz#092e13ef64c47e986802c9c45a61c1454813b31d"
-  integrity sha512-lywCnJQRSsu0kitHQ5nkb7Ay/ScdJPQjhWRtuf+G1DmNKJnPcdVyP0pYvdiDFKjzReC6NLWLgSyimno3kKfIig==
+  version "9.6.35"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.35.tgz#197dd535c094362a7c95f0b78f07583d6681ed26"
+  integrity sha512-h5zvHS8wXHGa+Gcqs9K8vqCgOtqjr0+NqG/DDJmQIX1wpR9HivAfgV8bjcD3mGM4bPfQw5Aneb2Pn8355L83jA==
 
 "@types/opn@^3.0.28":
   version "3.0.28"
@@ -2271,7 +1685,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/parse5@^2.2.32", "@types/parse5@^2.2.34":
+"@types/parse5@^2.2.34":
   version "2.2.34"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-2.2.34.tgz#e3870a10e82735a720f62d71dcd183ba78ef3a9d"
   integrity sha1-44cKEOgnNacg9i1x3NGDunjvOp0=
@@ -2288,6 +1702,11 @@
   resolved "https://registry.yarnpkg.com/@types/pem/-/pem-1.9.3.tgz#0c864c8b79e43fef6367db895f60fd1edd10e86c"
   integrity sha512-+hHbGi9PAyHVeRdMJN6yNuMWoshJ+7oTqYuhBB1/vHq0Tfu46ucbvgxmhwBfe0GCiJZvCa20VHhHsA0mY5W6hQ==
 
+"@types/range-parser@*":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.2.tgz#fa8e1ad1d474688a757140c91de6dace6f4abc8d"
+  integrity sha512-HtKGu+qG1NPvYe1z7ezLsyIaXYyi8SoAVqWDZgDQ8dLrsZvSzUNCwZyfX33uhWxL/SU0ZDQZ3nwZ0nimt507Kw==
+
 "@types/relateurl@*":
   version "0.2.28"
   resolved "https://registry.yarnpkg.com/@types/relateurl/-/relateurl-0.2.28.tgz#6bda7db8653fa62643f5ee69e9f69c11a392e3a6"
@@ -2403,9 +1822,9 @@
     "@types/rx-lite" "*"
 
 "@types/rx-lite@*":
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@types/rx-lite/-/rx-lite-4.0.5.tgz#b3581525dff69423798daa9a0d33c1e66a5e8c4c"
-  integrity sha512-KZk5XTR1dm/kNgBx8iVpjno6fRYtAUQWBOmj+O8j724+nk097sz4fOoHJNpCkOJUtHUurZlJC7QvSFCZHbkC+w==
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@types/rx-lite/-/rx-lite-4.0.6.tgz#3c02921c4244074234f26b772241bcc20c18c253"
+  integrity sha512-oYiDrFIcor9zDm0VDUca1UbROiMYBxMLMaM6qzz4ADAfOmA9r1dYEcAFH+2fsPI5BCCjPvV9pWC3X3flbrvs7w==
   dependencies:
     "@types/rx-core" "*"
     "@types/rx-core-binding" "*"
@@ -2468,9 +1887,9 @@
   integrity sha512-+z7Q72Mlnq6SFkQYHzLg2Z70pIsgRVzgx1b5PV8eUv5uaZ/zoqIs45XnhtToW4gTeX4FbjIP49nhIjyvPF4rPg==
 
 "@types/uglify-js@*":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.2.tgz#f30c75458d18e8ee885c792c04adcb78a13bc286"
-  integrity sha512-o8hU2+4xsyGC27Vujoklvxl88Ew5zmJuTBYMX1Uro2rYUt4HEFJKL6fuq8aGykvS+ssIsIzerWWP2DRxonownQ==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
+  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
   dependencies:
     source-map "^0.6.1"
 
@@ -2480,9 +1899,9 @@
   integrity sha512-BLStNhP2DFF7funARwTcoD6tetRte8NK3Sc59mn7GNALCN975jOlKX3dGvsFxXr/HwQMxxCuRn9IWB3WQ7odHQ==
 
 "@types/uuid@^3.4.3":
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.3.tgz#121ace265f5569ce40f4f6d0ff78a338c732a754"
-  integrity sha512-5fRLCYhLtDb3hMWqQyH10qtF+Ud2JnNCXTCZ+9ktNdCcgslcuXkDTkFcJNk++MT29yDntDnlF1+jD+uVGumsbw==
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.4.tgz#7af69360fa65ef0decb41fd150bf4ca5c0cefdf5"
+  integrity sha512-tPIgT0GUmdJQNSHxp0X2jnpQfBSTfGxUMc/2CXBU2mnyTFVYVa2ojpoQ74w0U2yn2vw3jnC640+77lkFFpdVDw==
   dependencies:
     "@types/node" "*"
 
@@ -2496,10 +1915,11 @@
     "@types/vinyl" "*"
 
 "@types/vinyl-fs@^2.4.8":
-  version "2.4.8"
-  resolved "https://registry.yarnpkg.com/@types/vinyl-fs/-/vinyl-fs-2.4.8.tgz#cd55c0c625e8ba02858992d9c7265a343704ca77"
-  integrity sha512-yE2pN9OOrxJVeO7IZLHAHrh5R4Q0osbn5WQRuQU6GdXoK7dNFrMK3K7YhATkzf3z0yQBkol3+gafs7Rp0s7dDg==
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/@types/vinyl-fs/-/vinyl-fs-2.4.9.tgz#d312c24b5ba8d2db456d23ee4a66f9d016af82ea"
+  integrity sha512-Q0EXd6c1fORjiOuK4ZaKdfFcMyFzJlTi56dqktwaWVLIDAzE49wUs3bKnYbZwzyMWoH+NcMWnRuR73S9A0jnRA==
   dependencies:
+    "@types/events" "*"
     "@types/glob-stream" "*"
     "@types/node" "*"
     "@types/vinyl" "*"
@@ -2524,11 +1944,11 @@
   integrity sha512-ZrJDWpvg75LTGX4XwuneY9s6bF3OeZcGTpoGh3zDV9ytzcHMFsRrMIaLBRJZQMBoGyKs6unBQfVdrLZiYfb1zQ==
 
 "@types/winston@^2.2.0":
-  version "2.3.9"
-  resolved "https://registry.yarnpkg.com/@types/winston/-/winston-2.3.9.tgz#1ff9f1bb57952fe3d88c1b21c4899ede316a35bc"
-  integrity sha512-zzruYOEtNgfS3SBjcij1F6HlH6My5n8WrBNhP3fzaRM22ba70QBC2ATs18jGr88Fy43c0z8vFJv5wJankfxv2A==
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@types/winston/-/winston-2.4.4.tgz#48cc744b7b42fad74b9a2e8490e0112bd9a3d08d"
+  integrity sha512-BVGCztsypW8EYwJ+Hq+QNYiT/MUyCif0ouBH+flrY66O5W+KIXAMML6E/0fJpm7VjIzgangahl5S03bJJQGrZw==
   dependencies:
-    "@types/node" "*"
+    winston "*"
 
 "@types/yeoman-generator@^2.0.3":
   version "2.0.3"
@@ -2815,7 +2235,7 @@
     "@webassemblyjs/wast-parser" "1.7.8"
     "@xtuc/long" "4.2.1"
 
-"@webcomponents/shadycss@^1.2.0", "@webcomponents/shadycss@^1.5.2":
+"@webcomponents/shadycss@^1.5.2":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@webcomponents/shadycss/-/shadycss-1.5.2.tgz#ad72f43000c39ba4ac61e625131f34f4b7cfe55f"
   integrity sha512-0OyrmVc7S+INtzoqP2ofAo+OdVn2Nj0Qvq4wD9FEGN7nMmLRxaD2mzy6hD6EslzxUSuGH302CDU4KXiY66SEqg==
@@ -2840,14 +2260,6 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-accepts@1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
-  integrity sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=
-  dependencies:
-    mime-types "~2.1.11"
-    negotiator "0.6.1"
-
 accepts@~1.3.4, accepts@~1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
@@ -2868,13 +2280,6 @@ acorn-dynamic-import@^3.0.0:
   dependencies:
     acorn "^5.0.0"
 
-acorn-import-meta@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/acorn-import-meta/-/acorn-import-meta-0.2.1.tgz#ac91e06e00facece7e96ff76a0fe9ec7b1cb5b5c"
-  integrity sha512-+KB5Q0P0Q/XpsPHgnLx4XbCGqMogw4yiJJjYsbzPCNrE/IoX+c6J4C+BFcwdWh3CD1zLzMxPITN1jzHd+NiS3w==
-  dependencies:
-    acorn "^5.4.1"
-
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
@@ -2894,25 +2299,20 @@ acorn@^3.0.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
   integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
 
-acorn@^5.0.0, acorn@^5.0.3, acorn@^5.6.0, acorn@^5.6.2:
+acorn@^5.0.0, acorn@^5.0.3, acorn@^5.5.0, acorn@^5.6.0, acorn@^5.6.2:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^5.4.1, acorn@^5.5.0:
-  version "5.5.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
-  integrity sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==
-
 acorn@^5.5.3:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
   integrity sha512-d+nbxBUGKg7Arpsvbnlq61mc12ek3EY8EQldM3GPAhWJ1UVxC6TDGbIvUMNU6obBX3i1+ptCIzV4vq0gFPEGVQ==
 
 adm-zip@~0.4.3:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.7.tgz#8606c2cbf1c426ce8c8ec00174447fd49b6eafc1"
-  integrity sha1-hgbCy/HEJs6MjsABdER/1Jtur8E=
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
+  integrity sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==
 
 after@0.8.2:
   version "0.8.2"
@@ -2927,6 +2327,13 @@ agent-base@2:
     extend "~3.0.0"
     semver "~5.0.1"
 
+agent-base@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
+  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
 ajv-errors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
@@ -2937,7 +2344,7 @@ ajv-keywords@^3.0.0, ajv-keywords@^3.1.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
   integrity sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=
 
-ajv@^5.1.0:
+ajv@^5.1.0, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
@@ -3000,13 +2407,6 @@ ansi-cyan@^0.1.1:
   dependencies:
     ansi-wrap "0.1.0"
 
-ansi-escape-sequences@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escape-sequences/-/ansi-escape-sequences-3.0.0.tgz#1c18394b6af9b76ff9a63509fa497669fd2ce53e"
-  integrity sha1-HBg5S2r5t2/5pjUJ+kl2af0s5T4=
-  dependencies:
-    array-back "^1.0.3"
-
 ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
@@ -3104,10 +2504,10 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-append-field@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/append-field/-/append-field-0.1.0.tgz#6ddc58fa083c7bc545d3c5995b2830cc2366d44a"
-  integrity sha1-bdxY+gg8e8VF08WZWygwzCNm1Eo=
+append-field@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/append-field/-/append-field-1.0.0.tgz#1e3440e915f0b1203d23748e78edd7b9b5b43e56"
+  integrity sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY=
 
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
@@ -3126,10 +2526,10 @@ archiver-utils@^1.3.0:
     normalize-path "^2.0.0"
     readable-stream "^2.0.0"
 
-archiver@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/archiver/-/archiver-1.3.0.tgz#4f2194d6d8f99df3f531e6881f14f15d55faaf22"
-  integrity sha1-TyGU1tj5nfP1MeaIHxTxXVX6ryI=
+archiver@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc"
+  integrity sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=
   dependencies:
     archiver-utils "^1.3.0"
     async "^2.0.0"
@@ -3138,8 +2538,7 @@ archiver@1.3.0:
     lodash "^4.8.0"
     readable-stream "^2.0.0"
     tar-stream "^1.5.0"
-    walkdir "^0.0.11"
-    zip-stream "^1.1.0"
+    zip-stream "^1.2.0"
 
 archy@^1.0.0:
   version "1.0.0"
@@ -3204,13 +2603,6 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
-array-back@^1.0.3, array-back@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/array-back/-/array-back-1.0.4.tgz#644ba7f095f7ffcf7c43b5f0dc39d3c1f03c063b"
-  integrity sha1-ZEun8JX3/898Q7Xw3DnTwfA8Bjs=
-  dependencies:
-    typical "^2.6.0"
-
 array-back@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/array-back/-/array-back-2.0.0.tgz#6877471d51ecc9c9bfa6136fb6c7d5fe69748022"
@@ -3293,10 +2685,10 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
-arraybuffer.slice@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
-  integrity sha1-8zshWfBTKj8xB6JywMz70a0peco=
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
 
 arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
@@ -3318,20 +2710,17 @@ asn1.js@^4.0.0:
     minimalistic-assert "^1.0.0"
 
 asn1@~0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
-  integrity sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
 
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-assert-plus@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
-  integrity sha1-104bh+ev/A24qttwIfP+SBAasjQ=
-
 assert@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
@@ -3359,6 +2748,11 @@ async-each@^1.0.0:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
   integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
 
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
+
 async@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.0.1.tgz#b709cc0280a9c36f09f4536be823c838a9049e25"
@@ -3371,21 +2765,7 @@ async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.0.0, async@^2.1.4, async@^2.4.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
-  integrity sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==
-  dependencies:
-    lodash "^4.14.0"
-
-async@^2.0.1, async@^2.1.2:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
-  integrity sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==
-  dependencies:
-    lodash "^4.14.0"
-
-async@^2.6.0:
+async@^2.0.0, async@^2.0.1, async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
   integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
@@ -3412,20 +2792,15 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-aws-sign2@~0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
-  integrity sha1-FDQt0428yU0OW4fXY81jYSwOeU8=
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
   integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.2.1, aws4@^1.6.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
-  integrity sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==
+aws4@^1.6.0, aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
@@ -3998,11 +3373,6 @@ babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.35:
-  version "7.0.0-beta.35"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.35.tgz#9f9e609ed50c28d4333f545b373a381b47e9e6ed"
-  integrity sha512-Y2o5scalPPlI6eOYMat6iqoM8akjqkAv9cXUN/7YNe3FANAsAGcF5L2u6XiUtBECvhyf7LeZYyzNYnjk43Vffg==
-
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -4062,9 +3432,9 @@ batch@0.6.1:
   integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
 bcrypt-pbkdf@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
-  integrity sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
   dependencies:
     tweetnacl "^0.14.3"
 
@@ -4118,7 +3488,7 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
   integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
 
-body-parser@1.18.2, body-parser@^1.17.2:
+body-parser@1.18.2:
   version "1.18.2"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
   integrity sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=
@@ -4134,6 +3504,22 @@ body-parser@1.18.2, body-parser@^1.17.2:
     raw-body "2.3.2"
     type-is "~1.6.15"
 
+body-parser@1.18.3, body-parser@^1.17.2:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
+  integrity sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "~1.6.3"
+    iconv-lite "0.4.23"
+    on-finished "~2.3.0"
+    qs "6.5.2"
+    raw-body "2.3.3"
+    type-is "~1.6.16"
+
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -4151,13 +3537,6 @@ boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-boom@2.x.x:
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
-  integrity sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=
-  dependencies:
-    hoek "2.x.x"
-
 boom@4.x.x:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
@@ -4278,9 +3657,9 @@ brorand@^1.0.1:
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
 browser-capabilities@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/browser-capabilities/-/browser-capabilities-1.1.0.tgz#be061a21e40ce3fefa51a9b2cb3962fe060dd3de"
-  integrity sha512-D0AhTybfR0KbVxy1DShQut4eCeluMyJhbTgVTIxvItJKzEGG9pNvOBFZfpeCASo2z0XdfczuvSfNZe/vmNlqwQ==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/browser-capabilities/-/browser-capabilities-1.1.2.tgz#713119f642aa72a4bb5b518699a7957e3ad903d9"
+  integrity sha512-T9BTu9Lmdrh9XZe0XnUY3jGiBlB0jAkl4M9qvt+1SszqlckgcUTzJuBwD6HNNKjdiDA+18KfiIUJEVxTY2W24g==
   dependencies:
     "@types/ua-parser-js" "^0.7.31"
     ua-parser-js "^0.7.15"
@@ -4371,39 +3750,39 @@ browserslist@^4.1.0:
     node-releases "^1.0.0-alpha.12"
 
 browserstack@^1.2.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.5.0.tgz#b565425ad62ed72c1082a1eb979d5313c7d4754f"
-  integrity sha1-tWVCWtYu1ywQgqHrl51TE8fUdU8=
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.5.1.tgz#e2dfa66ffee940ebad0a07f7e00fd4687c455d66"
+  integrity sha512-O8VMT64P9NOLhuIoD4YngyxBURefaSdR4QdhG8l6HZ9VxtU7jc3m6jLufFwKA5gaf7fetfB2TnRJnMxyob+heg==
   dependencies:
-    https-proxy-agent "1.0.0"
+    https-proxy-agent "^2.2.1"
 
-buffer-alloc-unsafe@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-0.1.1.tgz#ffe1f67551dd055737de253337bfe853dfab1a6a"
-  integrity sha1-/+H2dVHdBVc33iUzN7/oU9+rGmo=
-
-buffer-alloc@^1.1.0:
+buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.1.0.tgz#05514d33bf1656d3540c684f65b1202e90eca303"
-  integrity sha1-BVFNM78WVtNUDGhPZbEgLpDsowM=
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.1.0, buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
   dependencies:
-    buffer-alloc-unsafe "^0.1.0"
-    buffer-fill "^0.1.0"
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
 
 buffer-crc32@^0.2.1, buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
 
-buffer-fill@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-0.1.1.tgz#76d825c4d6e50e06b7a31eb520c04d08cc235071"
-  integrity sha512-YgBMBzdRLEfgxJIGu2wrvI2E03tMCFU1p7d1KhB4BOoMN0VxmTFjSyN5JtKt9z8Z9JajMHruI6SE25W96wNv7Q==
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
 
 buffer-from@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
-  integrity sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
 buffer-indexof@^1.0.0:
   version "1.1.1"
@@ -4424,6 +3803,14 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
+  integrity sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -4562,14 +3949,9 @@ caniuse-lite@^1.0.30000889:
   integrity sha512-4NI3s4Y6ROm+SgZN5sLUG4k7nVWQnedis3c/RWkynV5G6cHSY7+a8fwFyn2yoBDE3E6VswhTNNwR3PvzGqlTkg==
 
 capture-stack-trace@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
-  integrity sha1-Sm+gc5nCa7pH8LJJa00PtAjFVQ0=
-
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
-  integrity sha1-cVuW6phBWTzDMGeSP17GDr2k99c=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
+  integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -4637,11 +4019,6 @@ chalk@~0.4.0:
     has-color "~0.1.0"
     strip-ansi "~0.1.0"
 
-chardet@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
-  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
-
 chardet@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.5.0.tgz#fe3ac73c00c3d865ffcc02a0682e2c20b6a06029"
@@ -4736,11 +4113,6 @@ chrome-trace-event@^1.0.0:
   dependencies:
     tslib "^1.9.0"
 
-ci-info@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.3.tgz#710193264bb05c77b8c90d02f5aaf22216a667b2"
-  integrity sha512-SK/846h/Rcy8q9Z9CAwGBLfCJ6EkjJWdpelWDufQpqVDYq2Wnnv8zlSO6AMQap02jvhVruKKpEtQOufo3pFhLg==
-
 ci-info@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
@@ -4872,9 +4244,9 @@ clone@^1.0.2:
   integrity sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=
 
 clone@^2.0.0, clone@^2.1.0, clone@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
-  integrity sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
 cloneable-readable@^1.0.0:
   version "1.1.2"
@@ -4908,45 +4280,69 @@ color-convert@^0.5.3:
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
   integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
 
-color-convert@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
-  integrity sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==
+color-convert@^1.9.0, color-convert@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
-    color-name "^1.1.1"
+    color-name "1.1.3"
 
-color-name@^1.0.0, color-name@^1.1.1:
+color-name@1.1.3, color-name@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
+  integrity sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
+colornames@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
+  integrity sha1-+IiQMGhcfE/54qVZ9Qd+t2qBb5Y=
+
 colors@1.0.3, colors@1.0.x:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
   integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
 
-combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
-  integrity sha1-cj599ugBrFYTETp+RFqbactjKBg=
+colors@^1.2.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.2.tgz#2df8ff573dfbf255af562f8ce7181d6b971a359b"
+  integrity sha512-rhP0JSBGYvpcNQj4s5AdShMeE5ahMop96cTeDl/v9qQQm2fYClE2QXZRi8wLzc+GmXSxdIqqbOIAhyObEXDbfQ==
+
+colorspace@1.1.x:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/colorspace/-/colorspace-1.1.1.tgz#9ac2491e1bc6f8fb690e2176814f8d091636d972"
+  integrity sha512-pI3btWyiuz7Ken0BWh9Elzsmv2bM9AhA7psXib4anUXy/orfZ/E0MbQwhSOG/9L8hLlalqrU0UhOuqxW1YjmVw==
+  dependencies:
+    color "3.0.x"
+    text-hex "1.0.x"
+
+combined-stream@^1.0.6, combined-stream@~1.0.5, combined-stream@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+  integrity sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==
   dependencies:
     delayed-stream "~1.0.0"
 
-command-line-args@^3.0.1:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-3.0.5.tgz#5bd4ad45e7983e5c1344918e40280ee2693c5ac0"
-  integrity sha1-W9StReeYPlwTRJGOQCgO4mk8WsA=
-  dependencies:
-    array-back "^1.0.4"
-    feature-detect-es6 "^1.3.1"
-    find-replace "^1.0.2"
-    typical "^2.6.0"
-
 command-line-args@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-5.0.2.tgz#c4e56b016636af1323cf485aa25c3cb203dfbbe4"
@@ -4965,17 +4361,6 @@ command-line-commands@^2.0.1:
   dependencies:
     array-back "^2.0.0"
 
-command-line-usage@^3.0.3:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/command-line-usage/-/command-line-usage-3.0.8.tgz#b6a20978c1b383477f5c11a529428b880bfe0f4d"
-  integrity sha1-tqIJeMGzg0d/XBGlKUKLiAv+D00=
-  dependencies:
-    ansi-escape-sequences "^3.0.0"
-    array-back "^1.0.3"
-    feature-detect-es6 "^1.3.1"
-    table-layout "^0.3.0"
-    typical "^2.6.0"
-
 command-line-usage@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/command-line-usage/-/command-line-usage-5.0.5.tgz#5f25933ffe6dedd983c635d38a21d7e623fda357"
@@ -5008,7 +4393,7 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.12.1:
+commander@^2.12.1, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -5018,11 +4403,6 @@ commander@^2.14.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
   integrity sha512-6CYPa+JP2ftfRU2qkDK+UTVeQYosOg/2GbcjIcKPHfinyOLPVGXu/ovN86RP49Re5ndJK1N0kuiidFFuepc4ZQ==
 
-commander@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-  integrity sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==
-
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -5054,22 +4434,15 @@ component-inherit@0.0.3:
   integrity sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=
 
 compress-commons@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.0.tgz#58587092ef20d37cb58baf000112c9278ff73b9f"
-  integrity sha1-WFhwku8g03y1i68AARLJJ4/3O58=
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.2.tgz#524a9f10903f3a813389b0225d27c48bb751890f"
+  integrity sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=
   dependencies:
     buffer-crc32 "^0.2.1"
     crc32-stream "^2.0.0"
     normalize-path "^2.0.0"
     readable-stream "^2.0.0"
 
-compressible@~2.0.13:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9"
-  integrity sha1-DRAgq5JLL9tNYnmHXH1tq6a6p6k=
-  dependencies:
-    mime-db ">= 1.33.0 < 2"
-
 compressible@~2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.14.tgz#326c5f507fbb055f54116782b969a81b67a29da7"
@@ -5089,7 +4462,7 @@ compression-webpack-plugin@^2.0.0:
     serialize-javascript "^1.4.0"
     webpack-sources "^1.0.1"
 
-compression@^1.5.2:
+compression@^1.5.2, compression@^1.6.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.3.tgz#27e0e176aaf260f7f2c2813c3e440adb9f1993db"
   integrity sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==
@@ -5102,25 +4475,12 @@ compression@^1.5.2:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
-compression@^1.6.2:
-  version "1.7.2"
-  resolved "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69"
-  integrity sha1-qv+81qr4VLROuygDU9WtFlH1mmk=
-  dependencies:
-    accepts "~1.3.4"
-    bytes "3.0.0"
-    compressible "~2.0.13"
-    debug "2.6.9"
-    on-headers "~1.0.1"
-    safe-buffer "5.1.1"
-    vary "~1.1.2"
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.4.7, concat-stream@^1.5.0:
+concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@^1.5.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -5194,12 +4554,7 @@ content-type@^1.0.2, content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.1.0, convert-source-map@^1.1.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
-  integrity sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=
-
-convert-source-map@^1.5.1:
+convert-source-map@^1.1.0, convert-source-map@^1.1.1, convert-source-map@^1.5.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
   integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
@@ -5252,7 +4607,7 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.0:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
   integrity sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==
@@ -5285,9 +4640,11 @@ crc@3.2.1:
   integrity sha1-XZyPt3okXNXsopHl0tAFM0urAII=
 
 crc@^3.4.4:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/crc/-/crc-3.5.0.tgz#98b8ba7d489665ba3979f59b21381374101a1964"
-  integrity sha1-mLi6fUiWZbo5efWbITgTdBAaGWQ=
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-3.8.0.tgz#ad60269c2c856f8c299e2c4cc0de4556914056c6"
+  integrity sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==
+  dependencies:
+    buffer "^5.1.0"
 
 create-ecdh@^4.0.0:
   version "4.0.3"
@@ -5352,13 +4709,6 @@ crypt@~0.0.1:
   resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
   integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=
 
-cryptiles@2.x.x:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
-  integrity sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=
-  dependencies:
-    boom "2.x.x"
-
 cryptiles@3.x.x:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
@@ -5398,7 +4748,7 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-slam@^2.1.1, css-slam@^2.1.2:
+css-slam@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/css-slam/-/css-slam-2.1.2.tgz#3d35b1922cb3e0002a45c89ab189492508c493e5"
   integrity sha512-cObrY+mhFEmepWpua6EpMrgRNTQ0eeym+kvR0lukI6hDEzK7F8himEDS4cJ9+fPHCoArTzVrrR0d+oAUbTR1NA==
@@ -5409,11 +4759,16 @@ css-slam@^2.1.1, css-slam@^2.1.2:
     parse5 "^4.0.0"
     shady-css-parser "^0.1.0"
 
-css-what@2.1, css-what@^2.1.0:
+css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
   integrity sha1-lGfQMsOM+u+58teVASUwYvh/ob0=
 
+css-what@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
+  integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
+
 cssbeautify@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cssbeautify/-/cssbeautify-0.3.1.tgz#12dd1f734035c2e6faca67dcbdcef74e42811397"
@@ -5486,7 +4841,7 @@ dateformat@^3.0.3:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-debug@2, debug@2.6.9, debug@^2.0.0, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9, debug@~2.6.4, debug@~2.6.6, debug@~2.6.9:
+debug@2, debug@2.6.9, debug@^2.0.0, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -5500,13 +4855,27 @@ debug@2.6.8:
   dependencies:
     ms "2.0.0"
 
-debug@3.1.0, debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
+debug@3.1.0, debug@=3.1.0, debug@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
   dependencies:
     ms "2.0.0"
 
+debug@^3.1.0:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
+  integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
+  dependencies:
+    ms "^2.1.1"
+
 debug@~2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.1.3.tgz#ce8ab1b5ee8fbee2bfa3b633cab93d366b63418e"
@@ -5514,13 +4883,6 @@ debug@~2.1.1:
   dependencies:
     ms "0.7.0"
 
-debug@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
-  integrity sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=
-  dependencies:
-    ms "0.7.1"
-
 decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -5569,17 +4931,12 @@ deep-equal@^1.0.1:
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
   integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
 
-deep-extend@^0.4.0, deep-extend@~0.4.1:
+deep-extend@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
   integrity sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=
 
-deep-extend@^0.5.1, deep-extend@~0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f"
-  integrity sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==
-
-deep-extend@^0.6.0:
+deep-extend@^0.6.0, deep-extend@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
@@ -5679,7 +5036,7 @@ depd@~1.0.0:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.0.1.tgz#80aec64c9d6d97e65cc2a9caa93c0aa6abf73aaa"
   integrity sha1-gK7GTJ1tl+ZcwqnKqTwKpqv3Oqo=
 
-depd@~1.1.0, depd@~1.1.1, depd@~1.1.2:
+depd@~1.1.1, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
@@ -5742,9 +5099,18 @@ detect-libc@^1.0.2:
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
 detect-node@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
-  integrity sha1-ogM8CcyOFY03dI+951B4Mr1s4Sc=
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+
+diagnostics@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/diagnostics/-/diagnostics-1.1.1.tgz#cab6ac33df70c9d9a727490ae43ac995a769b22a"
+  integrity sha512-8wn1PmdunLJ9Tqbx+Fx/ZEuHfJf4NKSN2ZBj7SJC/OWRWha843+WsTjqMe1B5E3p28jqBlp+mJ2fPVxPyNgYKQ==
+  dependencies:
+    colorspace "1.1.x"
+    enabled "1.0.x"
+    kuler "1.0.x"
 
 dicer@0.2.5:
   version "0.2.5"
@@ -5759,7 +5125,7 @@ diff@3.2.0:
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
   integrity sha1-yc45Okt8vQsFinJck98pkCeGj/k=
 
-diff@3.5.0, diff@^3.2.0, diff@^3.3.1, diff@^3.5.0:
+diff@3.5.0, diff@^3.1.0, diff@^3.2.0, diff@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
@@ -5769,11 +5135,6 @@ diff@^2.1.2:
   resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
   integrity sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=
 
-diff@^3.1.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
-  integrity sha512-QpVuMTEoJMF7cKzi6bvWhRulU1fZqZnvyVQgNhPaxxuTYwyjn/j1v9falseQ/uXWwPnO56RBfwtg4h/EQXmucA==
-
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -5861,23 +5222,12 @@ dom-urls@^1.1.0:
   dependencies:
     urijs "^1.16.1"
 
-dom5@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/dom5/-/dom5-2.3.0.tgz#f8204975bd0dacbbe5b58a8a93ffc1fed0ffcd2a"
-  integrity sha1-+CBJdb0NrLvltYqKk//B/tD/zSo=
-  dependencies:
-    "@types/clone" "^0.1.29"
-    "@types/node" "^6.0.0"
-    "@types/parse5" "^2.2.32"
-    clone "^2.1.0"
-    parse5 "^2.2.2"
-
 dom5@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dom5/-/dom5-3.0.0.tgz#77a36871751cf6344bcd1859ab20304e628425a1"
-  integrity sha512-PbE+7C4Sh1dHDTLNuSDaMUGD1ivDiSZw0L+a9xVUzUKeQ8w3vdzfKHRA07CxcrFZZOa1SGl2nIJ9T49j63q+bg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dom5/-/dom5-3.0.1.tgz#cdfc7331f376e284bf379e6ea054afc136702944"
+  integrity sha512-JPFiouQIr16VQ4dX6i0+Hpbg3H2bMKPmZ+WZgBOSSvOPx9QHwwY8sPzeM2baUtViESYto6wC2nuZOMC/6gulcA==
   dependencies:
-    "@types/parse5" "^2.2.32"
+    "@types/parse5" "^2.2.34"
     clone "^2.1.0"
     parse5 "^4.0.0"
 
@@ -5951,17 +5301,7 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
-duplexify@^3.2.0, duplexify@^3.5.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.0.tgz#592903f5d80b38d037220541264d69a198fb3410"
-  integrity sha512-fO3Di4tBKJpYTFHAxTU00BcfWMY9w24r/x21a6rZRbsD/ToUgGxsMbiGRmB7uVAXeGKXD9MwiLZa5E97EVgIRQ==
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
-duplexify@^3.4.2, duplexify@^3.6.0:
+duplexify@^3.2.0, duplexify@^3.4.2, duplexify@^3.5.0, duplexify@^3.6.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"
   integrity sha512-vM58DwdnKmty+FSPzT14K9JXb90H+j5emaR4KYbr2KTIz00WHGbWOe5ghQTx233ZCLZtrGDALzKwcjEtSt35mA==
@@ -5972,11 +5312,12 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     stream-shift "^1.0.0"
 
 ecc-jsbn@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
-  integrity sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
   dependencies:
     jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
 
 editions@^1.3.3:
   version "1.3.4"
@@ -6031,7 +5372,14 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-encodeurl@~1.0.1, encodeurl@~1.0.2:
+enabled@1.0.x:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/enabled/-/enabled-1.0.2.tgz#965f6513d2c2d1c5f4652b64a2e3396467fc2f93"
+  integrity sha1-ll9lE9LC0cX0ZStkouM5ZGf8L5M=
+  dependencies:
+    env-variable "0.0.x"
+
+encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
@@ -6062,47 +5410,45 @@ ends-with@^0.2.0:
   resolved "https://registry.yarnpkg.com/ends-with/-/ends-with-0.2.0.tgz#2f9da98d57a50cfda4571ce4339000500f4e6b8a"
   integrity sha1-L52pjVelDP2kVxzkM5AAUA9Oa4o=
 
-engine.io-client@~3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.3.tgz#d705e48985dfe8b54a98c9f77052b8b08258be05"
-  integrity sha1-1wXkiYXf6LVKmMn3cFK4sIJYvgU=
+engine.io-client@~3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.2.1.tgz#6f54c0475de487158a1a7c77d10178708b6add36"
+  integrity sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==
   dependencies:
     component-emitter "1.2.1"
     component-inherit "0.0.3"
-    debug "~2.6.9"
+    debug "~3.1.0"
     engine.io-parser "~2.1.1"
     has-cors "1.1.0"
     indexof "0.0.1"
     parseqs "0.0.5"
     parseuri "0.0.5"
-    ws "~2.3.1"
+    ws "~3.3.1"
     xmlhttprequest-ssl "~1.5.4"
     yeast "0.1.2"
 
 engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.1.tgz#e0fb3f0e0462f7f58bb77c1a52e9f5a7e26e4668"
-  integrity sha1-4Ps/DgRi9/WLt3waUun1p+JuRmg=
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
+  integrity sha512-dInLFzr80RijZ1rGpx1+56/uFoH7/7InhH3kZt+Ms6hT8tNx3NGW/WNSA/f8As1WkOfkuyb3tnRyuXGxusclMw==
   dependencies:
     after "0.8.2"
-    arraybuffer.slice "0.0.6"
+    arraybuffer.slice "~0.0.7"
     base64-arraybuffer "0.1.5"
     blob "0.0.4"
     has-binary2 "~1.0.2"
 
-engine.io@~3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.3.tgz#7aecf71bf8a310f9fa21461999c4fcc035f8a877"
-  integrity sha1-euz3G/ijEPn6IUYZmcT8wDX4qHc=
+engine.io@~3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.2.0.tgz#54332506f42f2edc71690d2f2a42349359f3bf7d"
+  integrity sha512-mRbgmAtQ4GAlKwuPnnAvXXwdPhEx+jkc0OBCLrXuD/CRvwNK3AxRSnqK4FSqmAMRRHryVJP8TopOvmEaA64fKw==
   dependencies:
-    accepts "1.3.3"
+    accepts "~1.3.4"
     base64id "1.0.0"
     cookie "0.3.1"
-    debug "~2.6.9"
+    debug "~3.1.0"
     engine.io-parser "~2.1.0"
-    ws "~2.3.1"
-  optionalDependencies:
-    uws "~0.14.4"
+    ws "~3.3.1"
 
 enhanced-resolve@^4.0.0:
   version "4.0.0"
@@ -6136,6 +5482,11 @@ entities@~1.1.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
   integrity sha1-blwtClYhtdra7O+AuQ7ftc13cvA=
 
+env-variable@0.0.x:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/env-variable/-/env-variable-0.0.5.tgz#913dd830bef11e96a039c038d4130604eba37f88"
+  integrity sha512-zoB603vQReOFvTg5xMl9I1P2PnHsHQQKTEowsKKD7nseUfJq6UWzK+4YtlWUO1nhiQUxe6XMkk+JleSZD1NZFA==
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -6144,9 +5495,9 @@ errno@^0.1.3, errno@~0.1.7:
     prr "~1.0.1"
 
 error-ex@^1.2.0, error-ex@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
-  integrity sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
@@ -6199,10 +5550,22 @@ es6-promise@^2.1.1:
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-2.3.0.tgz#96edb9f2fdb01995822b263dd8aadab6748181bc"
   integrity sha1-lu258v2wGZWCKyY92KratnSBgbw=
 
-es6-promise@^4.0.5:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
-  integrity sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==
+es6-promise@^4.0.3, es6-promise@^4.0.5:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
+  integrity sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==
+
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
+es6-promisify@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-6.0.1.tgz#6edaa45f3bd570ffe08febce66f7116be4b1cdb6"
+  integrity sha512-J3ZkwbEnnO+fGAKrjVpeUAnZshAdfZvbhQpqfIH9kSAspReRC4nJnu8ewm55b4y9ElyeuhCTzJD0XiH8Tsbhlw==
 
 es6-templates@^0.2.3:
   version "0.2.3"
@@ -6454,11 +5817,6 @@ etag@~1.5.1:
   dependencies:
     crc "3.2.1"
 
-etag@~1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
-  integrity sha1-A9MLX2fdbmMtKUXTDWZScxo01dg=
-
 etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
@@ -6574,43 +5932,43 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-express@^4.15.3:
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.16.1.tgz#6b33b560183c9b253b7b62144df33a4654ac9ed0"
-  integrity sha512-STB7LZ4N0L+81FJHGla2oboUHTk4PaN1RsOkoRh9OSeEKylvF5hwKYVX1xCLFaCT7MD0BNG/gX2WFMLqY6EMBw==
+express@^4.15.3, express@^4.8.5:
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
+  integrity sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==
   dependencies:
-    accepts "~1.3.4"
+    accepts "~1.3.5"
     array-flatten "1.1.1"
-    body-parser "1.18.2"
+    body-parser "1.18.3"
     content-disposition "0.5.2"
     content-type "~1.0.4"
     cookie "0.3.1"
     cookie-signature "1.0.6"
     debug "2.6.9"
-    depd "~1.1.1"
-    encodeurl "~1.0.1"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.1.0"
+    finalhandler "1.1.1"
     fresh "0.5.2"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
     parseurl "~1.3.2"
     path-to-regexp "0.1.7"
-    proxy-addr "~2.0.2"
-    qs "6.5.1"
+    proxy-addr "~2.0.4"
+    qs "6.5.2"
     range-parser "~1.2.0"
-    safe-buffer "5.1.1"
-    send "0.16.1"
-    serve-static "1.13.1"
+    safe-buffer "5.1.2"
+    send "0.16.2"
+    serve-static "1.13.2"
     setprototypeof "1.1.0"
-    statuses "~1.3.1"
-    type-is "~1.6.15"
+    statuses "~1.4.0"
+    type-is "~1.6.16"
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-express@^4.16.2, express@^4.8.5:
+express@^4.16.2:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
   integrity sha1-avilAjUNsyRuzEvs9rWjTSL37VM=
@@ -6685,10 +6043,10 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
-  integrity sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=
+extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1, extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 external-editor@^1.1.0:
   version "1.1.1"
@@ -6699,15 +6057,6 @@ external-editor@^1.1.0:
     spawn-sync "^1.0.15"
     tmp "^0.0.29"
 
-external-editor@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
-  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
-  dependencies:
-    chardet "^0.4.0"
-    iconv-lite "^0.4.17"
-    tmp "^0.0.33"
-
 external-editor@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.0.tgz#dc35c48c6f98a30ca27a20e9687d7f3c77704bb6"
@@ -6783,9 +6132,9 @@ fast-diff@^1.1.2:
   integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
 
 fast-glob@^2.0.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.2.tgz#71723338ac9b4e0e2fff1d6748a2a13d5ed352bf"
-  integrity sha512-TR6zxCKftDQnUAPvkrCWdBgDq/gbqx8A3ApnBrR5rMvpp6+KMJI0Igw7fkWPgeVK0uhRXTXdvO3O+YP0CaUX2g==
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.3.tgz#d09d378e9ef6b0076a0fa1ba7519d9d4d9699c28"
+  integrity sha512-NiX+JXjnx43RzvVFwRWfPKo4U+1BrK5pJPsHQdKMlLoFHrrGktXglQhHliSihWAq+m1z6fHk3uwGHrtRbS9vLA==
   dependencies:
     "@mrmlnc/readdir-enhanced" "^2.2.1"
     "@nodelib/fs.stat" "^1.0.1"
@@ -6804,6 +6153,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-safe-stringify@^2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.6.tgz#04b26106cc56681f51a044cfc0d76cf0008ac2c2"
+  integrity sha512-q8BZ89jjc+mz08rSxROs8VsrBBcn1SIw1kq9NjolL509tkABRk9io01RAjSaEv1Xb2uFLt8VtRiZbGp5H8iDtg==
+
 fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
@@ -6836,20 +6190,13 @@ fbjs@^0.8.16:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fd-slicer@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
-  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
   dependencies:
     pend "~1.2.0"
 
-feature-detect-es6@^1.3.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/feature-detect-es6/-/feature-detect-es6-1.4.1.tgz#1a37d8f1cade260e846462d41621eb3dbd3c4ef8"
-  integrity sha512-iMxKpKdIBgcWiBPtz2qnEsNjCE2dBQvDyUqgrXLJboiaHwJa+2vDIZ8XbgNZGh1Rx1PUfZmI7uhG6Z4iQYWVjg==
-  dependencies:
-    array-back "^1.0.4"
-
 fecha@^2.3.3, "fecha@https://github.com/balloob/fecha/archive/51d14fd0eb4781e2ecf265d1c3080706259133b5.tar.gz":
   version "2.3.3"
   resolved "https://github.com/balloob/fecha/archive/51d14fd0eb4781e2ecf265d1c3080706259133b5.tar.gz#bfb1e49121dd7821601af35faf4fe93dbd19200a"
@@ -6913,19 +6260,6 @@ filled-array@^1.0.0:
   resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
   integrity sha1-w8T2xmO5I0WamqKZEtLQMfFQf4Q=
 
-finalhandler@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
-  integrity sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    statuses "~1.3.1"
-    unpipe "~1.0.0"
-
 finalhandler@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
@@ -6974,14 +6308,6 @@ find-port@^1.0.1:
   dependencies:
     async "~0.2.9"
 
-find-replace@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/find-replace/-/find-replace-1.0.3.tgz#b88e7364d2d9c959559f388c66670d6130441fa0"
-  integrity sha1-uI5zZNLZyVlVnziMZmcNYTBEH6A=
-  dependencies:
-    array-back "^1.0.4"
-    test-value "^2.1.0"
-
 find-replace@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/find-replace/-/find-replace-2.0.1.tgz#6d9683a7ca20f8f9aabeabad07e4e2580f528550"
@@ -7092,11 +6418,11 @@ follow-redirects@0.0.7:
     stream-consume "^0.1.0"
 
 follow-redirects@^1.0.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.0.tgz#234f49cf770b7f35b40e790f636ceba0c3a0ab77"
-  integrity sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==
+  version "1.5.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.9.tgz#c9ed9d748b814a39535716e531b9196a845d89c6"
+  integrity sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==
   dependencies:
-    debug "^3.1.0"
+    debug "=3.1.0"
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
@@ -7132,22 +6458,13 @@ fork-stream@^0.0.4:
   resolved "https://registry.yarnpkg.com/fork-stream/-/fork-stream-0.0.4.tgz#db849fce77f6708a5f8f386ae533a0907b54ae70"
   integrity sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=
 
-form-data@~2.1.1:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
-  integrity sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=
+form-data@~2.3.1, form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "^1.0.5"
-    mime-types "^2.1.12"
-
-form-data@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
-  integrity sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "1.0.6"
+    combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
 formatio@1.1.1:
@@ -7186,11 +6503,6 @@ fresh@0.2.4:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.2.4.tgz#3582499206c9723714190edd74b4604feb4a614c"
   integrity sha1-NYJJkgbJcjcUGQ7ddLRgT+tKYUw=
 
-fresh@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
-  integrity sha1-ZR+DjiJCTnVm3hYdg1jKoZn4PU8=
-
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -7284,18 +6596,6 @@ gaze@^0.5.1:
   dependencies:
     globule "~0.1.0"
 
-generate-function@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
-  integrity sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=
-
-generate-object-property@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
-  integrity sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=
-  dependencies:
-    is-property "^1.0.0"
-
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -7443,7 +6743,7 @@ glob@7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.1.2, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1:
+glob@7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   integrity sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==
@@ -7487,7 +6787,7 @@ glob@^6.0.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.5, glob@^7.1.2:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
   integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
@@ -7558,15 +6858,10 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
-globals@^10.0.0:
-  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7"
-  integrity sha512-uNUtxIZpGyuaq+5BqGGQHsL4wUlJAXRqOm6g3Y48/CWNGTLONgBibI0lh6lGxjR2HljFYUfszb+mk4WkgMntsA==
-
 globals@^11.1.0:
-  version "11.5.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.5.0.tgz#6bc840de6771173b191f13d3a9c94d441ee92642"
-  integrity sha512-hYyf+kI8dm3nORsiiXUQigOU62hDLfJ9G01uyGMxhc6BKsircrUhC4uJPQPUSuq2GrTmiiEt7ewxlMdBewfmKQ==
+  version "11.8.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
+  integrity sha512-io6LkyPVuzCHBSQV9fmOwxZkUk6nIaGmxheLDgmuFv89j0fm2aqDbIXKAGfzCMHqz3HLF2Zf8WSG6VqMh2qFmA==
 
 globals@^11.7.0:
   version "11.7.0"
@@ -7926,16 +7221,6 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
-  integrity sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=
-  dependencies:
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    is-my-json-valid "^2.12.4"
-    pinkie-promise "^2.0.0"
-
 har-validator@~5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
@@ -7944,6 +7229,14 @@ har-validator@~5.0.3:
     ajv "^5.1.0"
     har-schema "^2.0.0"
 
+har-validator@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.0.tgz#44657f5688a22cfd4b72486e81b3a3fb11742c29"
+  integrity sha512-+qnmNjI4OfH2ipQ9VQOw23bBd/ibtfbVdK2fYbY4acTDqKTW/YDp9McimZdDbG8iV9fZizUqQMD5xvriB146TA==
+  dependencies:
+    ajv "^5.3.0"
+    har-schema "^2.0.0"
+
 has-ansi@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
@@ -7959,9 +7252,9 @@ has-ansi@^2.0.0:
     ansi-regex "^2.0.0"
 
 has-binary2@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
-  integrity sha1-6D26SfC5vk0CbSc2U1DZ8D9Uvpg=
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
+  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
   dependencies:
     isarray "2.0.1"
 
@@ -8070,16 +7363,6 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hawk@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
-  integrity sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=
-  dependencies:
-    boom "2.x.x"
-    cryptiles "2.x.x"
-    hoek "2.x.x"
-    sntp "1.x.x"
-
 hawk@~6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
@@ -8095,6 +7378,11 @@ he@1.1.1, he@1.1.x:
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
   integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
 
+he@1.2.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8104,11 +7392,6 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@2.x.x:
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
-  integrity sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=
-
 hoek@4.x.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
@@ -8135,9 +7418,9 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
     parse-passwd "^1.0.0"
 
 hosted-git-info@^2.1.4:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.6.0.tgz#23235b29ab230c576aab0d4f13fc046b0b038222"
-  integrity sha512-lIbgIIQA3lz5XaB6vxakj6sDHADJiZadYEJB+FgA+C4nubM1NwcuvUr9EJPmnH1skZqpqUzWborWo8EIUi0Sdw==
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
+  integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -8178,7 +7461,20 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
-html-minifier@^3.5.10, html-minifier@^3.5.8:
+html-minifier@^3.5.10:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.2.x"
+    commander "2.17.x"
+    he "1.2.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.4.x"
+
+html-minifier@^3.5.8:
   version "3.5.16"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.16.tgz#39f5aabaf78bdfc057fe67334226efd7f3851175"
   integrity sha512-zP5EfLSpiLRp0aAgud4CQXPQZm9kXwWjR/cF0PfdOj+jjWnOaCgeZcll4kYXSvIBPeUMmyaSc7mM4IDtA+kboA==
@@ -8191,19 +7487,6 @@ html-minifier@^3.5.10, html-minifier@^3.5.8:
     relateurl "0.2.x"
     uglify-js "3.3.x"
 
-html-minifier@^3.5.20:
-  version "3.5.20"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.20.tgz#7b19fd3caa0cb79f7cde5ee5c3abdf8ecaa6bb14"
-  integrity sha512-ZmgNLaTp54+HFKkONyLFEfs5dd/ZOtlquKaTnqIWFmx3Av5zG6ZPcV2d0o9XM2fXOTxxIf6eDcwzFFotke/5zA==
-  dependencies:
-    camel-case "3.0.x"
-    clean-css "4.2.x"
-    commander "2.17.x"
-    he "1.1.x"
-    param-case "2.1.x"
-    relateurl "0.2.x"
-    uglify-js "3.4.x"
-
 html-webpack-plugin@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
@@ -8242,16 +7525,7 @@ http-errors@1.6.2:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
-http-errors@~1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
-  integrity sha1-eIwNLB3iyBuebowBhDtrl+uSB1A=
-  dependencies:
-    inherits "2.0.3"
-    setprototypeof "1.0.2"
-    statuses ">= 1.3.1 < 2"
-
-http-errors@~1.6.2:
+http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
   integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
@@ -8295,15 +7569,6 @@ http-proxy@^1.16.2:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
-http-signature@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
-  integrity sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=
-  dependencies:
-    assert-plus "^0.2.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -8318,7 +7583,7 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-https-proxy-agent@1.0.0, https-proxy-agent@^1.0.0, https-proxy-agent@~1.0.0:
+https-proxy-agent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz#35f7da6c48ce4ddbfa264891ac593ee5ff8671e6"
   integrity sha1-NffabEjOTdv6JkiRrFk+5f+GceY=
@@ -8327,6 +7592,14 @@ https-proxy-agent@1.0.0, https-proxy-agent@^1.0.0, https-proxy-agent@~1.0.0:
     debug "2"
     extend "3"
 
+https-proxy-agent@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
+  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
+  dependencies:
+    agent-base "^4.1.0"
+    debug "^3.1.0"
+
 husky@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/husky/-/husky-1.1.0.tgz#7271e85f5d98b54349788839b720c9a60cd95dba"
@@ -8348,7 +7621,7 @@ iconv-lite@0.4.19, iconv-lite@~0.4.13:
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
   integrity sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==
 
-iconv-lite@^0.4.17, iconv-lite@^0.4.22:
+iconv-lite@0.4.23, iconv-lite@^0.4.22:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
   integrity sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==
@@ -8380,9 +7653,9 @@ ignore-walk@^3.0.1:
     minimatch "^3.0.4"
 
 ignore@^3.3.5:
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.8.tgz#3f8e9c35d38708a3a7e0e9abb6c73e7ee7707b2b"
-  integrity sha512-pUh+xUQQhQzevjRHHFqqcTy0/dP/kS9I8HSrUydhihjuD09W6ldVWFtIrwhXdUJHis3i2rZNqEHpZH/cbinFbg==
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
 ignore@^4.0.6:
   version "4.0.6"
@@ -8482,25 +7755,6 @@ inquirer@^1.0.2:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-inquirer@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
-  integrity sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==
-  dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.1.0"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^5.5.2"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
 inquirer@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.0.0.tgz#e8c20303ddc15bbfc2c12a6213710ccd9e1413d8"
@@ -8591,10 +7845,10 @@ ip@^1.1.0, ip@^1.1.5:
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.6.0.tgz#e3fa357b773da619f26e95f049d055c72796f86b"
-  integrity sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=
+ipaddr.js@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.0.tgz#eaa33d6ddd7ace8f7f6fe0c9ca0440e706738b1e"
+  integrity sha1-6qM9bd16zo9/b+DJygRA5wZzix4=
 
 ipaddr.js@^1.5.2:
   version "1.8.1"
@@ -8628,6 +7882,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -8652,14 +7911,7 @@ is-callable@^1.1.1, is-callable@^1.1.3:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
   integrity sha1-hut1OSgF3cM69xySoO7fdO52BLI=
 
-is-ci@^1.0.10:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
-  integrity sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==
-  dependencies:
-    ci-info "^1.0.0"
-
-is-ci@^1.2.1:
+is-ci@^1.0.10, is-ci@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
   integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
@@ -8800,16 +8052,6 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
-is-my-json-valid@^2.12.4:
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz#5a846777e2c2620d1e69104e5d3a03b1f6088f11"
-  integrity sha512-ochPsqWS1WXj8ZnMIV0vnNXooaMhp7cyL4FMSIPKTtnV0Ha/T19G2b9kkhcNsabV9bxYkze7/aLZJb/bYuFduQ==
-  dependencies:
-    generate-function "^2.0.0"
-    generate-object-property "^1.1.0"
-    jsonpointer "^4.0.0"
-    xtend "^4.0.0"
-
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@@ -8902,11 +8144,6 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
-is-property@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
-  integrity sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=
-
 is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
@@ -9011,9 +8248,11 @@ isarray@2.0.1:
   integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
 
 isbinaryfile@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621"
-  integrity sha1-Sj6XTsDLqQBNP8bN5yCeppNopiE=
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.3.tgz#5d6def3edebf6e8ca8cae9c30183a804b5f8be80"
+  integrity sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==
+  dependencies:
+    buffer-alloc "^1.2.0"
 
 isemail@3.x.x:
   version "3.1.2"
@@ -9113,7 +8352,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-tokens@^4.0.0:
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -9217,11 +8456,6 @@ jsonminify@~0.2.3:
   resolved "https://registry.yarnpkg.com/jsonminify/-/jsonminify-0.2.3.tgz#4b842c8a3fe5d6aa48b2f8f95a1cf9a80c019d8e"
   integrity sha1-S4Qsij/l1qpIsvj5Whz5qAwBnY4=
 
-jsonpointer@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
-  integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
-
 jsonschema@^1.1.0, jsonschema@^1.1.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.2.4.tgz#a46bac5d3506a254465bc548876e267c6d0d6464"
@@ -9283,6 +8517,13 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
   integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
 
+kuler@1.0.x:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/kuler/-/kuler-1.0.1.tgz#ef7c784f36c9fb6e16dd3150d152677b2b0228a6"
+  integrity sha512-J9nVUucG1p/skKul6DU3PUZrhs0LPulNaeUOox0IyXDi8S4CztTHs1gQphhuZmzXG7VOQSf6NJfKuzteQLv9gQ==
+  dependencies:
+    colornames "^1.1.1"
+
 latest-version@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
@@ -9914,25 +9155,20 @@ lodash.values@~2.4.1:
   dependencies:
     lodash.keys "~2.4.1"
 
-lodash@4.16.2:
-  version "4.16.2"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.2.tgz#3e626db827048a699281a8a125226326cfc0e652"
-  integrity sha1-PmJtuCcEimmSgaihJSJjJs/A5lI=
-
-lodash@^3.0.0, lodash@^3.0.1, lodash@^3.10.1:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
-  integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
-
-lodash@^4.11.1, lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
+lodash@4.17.10, lodash@^4.17.3:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
   integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
 
-lodash@^4.16.6, lodash@^4.8.0:
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
-  integrity sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=
+lodash@^3.0.0, lodash@^3.10.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+  integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
+
+lodash@^4.11.1, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.8.0:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
 lodash@~1.0.1:
   version "1.0.2"
@@ -9946,7 +9182,7 @@ log-symbols@^1.0.0, log-symbols@^1.0.1, log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^2.1.0, log-symbols@^2.2.0:
+log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
@@ -9961,6 +9197,17 @@ log-update@^1.0.2:
     ansi-escapes "^1.0.0"
     cli-cursor "^1.0.2"
 
+logform@^1.9.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/logform/-/logform-1.10.0.tgz#c9d5598714c92b546e23f4e78147c40f1e02012e"
+  integrity sha512-em5ojIhU18fIMOw/333mD+ZLE2fis0EzXl1ZwHx4iQzmpQi6odNiY/t+ITNr33JZhT9/KEaH+UPIipr6a9EjWg==
+  dependencies:
+    colors "^1.2.1"
+    fast-safe-stringify "^2.0.4"
+    fecha "^2.3.3"
+    ms "^2.1.1"
+    triple-beam "^1.2.0"
+
 loglevel@^1.4.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
@@ -9986,7 +9233,14 @@ lolex@^2.7.4:
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.5.tgz#113001d56bfc7e02d56e36291cc5c413d1aa0733"
   integrity sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==
 
-loose-envify@^1.0.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   integrity sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=
@@ -10184,9 +9438,9 @@ merge-stream@^1.0.0, merge-stream@^1.0.1:
     readable-stream "^2.0.1"
 
 merge2@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.2.tgz#03212e3da8d86c4d8523cebd6318193414f94e34"
-  integrity sha512-bgM8twH86rWni21thii6WCMQMRMmwqqdW3sGWi9IipnVAszdLXRjwDwAnyrVXo6DuP3AjRMMttZKUB48QWIFGg==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.3.tgz#7ee99dbd69bb6481689253f018488a1b902b0ed5"
+  integrity sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==
 
 methods@~1.1.2:
   version "1.1.2"
@@ -10239,51 +9493,34 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.33.0 < 2", mime-db@^1.28.0, mime-db@~1.33.0:
-  version "1.33.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
-  integrity sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==
-
 "mime-db@>= 1.34.0 < 2":
   version "1.35.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.35.0.tgz#0569d657466491283709663ad379a99b90d9ab47"
   integrity sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg==
 
-mime-db@~1.30.0:
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
-  integrity sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=
+mime-db@^1.28.0, mime-db@~1.37.0:
+  version "1.37.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
+  integrity sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==
 
-mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.7:
-  version "2.1.18"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
-  integrity sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
+  version "2.1.21"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
+  integrity sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==
   dependencies:
-    mime-db "~1.33.0"
-
-mime-types@~2.1.11:
-  version "2.1.17"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
-  integrity sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=
-  dependencies:
-    mime-db "~1.30.0"
+    mime-db "~1.37.0"
 
 mime@1.2.11:
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
   integrity sha1-WCA+7Ybjpe8XrtK32evUfwpg3RA=
 
-mime@1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
-  integrity sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM=
-
 mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
-mime@^1.2.11, mime@^1.3.4:
+mime@^1.2.11:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -10299,9 +9536,9 @@ mimic-fn@^1.0.0:
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
 mimic-response@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
-  integrity sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
+  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
@@ -10363,9 +9600,9 @@ minimist@~0.0.1:
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
 minipass@^2.2.1, minipass@^2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.4.tgz#4768d7605ed6194d6d576169b9e12ef71e9d9957"
-  integrity sha512-mlouk1OHlaUE8Odt1drMtG1bAJA4ZA6B/ehysgV0LUIrDHdKgo1KorZq3pK0b/7Z7LJIQ12MNM6aC+Tn6lUZ5w==
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
+  integrity sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==
   dependencies:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
@@ -10491,31 +9728,26 @@ ms@0.7.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.0.tgz#865be94c2e7397ad8a57da6a633a6e2f30798b83"
   integrity sha1-hlvpTC5zl62KV9pqYzpuLzB5i4M=
 
-ms@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
-  integrity sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=
-
-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
-  integrity sha1-riXPJRKziFodldfwN4aNhDESR2U=
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
+ms@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
 multer@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/multer/-/multer-1.3.0.tgz#092b2670f6846fa4914965efc8cf94c20fec6cd2"
-  integrity sha1-CSsmcPaEb6SRSWXvyM+Uwg/sbNI=
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/multer/-/multer-1.4.1.tgz#24b12a416a22fec2ade810539184bf138720159e"
+  integrity sha512-zzOLNRxzszwd+61JFuAo0fxdQfvku12aNJgnla0AQ+hHxFmfc/B7jBVuPr5Rmvu46Jze/iJrFpSOsD7afO8SDw==
   dependencies:
-    append-field "^0.1.0"
+    append-field "^1.0.0"
     busboy "^0.2.11"
-    concat-stream "^1.5.0"
+    concat-stream "^1.5.2"
     mkdirp "^0.5.1"
-    object-assign "^3.0.0"
+    object-assign "^4.1.1"
     on-finished "^2.3.0"
     type-is "^1.6.4"
     xtend "^4.0.0"
@@ -10614,7 +9846,7 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.0:
+needle@^2.2.1:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
   integrity sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==
@@ -10639,9 +9871,9 @@ netrc@^0.1.4:
   integrity sha1-a+lPysqNd63gqWcNxGCRTJRHJEQ=
 
 nice-try@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
-  integrity sha512-2NpiFHqC87y/zFke0fC0spBXL3bBsoh/p5H1EFhshxjCR5+0g2d6BiXbUFz9v1sAcxsk2htp2eQnNIci2dIYcA==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
 nise@^1.4.5:
   version "1.4.5"
@@ -10704,17 +9936,17 @@ node-forge@0.7.5:
     vm-browserify "0.0.4"
 
 node-pre-gyp@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz#6e4ef5bb5c5203c6552448828c852c40111aac46"
-  integrity sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
+  integrity sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==
   dependencies:
     detect-libc "^1.0.2"
     mkdirp "^0.5.1"
-    needle "^2.2.0"
+    needle "^2.2.1"
     nopt "^4.0.1"
     npm-packlist "^1.1.6"
     npmlog "^4.0.2"
-    rc "^1.1.7"
+    rc "^1.2.7"
     rimraf "^2.6.1"
     semver "^5.3.0"
     tar "^4"
@@ -10822,11 +10054,16 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-oauth-sign@~0.8.1, oauth-sign@~0.8.2:
+oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
   integrity sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=
 
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
 object-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
@@ -10959,9 +10196,14 @@ once@~1.3.0:
   dependencies:
     wrappy "1"
 
+one-time@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/one-time/-/one-time-0.0.4.tgz#f8cdf77884826fe4dff93e3a9cc37b1e4480742e"
+  integrity sha1-+M33eISCb+Tf+T46nMN7HkSAdC4=
+
 onetime@^1.0.0:
   version "1.1.0"
-  resolved "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
   integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
 
 onetime@^2.0.0:
@@ -11244,11 +10486,6 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
-parse5@^2.2.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-2.2.3.tgz#0c4fc41c1000c5e6b93d48b03f8083837834e9f6"
-  integrity sha1-DE/EHBAAxea5PUiwP4CDg3g06fY=
-
 parse5@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -11321,9 +10558,9 @@ path-key@^2.0.0, path-key@^2.0.1:
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
 path-parse@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
-  integrity sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
 path-root-regex@^0.1.0:
   version "0.1.2"
@@ -11398,14 +10635,14 @@ peek-stream@^1.1.0:
     through2 "^2.0.3"
 
 pem@^1.8.3:
-  version "1.12.5"
-  resolved "https://registry.yarnpkg.com/pem/-/pem-1.12.5.tgz#97bf2e459537c54e0ee5b0aa11b5ca18d6b5fef2"
-  integrity sha512-mm8gLf4ZCaY6Qdm8J4bBdHs6SO4px71FspxgC2jJ0vXf3PYNZnGhU9zITCxpzFHpLPHsHU3xRBbuXNxEWuWziQ==
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/pem/-/pem-1.13.2.tgz#7b68acbb590fdc13772bca487983cb84cd7b443e"
+  integrity sha512-MPJWuEb/r6AG+GpZi2JnfNtGAZDeL/8+ERKwXEWRuST5i+4lq/Uy36B352OWIUSPQGH+HR1HEDcIDi+8cKxXNg==
   dependencies:
+    es6-promisify "^6.0.0"
     md5 "^2.2.1"
     os-tmpdir "^1.0.1"
-    safe-buffer "^5.1.1"
-    which "^1.2.4"
+    which "^1.3.1"
 
 pend@~1.2.0:
   version "1.2.0"
@@ -11511,54 +10748,19 @@ plylog@^0.5.0:
     "@types/winston" "^2.2.0"
     winston "^2.2.0"
 
-polymer-analyzer@^3.0.0, polymer-analyzer@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/polymer-analyzer/-/polymer-analyzer-3.0.1.tgz#61340ccf8422048c6f9f5607df8d4fdace08bba9"
-  integrity sha512-s1fEMUeUHs7EWZQ5cxL/RL6qzDcYnkJcLeQbNvVD1qOPtxRejGeonq5xsxmb8o7mstzSYb1x0Iba2Bdbfr+PAQ==
+plylog@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/plylog/-/plylog-1.1.0.tgz#f6f354e2ae0b01f6db4ed111f4b3855da9c37417"
+  integrity sha512-/QnY5aSVaP54va6hruzNtAj02HpsLlAt7V5EndMrtq6ZUTZJKUja43rgiUtGXqm95yrSJjbZoPW0yQQQwLpoJA==
   dependencies:
-    "@babel/generator" "^7.0.0-beta.42"
-    "@babel/traverse" "^7.0.0-beta.42"
-    "@babel/types" "^7.0.0-beta.42"
-    "@types/babel-generator" "^6.25.1"
-    "@types/babel-traverse" "^6.25.2"
-    "@types/babel-types" "^6.25.1"
-    "@types/babylon" "^6.16.2"
-    "@types/chai-subset" "^1.3.0"
-    "@types/chalk" "^0.4.30"
-    "@types/clone" "^0.1.30"
-    "@types/cssbeautify" "^0.3.1"
-    "@types/doctrine" "^0.0.1"
-    "@types/is-windows" "^0.2.0"
-    "@types/minimatch" "^3.0.1"
-    "@types/node" "^9.6.4"
-    "@types/parse5" "^2.2.34"
-    "@types/path-is-inside" "^1.0.0"
-    "@types/resolve" "0.0.6"
-    "@types/whatwg-url" "^6.4.0"
-    babylon "^7.0.0-beta.42"
-    cancel-token "^0.1.1"
-    chalk "^1.1.3"
-    clone "^2.0.0"
-    cssbeautify "^0.3.1"
-    doctrine "^2.0.2"
-    dom5 "^3.0.0"
-    indent "0.0.2"
-    is-windows "^1.0.2"
-    jsonschema "^1.1.0"
-    minimatch "^3.0.4"
-    parse5 "^4.0.0"
-    path-is-inside "^1.0.2"
-    resolve "^1.5.0"
-    shady-css-parser "^0.1.0"
-    stable "^0.1.6"
-    strip-indent "^2.0.0"
-    vscode-uri "^1.0.1"
-    whatwg-url "^6.4.0"
+    logform "^1.9.1"
+    winston "^3.0.0"
+    winston-transport "^4.2.0"
 
-polymer-analyzer@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/polymer-analyzer/-/polymer-analyzer-3.1.2.tgz#c709a8e163b03193b272b746da62cfb724cfb881"
-  integrity sha512-qAGdrrI9fknJurrMMG/vx4CioOdxr0WeQB0CNcB7jZhIuophJn5igqXti9JwTLVBAEIB17DJnsce5A4xFQDryQ==
+polymer-analyzer@^3.0.0, polymer-analyzer@^3.0.1, polymer-analyzer@^3.1.2, polymer-analyzer@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/polymer-analyzer/-/polymer-analyzer-3.1.3.tgz#05a9015043c6d38decd799166cda7680a84e49fd"
+  integrity sha512-PU2gp7I4PT9/oNweNaDOS/g8mnfxarDSvUCHJ/ThJSH/gkIeqtDr6v/35Eky8G/5NjE7rPHbY+l+PGXlTKAC9w==
   dependencies:
     "@babel/generator" "^7.0.0-beta.42"
     "@babel/traverse" "^7.0.0-beta.42"
@@ -11598,43 +10800,43 @@ polymer-analyzer@^3.1.2:
     vscode-uri "^1.0.1"
     whatwg-url "^6.4.0"
 
-polymer-build@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/polymer-build/-/polymer-build-3.0.1.tgz#d0dca1ab397bcf70268edbe439f784df863639eb"
-  integrity sha512-XnNP9M/fUbwYYOPijMK6t+o9DOjO8kpj2rm6irefA00TGfaQXHZhgPpT0zdd5xjAyAcZ4lpaLGcjIcCLY5mkgg==
+polymer-build@^3.0.3, polymer-build@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/polymer-build/-/polymer-build-3.1.0.tgz#13534ac3c68f59f4acf5d6947e3f7acbf41eb0bf"
+  integrity sha512-DwSiOtd1ERpGPfVCqi7SdSjW97yg4oGeUBtg2tnD/ZyEANNFSBCrkEtOFchKm/H5gCCjSEpLqqchTPrqZAYNcw==
   dependencies:
-    "@babel/core" "^7.0.0-beta.46"
-    "@babel/plugin-external-helpers" "^7.0.0-beta.46"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0-beta.46"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-async-generators" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-import-meta" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0-beta.46"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0-beta.46"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0-beta.46"
-    "@babel/plugin-transform-block-scoped-functions" "^7.0.0-beta.46"
-    "@babel/plugin-transform-block-scoping" "^7.0.0-beta.46"
-    "@babel/plugin-transform-classes" "=7.0.0-beta.35"
-    "@babel/plugin-transform-computed-properties" "^7.0.0-beta.46"
-    "@babel/plugin-transform-destructuring" "^7.0.0-beta.46"
-    "@babel/plugin-transform-duplicate-keys" "^7.0.0-beta.46"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0-beta.46"
-    "@babel/plugin-transform-for-of" "^7.0.0-beta.46"
-    "@babel/plugin-transform-function-name" "^7.0.0-beta.46"
-    "@babel/plugin-transform-instanceof" "^7.0.0-beta.46"
-    "@babel/plugin-transform-literals" "^7.0.0-beta.46"
-    "@babel/plugin-transform-modules-amd" "^7.0.0-beta.46"
-    "@babel/plugin-transform-object-super" "^7.0.0-beta.46"
-    "@babel/plugin-transform-parameters" "^7.0.0-beta.46"
-    "@babel/plugin-transform-regenerator" "^7.0.0-beta.46"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0-beta.46"
-    "@babel/plugin-transform-spread" "^7.0.0-beta.46"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0-beta.46"
-    "@babel/plugin-transform-template-literals" "^7.0.0-beta.46"
-    "@babel/plugin-transform-typeof-symbol" "^7.0.0-beta.46"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0-beta.46"
-    "@babel/traverse" "^7.0.0-beta.46"
+    "@babel/core" "^7.0.0"
+    "@babel/plugin-external-helpers" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-syntax-async-generators" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
+    "@babel/plugin-syntax-import-meta" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.0.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.0.0"
+    "@babel/plugin-transform-block-scoping" "^7.0.0"
+    "@babel/plugin-transform-classes" "^7.0.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.0.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
+    "@babel/plugin-transform-for-of" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.0.0"
+    "@babel/plugin-transform-instanceof" "^7.0.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-amd" "^7.0.0"
+    "@babel/plugin-transform-object-super" "^7.0.0"
+    "@babel/plugin-transform-parameters" "^7.0.0"
+    "@babel/plugin-transform-regenerator" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-template-literals" "^7.0.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.0.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
     "@polymer/esm-amd-loader" "^1.0.0"
     "@types/babel-types" "^6.25.1"
     "@types/babylon" "^6.16.2"
@@ -11642,79 +10844,6 @@ polymer-build@^3.0.0:
     "@types/html-minifier" "^3.5.1"
     "@types/is-windows" "^0.2.0"
     "@types/mz" "0.0.31"
-    "@types/node" "^9.6.4"
-    "@types/parse5" "^2.2.34"
-    "@types/resolve" "0.0.7"
-    "@types/uuid" "^3.4.3"
-    "@types/vinyl" "^2.0.0"
-    "@types/vinyl-fs" "^2.4.8"
-    babel-plugin-minify-guarded-expressions "=0.4.1"
-    babel-preset-minify "=0.4.0-alpha.caaefb4c"
-    babylon "^7.0.0-beta.42"
-    css-slam "^2.1.1"
-    dom5 "^3.0.0"
-    gulp-if "^2.0.2"
-    html-minifier "^3.5.10"
-    matcher "^1.1.0"
-    multipipe "^1.0.2"
-    mz "^2.6.0"
-    parse5 "^4.0.0"
-    plylog "^0.5.0"
-    polymer-analyzer "^3.0.0"
-    polymer-bundler "^4.0.0"
-    polymer-project-config "^4.0.0"
-    regenerator-runtime "^0.11.1"
-    stream "0.0.2"
-    sw-precache "^5.1.1"
-    uuid "^3.2.1"
-    vinyl "^1.2.0"
-    vinyl-fs "^2.4.4"
-
-polymer-build@^3.0.3:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/polymer-build/-/polymer-build-3.0.4.tgz#73331729b6888c8fff4936bdfba2ca92947a1c8e"
-  integrity sha512-YSppvctpcO2do3XHXNo2WnD4mxpzTpjgLlByPXE0Jfz9N+Ez6EGmge7Xwd6NsFH9ch6IMyV1P9H238I/C/KZRw==
-  dependencies:
-    "@babel/core" "^7.0.0-beta.46"
-    "@babel/plugin-external-helpers" "^7.0.0-beta.46"
-    "@babel/plugin-proposal-async-generator-functions" "^7.0.0-beta.46"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-async-generators" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-dynamic-import" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-import-meta" "^7.0.0-beta.46"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0-beta.46"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0-beta.46"
-    "@babel/plugin-transform-async-to-generator" "^7.0.0-beta.46"
-    "@babel/plugin-transform-block-scoped-functions" "^7.0.0-beta.46"
-    "@babel/plugin-transform-block-scoping" "^7.0.0-beta.46"
-    "@babel/plugin-transform-classes" "=7.0.0-beta.35"
-    "@babel/plugin-transform-computed-properties" "^7.0.0-beta.46"
-    "@babel/plugin-transform-destructuring" "^7.0.0-beta.46"
-    "@babel/plugin-transform-duplicate-keys" "^7.0.0-beta.46"
-    "@babel/plugin-transform-exponentiation-operator" "^7.0.0-beta.46"
-    "@babel/plugin-transform-for-of" "^7.0.0-beta.46"
-    "@babel/plugin-transform-function-name" "^7.0.0-beta.46"
-    "@babel/plugin-transform-instanceof" "^7.0.0-beta.46"
-    "@babel/plugin-transform-literals" "^7.0.0-beta.46"
-    "@babel/plugin-transform-modules-amd" "^7.0.0-beta.46"
-    "@babel/plugin-transform-object-super" "^7.0.0-beta.46"
-    "@babel/plugin-transform-parameters" "^7.0.0-beta.46"
-    "@babel/plugin-transform-regenerator" "^7.0.0-beta.46"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0-beta.46"
-    "@babel/plugin-transform-spread" "^7.0.0-beta.46"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0-beta.46"
-    "@babel/plugin-transform-template-literals" "^7.0.0-beta.46"
-    "@babel/plugin-transform-typeof-symbol" "^7.0.0-beta.46"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0-beta.46"
-    "@babel/traverse" "^7.0.0-beta.46"
-    "@polymer/esm-amd-loader" "^1.0.0"
-    "@types/babel-types" "^6.25.1"
-    "@types/babylon" "^6.16.2"
-    "@types/gulp-if" "0.0.33"
-    "@types/html-minifier" "^3.5.1"
-    "@types/is-windows" "^0.2.0"
-    "@types/mz" "0.0.31"
-    "@types/node" "^9.6.4"
     "@types/parse5" "^2.2.34"
     "@types/resolve" "0.0.7"
     "@types/uuid" "^3.4.3"
@@ -11731,9 +10860,9 @@ polymer-build@^3.0.3:
     multipipe "^1.0.2"
     mz "^2.6.0"
     parse5 "^4.0.0"
-    plylog "^0.5.0"
-    polymer-analyzer "^3.0.0"
-    polymer-bundler "^4.0.0"
+    plylog "^1.0.0"
+    polymer-analyzer "^3.1.3"
+    polymer-bundler "^4.0.3"
     polymer-project-config "^4.0.0"
     regenerator-runtime "^0.11.1"
     stream "0.0.2"
@@ -11742,40 +10871,13 @@ polymer-build@^3.0.3:
     vinyl "^1.2.0"
     vinyl-fs "^2.4.4"
 
-polymer-bundler@^4.0.0, polymer-bundler@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/polymer-bundler/-/polymer-bundler-4.0.1.tgz#0edd161027c60619553bd205b12ec61611b67d84"
-  integrity sha512-nG+mpWn5h6nflOqZwtcpIKlYxXMznKFODa5XMQsUgD2126BT5cdznbMXCkH9vCIpbV5iBm5lCunmTyoYF+3BqA==
+polymer-bundler@^4.0.1, polymer-bundler@^4.0.2, polymer-bundler@^4.0.3:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/polymer-bundler/-/polymer-bundler-4.0.4.tgz#ea2ece5739dc9022f85d950a2e205ee71449b8b2"
+  integrity sha512-XrTn//eNxushnirhM/+mLpUYEHGwZRh0w79J8rnFjocdoAttGvEK74G2oYkSAIWJYKGfpwqUZGrNUsNXvf/EvQ==
   dependencies:
-    "@types/acorn" "^4.0.3"
     "@types/babel-generator" "^6.25.1"
     "@types/babel-traverse" "^6.25.3"
-    acorn-import-meta "^0.2.1"
-    babel-generator "^6.26.1"
-    babel-traverse "^6.26.0"
-    babel-types "^6.26.0"
-    clone "^2.1.0"
-    command-line-args "^3.0.1"
-    command-line-usage "^3.0.3"
-    dom5 "^2.2.0"
-    espree "^3.5.2"
-    magic-string "^0.22.4"
-    mkdirp "^0.5.1"
-    parse5 "^2.2.2"
-    polymer-analyzer "^3.0.1"
-    rollup "^0.58.2"
-    source-map "^0.5.6"
-    vscode-uri "^1.0.1"
-
-polymer-bundler@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/polymer-bundler/-/polymer-bundler-4.0.2.tgz#ad74494403253aa7c91ca6f7bd4170ac0becdf92"
-  integrity sha512-eH+MNSVb/bCqchxYE1gVtdLP9eq1pLsr9NdcHhiJGEgSoZOYq7lGm2M/L7DHGJqa1/OqC7ZC9Sz3eQKAB8FaJQ==
-  dependencies:
-    "@types/acorn" "^4.0.3"
-    "@types/babel-generator" "^6.25.1"
-    "@types/babel-traverse" "^6.25.3"
-    acorn-import-meta "^0.2.1"
     babel-generator "^6.26.1"
     babel-traverse "^6.26.0"
     babel-types "^6.26.0"
@@ -11787,15 +10889,15 @@ polymer-bundler@^4.0.2:
     magic-string "^0.22.4"
     mkdirp "^0.5.1"
     parse5 "^4.0.0"
-    polymer-analyzer "^3.0.1"
-    rollup "^0.58.2"
+    polymer-analyzer "^3.1.3"
+    rollup "^0.64.1"
     source-map "^0.5.6"
     vscode-uri "^1.0.1"
 
 polymer-cli@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/polymer-cli/-/polymer-cli-1.8.0.tgz#38126d0622719cbe8dd6229c775df1bf86c2fcde"
-  integrity sha512-M0ieZtjiwa2KwmTzfKGq8U9Up4iLz4GF2Bx+52hiuUM6JPYCT2M/KL9v63NcG0qs1tEgH66itDZMmJthy48rwg==
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/polymer-cli/-/polymer-cli-1.8.1.tgz#95d72fc42a23250d54a490552be3ecf24e87ea66"
+  integrity sha512-EX4GwTy5lQYpBbx69d8o7n3GjbGewkotNO9QwXki+vmClyT4jdjKn9OTOwJ9IuJbO7cVrCsZ3f/eBqyto39JhQ==
   dependencies:
     "@types/chalk" "^0.4.31"
     "@types/del" "^3.0.0"
@@ -11850,9 +10952,9 @@ polymer-cli@^1.8.0:
     yeoman-generator "^3.1.1"
 
 polymer-linter@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/polymer-linter/-/polymer-linter-3.0.0.tgz#531ae7a98eb9465856912d63a36e902b82a042a9"
-  integrity sha512-YM6+kE3DmTvVlyXJYDVfgvyi4ZUJIZYF3zl8BHx65SKtyjdRmweUQolB/dQuFiVAY29APyjAWSh/V7fVwgVF4g==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/polymer-linter/-/polymer-linter-3.0.1.tgz#8804e1705fa2a7c263467b8a22da11bb764ee26b"
+  integrity sha512-eDh2CeswZz4Rwf8gfYXpMN66pieq4qJvP9bH3m39LLGm81hRePo4N5OHoQzR5unen1PUdmtjDv0Iicz3dTYEZQ==
   dependencies:
     "@types/fast-levenshtein" "0.0.1"
     "@types/parse5" "^2.2.34"
@@ -11870,9 +10972,9 @@ polymer-linter@^3.0.0:
     validate-element-name "^2.1.1"
 
 polymer-project-config@^4.0.0, polymer-project-config@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/polymer-project-config/-/polymer-project-config-4.0.1.tgz#b703a3ebad73be328ca210dfcfe978d9f580e3cd"
-  integrity sha512-NJjP5gf6tOQ5YY8u0UM3hzrXPF2hpNIIyXCtd5VNCYoRGJdT//UFubyWFDd9Aje09yNWjS1SAfjZIhMgZ5DESg==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/polymer-project-config/-/polymer-project-config-4.0.2.tgz#da5063b6d98015318340ef31c1710e862d825b0d"
+  integrity sha512-nnxLkbpYYPIVBYooeercovQIWqq4coHzQ5PwK2+NxNpVWUJ5tW3OCDt46dqw3CtJNe4r/qIOkPgBJdVwXAAEmw==
   dependencies:
     "@types/node" "^9.6.4"
     browser-capabilities "^1.0.0"
@@ -11880,18 +10982,17 @@ polymer-project-config@^4.0.0, polymer-project-config@^4.0.1:
     minimatch-all "^1.1.0"
     plylog "^0.5.0"
 
-polyserve@^0.27.11:
-  version "0.27.11"
-  resolved "https://registry.yarnpkg.com/polyserve/-/polyserve-0.27.11.tgz#445b06849b2b1b131732c6661791a42cf810a33f"
-  integrity sha512-C6laEBzDawtKzJEojv2wjUbuu66fNFEOfHsbHztrw0jn0CZsaV1okWEuFczgMNgW5ZL+Eg+QC4hzsHNA1dZZaw==
+polyserve@^0.27.11, polyserve@^0.27.13:
+  version "0.27.13"
+  resolved "https://registry.yarnpkg.com/polyserve/-/polyserve-0.27.13.tgz#00795cfd418f618f6cb662a92b0acdaffc0c4819"
+  integrity sha512-9YlIJRx4TJ07ywVHpK/+W4tEPMcoJ4oyJWHkSDrPck5jmT5bitCme8dONCSxERZrE4J8hagHE3oOPa5U9iFfYg==
   dependencies:
     "@types/compression" "^0.0.33"
     "@types/content-type" "^1.1.0"
     "@types/escape-html" "0.0.20"
     "@types/express" "^4.0.36"
-    "@types/mime" "0.0.29"
+    "@types/mime" "^2.0.0"
     "@types/mz" "0.0.29"
-    "@types/node" "^9.6.4"
     "@types/opn" "^3.0.28"
     "@types/parse5" "^2.2.34"
     "@types/pem" "^1.8.1"
@@ -11900,8 +11001,8 @@ polyserve@^0.27.11:
     "@types/spdy" "^3.4.1"
     bower-config "^1.4.1"
     browser-capabilities "^1.0.0"
-    command-line-args "^3.0.1"
-    command-line-usage "^3.0.3"
+    command-line-args "^5.0.2"
+    command-line-usage "^5.0.5"
     compression "^1.6.2"
     content-type "^1.0.2"
     escape-html "^1.0.3"
@@ -11909,15 +11010,15 @@ polyserve@^0.27.11:
     find-port "^1.0.1"
     http-proxy-middleware "^0.17.2"
     lru-cache "^4.0.2"
-    mime "^1.3.4"
+    mime "^2.3.1"
     mz "^2.4.0"
     opn "^3.0.2"
     pem "^1.8.3"
-    polymer-build "^3.0.0"
+    polymer-build "^3.1.0"
     polymer-project-config "^4.0.0"
     requirejs "^2.3.4"
     resolve "^1.5.0"
-    send "^0.14.1"
+    send "^0.16.2"
     spdy "^3.3.3"
 
 portfinder@^1.0.9:
@@ -12089,13 +11190,13 @@ prop-types@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-proxy-addr@~2.0.2, proxy-addr@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
-  integrity sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==
+proxy-addr@~2.0.3, proxy-addr@~2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
+  integrity sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==
   dependencies:
     forwarded "~0.1.2"
-    ipaddr.js "1.6.0"
+    ipaddr.js "1.8.0"
 
 prr@~1.0.1:
   version "1.0.1"
@@ -12107,6 +11208,11 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
+psl@^1.1.24:
+  version "1.1.29"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
+  integrity sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==
+
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -12173,21 +11279,16 @@ q@1.4.1:
   integrity sha1-VXBbzZPF82c1MMLCy8DCs63cKG4=
 
 q@^1.4.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
-  integrity sha1-3QG6ydBtMObyGa7LglPunr3DCPE=
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
 qs@6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
   integrity sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==
 
-qs@~6.3.0:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
-  integrity sha1-51vV9uJoEioqDgvaYwslUMFmUCw=
-
-qs@~6.5.1:
+qs@6.5.2, qs@~6.5.1, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
@@ -12208,9 +11309,9 @@ querystringify@^2.0.0:
   integrity sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==
 
 randomatic@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"
-  integrity sha512-VdxFOIEY3mNO5PtSRkkle/hPJDHvQhK21oa73K4yAc9qmp6N429gAyF1gZMOTMeS0/AYzaV/2Trcef+NaIonSA==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
   dependencies:
     is-number "^4.0.0"
     kind-of "^6.0.0"
@@ -12251,22 +11352,22 @@ raw-body@2.3.2:
     iconv-lite "0.4.19"
     unpipe "1.0.0"
 
+raw-body@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
+  integrity sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==
+  dependencies:
+    bytes "3.0.0"
+    http-errors "1.6.3"
+    iconv-lite "0.4.23"
+    unpipe "1.0.0"
+
 raw-loader@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
   integrity sha1-DD0L6u2KAclm2Xh793goElKpeao=
 
-rc@^1.0.1, rc@^1.1.6:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.7.tgz#8a10ca30d588d00464360372b890d06dacd02297"
-  integrity sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==
-  dependencies:
-    deep-extend "^0.5.1"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
-rc@^1.1.7:
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -12463,13 +11564,6 @@ reduce-flatten@^1.0.1:
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-1.0.1.tgz#258c78efd153ddf93cb561237f61184f3696e327"
   integrity sha1-JYx479FT3fk8tWEjf2EYTzaW4yc=
 
-regenerate-unicode-properties@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-6.0.0.tgz#0fc26f9d5142289df4e177dec58f303d2d097c16"
-  integrity sha512-BvXxRS7RfVWxtm7vrq+0I0j7sqZ1zeSC+yzf5HS0qLnKcZPX541gFEGB39LvGuKHrkyKXrzXug+oC7xkM1Zovw==
-  dependencies:
-    regenerate "^1.3.3"
-
 regenerate-unicode-properties@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"
@@ -12477,7 +11571,7 @@ regenerate-unicode-properties@^7.0.0:
   dependencies:
     regenerate "^1.4.0"
 
-regenerate@^1.3.3, regenerate@^1.4.0:
+regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
@@ -12492,13 +11586,6 @@ regenerator-runtime@^0.12.1:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
   integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
 
-regenerator-transform@^0.12.3:
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.12.3.tgz#459adfb64f6a27164ab991b7873f45ab969eca8b"
-  integrity sha512-y2uxO/6u+tVmtEDIKo+tLCtI0GcbQr0OreosKgCd7HP4VypGjtTrw79DezuwT+W5QX0YWuvpeBOgumrepwM1kA==
-  dependencies:
-    private "^0.1.6"
-
 regenerator-transform@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"
@@ -12526,19 +11613,7 @@ regexpp@^2.0.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.0.tgz#b2a7534a85ca1b033bcf5ce9ff8e56d4e0755365"
   integrity sha512-g2FAVtR8Uh8GO1Nv5wpxW7VFVwHcCEr4wyA8/MHiRkO8uHoR5ntAA8Uq3P1vvMTX/BeQiRVSpDGLd+Wn5HNOTA==
 
-regexpu-core@^4.1.3:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.1.5.tgz#57fdfe1148f8a7a069086228515130cf1820ddd0"
-  integrity sha512-3xo5pFze1F8oR4F9x3aFbdtdxAxQ9WBX6gXfLgeBt7KpDI0+oDF7WVntnhsPKqobU/GAYc2pmx+y3z0JI1+z3w==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^6.0.0"
-    regjsgen "^0.4.0"
-    regjsparser "^0.3.0"
-    unicode-match-property-ecmascript "^1.0.3"
-    unicode-match-property-value-ecmascript "^1.0.1"
-
-regexpu-core@^4.2.0:
+regexpu-core@^4.1.3, regexpu-core@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.2.0.tgz#a3744fa03806cffe146dea4421a3e73bdcc47b1d"
   integrity sha512-Z835VSnJJ46CNBttalHD/dB+Sj2ezmY6Xp38npwU87peK6mqOzOpV8eYktdkLTEkzzD+JsTcxd84ozd8I14+rw==
@@ -12633,59 +11708,7 @@ replace-ext@^1.0.0:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
-request@2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
-  integrity sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
-    forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    oauth-sign "~0.8.1"
-    qs "~6.3.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
-    uuid "^3.0.0"
-
-request@^2.72.0:
-  version "2.87.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
-  integrity sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.6.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.1"
-    forever-agent "~0.6.1"
-    form-data "~2.3.1"
-    har-validator "~5.0.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.17"
-    oauth-sign "~0.8.2"
-    performance-now "^2.1.0"
-    qs "~6.5.1"
-    safe-buffer "^5.1.1"
-    tough-cookie "~2.3.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.1.0"
-
-request@^2.85.0:
+request@2.85.0:
   version "2.85.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
   integrity sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==
@@ -12713,6 +11736,32 @@ request@^2.85.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+request@2.88.0, request@^2.72.0, request@^2.85.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 require-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/require-dir/-/require-dir-1.0.0.tgz#c2639de72960ea1ee280279f2da35e03c6536b2d"
@@ -12737,9 +11786,9 @@ require-uncached@^1.0.3:
     resolve-from "^1.0.0"
 
 requirejs@^2.3.4:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.5.tgz#617b9acbbcb336540ef4914d790323a8d4b861b0"
-  integrity sha512-svnO+aNcR/an9Dpi44C7KSAy5fFGLtmPbaaCeQaklUz8BQhS64tWWIIlvEA5jrWICzlO/X9KSzSeXFnZdBu8nw==
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.6.tgz#e5093d9601c2829251258c0b9445d4d19fa9e7c9"
+  integrity sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg==
 
 requires-port@^1.0.0:
   version "1.0.0"
@@ -12784,10 +11833,10 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.3.2, resolve@^1.5.0:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
-  integrity sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==
+resolve@^1.1.6, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  integrity sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==
   dependencies:
     path-parse "^1.0.5"
 
@@ -12805,13 +11854,6 @@ resolve@^1.4.0:
   dependencies:
     path-parse "^1.0.5"
 
-resolve@^1.6.0:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
-  integrity sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==
-  dependencies:
-    path-parse "^1.0.5"
-
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -12853,12 +11895,12 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rollup@^0.58.2:
-  version "0.58.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.58.2.tgz#2feddea8c0c022f3e74b35c48e3c21b3433803ce"
-  integrity sha512-RZVvCWm9BHOYloaE6LLiE/ibpjv1CmI8F8k0B0Cp+q1eezo3cswszJH1DN0djgzSlo0hjuuCmyeI+1XOYLl4wg==
+rollup@^0.64.1:
+  version "0.64.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.64.1.tgz#9188ee368e5fcd43ffbc00ec414e72eeb5de87ba"
+  integrity sha512-+ThdVXrvonJdOTzyybMBipP0uz605Z8AnzWVY3rf+cSGnLO7uNkJBlN+9jXqWOomkvumXfm/esmBpA5d53qm7g==
   dependencies:
-    "@types/estree" "0.0.38"
+    "@types/estree" "0.0.39"
     "@types/node" "*"
 
 round-slider@^1.3.2:
@@ -12892,13 +11934,6 @@ rx@^4.1.0:
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
   integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
 
-rxjs@^5.5.2:
-  version "5.5.10"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.10.tgz#fde02d7a614f6c8683d0d1957827f492e09db045"
-  integrity sha512-SRjimIDUHJkon+2hFo7xnvNC4ZEHGzCRwh9P7nzX3zPkCGFEg/tuElrNR7L/rZMagnK2JeH2jQwPRpmyXyLB6A==
-  dependencies:
-    symbol-observable "1.0.1"
-
 rxjs@^6.1.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.2.1.tgz#246cebec189a6cbc143a3ef9f62d6f4c91813ca1"
@@ -12916,11 +11951,6 @@ safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
-  integrity sha1-0mPKVGls2KMGtcplUekt5XkY++c=
-
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -12928,7 +11958,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -12939,13 +11969,13 @@ samsam@1.1.2, samsam@1.1.3, samsam@1.x, samsam@^1.1.3, samsam@~1.1:
   integrity sha1-n1CHQZtNCR8jJXHn+lLpCw9VJiE=
 
 sauce-connect-launcher@^1.0.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.2.tgz#7346cc8fbdc443191323439b0733451f5f3521f2"
-  integrity sha1-c0bMj73EQxkTI0ObBzNFH181IfI=
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.4.tgz#8d38f85242a9fbede1b2303b559f7e20c5609a1c"
+  integrity sha512-X2vfwulR6brUGiicXKxPm1GJ7dBEeP1II450Uv4bHGrcGOapZNgzJvn9aioea5IC5BPp/7qjKdE3xbbTBIVXMA==
   dependencies:
     adm-zip "~0.4.3"
     async "^2.1.2"
-    https-proxy-agent "~1.0.0"
+    https-proxy-agent "^2.2.1"
     lodash "^4.16.6"
     rimraf "^2.5.4"
 
@@ -12982,20 +12012,20 @@ select-hose@^2.0.0:
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
 selenium-standalone@^6.7.0:
-  version "6.14.0"
-  resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.14.0.tgz#b49dab2055c827fc90feb0c7a3877e0aa0a94b7d"
-  integrity sha512-NTpcPZq8OkMuuhcPRXoI3Gx2qELMDFvs970h7jzoayLkmRd8DxqjNXy8L7Ainxnmo0er0uF2GsUda07Eu0k5EA==
+  version "6.15.3"
+  resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.15.3.tgz#c89e676f6e5acf54a212bcea985d02880564b008"
+  integrity sha512-BFzdXRB8yYPfCRcLxpJDBLWM0akTBP/x0hB0g+8AR7N/PEvbW39dM/hq0Yp1R0hihVQTPI3KkAJpW6h/f41S4g==
   dependencies:
     async "^2.1.4"
     commander "^2.9.0"
     cross-spawn "^6.0.0"
-    debug "^3.0.0"
+    debug "^4.0.0"
     lodash "^4.17.4"
     minimist "^1.2.0"
     mkdirp "^0.5.1"
     progress "2.0.0"
-    request "2.79.0"
-    tar-stream "1.5.2"
+    request "2.88.0"
+    tar-stream "1.6.1"
     urijs "^1.18.4"
     which "^1.2.12"
     yauzl "^2.5.0"
@@ -13019,21 +12049,16 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.4.1, semver@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
-  integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
 
 semver@^4.1.0:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
   integrity sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=
 
-semver@^5.3.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
-  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
-
 semver@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
@@ -13044,26 +12069,7 @@ semver@~5.0.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
   integrity sha1-d0Zt5YnNXTyV8TiqeLxWmjy10no=
 
-send@0.16.1:
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
-  integrity sha512-ElCLJdJIKPk6ux/Hocwhk7NFHpI3pVm/IZOYWqUmoxcgeyM+MpxHHKhb8QmlJDX1pU6WrgaHBkVNm73Sv7uc2A==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.1"
-    destroy "~1.0.4"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.3.1"
-
-send@0.16.2:
+send@0.16.2, send@^0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
   integrity sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==
@@ -13098,25 +12104,6 @@ send@^0.11.1:
     on-finished "~2.2.0"
     range-parser "~1.0.2"
 
-send@^0.14.1:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.2.tgz#39b0438b3f510be5dc6f667a11f71689368cdeef"
-  integrity sha1-ObBDiz9RC+Xcb2Z6EfcWiTaM3u8=
-  dependencies:
-    debug "~2.2.0"
-    depd "~1.1.0"
-    destroy "~1.0.4"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    etag "~1.7.0"
-    fresh "0.3.0"
-    http-errors "~1.5.1"
-    mime "1.3.4"
-    ms "0.7.2"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.3.1"
-
 sequencify@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/sequencify/-/sequencify-0.0.7.tgz#90cff19d02e07027fd767f5ead3e7b95d1e7380c"
@@ -13140,16 +12127,6 @@ serve-index@^1.7.2:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
-  integrity sha512-hSMUZrsPa/I09VYFJwa627JJkNs0NrfL1Uzuup+GqHfToR2KcsXFymXSV90hoyw3M+msjFuQly+YzIH/q0MGlQ==
-  dependencies:
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    parseurl "~1.3.2"
-    send "0.16.1"
-
 serve-static@1.13.2:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
@@ -13200,11 +12177,6 @@ setimmediate@^1.0.4, setimmediate@^1.0.5:
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
-setprototypeof@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
-  integrity sha1-gaVSFB7BBLiOic44MQOtXGZWTQg=
-
 setprototypeof@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -13259,6 +12231,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sinon-chai@^2.10.0:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-2.14.0.tgz#da7dd4cc83cd6a260b67cca0f7a9fdae26a1205d"
@@ -13360,13 +12339,6 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sntp@1.x.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
-  integrity sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=
-  dependencies:
-    hoek "2.x.x"
-
 sntp@2.x.x:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
@@ -13379,45 +12351,46 @@ socket.io-adapter@~1.1.0:
   resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
   integrity sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=
 
-socket.io-client@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.0.4.tgz#0918a552406dc5e540b380dcd97afc4a64332f8e"
-  integrity sha1-CRilUkBtxeVAs4Dc2Xr8SmQzL44=
+socket.io-client@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.1.1.tgz#dcb38103436ab4578ddb026638ae2f21b623671f"
+  integrity sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==
   dependencies:
     backo2 "1.0.2"
     base64-arraybuffer "0.1.5"
     component-bind "1.0.0"
     component-emitter "1.2.1"
-    debug "~2.6.4"
-    engine.io-client "~3.1.0"
+    debug "~3.1.0"
+    engine.io-client "~3.2.0"
+    has-binary2 "~1.0.2"
     has-cors "1.1.0"
     indexof "0.0.1"
     object-component "0.0.3"
     parseqs "0.0.5"
     parseuri "0.0.5"
-    socket.io-parser "~3.1.1"
+    socket.io-parser "~3.2.0"
     to-array "0.1.4"
 
-socket.io-parser@~3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.1.2.tgz#dbc2282151fc4faebbe40aeedc0772eba619f7f2"
-  integrity sha1-28IoIVH8T6675Aru3Ady66YZ9/I=
+socket.io-parser@~3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.2.0.tgz#e7c6228b6aa1f814e6148aea325b51aa9499e077"
+  integrity sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==
   dependencies:
     component-emitter "1.2.1"
-    debug "~2.6.4"
-    has-binary2 "~1.0.2"
+    debug "~3.1.0"
     isarray "2.0.1"
 
 socket.io@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.0.4.tgz#c1a4590ceff87ecf13c72652f046f716b29e6014"
-  integrity sha1-waRZDO/4fs8TxyZS8Eb3FrKeYBQ=
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.1.1.tgz#a069c5feabee3e6b214a75b40ce0652e1cfb9980"
+  integrity sha512-rORqq9c+7W0DAK3cleWNSyfv/qKXV99hV4tZe+gGLfBECw3XEhBy7x85F3wypA9688LKjtwO9pX9L33/xQI8yA==
   dependencies:
-    debug "~2.6.6"
-    engine.io "~3.1.0"
+    debug "~3.1.0"
+    engine.io "~3.2.0"
+    has-binary2 "~1.0.2"
     socket.io-adapter "~1.1.0"
-    socket.io-client "2.0.4"
-    socket.io-parser "~3.1.1"
+    socket.io-client "2.1.1"
+    socket.io-parser "~3.2.0"
 
 sockjs-client@1.1.5:
   version "1.1.5"
@@ -13505,17 +12478,17 @@ spawn-sync@^1.0.15:
     os-shim "^0.1.2"
 
 spdx-correct@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
-  integrity sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.2.tgz#19bb409e91b47b1ad54159243f7312a858db3c2e"
+  integrity sha512-q9hedtzyXHr5S0A1vEPoK/7l8NpfkFYTq6iCY+Pno2ZbdZR6WexZFtqeVGkGxW3TEJMN914Z55EnAGMmenlIQQ==
   dependencies:
     spdx-expression-parse "^3.0.0"
     spdx-license-ids "^3.0.0"
 
 spdx-exceptions@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz#2c7ae61056c714a5b9b9b2b2af7d311ef5c78fe9"
-  integrity sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
+  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
 
 spdx-expression-parse@^3.0.0:
   version "3.0.0"
@@ -13526,9 +12499,9 @@ spdx-expression-parse@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz#7a7cd28470cc6d3a1cfe6d66886f6bc430d3ac87"
-  integrity sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.1.tgz#e2a303236cac54b04031fa7a5a79c7e701df852f"
+  integrity sha512-TfOfPcYGBB5sDuPn3deByxPhmfegAhpDYKSOXZQN81Oyrrif8ZCodOLzK3AesELnCx03kikhyDwh0pfvvQvF8w==
 
 spdy-transport@^2.0.18:
   version "2.1.0"
@@ -13562,29 +12535,24 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-sprintf-js@^1.0.3:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.1.tgz#36be78320afe5801f6cea3ee78b6e5aab940ea0c"
-  integrity sha1-Nr54Mgr+WAH2zqPueLblqrlA6gw=
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
 sshpk@^1.7.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
-  integrity sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.15.2.tgz#c946d6bd9b1a39d0e8635763f5242d6ed6dcb629"
+  integrity sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-  optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
     ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
     jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
 ssri@^5.2.4:
@@ -13642,11 +12610,6 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-statuses@~1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
-  integrity sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=
-
 statuses@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
@@ -13761,10 +12724,10 @@ stringify-object@^3.2.2:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-stringstream@~0.0.4, stringstream@~0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
-  integrity sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=
+stringstream@~0.0.5:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
+  integrity sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==
 
 strip-ansi@^0.3.0:
   version "0.3.0"
@@ -13889,35 +12852,18 @@ sw-toolbox@^3.4.0:
     path-to-regexp "^1.0.1"
     serviceworker-cache-polyfill "^4.0.0"
 
-symbol-observable@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
-  integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
-
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-table-layout@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-0.3.0.tgz#6ee20dc483db371b3e5c87f704ed2f7c799d2c9a"
-  integrity sha1-buINxIPbNxs+XIf3BO0vfHmdLJo=
-  dependencies:
-    array-back "^1.0.3"
-    core-js "^2.4.1"
-    deep-extend "~0.4.1"
-    feature-detect-es6 "^1.3.1"
-    typical "^2.6.0"
-    wordwrapjs "^2.0.0-0"
-
 table-layout@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-0.4.3.tgz#07509e1d72599f2c128a58ac67682ec4ba002af0"
-  integrity sha512-MIhflPM38ejKrFwWwC3P9x3eHvMo5G5AmNo29Qtz2HpBl5KD2GCcmOErjgNtUQLv/qaqVDagfJY3rJLPDvEgLg==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-0.4.4.tgz#bc5398b2a05e58b67b05dd9238354b89ef27be0f"
+  integrity sha512-uNaR3SRMJwfdp9OUr36eyEi6LLsbcTqTO/hfTsNviKsNeyMBPICJCC7QXRF3+07bAP6FRwA8rczJPBqXDc0CkQ==
   dependencies:
     array-back "^2.0.0"
-    deep-extend "~0.5.0"
+    deep-extend "~0.6.0"
     lodash.padend "^4.6.1"
     typical "^2.6.1"
     wordwrapjs "^3.0.0"
@@ -13945,26 +12891,16 @@ tapable@^1.0.0, tapable@^1.1.0:
   integrity sha512-IlqtmLVaZA2qab8epUXbVWRn3aB1imbDMJtjB3nu4X0NqPkcY/JH9ZtCBWKHWPxs8Svi9tyo8w2dBoi07qZbBA==
 
 tar-fs@^1.12.0:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.2.tgz#17e5239747e399f7e77344f5f53365f04af53577"
-  integrity sha512-LdknWjPEiZC1nOBwhv0JBzfJBGPJar08dZg2rwZe0ZTLQoRGEzgrl7vF3qUEkCHpI/wN9e7RyCuDhMsJUCLPPQ==
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.3.tgz#966a628841da2c4010406a82167cbd5e0c72d509"
+  integrity sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==
   dependencies:
     chownr "^1.0.1"
     mkdirp "^0.5.1"
     pump "^1.0.0"
     tar-stream "^1.1.2"
 
-tar-stream@1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.2.tgz#fbc6c6e83c1a19d4cb48c7d96171fc248effc7bf"
-  integrity sha1-+8bG6DwaGdTLSMfZYXH8JI7/x78=
-  dependencies:
-    bl "^1.0.0"
-    end-of-stream "^1.0.0"
-    readable-stream "^2.0.0"
-    xtend "^4.0.0"
-
-tar-stream@^1.1.2:
+tar-stream@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.1.tgz#f84ef1696269d6223ca48f6e1eeede3f7e81f395"
   integrity sha512-IFLM5wp3QrJODQFPm6/to3LJZrONdBY/otxcvDIQzu217zKye6yVR3hhi9lAjrC2Z+m/j5oDxMPb1qcd8cIvpA==
@@ -13977,14 +12913,17 @@ tar-stream@^1.1.2:
     to-buffer "^1.1.0"
     xtend "^4.0.0"
 
-tar-stream@^1.5.0:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.4.tgz#36549cf04ed1aee9b2a30c0143252238daf94016"
-  integrity sha1-NlSc8E7RrumyowwBQyUiONr5QBY=
+tar-stream@^1.1.2, tar-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
+  integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
   dependencies:
     bl "^1.0.0"
+    buffer-alloc "^1.2.0"
     end-of-stream "^1.0.0"
-    readable-stream "^2.0.0"
+    fs-constants "^1.0.0"
+    readable-stream "^2.3.0"
+    to-buffer "^1.1.1"
     xtend "^4.0.0"
 
 tar@^4:
@@ -14025,14 +12964,6 @@ ternary-stream@^2.0.1:
     merge-stream "^1.0.0"
     through2 "^2.0.1"
 
-test-value@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/test-value/-/test-value-2.1.0.tgz#11da6ff670f3471a73b625ca4f3fdcf7bb748291"
-  integrity sha1-Edpv9nDzRxpztiXKTz/c97t0gpE=
-  dependencies:
-    array-back "^1.0.3"
-    typical "^2.6.0"
-
 test-value@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/test-value/-/test-value-3.0.0.tgz#9168c062fab11a86b8d444dd968bb4b73851ce92"
@@ -14046,6 +12977,11 @@ text-encoding@0.6.4, text-encoding@^0.6.4:
   resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
   integrity sha1-45mpgiV6J22uQou5KEXLcb3CbRk=
 
+text-hex@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
+  integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -14172,7 +13108,7 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-buffer@^1.1.0:
+to-buffer@^1.1.0, to-buffer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
   integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
@@ -14224,13 +13160,21 @@ toposort@^1.0.0:
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
   integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
 
-tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+tough-cookie@~2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
   integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
   dependencies:
     punycode "^1.4.1"
 
+tough-cookie@~2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
+  dependencies:
+    psl "^1.1.24"
+    punycode "^1.4.1"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -14248,6 +13192,11 @@ trim-right@^1.0.1:
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
   integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
 
+triple-beam@^1.2.0, triple-beam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9"
+  integrity sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==
+
 tslib@1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
@@ -14324,11 +13273,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel-agent@~0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
-  integrity sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -14346,15 +13290,7 @@ type-detect@0.1.1, type-detect@1.0.0, type-detect@4.0.8, type-detect@^1.0.0, typ
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2"
   integrity sha1-diIXzAbbJY7EiQihKY6LlRIejqI=
 
-type-is@^1.6.4:
-  version "1.6.15"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
-  integrity sha1-yrEPtJCeRByChC6v4a1kbIGARBA=
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.15"
-
-type-is@~1.6.15, type-is@~1.6.16:
+type-is@^1.6.4, type-is@~1.6.15, type-is@~1.6.16:
   version "1.6.16"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
   integrity sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==
@@ -14372,15 +13308,15 @@ typescript@3.1.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.3.tgz#01b70247a6d3c2467f70c45795ef5ea18ce191d5"
   integrity sha512-+81MUSyX+BaSo+u2RbozuQk/UWx6hfG0a5gHu4ANEM4sU96XbuIyAB+rWBW1u70c6a5QuZfuYICn3s2UjuHUpA==
 
-typical@^2.6.0, typical@^2.6.1:
+typical@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/typical/-/typical-2.6.1.tgz#5c080e5d661cbbe38259d2e70a3c7253e873881d"
   integrity sha1-XAgOXWYcu+OCWdLnCjxyU+hziB0=
 
 ua-parser-js@^0.7.15:
-  version "0.7.18"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
-  integrity sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==
+  version "0.7.19"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
+  integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
 
 ua-parser-js@^0.7.9:
   version "0.7.17"
@@ -14426,9 +13362,9 @@ uglifyjs-webpack-plugin@^1.2.4:
     worker-farm "^1.5.2"
 
 ultron@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864"
-  integrity sha1-sHoualQagV/Go0zNRTO67DB8qGQ=
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
 
 unc-path-regex@^0.1.0:
   version "0.1.2"
@@ -14442,18 +13378,10 @@ uncontrollable@^4.0.0:
   dependencies:
     invariant "^2.1.0"
 
-underscore.string@3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.4.tgz#2c2a3f9f83e64762fdc45e6ceac65142864213db"
-  integrity sha1-LCo/n4PmR2L9xF5s6sZRQoZCE9s=
-  dependencies:
-    sprintf-js "^1.0.3"
-    util-deprecate "^1.0.2"
-
 underscore@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
-  integrity sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
+  integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==
 
 underscore@~1.6.0:
   version "1.6.0"
@@ -14465,24 +13393,11 @@ unfetch@^4.0.1:
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.0.1.tgz#8750c4c7497ade75d40387d7dbc4ba024416b8f6"
   integrity sha512-HzDM9NgldcRvHVDb/O9vKoUszVij30Yw5ePjOZJig8nF/YisG7QN/9CBXZ8dsHLouXMeLZ82r+Jod9M2wFkEbQ==
 
-unicode-canonical-property-names-ecmascript@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.3.tgz#f6119f417467593c0086357c85546b6ad5abc583"
-  integrity sha512-iG/2t0F2LAU8aZYPkX5gi7ebukHnr3sWFESpb+zPQeeaQwOkfoO6ZW17YX7MdRPNG9pCy+tjzGill+Ah0Em0HA==
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
   integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
 
-unicode-match-property-ecmascript@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.3.tgz#db9b1cb4ffc67e0c5583780b1b59370e4cbe97b9"
-  integrity sha512-nFcaBFcr08UQNF15ZgI5ISh3yUnQm7SJRRxwYrL5VYX46pS+6Q7TCTv4zbK+j6/l7rQt0mMiTL2zpmeygny6rA==
-  dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.2"
-    unicode-property-aliases-ecmascript "^1.0.3"
-
 unicode-match-property-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
@@ -14491,21 +13406,11 @@ unicode-match-property-ecmascript@^1.0.4:
     unicode-canonical-property-names-ecmascript "^1.0.4"
     unicode-property-aliases-ecmascript "^1.0.4"
 
-unicode-match-property-value-ecmascript@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.0.1.tgz#fea059120a016f403afd3bf586162b4db03e0604"
-  integrity sha512-lM8B0FDZQh9yYGgiabRQcyWicB27VLOolSBRIxsO7FeQPtg+79Oe7sC8Mzr8BObDs+G9CeYmC/shHo6OggNEog==
-
 unicode-match-property-value-ecmascript@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.0.2.tgz#9f1dc76926d6ccf452310564fd834ace059663d4"
   integrity sha512-Rx7yODZC1L/T8XKo/2kNzVAQaRE88AaMvI1EF/Xnj3GW2wzN6fop9DDWuFAKUVFH7vozkz26DzP0qyWLKLIVPQ==
 
-unicode-property-aliases-ecmascript@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.3.tgz#ac3522583b9e630580f916635333e00c5ead690d"
-  integrity sha512-TdDmDOTxEf2ad1g3ZBpM6cqKIb2nJpVlz1Q++casDryKz18tpeMBhSng9hjC1CTQCkOV9Rw2knlSB6iRo7ad1w==
-
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
@@ -14580,7 +13485,7 @@ untildify@^2.0.0, untildify@^2.1.0:
   dependencies:
     os-homedir "^1.0.0"
 
-untildify@^3.0.2:
+untildify@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
   integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
@@ -14614,22 +13519,7 @@ update-notifier@^1.0.0:
     semver-diff "^2.0.0"
     xdg-basedir "^2.0.0"
 
-update-notifier@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
-  integrity sha1-TognpruRUUCrCTVZ1wFOPruDdFE=
-  dependencies:
-    boxen "^1.2.1"
-    chalk "^2.0.1"
-    configstore "^3.0.0"
-    import-lazy "^2.1.0"
-    is-installed-globally "^0.1.0"
-    is-npm "^1.0.0"
-    latest-version "^3.0.0"
-    semver-diff "^2.0.0"
-    xdg-basedir "^3.0.0"
-
-update-notifier@^2.3.0:
+update-notifier@^2.2.0, update-notifier@^2.3.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
   integrity sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==
@@ -14710,7 +13600,7 @@ user-home@^1.1.1:
   resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
   integrity sha1-K1viOjK2Onyd640PKNSFcko98ZA=
 
-util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -14757,21 +13647,11 @@ uuid@^2.0.1:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
   integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
 
-uuid@^3.0.0, uuid@^3.1.0, uuid@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
-  integrity sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==
-
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.0.1, uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
-uws@~0.14.4:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
-  integrity sha1-Z6rzPEaypYel9mZtAPdpEyjxSdw=
-
 v8-compile-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.0.tgz#526492e35fc616864284700b7043e01baee09f0a"
@@ -14799,9 +13679,9 @@ validate-element-name@^2.1.1:
     meow "^3.7.0"
 
 validate-npm-package-license@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
-  integrity sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
   dependencies:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
@@ -14907,7 +13787,19 @@ vinyl@^1.0.0, vinyl@^1.1.0, vinyl@^1.1.1, vinyl@^1.2.0:
     clone-stats "^0.0.1"
     replace-ext "0.0.1"
 
-vinyl@^2.0.1, vinyl@^2.1.0:
+vinyl@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.0.tgz#d85b07da96e458d25b2ffe19fece9f2caa13ed86"
+  integrity sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
+vinyl@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
   integrity sha1-Ah+cLPlR1rk5lDyJ617lrdT9kkw=
@@ -14932,14 +13824,9 @@ vm-browserify@0.0.4:
     indexof "0.0.1"
 
 vscode-uri@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-1.0.3.tgz#631bdbf716dccab0e65291a8dc25c23232085a52"
-  integrity sha1-Yxvb9xbcyrDmUpGo3CXCMjIIWlI=
-
-walkdir@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"
-  integrity sha1-oW0CXrkxvQO1LzCMrtD0D86+lTI=
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-1.0.6.tgz#6b8f141b0bbc44ad7b07e94f82f168ac7608ad4d"
+  integrity sha512-sLI2L0uGov3wKVb9EB+vIQBl9tVP90nqRvxSoJ35vI3NjxE8jfsE5DSOhWgSunHSZmKS4OCi2jrtfxK7uyp2ww==
 
 warning@^2.0.0:
   version "2.1.0"
@@ -14990,9 +13877,9 @@ wct-browser-legacy@^1.0.1:
     stacky "^1.3.1"
 
 wct-local@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/wct-local/-/wct-local-2.1.2.tgz#91ea7e7be582e81f7b24945f3c98be4d27d20314"
-  integrity sha512-F83d53SJ1X9PvyXMi/NQajU5X6SP1baWilW56xdcTIMjpGq4/YTbxs+yqdqXgapV4SfUdjFBnyfwcpc4uESZng==
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/wct-local/-/wct-local-2.1.3.tgz#624f2bf29213ea140ae41326e4af1adf7ed91cef"
+  integrity sha512-pOGyT07Bh6TAJVk7E3P+n5RybjtYBqm745fCfY5vuhQd069mN1WUlivMgZzWfJuvuXVpKFkAERrN/+tTjbmgmQ==
   dependencies:
     "@types/express" "^4.0.30"
     "@types/freeport" "^1.0.19"
@@ -15006,30 +13893,29 @@ wct-local@^2.1.1:
     which "^1.0.8"
 
 wct-sauce@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/wct-sauce/-/wct-sauce-2.0.2.tgz#b89ac990b126326ca8307b2bec7c483344d9ad49"
-  integrity sha512-UExx6GBEhxwebMnPD7QYDiNegC+DBzkPf7HnextZ0tFbB67AGPZhEbuQMmzdtjFiCskWpxJ2TqXXqpITtgM9Hg==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wct-sauce/-/wct-sauce-2.1.0.tgz#67d0be346aabbbc28384e8d143b8d3ca7ba774c0"
+  integrity sha512-c3R4PJcbpS7Gxv2vZ4HDAqpXV6cT9peslAWMU7hHH9PMhKDPbn8RNa6E4DVL0tOmZznB+3cRmtZ6+vJ/aDwu1A==
   dependencies:
-    chalk "^1.1.1"
+    chalk "^2.4.1"
     cleankill "^2.0.0"
-    lodash "^3.0.1"
+    lodash "^4.17.10"
     request "^2.85.0"
     sauce-connect-launcher "^1.0.0"
     temp "^0.8.1"
-    uuid "^2.0.1"
+    uuid "^3.2.1"
 
 wd@^1.2.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/wd/-/wd-1.4.1.tgz#6b1ab39aab1728ee276c1a2b6d7321da68b16e8c"
-  integrity sha512-C0wWd2X4SWWcyx5qxaixiZE4Vb07sl0yDfWHPeml8lDHSbmI9erE9BmTHIqOGoDxGgJ3/hkFmODQ7ZLKiF8+8Q==
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/wd/-/wd-1.11.0.tgz#b610deea7f79f5a520a573c09e047e42d31433f9"
+  integrity sha512-h2EBfJvmsWocIjOOg5BsHh9IJKrqZDG4Az4jEZhFugEH7sOPcX6feZQ30aFuktqDI0jquarZJmNpA6V0A0Q7Mg==
   dependencies:
-    archiver "1.3.0"
+    archiver "2.1.1"
     async "2.0.1"
-    lodash "4.16.2"
+    lodash "4.17.10"
     mkdirp "^0.5.1"
     q "1.4.1"
-    request "2.79.0"
-    underscore.string "3.3.4"
+    request "2.85.0"
     vargs "0.1.0"
 
 web-animations-js@^2.3.1:
@@ -15037,7 +13923,42 @@ web-animations-js@^2.3.1:
   resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.3.1.tgz#3a6d9bc15196377a90f8e2803fa5262165b04510"
   integrity sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA=
 
-web-component-tester@^6.7.1, web-component-tester@^6.8.0:
+web-component-tester@^6.7.1:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/web-component-tester/-/web-component-tester-6.9.0.tgz#9666b9054d4ce76cc769195be9a0ff72b23ea47b"
+  integrity sha512-l5KzzhlHJQ+I2qtVlo5cdUZdXenfb70mNJdHdOXc9YdgpUdkT1kQ9cRKWguaVpXQmphcpWjw8KOgkf5oUkafUw==
+  dependencies:
+    "@polymer/sinonjs" "^1.14.1"
+    "@polymer/test-fixture" "^0.0.3"
+    "@webcomponents/webcomponentsjs" "^1.0.7"
+    accessibility-developer-tools "^2.12.0"
+    async "^2.4.1"
+    body-parser "^1.17.2"
+    bower-config "^1.4.0"
+    chalk "^1.1.3"
+    cleankill "^2.0.0"
+    express "^4.15.3"
+    findup-sync "^2.0.0"
+    glob "^7.1.2"
+    lodash "^3.10.1"
+    multer "^1.3.0"
+    nomnom "^1.8.1"
+    polyserve "^0.27.13"
+    resolve "^1.5.0"
+    semver "^5.3.0"
+    send "^0.11.1"
+    server-destroy "^1.0.1"
+    sinon "^2.3.5"
+    sinon-chai "^2.10.0"
+    socket.io "^2.0.3"
+    stacky "^1.3.1"
+    wd "^1.2.0"
+  optionalDependencies:
+    update-notifier "^2.2.0"
+    wct-local "^2.1.1"
+    wct-sauce "^2.0.2"
+
+web-component-tester@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/web-component-tester/-/web-component-tester-6.8.0.tgz#400afc10571a2f2e1a6031b6527659d6bcb453f0"
   integrity sha512-zj1nZ7dq270svfkdPo4Mc4CuCTab/Wp0SMIKb8g6xD0Q76g15ttHyscYAxQkywVuabwgWeTXiotUOiQaiwX8uA==
@@ -15214,9 +14135,9 @@ whatwg-fetch@>=0.10.0:
   integrity sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=
 
 whatwg-url@^6.4.0:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.1.tgz#fdb94b440fd4ad836202c16e9737d511f012fd67"
-  integrity sha512-FwygsxsXx27x6XXuExA/ox3Ktwcbf+OAvrKmLulotDAiO1Q6ixchPFaHYsis2zZBZSJTR0+dR+JVtf7MlbqZjw==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
   dependencies:
     lodash.sortby "^4.7.0"
     tr46 "^1.0.1"
@@ -15227,14 +14148,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@^1.0.8, which@^1.2.14:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
-  integrity sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^1.2.10, which@^1.2.12, which@^1.2.4, which@^1.2.9:
+which@^1.0.8, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -15256,16 +14170,39 @@ widest-line@^1.0.0:
     string-width "^1.0.1"
 
 widest-line@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.0.tgz#0142a4e8a243f8882c0233aa0e0281aa76152273"
-  integrity sha1-AUKk6KJD+IgsAjOqDgKBqnYVInM=
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
+  integrity sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==
   dependencies:
     string-width "^2.1.1"
 
+winston-transport@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.2.0.tgz#a20be89edf2ea2ca39ba25f3e50344d73e6520e5"
+  integrity sha512-0R1bvFqxSlK/ZKTH86nymOuKv/cT1PQBMuDdA7k7f0S9fM44dNH6bXnuxwXPrN8lefJgtZq08BKdyZ0DZIy/rg==
+  dependencies:
+    readable-stream "^2.3.6"
+    triple-beam "^1.2.0"
+
+winston@*, winston@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-3.1.0.tgz#80724376aef164e024f316100d5b178d78ac5331"
+  integrity sha512-FsQfEE+8YIEeuZEYhHDk5cILo1HOcWkGwvoidLrDgPog0r4bser1lEIOco2dN9zpDJ1M88hfDgZvxe5z4xNcwg==
+  dependencies:
+    async "^2.6.0"
+    diagnostics "^1.1.1"
+    is-stream "^1.1.0"
+    logform "^1.9.1"
+    one-time "0.0.4"
+    readable-stream "^2.3.6"
+    stack-trace "0.0.x"
+    triple-beam "^1.3.0"
+    winston-transport "^4.2.0"
+
 winston@^2.2.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/winston/-/winston-2.4.2.tgz#3ca01f763116fc48db61053b7544e750431f8db0"
-  integrity sha512-4S/Ad4ZfSNl8OccCLxnJmNISWcm2joa6Q0YGDxlxMzH0fgSwWsjMt+SmlNwCqdpaPg3ev1HKkMBsIiXeSUwpbA==
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-2.4.4.tgz#a01e4d1d0a103cf4eada6fc1f886b3110d71c34b"
+  integrity sha512-NBo2Pepn4hK4V01UfcWcDlmiVTs7VTB1h7bgnB0rgP146bYhMxX0ypCz3lBOfNxCO4Zuek7yeT+y/zM1OfMw4Q==
   dependencies:
     async "~1.0.0"
     colors "1.0.x"
@@ -15284,16 +14221,6 @@ wordwrap@~1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
-wordwrapjs@^2.0.0-0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrapjs/-/wordwrapjs-2.0.0.tgz#ab55f695e6118da93858fdd70c053d1c5e01ac20"
-  integrity sha1-q1X2leYRjak4WP3XDAU9HF4BrCA=
-  dependencies:
-    array-back "^1.0.3"
-    feature-detect-es6 "^1.3.1"
-    reduce-flatten "^1.0.1"
-    typical "^2.6.0"
-
 wordwrapjs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/wordwrapjs/-/wordwrapjs-3.0.0.tgz#c94c372894cadc6feb1a66bff64e1d9af92c5d1e"
@@ -15473,12 +14400,13 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@~2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80"
-  integrity sha1-a5Sz5EfLajY/eF6vlK9jWejoHIA=
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  integrity sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==
   dependencies:
-    safe-buffer "~5.0.1"
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
 xdg-basedir@^2.0.0:
@@ -15504,9 +14432,9 @@ xmldom@0.1.x:
   integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
 
 xmlhttprequest-ssl@~1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.4.tgz#04f560915724b389088715cc0ed7813e9677bf57"
-  integrity sha1-BPVgkVcks4kIhxXMDteBPpZ3v1c=
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+  integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
 
 xregexp@4.0.0:
   version "4.0.0"
@@ -15572,12 +14500,12 @@ yargs@12.0.2, yargs@^12.0.1:
     yargs-parser "^10.1.0"
 
 yauzl@^2.5.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.8.0.tgz#79450aff22b2a9c5a41ef54e02db907ccfbf9ee2"
-  integrity sha1-eUUK/yKyqcWkHvVOAtuQfM+/nuI=
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
   dependencies:
     buffer-crc32 "~0.2.3"
-    fd-slicer "~1.0.1"
+    fd-slicer "~1.1.0"
 
 yeast@0.1.2:
   version "0.1.2"
@@ -15603,25 +14531,25 @@ yeoman-environment@^1.5.2:
     untildify "^2.0.0"
 
 yeoman-environment@^2.0.5:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/yeoman-environment/-/yeoman-environment-2.1.1.tgz#10a045f7fc4397873764882eae055a33e56ee1c5"
-  integrity sha512-IBLwCUrJrDxBYuwdYm1wuF3O/CR2LpXR0rFS684QOrU6x69DPPrsdd20dZOFaedZ/M9sON7po73WhO3I1CbgNQ==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/yeoman-environment/-/yeoman-environment-2.3.3.tgz#1bd9720714cc49036e901503a789d809df8f51bf"
+  integrity sha512-HBpXdNw8V66EwqIFt01rNhSgX33BOzgVb9CxpIvESvCI4ELeOSniB6gV6RXwrBur8kmHZCIAkYQYpib7Qxx8FQ==
   dependencies:
-    chalk "^2.1.0"
+    chalk "^2.4.1"
     cross-spawn "^6.0.5"
     debug "^3.1.0"
-    diff "^3.3.1"
+    diff "^3.5.0"
     escape-string-regexp "^1.0.2"
     globby "^8.0.1"
     grouped-queue "^0.3.3"
-    inquirer "^5.2.0"
+    inquirer "^6.0.0"
     is-scoped "^1.0.0"
     lodash "^4.17.10"
-    log-symbols "^2.1.0"
+    log-symbols "^2.2.0"
     mem-fs "^1.1.0"
     strip-ansi "^4.0.0"
     text-table "^0.2.0"
-    untildify "^3.0.2"
+    untildify "^3.0.3"
 
 yeoman-generator@^3.1.1:
   version "3.1.1"
@@ -15654,7 +14582,7 @@ yeoman-generator@^3.1.1:
     through2 "^2.0.0"
     yeoman-environment "^2.0.5"
 
-zip-stream@^1.1.0:
+zip-stream@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
   integrity sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=

From 7cf65ba0660d064aff8748c309a195dd2d093e85 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 11:04:06 +0100
Subject: [PATCH 38/67] Update testing tools (#1925)

---
 package.json |   6 +-
 yarn.lock    | 251 +++++++++++++++++++++++++++++++--------------------
 2 files changed, 157 insertions(+), 100 deletions(-)

diff --git a/package.json b/package.json
index 0e19a0fe04..65025b04b5 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.1.0",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.0.2",
     "merge-stream": "^1.0.1",
     "mocha": "^5.2.0",
     "parse5": "^5.1.0",
@@ -133,9 +133,9 @@
     "polymer-cli": "^1.8.0",
     "prettier": "^1.14.3",
     "raw-loader": "^0.5.1",
-    "reify": "^0.17.3",
+    "reify": "^0.18.1",
     "require-dir": "^1.0.0",
-    "sinon": "^6.3.4",
+    "sinon": "^7.1.0",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
     "tslint-eslint-rules": "^5.4.0",
diff --git a/yarn.lock b/yarn.lock
index 4905a9ec53..7e88190bd3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1393,12 +1393,10 @@
   dependencies:
     array-from "^2.1.1"
 
-"@sinonjs/samsam@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-2.1.1.tgz#f352621c24c9e9ab2ed293a7655e8d46bfd64c16"
-  integrity sha512-7oX6PXMulvdN37h88dvlvRyu61GYZau40fL4wEZvPEHvrjpJc3lDv6xDM5n4Z0StufUVB5nDvVZUM+jZHdMOOQ==
-  dependencies:
-    array-from "^2.1.1"
+"@sinonjs/samsam@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-2.1.2.tgz#16947fce5f57258d01f1688fdc32723093c55d3f"
+  integrity sha512-ZwTHAlC9akprWDinwEPD4kOuwaYZlyMwVJIANsKNC3QVp0AHB04m7RnB4eqeWfgmxw8MGTzS9uMaw93Z3QcZbw==
 
 "@types/babel-generator@^6.25.1":
   version "6.25.2"
@@ -2299,15 +2297,15 @@ acorn@^3.0.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
   integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
 
-acorn@^5.0.0, acorn@^5.0.3, acorn@^5.5.0, acorn@^5.6.0, acorn@^5.6.2:
+acorn@^5.0.0, acorn@^5.0.3, acorn@^5.5.3, acorn@^5.6.0, acorn@^5.6.2:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^5.5.3:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
-  integrity sha512-d+nbxBUGKg7Arpsvbnlq61mc12ek3EY8EQldM3GPAhWJ1UVxC6TDGbIvUMNU6obBX3i1+ptCIzV4vq0gFPEGVQ==
+acorn@^5.5.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+  integrity sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==
 
 adm-zip@~0.4.3:
   version "0.4.11"
@@ -2407,7 +2405,7 @@ ansi-cyan@^0.1.1:
   dependencies:
     ansi-wrap "0.1.0"
 
-ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
+ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
   integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
@@ -2728,10 +2726,10 @@ assert@^1.1.1:
   dependencies:
     util "0.10.3"
 
-assertion-error@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.0.2.tgz#13ca515d86206da0bac66e834dd397d87581094c"
-  integrity sha1-E8pRXYYgbaC6xm6DTdOX2HWBCUw=
+assertion-error@^1.0.1, assertion-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
+  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
 assign-symbols@^1.0.0:
   version "1.0.0"
@@ -3968,16 +3966,16 @@ chai@^3.5.0:
     type-detect "^1.0.0"
 
 chai@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.1.2.tgz#0f64584ba642f0f2ace2806279f4f06ca23ad73c"
-  integrity sha1-D2RYS6ZC8PKs4oBiefTwbKI61zw=
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
+  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
   dependencies:
-    assertion-error "^1.0.1"
-    check-error "^1.0.1"
-    deep-eql "^3.0.0"
+    assertion-error "^1.1.0"
+    check-error "^1.0.2"
+    deep-eql "^3.0.1"
     get-func-name "^2.0.0"
-    pathval "^1.0.0"
-    type-detect "^4.0.0"
+    pathval "^1.1.0"
+    type-detect "^4.0.5"
 
 chalk@^0.5.0:
   version "0.5.1"
@@ -4060,7 +4058,7 @@ chartjs-color@^2.1.0:
     chartjs-color-string "^0.5.0"
     color-convert "^0.5.3"
 
-check-error@^1.0.1:
+check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
@@ -4177,7 +4175,7 @@ cli-cursor@^1.0.1, cli-cursor@^1.0.2:
   dependencies:
     restore-cursor "^1.0.1"
 
-cli-cursor@^2.1.0:
+cli-cursor@^2.0.0, cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
   integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
@@ -4393,16 +4391,11 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.12.1, commander@^2.9.0:
+commander@^2.12.1, commander@^2.14.1, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@^2.14.1:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
-  integrity sha512-6CYPa+JP2ftfRU2qkDK+UTVeQYosOg/2GbcjIcKPHfinyOLPVGXu/ovN86RP49Re5ndJK1N0kuiidFFuepc4ZQ==
-
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -4869,7 +4862,7 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.0:
+debug@^4.0.0, debug@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
   integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
@@ -4919,7 +4912,7 @@ deep-eql@^0.1.3:
   dependencies:
     type-detect "0.1.1"
 
-deep-eql@^3.0.0:
+deep-eql@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
   integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
@@ -5494,7 +5487,14 @@ errno@^0.1.3, errno@~0.1.7:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.2.0, error-ex@^1.3.1:
+error-ex@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  integrity sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -5772,9 +5772,9 @@ espree@^4.0.0:
     acorn-jsx "^4.1.1"
 
 esprima@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
-  integrity sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esprima@~3.1.0:
   version "3.1.3"
@@ -5886,6 +5886,19 @@ execa@^0.9.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -6575,6 +6588,15 @@ 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=
 
+g-status@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/g-status/-/g-status-2.0.2.tgz#270fd32119e8fc9496f066fe5fe88e0a6bc78b97"
+  integrity sha512-kQoE9qH+T1AHKgSSD0Hkv98bobE90ILQcXAF4wvGgsr7uFqNvwmh8j+Lq3l0RVt3E3HjSbv2B9biEGcEtpHLCA==
+  dependencies:
+    arrify "^1.0.1"
+    matcher "^1.0.0"
+    simple-git "^1.85.0"
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -6606,10 +6628,10 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
 
-get-own-enumerable-property-symbols@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-2.0.1.tgz#5c4ad87f2834c4b9b4e84549dc1e0650fb38c24b"
-  integrity sha512-TtY/sbOemiMKPRUDDanGCSgBYe7Mf0vbRsWnBZ+9yghpZ1MvcpSpuZFjHdEeY/LZjZy0vdLjS77L6HosisFiug==
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
+  integrity sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==
 
 get-stdin@^4.0.1:
   version "4.0.1"
@@ -6626,6 +6648,13 @@ get-stream@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
   integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
 
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -7601,9 +7630,9 @@ https-proxy-agent@^2.2.1:
     debug "^3.1.0"
 
 husky@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-1.1.0.tgz#7271e85f5d98b54349788839b720c9a60cd95dba"
-  integrity sha512-jnUD0PK3xGLB5Jc3f3UEwl8qOZeLd0WiWABhVyHPS5R298HOccGZJMOMBSk3gFksAa1BeK9FQYYEfPNlqkfBxg==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-1.1.2.tgz#574c2bb16958db8a8120b63306efaff110525c23"
+  integrity sha512-9TdkUpBeEOjz0AnFdUN4i3w8kEbOsVs9/WSeJqWLq2OO6bcKQhVW64Zi+pVd/AMRLpN3QTINb6ZXiELczvdmqQ==
   dependencies:
     cosmiconfig "^5.0.6"
     execa "^0.9.0"
@@ -8602,22 +8631,25 @@ liftoff@^2.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-lint-staged@^7.3.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.3.0.tgz#90ff33e5ca61ed3dbac35b6f6502dbefdc0db58d"
-  integrity sha512-AXk40M9DAiPi7f4tdJggwuKIViUplYtVj1os1MVEteW7qOkU50EOehayCfO9TsoGK24o/EsWb41yrEgfJDDjCw==
+lint-staged@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.0.2.tgz#b17df8534713071826c2a576c9bdf84b2a535f30"
+  integrity sha512-k8HKT/eIIOpqVLrrNbLDaTn4Vnqan6Y8EZIrxrxtlbArJ76RWcD5hyPqB5f3cLDMb+MjDlOkCWpLpZLHwZw7Fg==
   dependencies:
     chalk "^2.3.1"
     commander "^2.14.1"
     cosmiconfig "^5.0.2"
     debug "^3.1.0"
     dedent "^0.7.0"
-    execa "^0.9.0"
+    del "^3.0.0"
+    execa "^1.0.0"
     find-parent-dir "^0.3.0"
+    g-status "^2.0.2"
     is-glob "^4.0.0"
     is-windows "^1.0.2"
     jest-validate "^23.5.0"
-    listr "^0.14.1"
+    listr "^0.14.2"
+    listr-update-renderer "https://github.com/okonet/listr-update-renderer/tarball/upgrade-log-update"
     lodash "^4.17.5"
     log-symbols "^2.2.0"
     micromatch "^3.1.8"
@@ -8635,10 +8667,9 @@ listr-silent-renderer@^1.1.1:
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
   integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
 
-listr-update-renderer@^0.4.0:
+listr-update-renderer@^0.4.0, "listr-update-renderer@https://github.com/okonet/listr-update-renderer/tarball/upgrade-log-update":
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.4.0.tgz#344d980da2ca2e8b145ba305908f32ae3f4cc8a7"
-  integrity sha1-NE2YDaLKLosUW6MFkI8yrj9MyKc=
+  resolved "https://github.com/okonet/listr-update-renderer/tarball/upgrade-log-update#06073fa93166277607a7814f4e1f83960081414c"
   dependencies:
     chalk "^1.1.3"
     cli-truncate "^0.2.1"
@@ -8646,7 +8677,7 @@ listr-update-renderer@^0.4.0:
     figures "^1.7.0"
     indent-string "^3.0.0"
     log-symbols "^1.0.2"
-    log-update "^1.0.2"
+    log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
 listr-verbose-renderer@^0.4.0:
@@ -8659,7 +8690,7 @@ listr-verbose-renderer@^0.4.0:
     date-fns "^1.27.2"
     figures "^1.7.0"
 
-listr@^0.14.1:
+listr@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.2.tgz#cbe44b021100a15376addfc2d79349ee430bfe14"
   integrity sha512-vmaNJ1KlGuGWShHI35X/F8r9xxS0VTHh9GejVXwSN20fG5xpq3Jh4bJbnumoT6q5EDM/8/YP1z3YMtQbFmhuXw==
@@ -9155,7 +9186,7 @@ lodash.values@~2.4.1:
   dependencies:
     lodash.keys "~2.4.1"
 
-lodash@4.17.10, lodash@^4.17.3:
+lodash@4.17.10, lodash@^4.11.1, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
   integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
@@ -9165,7 +9196,12 @@ lodash@^3.0.0, lodash@^3.10.1:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
   integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
 
-lodash@^4.11.1, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.8.0:
+lodash@^4.16.6, lodash@^4.8.0:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+  integrity sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=
+
+lodash@^4.17.5:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -9189,13 +9225,14 @@ log-symbols@^2.2.0:
   dependencies:
     chalk "^2.0.1"
 
-log-update@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
-  integrity sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=
+log-update@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
+  integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
   dependencies:
-    ansi-escapes "^1.0.0"
-    cli-cursor "^1.0.2"
+    ansi-escapes "^3.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^3.0.1"
 
 logform@^1.9.1:
   version "1.10.0"
@@ -9228,10 +9265,10 @@ lolex@^2.3.2:
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.3.2.tgz#85f9450425103bf9e7a60668ea25dc43274ca807"
   integrity sha512-A5pN2tkFj7H0dGIAM6MFvHKMJcPnjZsOMvR7ujCjfgW5TbV6H9vb1PgxLtHvjqNZTHsUolz+6/WEO0N1xNx2ng==
 
-lolex@^2.7.4:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.5.tgz#113001d56bfc7e02d56e36291cc5c413d1aa0733"
-  integrity sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==
+lolex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-3.0.0.tgz#f04ee1a8aa13f60f1abd7b0e8f4213ec72ec193e"
+  integrity sha512-hcnW80h3j2lbUfFdMArd5UPA/vxZJ+G8vobd+wg3nVEQA0EigStbYcrG030FJxL6xiDDPEkoMatV9xIh5OecQQ==
 
 loose-envify@^1.0.0:
   version "1.4.0"
@@ -9321,7 +9358,7 @@ marked@^0.5.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.0.tgz#9e590bad31584a48ff405b33ab1c0dd25172288e"
   integrity sha512-UhjmkCWKu1SS/BIePL2a59BMJ7V42EYtTfksodPRXzPEGEph3Inp5dylseqt+KbU9Jglsx8xcMKmlumfJMBXAA==
 
-matcher@^1.1.0:
+matcher@^1.0.0, matcher@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-1.1.1.tgz#51d8301e138f840982b338b116bb0c09af62c1c2"
   integrity sha512-+BmqxWIubKTRKNWx/ahnCkk3mG8m7OturVlqq6HiojGJTd5hVYbgZm6WzcYPCoB+KBT4Vd6R7WSRG2OADNaCjg==
@@ -9875,10 +9912,10 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-nise@^1.4.5:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/nise/-/nise-1.4.5.tgz#979a97a19c48d627bb53703726ae8d53ce8d4b3e"
-  integrity sha512-OHRVvdxKgwZELf2DTgsJEIA4MOq8XWvpSUzoOXyxJ2mY0mMENWC66+70AShLR2z05B1dzrzWlUQJmJERlOUpZw==
+nise@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-1.4.6.tgz#76cc3915925056ae6c405dd8ad5d12bde570c19f"
+  integrity sha512-1GedetLKzmqmgwabuMSqPsT7oumdR77SBpDfNNJhADRIeA3LN/2RVqR4fFqwvzhAqcTef6PPCzQwITE/YQ8S8A==
   dependencies:
     "@sinonjs/formatio" "3.0.0"
     just-extend "^3.0.0"
@@ -10369,9 +10406,9 @@ p-locate@^3.0.0:
     p-limit "^2.0.0"
 
 p-map@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a"
-  integrity sha1-BfXkrpegaDcbwqXMhr+9vBnErno=
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
 
 p-timeout@^1.1.1:
   version "1.2.1"
@@ -10609,7 +10646,7 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
-pathval@^1.0.0:
+pathval@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
   integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
@@ -11652,10 +11689,10 @@ regjsparser@^0.3.0:
   dependencies:
     jsesc "~0.5.0"
 
-reify@^0.17.3:
-  version "0.17.3"
-  resolved "https://registry.yarnpkg.com/reify/-/reify-0.17.3.tgz#5d7a4539dbb4c8310bbde401da39bfb07116d926"
-  integrity sha512-i0t837UYnWyJPCeesupZjmpThIppOPSs4I/uHmsWzQaiGQqtsYlbeJNN5i+61fe6UEA3Famc3IHnlm511poMnA==
+reify@^0.18.1:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/reify/-/reify-0.18.1.tgz#7e5fab2f4a33418ad42afded905cd0e78eef110b"
+  integrity sha512-eNiNGxo5Cz/s/7DOeQW5+lTAxMexZPFA8XW/ef6f8WBLtQfYAhDNXxva7ROFC/Wa3q91usYzqJYwC85OXaWUzA==
   dependencies:
     acorn "^5.5.3"
     semver "^5.4.1"
@@ -11935,9 +11972,9 @@ rx@^4.1.0:
   integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
 
 rxjs@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.2.1.tgz#246cebec189a6cbc143a3ef9f62d6f4c91813ca1"
-  integrity sha512-OwMxHxmnmHTUpgO+V7dZChf3Tixf4ih95cmXjzzadULziVl/FKhHScGLj4goEw9weePVOH2Q0+GcCBUhKCZc/g==
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"
+  integrity sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==
   dependencies:
     tslib "^1.9.0"
 
@@ -12049,7 +12086,7 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
   integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
@@ -12059,6 +12096,11 @@ semver@^4.1.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
   integrity sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=
 
+semver@^5.0.3, semver@^5.1.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+  integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
+
 semver@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
@@ -12231,6 +12273,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-git@^1.85.0:
+  version "1.106.0"
+  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.106.0.tgz#81024c7c22fafd0c386a2b338031cc60b3568b9c"
+  integrity sha512-LaxKq4X9Om7bb16Cpinc36hT1YLHMM9KDQMSWJVv4Y1TGDEUuZbs+0lAk2JSKkCEO3xFjcMSx5OjvZo+i4eJvQ==
+  dependencies:
+    debug "^4.0.1"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -12267,18 +12316,18 @@ sinon@^2.3.5:
     text-encoding "0.6.4"
     type-detect "^4.0.0"
 
-sinon@^6.3.4:
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-6.3.4.tgz#6f076d7ddcf381af6c16468ac83d30333a756ec8"
-  integrity sha512-NIaR56Z1mefuRBXYrf4otqBxkWiKveX+fvqs3HzFq2b07HcgpkMgIwmQM/owNjNFAHkx0kJXW+Q0mDthiuslXw==
+sinon@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.1.0.tgz#819b63002ee09a90a3b50a0da4e0bdecb2e3f345"
+  integrity sha512-ffASxced8xr8eU0EGyfj9K++bRCtv/NyOFOxl7UBD86YH97oZjVxvecMhObwRlXe27GRUa6rVFEn67khPZ29rQ==
   dependencies:
     "@sinonjs/commons" "^1.0.2"
     "@sinonjs/formatio" "^3.0.0"
-    "@sinonjs/samsam" "^2.1.1"
+    "@sinonjs/samsam" "^2.1.2"
     diff "^3.5.0"
     lodash.get "^4.4.2"
-    lolex "^2.7.4"
-    nise "^1.4.5"
+    lolex "^3.0.0"
+    nise "^1.4.6"
     supports-color "^5.5.0"
     type-detect "^4.0.8"
 
@@ -12716,11 +12765,11 @@ string_decoder@~0.10.x:
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
 stringify-object@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.2.2.tgz#9853052e5a88fb605a44cd27445aa257ad7ffbcd"
-  integrity sha512-O696NF21oLiDy8PhpWu8AEqoZHw++QW6mUv0UvKZe8gWSdSvMXkiLufK7OmnP27Dro4GU5kb9U7JIO0mBuCRQg==
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
   dependencies:
-    get-own-enumerable-property-symbols "^2.0.1"
+    get-own-enumerable-property-symbols "^3.0.0"
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
@@ -13285,7 +13334,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@0.1.1, type-detect@1.0.0, type-detect@4.0.8, type-detect@^1.0.0, type-detect@^4.0.0, type-detect@^4.0.8:
+type-detect@0.1.1, type-detect@1.0.0, type-detect@4.0.8, type-detect@^1.0.0, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2"
   integrity sha1-diIXzAbbJY7EiQihKY6LlRIejqI=
@@ -14370,6 +14419,14 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
+  integrity sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

From d78b5fac737f65a34c9ff8c6c8a022ab4c37d146 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 11:04:17 +0100
Subject: [PATCH 39/67] Update vaadin components (#1923)

---
 package.json                              |  4 ++--
 src/components/entity/ha-entity-picker.js |  3 ++-
 src/components/ha-combo-box.js            |  1 +
 yarn.lock                                 | 20 ++++++++++----------
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 65025b04b5..ef77b77e9c 100644
--- a/package.json
+++ b/package.json
@@ -64,8 +64,8 @@
     "@polymer/paper-toggle-button": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "^3.0.5",
-    "@vaadin/vaadin-combo-box": "4.2.0-alpha3",
-    "@vaadin/vaadin-date-picker": "3.3.0-alpha1",
+    "@vaadin/vaadin-combo-box": "^4.2.0-beta2",
+    "@vaadin/vaadin-date-picker": "^3.3.0",
     "@webcomponents/shadycss": "^1.5.2",
     "@webcomponents/webcomponentsjs": "^2.1.3",
     "chart.js": "~2.7.2",
diff --git a/src/components/entity/ha-entity-picker.js b/src/components/entity/ha-entity-picker.js
index 16f6472406..3e1a2e4ecb 100644
--- a/src/components/entity/ha-entity-picker.js
+++ b/src/components/entity/ha-entity-picker.js
@@ -38,7 +38,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
       allow-custom-value="[[allowCustomEntity]]"
       on-change='_fireChanged'
     >
-      <paper-input 
+      <paper-input
         autofocus="[[autofocus]]"
         label="[[_computeLabel(label, localize)]]"
         class="input"
@@ -55,6 +55,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
         <style>
           paper-icon-item {
             margin: -10px;
+            padding: 0;
           }
         </style>
         <paper-icon-item>
diff --git a/src/components/ha-combo-box.js b/src/components/ha-combo-box.js
index 867323cfb6..29e3d0b202 100644
--- a/src/components/ha-combo-box.js
+++ b/src/components/ha-combo-box.js
@@ -38,6 +38,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
         <style>
             paper-item {
               margin: -5px -10px;
+              padding: 0;
             }
         </style>
         <paper-item>[[_computeItemLabel(item, itemLabelPath)]]</paper-item>
diff --git a/yarn.lock b/yarn.lock
index 7e88190bd3..b0a0c108b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1968,10 +1968,10 @@
     "@vaadin/vaadin-material-styles" "^1.1.0-beta1"
     "@vaadin/vaadin-themable-mixin" "^1.2.1"
 
-"@vaadin/vaadin-combo-box@4.2.0-alpha3":
-  version "4.2.0-alpha3"
-  resolved "https://registry.yarnpkg.com/@vaadin/vaadin-combo-box/-/vaadin-combo-box-4.2.0-alpha3.tgz#81ad6e7d9f84f1915b6064e733deb96e3bb2c73d"
-  integrity sha512-9jqLbHwJdSMnZTiebRllbIxeRyaIW6HKQ3AG2dM3Vc5iGqFbsTiVZ3t79/CN2yNCHJaCYiAIOZkIfNFMfhL0CQ==
+"@vaadin/vaadin-combo-box@^4.2.0-beta2":
+  version "4.2.0-beta2"
+  resolved "https://registry.yarnpkg.com/@vaadin/vaadin-combo-box/-/vaadin-combo-box-4.2.0-beta2.tgz#da21287cd981afcafe50ca30252153248306f4e5"
+  integrity sha512-jHG5GYoxe//nwiMFPP2XK34FI5AkWLei0rrD2cVLFa+fMrz9+y7/d8GKluUcMM0CMSofgvV4FmPSOaXFOkXDkw==
   dependencies:
     "@polymer/iron-a11y-announcer" "^3.0.0-pre.18"
     "@polymer/iron-a11y-keys-behavior" "^3.0.0-pre.18"
@@ -1983,7 +1983,7 @@
     "@vaadin/vaadin-item" "^2.1.0"
     "@vaadin/vaadin-lumo-styles" "^1.1.1"
     "@vaadin/vaadin-material-styles" "^1.1.2"
-    "@vaadin/vaadin-overlay" "^3.2.0-alpha1"
+    "@vaadin/vaadin-overlay" "^3.2.0"
     "@vaadin/vaadin-text-field" "^2.1.1"
     "@vaadin/vaadin-themable-mixin" "^1.3.2"
 
@@ -1994,10 +1994,10 @@
   dependencies:
     "@polymer/polymer" "^3.0.0"
 
-"@vaadin/vaadin-date-picker@3.3.0-alpha1":
-  version "3.3.0-alpha1"
-  resolved "https://registry.yarnpkg.com/@vaadin/vaadin-date-picker/-/vaadin-date-picker-3.3.0-alpha1.tgz#2e231f7a71d10a065945865cf47f297284d00e81"
-  integrity sha512-LkU70D7xYVtGlh5KOVh30ULFR2Xs75RSZFlf0PcgQIPOpeAaqjY/F+CPEGma5F5xJBmzFa9kDvIElTDZPOtXQA==
+"@vaadin/vaadin-date-picker@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@vaadin/vaadin-date-picker/-/vaadin-date-picker-3.3.0.tgz#1c8e61e910fb49bc5ee2fa0dbcbafec1dab75196"
+  integrity sha512-uWt66I7PTEIL2P8FxFE0uR057LWfyBHoamVPjhtr3VbW7I3+eo9kjp4f2Lq/OafsxF1O2oALRcCPgJDLE8CooQ==
   dependencies:
     "@polymer/iron-a11y-announcer" "^3.0.0-pre.18"
     "@polymer/iron-a11y-keys-behavior" "^3.0.0-pre.18"
@@ -2053,7 +2053,7 @@
   dependencies:
     "@polymer/polymer" "^3.0.0"
 
-"@vaadin/vaadin-overlay@3.2.0-alpha3", "@vaadin/vaadin-overlay@^3.2.0-alpha1", "@vaadin/vaadin-overlay@^3.2.0-alpha3":
+"@vaadin/vaadin-overlay@3.2.0-alpha3", "@vaadin/vaadin-overlay@^3.2.0", "@vaadin/vaadin-overlay@^3.2.0-alpha3":
   version "3.2.0-alpha3"
   resolved "https://registry.yarnpkg.com/@vaadin/vaadin-overlay/-/vaadin-overlay-3.2.0-alpha3.tgz#925fd1b2fc2ec8d1e8963247cdfe7c6a06d08839"
   integrity sha512-JgupF+hAIOUUm6m9ZDwJMsWsEZzwCeTXGdX04NJZesO4uw1czlP6qRIiAWVZQvOEUO8suAM55D25l7lzMvG9IQ==

From 6f7ddef4a455fabf090d17c6c750e1794a54c1a0 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 11:04:25 +0100
Subject: [PATCH 40/67] Update mdi icons (#1922)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ef77b77e9c..47b1277914 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@material/mwc-ripple": "^0.3.1",
-    "@mdi/svg": "^2.7.94",
+    "@mdi/svg": "^3.0.39",
     "@polymer/app-layout": "^3.0.1",
     "@polymer/app-localize-behavior": "^3.0.1",
     "@polymer/app-route": "^3.0.2",
diff --git a/yarn.lock b/yarn.lock
index b0a0c108b3..ab62ef9930 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -756,10 +756,10 @@
   resolved "https://registry.yarnpkg.com/@material/theme/-/theme-0.40.1.tgz#3cc3f1bf87ee9581df03e347a1979e53ae617221"
   integrity sha512-cH1CsGIDisEQ2oroZhLTypV0Ir00x3WIwFXnPo7qv3832tuIDkZY623U3rUax6KNPz4Hh1j0tNpTwgrNZwvwWA==
 
-"@mdi/svg@^2.7.94":
-  version "2.8.94"
-  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-2.8.94.tgz#574da5953fb8ccd58b660d95061d43add53f5704"
-  integrity sha512-Xhn8aSGji5XZ8DeWe8fiugooUmfdi+5IzkRkCaaUZGRAkmPaN+KTc9mEEvHTAwONcawzOmPiiVOfTXQai1n6og==
+"@mdi/svg@^3.0.39":
+  version "3.0.39"
+  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-3.0.39.tgz#6a2d50e5650f758a3a8f6ab294cd272c9408fcda"
+  integrity sha512-kX1CeG+6r9t0ickn+RwxAtIcO6WVZ7v3ashWJ4WRKd68O7WyUTJuqfzdMjHtVtKn5k4ItrZDo9sf1NflWrX+tQ==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"

From de5f02d7060e3931caf564b547e0c02f434b6c0c Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 11:05:56 +0100
Subject: [PATCH 41/67] Update TypeScript to latest (#1924)

---
 package.json |  6 +++---
 yarn.lock    | 34 ++++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 47b1277914..0e3308960d 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
-    "@babel/preset-typescript": "7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
     "@gfx/zopfli": "^1.0.9",
     "babel-eslint": "^10",
     "babel-loader": "^8.0.4",
@@ -139,8 +139,8 @@
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
     "tslint-eslint-rules": "^5.4.0",
-    "tslint-plugin-prettier": "^2.0.0",
-    "typescript": "3.1.3",
+    "tslint-plugin-prettier": "^2.0.1",
+    "typescript": "^3.1.4",
     "wct-browser-legacy": "^1.0.1",
     "web-component-tester": "^6.8.0",
     "webpack": "^4.19.1",
diff --git a/yarn.lock b/yarn.lock
index ab62ef9930..38b4426f63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -569,7 +569,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typescript@^7.0.0":
+"@babel/plugin-transform-typescript@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.1.0.tgz#81e7b4be90e7317cbd04bf1163ebf06b2adee60b"
   integrity sha512-TOTtVeT+fekAesiCHnPz+PSkYSdOSLyLn42DI45nxg6iCdlQY6LIj/tYqpMB0y+YicoTUiYiXqF8rG6SKfhw6Q==
@@ -633,13 +633,13 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
-"@babel/preset-typescript@7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.0.0.tgz#1e65c8b863ff5b290f070d999c810bb48a8e3904"
-  integrity sha512-rFq0bsJjXJo+PyRyBeHDIUGD7+4btHzYcNbL8kgk/7UOxuC9s53ziXxaIL7Ehz4zbsLMREXmUzeamuHwh7BHZg==
+"@babel/preset-typescript@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.1.0.tgz#49ad6e2084ff0bfb5f1f7fb3b5e76c434d442c7f"
+  integrity sha512-LYveByuF9AOM8WrsNne5+N79k1YxjNB6gmpCQsnuSBAcV8QUeB+ZUxQzL7Rz7HksPbahymKkq2qBR+o36ggFZA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.1.0"
 
 "@babel/template@^7.1.0":
   version "7.1.0"
@@ -8631,6 +8631,11 @@ liftoff@^2.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 lint-staged@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.0.2.tgz#b17df8534713071826c2a576c9bdf84b2a535f30"
@@ -13270,12 +13275,13 @@ tslint-eslint-rules@^5.4.0:
     tslib "1.9.0"
     tsutils "^3.0.0"
 
-tslint-plugin-prettier@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-2.0.0.tgz#ade328b26c71f37418d4d01187dca232a7447b49"
-  integrity sha512-nA8yM+1tS9dylirSajTxxFV6jCQrIMQ0Ykl//jjRgqmwwmGp3hqodG+rtr16S/OUwyQBfoFScFDK7nuHYPd4Gw==
+tslint-plugin-prettier@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-2.0.1.tgz#95b6a3b766622ffc44375825d7760225c50c3680"
+  integrity sha512-4FX9JIx/1rKHIPJNfMb+ooX1gPk5Vg3vNi7+dyFYpLO+O57F4g+b/fo1+W/G0SUOkBLHB/YKScxjX/P+7ZT/Tw==
   dependencies:
     eslint-plugin-prettier "^2.2.0"
+    lines-and-columns "^1.1.6"
     tslib "^1.7.1"
 
 tslint@^5.11.0:
@@ -13352,10 +13358,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.3.tgz#01b70247a6d3c2467f70c45795ef5ea18ce191d5"
-  integrity sha512-+81MUSyX+BaSo+u2RbozuQk/UWx6hfG0a5gHu4ANEM4sU96XbuIyAB+rWBW1u70c6a5QuZfuYICn3s2UjuHUpA==
+typescript@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.4.tgz#c74ef7b3c2da65beff548b903022cb8c3cd997ed"
+  integrity sha512-JZHJtA6ZL15+Q3Dqkbh8iCUmvxD3iJ7ujXS+fVkKnwIVAdHc5BJTDNM0aTrnr2luKulFjU7W+SRhDZvi66Ru7Q==
 
 typical@^2.6.1:
   version "2.6.1"

From 7ca2ef4c4c9fa9d08b057cba8644bc1255e21df4 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 30 Oct 2018 06:15:02 -0400
Subject: [PATCH 42/67] Addition to Edit Love Lace Cards (#1885)

* Initial Commit

* Removing old code

* Switching to litlement and ts

* remove .ts from extension

* Addressing a few reviews

* Added ShowDialog Still no whammy

* Fix some things

* Extract one more data method

* Add more types

* Clean up imports

* Call super

* Finishing touches

* Fix typescript check
---
 src/panels/lovelace/common/data.ts            | 21 ++++
 .../components/ha-dialog-edit-card.ts         | 99 +++++++++++++++++++
 .../lovelace/components/hui-card-options.ts   | 68 +++++++++++++
 src/panels/lovelace/hui-root.js               | 76 +++++++++-----
 src/panels/lovelace/hui-view.js               | 38 ++++---
 tsconfig.json                                 |  5 +-
 6 files changed, 270 insertions(+), 37 deletions(-)
 create mode 100644 src/panels/lovelace/common/data.ts
 create mode 100644 src/panels/lovelace/components/ha-dialog-edit-card.ts
 create mode 100644 src/panels/lovelace/components/hui-card-options.ts

diff --git a/src/panels/lovelace/common/data.ts b/src/panels/lovelace/common/data.ts
new file mode 100644
index 0000000000..9baa221ab8
--- /dev/null
+++ b/src/panels/lovelace/common/data.ts
@@ -0,0 +1,21 @@
+import { HomeAssistant } from "../../../types";
+
+export const getCardConfig = (
+  hass: HomeAssistant,
+  cardId: string
+): Promise<string> =>
+  hass.callWS({
+    type: "lovelace/config/card/get",
+    card_id: cardId,
+  });
+
+export const updateCardConfig = (
+  hass: HomeAssistant,
+  cardId: string,
+  config: any
+): Promise<void> =>
+  hass!.callWS({
+    type: "lovelace/config/card/update",
+    card_id: cardId,
+    card_config: config,
+  });
diff --git a/src/panels/lovelace/components/ha-dialog-edit-card.ts b/src/panels/lovelace/components/ha-dialog-edit-card.ts
new file mode 100644
index 0000000000..6e5a368c29
--- /dev/null
+++ b/src/panels/lovelace/components/ha-dialog-edit-card.ts
@@ -0,0 +1,99 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event.js";
+
+import "@polymer/paper-button/paper-button.js";
+import "@polymer/paper-input/paper-textarea.js";
+import "@polymer/paper-dialog/paper-dialog.js";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog.js";
+import { HomeAssistant } from "../../../types";
+import { getCardConfig, updateCardConfig } from "../common/data";
+
+export class HuiEditCardModal extends LitElement {
+  protected hass?: HomeAssistant;
+  private _cardId?: string;
+  private _cardConfig?: string;
+  private _reloadLovelace?: () => void;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      cardId: {
+        type: Number,
+      },
+      _cardConfig: {},
+      _dialogClosedCallback: {},
+    };
+  }
+
+  public async showDialog({ hass, cardId, reloadLovelace }) {
+    this.hass = hass;
+    this._cardId = cardId;
+    this._reloadLovelace = reloadLovelace;
+    this._loadConfig();
+    // Wait till dialog is rendered.
+    await this.updateComplete;
+    this._dialog.open();
+  }
+
+  private get _dialog(): PaperDialogElement {
+    return this.shadowRoot!.querySelector("paper-dialog")!;
+  }
+
+  protected render() {
+    return html`
+      <style>
+        paper-dialog {
+          width: 650px;
+        }
+      </style>
+      <paper-dialog with-backdrop>
+        <h2>Card Configuration</h2>
+        <paper-textarea
+          value="${this._cardConfig}"
+        ></paper-textarea>
+        <div class="paper-dialog-buttons">
+          <paper-button @click="${this._closeDialog}">Cancel</paper-button>
+          <paper-button @click="${this._updateConfig}">Save</paper-button>
+        </div>
+      </paper-dialog>
+    `;
+  }
+
+  private _closeDialog() {
+    this._dialog.close();
+  }
+
+  private async _loadConfig() {
+    this._cardConfig = await getCardConfig(this.hass!, this._cardId!);
+    await this.updateComplete;
+    // This will center the dialog with the updated config
+    fireEvent(this._dialog, "iron-resize");
+  }
+
+  private async _updateConfig() {
+    const newCardConfig = this.shadowRoot!.querySelector("paper-textarea")!
+      .value;
+
+    if (this._cardConfig === newCardConfig) {
+      this._dialog.close();
+      return;
+    }
+    try {
+      await updateCardConfig(this.hass!, this._cardId!, newCardConfig);
+      this._dialog.close();
+      this._reloadLovelace!();
+    } catch (err) {
+      alert(`Saving failed: ${err.reason}`);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-edit-card": HuiEditCardModal;
+  }
+}
+
+customElements.define("ha-dialog-edit-card", HuiEditCardModal);
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
new file mode 100644
index 0000000000..8bf2af28eb
--- /dev/null
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -0,0 +1,68 @@
+import "@polymer/paper-button/paper-button.js";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event.js";
+import { HomeAssistant } from "../../../types.js";
+
+let registeredDialog = false;
+
+export class HuiCardOptions extends LitElement {
+  public cardId?: string;
+  protected hass?: HomeAssistant;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+    };
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (!registeredDialog) {
+      registeredDialog = true;
+      fireEvent(this, "register-dialog", {
+        dialogShowEvent: "show-edit-card",
+        dialogTag: "ha-dialog-edit-card",
+        dialogImport: () => import("./ha-dialog-edit-card"),
+      });
+    }
+  }
+
+  protected render() {
+    return html`
+    <style>
+      div {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+        background: var(--paper-card-background-color, white);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+        text-align: right;
+      }
+      paper-button {
+        color: var(--primary-color);
+        font-weight: 500;
+      }
+    </style>
+    <slot></slot>
+    <div>
+      <paper-button
+        @click="${this._editCard}"
+      >EDIT</paper-button>
+    </div>
+    `;
+  }
+  private _editCard() {
+    fireEvent(this, "show-edit-card", {
+      hass: this.hass,
+      cardId: this.cardId,
+      reloadLovelace: () => fireEvent(this, "config-refresh"),
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-options": HuiCardOptions;
+  }
+}
+
+customElements.define("hui-card-options", HuiCardOptions);
diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js
index 69e4fd45c9..716e1bbb17 100644
--- a/src/panels/lovelace/hui-root.js
+++ b/src/panels/lovelace/hui-root.js
@@ -84,28 +84,40 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
     ></hui-notification-drawer>
     <ha-app-layout id="layout">
       <app-header slot="header" effects="waterfall" fixed condenses>
-        <app-toolbar>
-          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>[[_computeTitle(config)]]</div>
-          <hui-notifications-button
-            hass="[[hass]]"
-            notifications-open="{{notificationsOpen}}"
-            notifications="[[_notifications]]"
-          ></hui-notifications-button>
-          <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-          >
-            <paper-icon-button icon="hass:dots-vertical" slot="dropdown-trigger"></paper-icon-button>
-            <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
-              <paper-item on-click="_handleRefresh">Refresh</paper-item>
-              <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
-              <paper-item on-click="_handleHelp">Help</paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </app-toolbar>
+        <template is='dom-if' if="[[!_editMode]]">
+          <app-toolbar>
+            <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+            <div main-title>[[_computeTitle(config)]]</div>
+            <hui-notifications-button
+              hass="[[hass]]"
+              notifications-open="{{notificationsOpen}}"
+              notifications="[[_notifications]]"
+            ></hui-notifications-button>
+            <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+            >
+              <paper-icon-button icon="hass:dots-vertical" slot="dropdown-trigger"></paper-icon-button>
+              <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
+                <paper-item on-click="_handleRefresh">Refresh</paper-item>
+                <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
+                <paper-item on-click="_editModeEnable">Configure UI</paper-item>
+                <paper-item on-click="_handleHelp">Help</paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </app-toolbar>
+        </template>
+        <template is='dom-if' if="[[_editMode]]">
+          <app-toolbar>
+            <paper-icon-button
+              icon='hass:close'
+              on-click='_editModeDisable'
+            ></paper-icon-button>
+            <div main-title>Edit UI</div>
+          </app-toolbar>
+        </template>
 
         <div sticky hidden$="[[_computeTabsHidden(config.views)]]">
           <paper-tabs scrollable selected="[[_curView]]" on-iron-activate="_handleViewSelected">
@@ -170,6 +182,12 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
         computed: "_updateNotifications(hass.states, _persistentNotifications)",
       },
 
+      _editMode: {
+        type: Boolean,
+        value: false,
+        observer: "_editModeChanged",
+      },
+
       routeData: Object,
     };
   }
@@ -255,6 +273,18 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
     window.open("https://www.home-assistant.io/lovelace/", "_blank");
   }
 
+  _editModeEnable() {
+    this._editMode = true;
+  }
+
+  _editModeDisable() {
+    this._editMode = false;
+  }
+
+  _editModeChanged() {
+    this._selectView(this._curView);
+  }
+
   _handleViewSelected(ev) {
     const index = ev.detail.selected;
     if (index !== this._curView) {
@@ -284,10 +314,12 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
       if (viewConfig.panel) {
         view = createCardElement(viewConfig.cards[0]);
         view.isPanel = true;
+        view.editMode = this._editMode;
       } else {
         view = document.createElement("hui-view");
         view.config = viewConfig;
         view.columns = this.columns;
+        view.editMode = this._editMode;
       }
       if (viewConfig.background) background = viewConfig.background;
     }
diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js
index b13edb5a10..bc33439018 100644
--- a/src/panels/lovelace/hui-view.js
+++ b/src/panels/lovelace/hui-view.js
@@ -2,10 +2,12 @@ import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 import { PolymerElement } from "@polymer/polymer/polymer-element.js";
 
 import "../../components/entity/ha-state-label-badge.js";
+import "./components/hui-card-options.ts";
 
 import applyThemesOnElement from "../../common/dom/apply_themes_on_element.js";
 
 import createCardElement from "./common/create-card-element";
+import computeCardSize from "./common/compute-card-size";
 
 class HUIView extends PolymerElement {
   static get template() {
@@ -73,6 +75,7 @@ class HUIView extends PolymerElement {
       },
       config: Object,
       columns: Number,
+      editMode: Boolean,
     };
   }
 
@@ -80,7 +83,7 @@ class HUIView extends PolymerElement {
     return [
       // Put all properties in 1 observer so we only call configChanged once
       "_createBadges(config)",
-      "_createCards(config, columns)",
+      "_createCards(config, columns, editMode)",
     ];
   }
 
@@ -130,11 +133,25 @@ class HUIView extends PolymerElement {
       return;
     }
 
-    const elements = config.cards.map((cardConfig) => {
+    const elements = [];
+    const elementsToAppend = [];
+    for (const cardConfig of config.cards) {
       const element = createCardElement(cardConfig);
       element.hass = this.hass;
-      return element;
-    });
+      elements.push(element);
+
+      if (!this.editMode) {
+        elementsToAppend.push(element);
+        continue;
+      }
+
+      const wrapper = document.createElement("hui-card-options");
+      wrapper.hass = this.hass;
+      wrapper.cardId = cardConfig.id;
+      wrapper.editMode = this.editMode;
+      wrapper.appendChild(element);
+      elementsToAppend.push(wrapper);
+    }
 
     let columns = [];
     const columnEntityCount = [];
@@ -161,15 +178,10 @@ class HUIView extends PolymerElement {
       return minIndex;
     }
 
-    elements.forEach((el) => {
-      // Trigger custom elements to build up DOM. This is needed for some elements
-      // that use the DOM to decide their height. We don't have to clean this up
-      // because a DOM element can only be in 1 position, so it will be removed from
-      // 'this' and added to the correct column afterwards.
-      this.appendChild(el);
-      const cardSize =
-        typeof el.getCardSize === "function" ? el.getCardSize() : 1;
-      columns[getColumnIndex(cardSize)].push(el);
+    elements.forEach((el, index) => {
+      const cardSize = computeCardSize(el);
+      // Element to append might be the wrapped card when we're editing.
+      columns[getColumnIndex(cardSize)].push(elementsToAppend[index]);
     });
 
     // Remove empty columns
diff --git a/tsconfig.json b/tsconfig.json
index b5402c3807..5911c25995 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2017",
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "lib": ["es2017", "dom", "dom.iterable"],
     "noEmit": true,
@@ -10,6 +10,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "strict": true,
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "skipLibCheck": true
   }
 }

From 38bfe8c8def10d2daba331111c5fb55c4341e883 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 30 Oct 2018 05:15:12 -0500
Subject: [PATCH 43/67] Convert hui-call-service-row to TypeScript/LitElement
 (#1894)

* Convert hui-call-service-row to TypeScript/LitElement

* Update on _config change

* Addressed review comments

* Made `service_data` optional and verified that `callService` does use `entity` if it is available in the passed config.
* Removed check in `entities-card` for `service-data` and will remove the full config check once other PRs have been applied to avoid merge conflicts
* Will create a docs PR to update the docs

* Addressed review comments

* Removed entity config check in entities-card
* Made `icon` optional. Default now `remote`
* Made `action_name` optional. Default now 'Run'

* `.icon`
---
 .../lovelace/cards/hui-entities-card.ts       | 12 ---
 .../lovelace/common/create-row-element.js     |  2 +-
 src/panels/lovelace/entity-rows/types.ts      | 10 +-
 .../special-rows/hui-call-service-row.js      | 80 ----------------
 .../special-rows/hui-call-service-row.ts      | 93 +++++++++++++++++++
 5 files changed, 103 insertions(+), 94 deletions(-)
 delete mode 100644 src/panels/lovelace/special-rows/hui-call-service-row.js
 create mode 100644 src/panels/lovelace/special-rows/hui-call-service-row.ts

diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index ff064930f4..d8288198dd 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -73,18 +73,6 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   public setConfig(config: Config): void {
     const entities = processConfigEntities(config.entities);
-    for (const entity of entities) {
-      if (
-        entity.type === "call-service" &&
-        (!entity.service ||
-          !entity.name ||
-          !entity.icon ||
-          !entity.service_data ||
-          !entity.action_name)
-      ) {
-        throw new Error("Missing required property when type is call-service");
-      }
-    }
 
     this._config = { theme: "default", ...config };
     this._configEntities = entities;
diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index 9d196d96e1..74222bc258 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -14,7 +14,7 @@ import "../entity-rows/hui-text-entity-row.js";
 import "../entity-rows/hui-timer-entity-row.js";
 import "../entity-rows/hui-toggle-entity-row.js";
 
-import "../special-rows/hui-call-service-row.js";
+import "../special-rows/hui-call-service-row";
 import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row";
 import "../special-rows/hui-weblink-row";
diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index c4fcb7dc20..648b9cf9cb 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/src/panels/lovelace/entity-rows/types.ts
@@ -16,11 +16,19 @@ export interface WeblinkConfig {
   icon?: string;
   url: string;
 }
+export interface CallServiceConfig {
+  name: string;
+  icon?: string;
+  action_name?: string;
+  service: string;
+  service_data?: string;
+}
 export type EntityRowConfig =
   | EntityConfig
   | DividerConfig
   | SectionConfig
-  | WeblinkConfig;
+  | WeblinkConfig
+  | CallServiceConfig;
 
 export interface EntityRow {
   hass?: HomeAssistant;
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.js b/src/panels/lovelace/special-rows/hui-call-service-row.js
deleted file mode 100644
index b9b96a51f9..0000000000
--- a/src/panels/lovelace/special-rows/hui-call-service-row.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-
-import "../../../components/ha-icon.js";
-import callService from "../common/call-service.js";
-
-class HuiCallServiceRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <ha-icon icon="[[_config.icon]]"></ha-icon>
-      <div class="flex">
-        <div>
-          [[_config.name]]
-        </div>
-        <paper-button on-click="_callService">[[_config.action_name]]</paper-button>
-      </div>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
-        .flex {
-          flex: 1;
-          overflow: hidden;
-          margin-left: 16px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .flex div {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.icon ||
-      !config.name ||
-      !config.action_name ||
-      !config.service ||
-      !config.service_data
-    ) {
-      throw new Error("Error in card configuration.");
-    }
-    this._config = config;
-  }
-
-  _callService() {
-    callService(this._config, this.hass);
-  }
-}
-customElements.define("hui-call-service-row", HuiCallServiceRow);
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.ts b/src/panels/lovelace/special-rows/hui-call-service-row.ts
new file mode 100644
index 0000000000..1a06ad90ab
--- /dev/null
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.ts
@@ -0,0 +1,93 @@
+import { html, LitElement } from "@polymer/lit-element";
+import "@polymer/paper-button/paper-button.js";
+
+import "../../../components/ha-icon.js";
+
+import callService from "../common/call-service.js";
+import { EntityRow, CallServiceConfig } from "../entity-rows/types.js";
+import { HomeAssistant } from "../../../types.js";
+import { TemplateResult } from "lit-html";
+
+class HuiCallServiceRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: CallServiceConfig;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: CallServiceConfig): void {
+    if (!config || !config.name || !config.service) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = { icon: "hass:remote", action_name: "Run", ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon .icon="${this._config.icon}"></ha-icon>
+      <div class="flex">
+        <div>
+          ${this._config.name}
+        </div>
+        <paper-button
+          @click="${this._callService}"
+        >${this._config.action_name}</paper-button>
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        .flex {
+          flex: 1;
+          overflow: hidden;
+          margin-left: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .flex div {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  private _callService() {
+    callService(this._config, this.hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-call-service-row": HuiCallServiceRow;
+  }
+}
+
+customElements.define("hui-call-service-row", HuiCallServiceRow);

From a771a44557430029632b450c8d13a700973d23a8 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 11:30:57 +0100
Subject: [PATCH 44/67] Fix conditional card with undefined hass (#1927)

* Fix conditional card with undefined hass

* Conditional appendChild

* Allow updating card properly
---
 .../lovelace/cards/hui-conditional-card.ts    | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-conditional-card.ts b/src/panels/lovelace/cards/hui-conditional-card.ts
index 74cdc3890a..508cf50df5 100644
--- a/src/panels/lovelace/cards/hui-conditional-card.ts
+++ b/src/panels/lovelace/cards/hui-conditional-card.ts
@@ -15,8 +15,9 @@ interface Config extends LovelaceConfig {
 }
 
 class HuiConditionalCard extends HTMLElement implements LovelaceCard {
-  protected config?: Config;
-  protected card?: LovelaceCard;
+  private _hass?: HomeAssistant;
+  private _config?: Config;
+  private _card?: LovelaceCard;
 
   public setConfig(config) {
     if (
@@ -28,18 +29,27 @@ class HuiConditionalCard extends HTMLElement implements LovelaceCard {
       throw new Error("Error in card configuration.");
     }
 
-    this.config = config;
-    this.card = createCardElement(config.card);
-    if (this.card) {
-      this.appendChild(this.card);
-      this.card.hass = this.hass;
+    if (this._card && this._card.parentElement) {
+      this.removeChild(this._card);
+    }
+
+    this._config = config;
+    this._card = createCardElement(config.card);
+    if (this._hass) {
+      this.hass = this._hass;
     }
   }
 
   set hass(hass: HomeAssistant) {
+    this._hass = hass;
+
+    if (!this._card) {
+      return;
+    }
+
     const visible =
-      this.config &&
-      this.config.conditions.every((c) => {
+      this._config &&
+      this._config.conditions.every((c) => {
         if (!(c.entity in hass.states)) {
           return false;
         }
@@ -49,15 +59,18 @@ class HuiConditionalCard extends HTMLElement implements LovelaceCard {
         return hass.states[c.entity].state !== c.state_not;
       });
 
-    if (visible && this.card) {
-      this.card.hass = hass;
+    if (visible) {
+      this._card.hass = hass;
+      if (!this._card.parentElement) {
+        this.appendChild(this._card);
+      }
+    } else if (this._card.parentElement) {
+      this.removeChild(this._card);
     }
-
-    this.style.setProperty("display", visible ? "" : "none");
   }
 
   public getCardSize() {
-    return computeCardSize(this.card);
+    return computeCardSize(this._card);
   }
 }
 

From 520e03a6120e4fec0d426f5ef60dc102ec417720 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Tue, 30 Oct 2018 11:33:20 +0100
Subject: [PATCH 45/67] Update translations

---
 translations/de.json |   2 +-
 translations/fr.json |   2 +-
 translations/hr.json | 323 ++++++++++++++++++++++++++++++++++++++++++-
 translations/lv.json |   2 +-
 translations/nl.json |   4 +-
 translations/pl.json |   2 +-
 6 files changed, 328 insertions(+), 7 deletions(-)

diff --git a/translations/de.json b/translations/de.json
index 806094d248..3ce4df4fda 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -923,7 +923,7 @@
         "sensor": "Sensor",
         "sun": "Sonne",
         "switch": "Schalter",
-        "updater": "Aktualisierungsprogramm",
+        "updater": "Updater",
         "weblink": "Weblink",
         "zwave": "Z-Wave",
         "vacuum": "Staubsauger"
diff --git a/translations/fr.json b/translations/fr.json
index e9e142e63a..f9d2311c54 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -133,7 +133,7 @@
         "climate": {
             "off": "Off",
             "on": "On",
-            "heat": "Chaleur",
+            "heat": "Chauffe",
             "cool": "Frais",
             "idle": "Inactif",
             "auto": "Auto",
diff --git a/translations/hr.json b/translations/hr.json
index 6287834dbc..9f4cc0f783 100644
--- a/translations/hr.json
+++ b/translations/hr.json
@@ -12,7 +12,9 @@
         "dev-events": "Događaji",
         "dev-templates": "Predlošci",
         "dev-mqtt": "MQTT",
-        "dev-info": "Informacije"
+        "dev-info": "Informacije",
+        "calendar": "Kalendar",
+        "profile": "Profil"
     },
     "state": {
         "default": {
@@ -89,6 +91,17 @@
             "problem": {
                 "off": "OK",
                 "on": "Problem"
+            },
+            "cold": {
+                "off": "Normalno"
+            },
+            "door": {
+                "off": "Zatvoreno",
+                "on": "Otvori"
+            },
+            "lock": {
+                "off": "Zaključano",
+                "on": "Otključano"
             }
         },
         "calendar": {
@@ -208,6 +221,17 @@
                 "initializing": "Inicijalizacija ({query_stage})",
                 "dead": "Mrtav ({query_stage})"
             }
+        },
+        "weather": {
+            "cloudy": "Oblačno",
+            "fog": "Magla",
+            "lightning": "Munja",
+            "partlycloudy": "Djelomično oblačno",
+            "pouring": "Lije",
+            "rainy": "Kišovito",
+            "snowy": "Snježno",
+            "sunny": "Sunčano",
+            "windy": "Vjetrovito"
         }
     },
     "state_badge": {
@@ -239,15 +263,312 @@
                 "add_item": "Dodaj stavku",
                 "microphone_tip": "Dodirnite mikrofon u gornjem desnom kutu i recite “Add candy to my shopping list”"
             },
+            "logbook": {
+                "showing_entries": "Prikaži entitete za"
+            },
             "config": {
+                "core": {
+                    "section": {
+                        "core": {
+                            "header": "Konfiguracija i kontrola poslužitelja"
+                        }
+                    }
+                },
                 "zwave": {
                     "caption": "Z-Wave"
+                },
+                "automation": {
+                    "picker": {
+                        "header": "Urednik Automatizacije "
+                    },
+                    "editor": {
+                        "actions": {
+                            "duplicate": "Dupliciraj",
+                            "delete": "Obriši",
+                            "delete_confirm": "Sigurno želite pobrisati?",
+                            "unsupported_action": "Nepodržana radnja: {action}",
+                            "type": {
+                                "delay": {
+                                    "delay": "Odgodi"
+                                },
+                                "event": {
+                                    "label": "Pokreni događaj",
+                                    "event": "Event:",
+                                    "service_data": "Servisni podaci"
+                                }
+                            }
+                        },
+                        "triggers": {
+                            "type": {
+                                "state": {
+                                    "for": "Za"
+                                }
+                            }
+                        }
+                    }
+                },
+                "users": {
+                    "caption": "Korisnici",
+                    "description": "Upravljanje korisnicima"
+                },
+                "cloud": {
+                    "caption": "Home Assistant Cloud",
+                    "description_login": "Prijavljeni ste kao {email}",
+                    "description_not_login": "Niste prijavljeni"
+                },
+                "integrations": {
+                    "caption": "integracije",
+                    "description": "Upravljanje povezanim uređajima i uslugama",
+                    "discovered": "Otkriven",
+                    "configured": "Konfiguriran",
+                    "new": "Postavite novu integraciju",
+                    "configure": "Konfiguriranje",
+                    "none": "Još ništa nije konfigurirano",
+                    "config_entry": {
+                        "no_devices": "Ova integracija nema uređaje.",
+                        "no_device": "Entiteti bez uređaja",
+                        "delete_confirm": "Jeste li sigurni da želite izbrisati tu integraciju?",
+                        "restart_confirm": "Ponovo pokrenite Home Assistant da biste dovršili uklanjanje ove integracije",
+                        "manuf": "od {manufacturer}",
+                        "hub": "Povezan putem",
+                        "firmware": "Firmware: {version}",
+                        "device_unavailable": "uređaj nije dostupan",
+                        "entity_unavailable": "entitet nije dostupan"
+                    }
+                }
+            },
+            "profile": {
+                "push_notifications": {
+                    "header": "Push Obavijesti",
+                    "description": "Slanje obavijesti na ovaj uređaj.",
+                    "error_load_platform": "Konfigurirajte notify.html5.",
+                    "error_use_https": "Zahtijeva SSL omogućen za sučelje.",
+                    "push_notifications": "Push obavijesti",
+                    "link_promo": "Saznajte više"
+                },
+                "language": {
+                    "header": "Jezik",
+                    "link_promo": "Pomognite prevođenju",
+                    "dropdown_label": "Jezik"
+                },
+                "themes": {
+                    "header": "Tema",
+                    "error_no_theme": "Nema dostupnih tema.",
+                    "link_promo": "Saznajte o temama",
+                    "dropdown_label": "Tema"
+                },
+                "refresh_tokens": {
+                    "header": "Osvježi token",
+                    "description": "Svaki token za osvježavanje predstavlja sesiju za prijavu. Tokeni osvježavanja bit će automatski uklonjeni kada kliknete odjava. Trenutačno su aktivni sljedeći tokeni za osvježavanje vašeg računa.",
+                    "token_title": "Osvježi token za {clientId}",
+                    "created_at": "Izrađeno na {date}",
+                    "confirm_delete": "Jeste li sigurni da želite izbrisati pristupni token za {name} ?",
+                    "delete_failed": "Nije uspjelo brisanje pristupnog tokena.",
+                    "last_used": "Posljednje upotrijebljeno na {date} od {location}",
+                    "not_used": "Nikada nije bio korišten",
+                    "current_token_tooltip": "Nije moguće izbrisati trenutni token za osvježavanje"
+                },
+                "long_lived_access_tokens": {
+                    "header": "Tokeni dugog življenja",
+                    "description": "Izradite dugotrajne tokene za pristup kako biste omogućili da vaše skripte stupaju u interakciju sa vašim primjerom Home Assistant-a. Svaki token će vrijediti 10 godina od stvaranja.  Sljedeći tokeni dugogodišnjeg pristupa su trenutno aktivni",
+                    "learn_auth_requests": "Saznajte kako obaviti provjeru autentičnosti zahtjeva.",
+                    "created_at": "Izrađeno na {date}",
+                    "confirm_delete": "Jeste li sigurni da želite izbrisati pristupni token za {name} ?",
+                    "delete_failed": "Nije uspjelo brisanje pristupnog tokena.",
+                    "create": "Izradite token",
+                    "create_failed": "Nije uspjelo stvaranje pristupnog tokena.",
+                    "prompt_name": "Ime?",
+                    "prompt_copy_token": "Kopirajte pristupni token. Neće se više prikazati.",
+                    "empty_state": "Još nemate dugovječnih tokena pristupa.",
+                    "last_used": "Posljednje upotrijebljeno na {date} od {location}",
+                    "not_used": "Nikada nije bio korišten"
+                },
+                "current_user": "Trenutačno ste prijavljeni kao {fullName} .",
+                "is_owner": "Vi ste vlasnik.",
+                "logout": "Odjava",
+                "change_password": {
+                    "header": "Promijeni lozinku",
+                    "current_password": "Trenutna lozinka",
+                    "new_password": "Nova lozinka",
+                    "confirm_new_password": "Potvrdite novu lozinku",
+                    "error_required": "Potreban",
+                    "submit": "podnijeti"
+                },
+                "mfa": {
+                    "header": "Višefaktorski moduli za provjeru autentičnosti",
+                    "disable": "Onemogući",
+                    "enable": "Omogući",
+                    "confirm_disable": "Jeste li sigurni da želite onemogućiti {name} ?"
+                },
+                "mfa_setup": {
+                    "title_aborted": "Prekinut",
+                    "title_success": "Uspješno!",
+                    "step_done": "Postavka gotova za",
+                    "close": "Zatvoriti",
+                    "submit": "podnijeti"
+                }
+            },
+            "page-authorize": {
+                "initializing": "Inicijalizacija",
+                "authorizing_client": "Dati ćete {clientId} pristup svojoj instanci pomoćnika Home Assistant.",
+                "logging_in_with": "Prijavite se sa **{authProviderName}**.",
+                "pick_auth_provider": "Ili se prijavite sa",
+                "abort_intro": "Prijava je prekinuta",
+                "form": {
+                    "working": "Molimo pričekajte",
+                    "unknown_error": "Nešto je pošlo po zlu",
+                    "providers": {
+                        "homeassistant": {
+                            "step": {
+                                "init": {
+                                    "data": {
+                                        "username": "Korisničko ime"
+                                    }
+                                },
+                                "mfa": {
+                                    "data": {
+                                        "code": "Kôd autentifikacije s dva faktora"
+                                    },
+                                    "description": "Otvorite ** {mfa_module_name} ** na svojem uređaju da biste vidjeli kôd za autentifikaciju s dva faktora i potvrdili svoj identitet:"
+                                }
+                            },
+                            "error": {
+                                "invalid_code": "Pogrešan kod za provjeru autentičnosti "
+                            },
+                            "abort": {
+                                "login_expired": "Sesija istekla, prijavite se ponovo."
+                            }
+                        },
+                        "legacy_api_password": {
+                            "step": {
+                                "init": {
+                                    "description": "Unesite API lozinku u svoj http config:"
+                                }
+                            },
+                            "abort": {
+                                "login_expired": "Sesija istekla, molim vas prijavite se ponovno."
+                            }
+                        },
+                        "trusted_networks": {
+                            "step": {
+                                "init": {
+                                    "description": "Odaberite korisnika kojim se želite prijaviti:"
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "page-onboarding": {
+                "user": {
+                    "data": {
+                        "username": "Korisničko ime",
+                        "password": "Lozinka"
+                    },
+                    "create_account": "Stvorite račun",
+                    "error": {
+                        "required_fields": "Ispunite sva potrebna polja"
+                    }
                 }
             }
         },
         "sidebar": {
             "log_out": "Odjava",
             "developer_tools": "Razvojni alati"
+        },
+        "duration": {
+            "day": "{count} {count, plural,\n  one {dan}\n  other {dani}\n}",
+            "week": "{count} {count, plural,\n  one {tjedan}\n  other {tjedni}\n}",
+            "second": "{count} {count, plural,\n  one {sekunde}\n  other {sekunde}\n}"
+        },
+        "card": {
+            "scene": {
+                "activate": "Aktivirati"
+            },
+            "script": {
+                "execute": "Izvršiti"
+            },
+            "weather": {
+                "attributes": {
+                    "air_pressure": "Tlak zraka",
+                    "humidity": "Vlažnost",
+                    "temperature": "Temperatura",
+                    "visibility": "Vidljivost",
+                    "wind_speed": "Brzina vjetra"
+                },
+                "cardinal_direction": {
+                    "n": "N"
+                }
+            },
+            "alarm_control_panel": {
+                "code": "Kod"
+            },
+            "fan": {
+                "speed": "Brzina",
+                "direction": "Smjer"
+            },
+            "light": {
+                "brightness": "Svjetlina",
+                "color_temperature": "Temperatura boje",
+                "white_value": "Bijela vrijednost",
+                "effect": "Efekt"
+            },
+            "media_player": {
+                "text_to_speak": "Tekst u govor",
+                "source": "Izvor",
+                "sound_mode": "Način zvuka"
+            },
+            "climate": {
+                "currently": "Trenutno",
+                "on_off": "Uključivanje \/ isključivanje",
+                "target_temperature": "Ciljana temperatura",
+                "target_humidity": "Ciljana vlažnost",
+                "operation": "operacija",
+                "fan_mode": "Način rada s ventilatorom",
+                "swing_mode": "Swing način rada",
+                "away_mode": "Način rada: Odsutan"
+            },
+            "lock": {
+                "code": "Kod",
+                "lock": "zaključati",
+                "unlock": "Otključati"
+            },
+            "vacuum": {
+                "actions": {
+                    "start_cleaning": "Započnite čišćenje",
+                    "turn_on": "Uključiti",
+                    "turn_off": "Isključiti"
+                }
+            },
+            "water_heater": {
+                "currently": "Trenutno",
+                "on_off": "Uključeno\/Isključeno",
+                "target_temperature": "Ciljana temperatura",
+                "operation": "Operacija",
+                "away_mode": "Način rada: Odsutan"
+            }
+        },
+        "components": {
+            "history_charts": {
+                "loading_history": "Učitavanje povijesti stanja ...",
+                "no_history_found": "Nije pronađena povijest stanja."
+            }
+        },
+        "dialogs": {
+            "more_info_settings": {
+                "save": "Spremi",
+                "name": "Ime"
+            }
+        },
+        "auth_store": {
+            "ask": "Želite li spremiti ovu prijavu?",
+            "decline": "Ne hvala",
+            "confirm": "Spremi prijavu"
+        },
+        "notification_drawer": {
+            "click_to_configure": "Kliknite gumb za konfiguriranje {entity}",
+            "empty": "Nema obavijesti",
+            "title": "Obavijesti"
         }
     },
     "domain": {
diff --git a/translations/lv.json b/translations/lv.json
index 35f697732f..793e8fe429 100644
--- a/translations/lv.json
+++ b/translations/lv.json
@@ -547,7 +547,7 @@
                         "restart_confirm": "Restartēt Home Assistant, lai pabeigtu šīs integrācijas noņemšanu",
                         "manuf": "{manufacturer}",
                         "hub": "Savienots ar",
-                        "firmware": "Programmaparatūras: {versija}",
+                        "firmware": "Programmaparatūra: {version}",
                         "device_unavailable": "ierīce nav pieejama",
                         "entity_unavailable": "vienība nav pieejama"
                     }
diff --git a/translations/nl.json b/translations/nl.json
index 7b516c6c4f..cf146f196b 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -545,9 +545,9 @@
                         "no_device": "Entiteiten zonder apparaten",
                         "delete_confirm": "Weet u zeker dat u deze integratie wilt verwijderen?",
                         "restart_confirm": "Herstart Home Assistant om het verwijderen van deze integratie te voltooien",
-                        "manuf": "door {fabrikant}",
+                        "manuf": "door {manufacturer}",
                         "hub": "Verbonden via",
-                        "firmware": "Firmware: {versie}",
+                        "firmware": "Firmware: {version}",
                         "device_unavailable": "apparaat niet beschikbaar",
                         "entity_unavailable": "entiteit niet beschikbaar"
                     }
diff --git a/translations/pl.json b/translations/pl.json
index ddf2d81070..f7ac90e025 100644
--- a/translations/pl.json
+++ b/translations/pl.json
@@ -133,7 +133,7 @@
         "climate": {
             "off": "wyłączony",
             "on": "włączony",
-            "heat": "ogrzewanie",
+            "heat": "grzanie",
             "cool": "chłodzenie",
             "idle": "nieaktywny",
             "auto": "automatyczny",

From 2e395c1b0d23d2709055c0dd7f0641baae2b61b7 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Tue, 30 Oct 2018 11:33:37 +0100
Subject: [PATCH 46/67] Update version to 20181030.0

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index 11ba8aae80..8a3ea1f347 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20181026.1",
+    version="20181030.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

From a0810470081769d7b7382aea2fbb7af0410044e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Tue, 30 Oct 2018 15:57:08 +0100
Subject: [PATCH 47/67] Fix calculation of glance card size (#1930)

---
 src/panels/lovelace/cards/hui-glance-card.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index a2eb7b6703..594effabfa 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -51,8 +51,11 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
   }
 
   public getCardSize() {
+    const columns =
+      this.config!.columns || Math.min(this.config!.entities.length, 5);
     return (
-      (this.config!.title ? 1 : 0) + Math.ceil(this.configEntities!.length / 5)
+      (this.config!.title ? 1 : 0) +
+      2 * Math.ceil(this.configEntities!.length / columns)
     );
   }
 

From 2164b629cf8e09b35309903feb5f337db7bdfe05 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 30 Oct 2018 19:16:20 +0100
Subject: [PATCH 48/67] catch translation errors (#1928)

---
 src/mixins/localize-base-mixin.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/mixins/localize-base-mixin.ts b/src/mixins/localize-base-mixin.ts
index 0bb3a31aef..9214c0d6f2 100644
--- a/src/mixins/localize-base-mixin.ts
+++ b/src/mixins/localize-base-mixin.ts
@@ -88,7 +88,11 @@ export const localizeBaseMixin = (superClass) =>
           argObject[args[i]] = args[i + 1];
         }
 
-        return translatedMessage.format(argObject);
+        try {
+          return translatedMessage.format(argObject);
+        } catch (err) {
+          return "Translation " + err;
+        }
       };
     }
 

From 03b1e405939d6c088749e7ff12a56108e200fd1d Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Tue, 30 Oct 2018 20:31:56 +0100
Subject: [PATCH 49/67] Add preview to edit LL card (#1929)

---
 .../lovelace/components/hui-card-options.ts   |  4 +-
 .../hui-dialog-edit-card.ts}                  | 39 +++++++++++---
 .../lovelace/editor/hui-yaml-card-preview.ts  | 52 +++++++++++++++++++
 src/panels/lovelace/editor/hui-yaml-editor.ts | 41 +++++++++++++++
 4 files changed, 126 insertions(+), 10 deletions(-)
 rename src/panels/lovelace/{components/ha-dialog-edit-card.ts => editor/hui-dialog-edit-card.ts} (68%)
 create mode 100644 src/panels/lovelace/editor/hui-yaml-card-preview.ts
 create mode 100644 src/panels/lovelace/editor/hui-yaml-editor.ts

diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 8bf2af28eb..7b18f8119e 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -21,8 +21,8 @@ export class HuiCardOptions extends LitElement {
       registeredDialog = true;
       fireEvent(this, "register-dialog", {
         dialogShowEvent: "show-edit-card",
-        dialogTag: "ha-dialog-edit-card",
-        dialogImport: () => import("./ha-dialog-edit-card"),
+        dialogTag: "hui-dialog-edit-card",
+        dialogImport: () => import("../editor/hui-dialog-edit-card"),
       });
     }
   }
diff --git a/src/panels/lovelace/components/ha-dialog-edit-card.ts b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
similarity index 68%
rename from src/panels/lovelace/components/ha-dialog-edit-card.ts
rename to src/panels/lovelace/editor/hui-dialog-edit-card.ts
index 6e5a368c29..adae0b17e8 100644
--- a/src/panels/lovelace/components/ha-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
@@ -3,6 +3,7 @@ import { fireEvent } from "../../../common/dom/fire_event.js";
 
 import "@polymer/paper-button/paper-button.js";
 import "@polymer/paper-input/paper-textarea.js";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
 import "@polymer/paper-dialog/paper-dialog.js";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
@@ -10,7 +11,13 @@ import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog.js";
 import { HomeAssistant } from "../../../types";
 import { getCardConfig, updateCardConfig } from "../common/data";
 
-export class HuiEditCardModal extends LitElement {
+import "./hui-yaml-editor";
+import "./hui-yaml-card-preview";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { HuiYAMLCardPreview } from "./hui-yaml-card-preview";
+
+export class HuiDialogEditCard extends LitElement {
   protected hass?: HomeAssistant;
   private _cardId?: string;
   private _cardConfig?: string;
@@ -31,6 +38,7 @@ export class HuiEditCardModal extends LitElement {
     this.hass = hass;
     this._cardId = cardId;
     this._reloadLovelace = reloadLovelace;
+    this._cardConfig = "";
     this._loadConfig();
     // Wait till dialog is rendered.
     await this.updateComplete;
@@ -41,6 +49,10 @@ export class HuiEditCardModal extends LitElement {
     return this.shadowRoot!.querySelector("paper-dialog")!;
   }
 
+  private get _previewEl(): HuiYAMLCardPreview {
+    return this.shadowRoot!.querySelector("hui-yaml-card-preview")!;
+  }
+
   protected render() {
     return html`
       <style>
@@ -50,9 +62,16 @@ export class HuiEditCardModal extends LitElement {
       </style>
       <paper-dialog with-backdrop>
         <h2>Card Configuration</h2>
-        <paper-textarea
-          value="${this._cardConfig}"
-        ></paper-textarea>
+        <paper-dialog-scrollable>
+          <hui-yaml-editor
+            .yaml="${this._cardConfig}"
+            @yaml-changed="${this._handleYamlChanged}"
+          ></hui-yaml-editor>
+          <hui-yaml-card-preview
+            .hass="${this.hass}"
+            .yaml="${this._cardConfig}"
+          ></hui-yaml-card-preview>
+        </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
           <paper-button @click="${this._closeDialog}">Cancel</paper-button>
           <paper-button @click="${this._updateConfig}">Save</paper-button>
@@ -61,6 +80,10 @@ export class HuiEditCardModal extends LitElement {
     `;
   }
 
+  private _handleYamlChanged(ev) {
+    this._previewEl.yaml = ev.detail.yaml;
+  }
+
   private _closeDialog() {
     this._dialog.close();
   }
@@ -73,8 +96,8 @@ export class HuiEditCardModal extends LitElement {
   }
 
   private async _updateConfig() {
-    const newCardConfig = this.shadowRoot!.querySelector("paper-textarea")!
-      .value;
+    const newCardConfig = this.shadowRoot!.querySelector("hui-yaml-editor")!
+      .yaml;
 
     if (this._cardConfig === newCardConfig) {
       this._dialog.close();
@@ -92,8 +115,8 @@ export class HuiEditCardModal extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-dialog-edit-card": HuiEditCardModal;
+    "hui-dialog-edit-card": HuiDialogEditCard;
   }
 }
 
-customElements.define("ha-dialog-edit-card", HuiEditCardModal);
+customElements.define("hui-dialog-edit-card", HuiDialogEditCard);
diff --git a/src/panels/lovelace/editor/hui-yaml-card-preview.ts b/src/panels/lovelace/editor/hui-yaml-card-preview.ts
new file mode 100644
index 0000000000..67ce7f1d6b
--- /dev/null
+++ b/src/panels/lovelace/editor/hui-yaml-card-preview.ts
@@ -0,0 +1,52 @@
+import yaml from "js-yaml";
+
+import "@polymer/paper-input/paper-textarea.js";
+
+import createCardElement from "../common/create-card-element";
+import createErrorCardConfig from "../common/create-error-card-config";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard } from "../types";
+
+export class HuiYAMLCardPreview extends HTMLElement {
+  private _hass?: HomeAssistant;
+
+  set hass(value: HomeAssistant) {
+    this._hass = value;
+    if (this.lastChild) {
+      (this.lastChild as LovelaceCard).hass = value;
+    }
+  }
+
+  set yaml(value: string) {
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    if (value === "") {
+      return;
+    }
+
+    let conf;
+    try {
+      conf = yaml.safeLoad(value);
+    } catch (err) {
+      conf = createErrorCardConfig(`Invalid YAML: ${err.message}`, undefined);
+    }
+
+    const element = createCardElement(conf);
+
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+
+    this.appendChild(element);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-card-preview": HuiYAMLCardPreview;
+  }
+}
+
+customElements.define("hui-yaml-card-preview", HuiYAMLCardPreview);
diff --git a/src/panels/lovelace/editor/hui-yaml-editor.ts b/src/panels/lovelace/editor/hui-yaml-editor.ts
new file mode 100644
index 0000000000..170a08b3cb
--- /dev/null
+++ b/src/panels/lovelace/editor/hui-yaml-editor.ts
@@ -0,0 +1,41 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event.js";
+
+import "@polymer/paper-input/paper-textarea.js";
+
+export class HuiYAMLEditor extends LitElement {
+  public yaml?: string;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      yaml: {},
+    };
+  }
+
+  protected render() {
+    return html`
+      <style>
+        paper-textarea {
+          --paper-input-container-shared-input-style_-_font-family: monospace;
+        }
+      </style>
+      <paper-textarea
+        value="${this.yaml}"
+        @value-changed="${this._valueChanged}"
+      ></paper-textarea>
+    `;
+  }
+
+  private _valueChanged(ev) {
+    this.yaml = ev.target.value;
+    fireEvent(this, "yaml-changed", { yaml: ev.target.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-editor": HuiYAMLEditor;
+  }
+}
+
+customElements.define("hui-yaml-editor", HuiYAMLEditor);

From 094eb632f2e30676dd383ff437a3267e0f77c2dd Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Wed, 31 Oct 2018 04:34:12 -0400
Subject: [PATCH 50/67] Update Types for various cards (#1920)

* Update Types

* Travis fix

* Travis change

* Add HTMLElementTagNameMap for gauge

* Review Changes

* Formatting values as string to be accepted into format temp
---
 src/panels/lovelace/cards/hui-error-card.ts   | 14 ++--
 src/panels/lovelace/cards/hui-gauge-card.ts   | 31 ++++----
 src/panels/lovelace/cards/hui-iframe-card.ts  | 27 +++----
 .../lovelace/cards/hui-markdown-card.ts       | 29 ++++----
 .../lovelace/cards/hui-thermostat-card.ts     | 71 +++++++++++--------
 5 files changed, 95 insertions(+), 77 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index 758fa43459..df367f2301 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -9,11 +9,11 @@ interface Config extends LovelaceConfig {
 }
 
 class HuiErrorCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
+  private _config?: Config;
 
   static get properties() {
     return {
-      config: {},
+      _config: {},
     };
   }
 
@@ -21,19 +21,19 @@ class HuiErrorCard extends LitElement implements LovelaceCard {
     return 4;
   }
 
-  public setConfig(config): void {
-    this.config = config;
+  public setConfig(config: Config): void {
+    this._config = config;
   }
 
   protected render(): TemplateResult {
-    if (!this.config) {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      ${this.config.error}
-      <pre>${this._toStr(this.config.origConfig)}</pre>
+      ${this._config.error}
+      <pre>${this._toStr(this._config.origConfig)}</pre>
     `;
   }
 
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 6fcd7b4f85..4f04285ce8 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -6,8 +6,9 @@ import {
 } from "@polymer/lit-element";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import { HomeAssistant } from "../../../types.js";
-import isValidEntityId from "../../../common/entity/valid_entity_id.js";
 import { fireEvent } from "../../../common/dom/fire_event.js";
+import { TemplateResult } from "lit-html";
+import isValidEntityId from "../../../common/entity/valid_entity_id.js";
 
 import "../../../components/ha-card.js";
 
@@ -38,11 +39,11 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 2;
   }
 
-  public setConfig(config) {
+  public setConfig(config: Config): void {
     if (!config || !config.entity) {
       throw new Error("Invalid card configuration");
     }
@@ -52,7 +53,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._config = { min: 0, max: 100, ...config };
   }
 
-  protected render() {
+  protected render(): TemplateResult {
     if (!this._config || !this.hass) {
       return html``;
     }
@@ -92,7 +93,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.get("hass")) {
       return (
         (changedProps.get("hass") as any).states[this._config!.entity] !==
@@ -102,10 +103,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     if (changedProps.get("_config")) {
       return changedProps.get("_config") !== this._config;
     }
-    return (changedProps as unknown) as boolean;
+    return true;
   }
 
-  protected updated() {
+  protected updated(): void {
     if (
       !this._config ||
       !this.hass ||
@@ -135,7 +136,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     );
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         ha-card {
@@ -215,7 +216,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _computeSeverity(stateValue: string, sections: object) {
+  private _computeSeverity(stateValue: string, sections: object): string {
     const numberValue = Number(stateValue);
 
     if (!sections) {
@@ -247,20 +248,26 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     return severityMap.normal;
   }
 
-  private _translateTurn(value: number, config: Config) {
+  private _translateTurn(value: number, config: Config): number {
     const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
     return (
       (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
     );
   }
 
-  private _computeBaseUnit() {
+  private _computeBaseUnit(): string {
     return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
   }
 
-  private _handleClick() {
+  private _handleClick(): void {
     fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
   }
 }
 
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-gauge-card": HuiGaugeCard;
+  }
+}
+
 customElements.define("hui-gauge-card", HuiGaugeCard);
diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 04411cad41..6530a7c13d 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 
 import "../../../components/ha-card.js";
 
 import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceConfig {
   aspect_ratio?: string;
@@ -11,42 +12,42 @@ interface Config extends LovelaceConfig {
 }
 
 export class HuiIframeCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
+  protected _config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 1 + this.offsetHeight / 50;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.url) {
       throw new Error("URL required");
     }
 
-    this.config = config;
+    this._config = config;
   }
 
-  protected render() {
-    if (!this.config) {
+  protected render(): TemplateResult {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      <ha-card .header="${this.config.title}">
+      <ha-card .header="${this._config.title}">
         <div id="root">
-          <iframe src="${this.config.url}"></iframe>
+          <iframe src="${this._config.url}"></iframe>
         </div>
       </ha-card>
     `;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         ha-card {
@@ -55,7 +56,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
         #root {
           width: 100%;
           position: relative;
-          padding-top: ${this.config!.aspect_ratio || "50%"};
+          padding-top: ${this._config!.aspect_ratio || "50%"};
         }
         iframe {
           position: absolute;
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 30acae1bf0..4f24f48daa 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -1,10 +1,11 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap.js";
 
 import "../../../components/ha-card.js";
 import "../../../components/ha-markdown.js";
 
 import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceConfig {
   content: string;
@@ -12,45 +13,45 @@ interface Config extends LovelaceConfig {
 }
 
 export class HuiMarkdownCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
+  private _config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
-    return this.config!.content.split("\n").length;
+  public getCardSize(): number {
+    return this._config!.content.split("\n").length;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.content) {
       throw new Error("Invalid Configuration: Content Required");
     }
 
-    this.config = config;
+    this._config = config;
   }
 
-  protected render() {
-    if (!this.config) {
+  protected render(): TemplateResult {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      <ha-card .header="${this.config.title}">
+      <ha-card .header="${this._config.title}">
         <ha-markdown
           class="markdown ${classMap({
-            "no-header": !this.config.title,
+            "no-header": !this._config.title,
           })}"
-          .content="${this.config.content}"
+          .content="${this._config.content}"
         ></ha-markdown>
       </ha-card>
     `;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         :host {
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 8d590bcf9d..c9277f2e5f 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -1,4 +1,9 @@
-import { html, LitElement } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap.js";
 import { jQuery } from "../../../resources/jquery";
 
@@ -10,6 +15,7 @@ import { HomeAssistant, ClimateEntity } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
+import { TemplateResult } from "lit-html";
 
 const thermostatConfig = {
   radius: 150,
@@ -33,39 +39,39 @@ interface Config extends LovelaceConfig {
   entity: string;
 }
 
-function formatTemp(temps) {
+function formatTemp(temps: string[]): string {
   return temps.filter(Boolean).join("-");
 }
 
 export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
-  protected config?: Config;
+  private _config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
       hass: {},
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 4;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.entity || config.entity.split(".")[0] !== "climate") {
       throw new Error("Specify an entity from within the climate domain.");
     }
 
-    this.config = config;
+    this._config = config;
   }
 
-  protected render() {
-    if (!this.hass || !this.config) {
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
       return html``;
     }
-    const stateObj = this.hass.states[this.config.entity] as ClimateEntity;
+    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
     const broadCard = this.clientWidth > 390;
     const mode = modeIcons[stateObj.attributes.operation_mode || ""]
       ? stateObj.attributes.operation_mode!
@@ -107,18 +113,21 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  protected shouldUpdate(changedProps) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.get("hass")) {
       return (
-        changedProps.get("hass").states[this.config!.entity] !==
-        this.hass!.states[this.config!.entity]
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
       );
     }
-    return changedProps;
+    if (changedProps.has("_config")) {
+      return true;
+    }
+    return true;
   }
 
-  protected firstUpdated() {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+  protected firstUpdated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     const _sliderType =
       stateObj.attributes.target_temp_low &&
@@ -137,8 +146,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     });
   }
 
-  protected updated() {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+  protected updated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     let sliderValue;
     let uiValue;
@@ -151,8 +160,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         stateObj.attributes.target_temp_high
       }`;
       uiValue = formatTemp([
-        stateObj.attributes.target_temp_low,
-        stateObj.attributes.target_temp_high,
+        String(stateObj.attributes.target_temp_low),
+        String(stateObj.attributes.target_temp_high),
       ]);
     } else {
       sliderValue = uiValue = stateObj.attributes.temperature;
@@ -164,7 +173,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
     ${roundSliderStyle}
     <style>
@@ -308,40 +317,40 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private _dragEvent(e) {
+  private _dragEvent(e): void {
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
       String(e.value).split(",")
     );
   }
 
-  private _setTemperature(e) {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+  private _setTemperature(e): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
     if (
       stateObj.attributes.target_temp_low &&
       stateObj.attributes.target_temp_high
     ) {
       if (e.handle.index === 1) {
         this.hass!.callService("climate", "set_temperature", {
-          entity_id: this.config!.entity,
+          entity_id: this._config!.entity,
           target_temp_low: e.handle.value,
           target_temp_high: stateObj.attributes.target_temp_high,
         });
       } else {
         this.hass!.callService("climate", "set_temperature", {
-          entity_id: this.config!.entity,
+          entity_id: this._config!.entity,
           target_temp_low: stateObj.attributes.target_temp_low,
           target_temp_high: e.handle.value,
         });
       }
     } else {
       this.hass!.callService("climate", "set_temperature", {
-        entity_id: this.config!.entity,
+        entity_id: this._config!.entity,
         temperature: e.value,
       });
     }
   }
 
-  private _renderIcon(mode, currentMode) {
+  private _renderIcon(mode: string, currentMode: string): TemplateResult {
     if (!modeIcons[mode]) {
       return html``;
     }
@@ -353,9 +362,9 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     ></ha-icon>`;
   }
 
-  private _handleModeClick(e: MouseEvent) {
+  private _handleModeClick(e: MouseEvent): void {
     this.hass!.callService("climate", "set_operation_mode", {
-      entity_id: this.config!.entity,
+      entity_id: this._config!.entity,
       operation_mode: (e.currentTarget as any).mode,
     });
   }

From 4ea83b8bd5950478d3815233a99f5e90dab08644 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Wed, 31 Oct 2018 04:38:56 -0400
Subject: [PATCH 51/67] Fixes: #1902 - Thermostat/Light Background (#1931)

* Thermostat theme fixes

* Might as well put the light card in there
---
 src/panels/lovelace/cards/hui-light-card.ts   | 33 ++++++++++++-------
 .../lovelace/cards/hui-thermostat-card.ts     | 29 +++++++++++-----
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 83058920c9..cacacc7efc 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -154,6 +154,15 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
         ha-card {
           position: relative;
           overflow: hidden;
+          --brightness-font-color: white;
+          --brightness-font-text-shadow:
+            -1px -1px 0 #000,
+            1px -1px 0 #000,
+            -1px 1px 0 #000,
+            1px 1px 0 #000;
+          --name-font-size: 1.2rem;
+          --brightness-font-size: 1.2rem;
+          --rail-border-color: transparent;
         }
         #tooltip {
           position: absolute;
@@ -183,12 +192,12 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
           background-color: var(--primary-color);
         }
         #light .rs-path-color  {
-            background-color: #d6d6d6;
+            background-color: var(--disabled-text-color);
         }
         #light .rs-handle  {
-            background-color: #FFF;
+            background-color: var(--paper-card-background-color, white);
             padding: 7px;
-            border: 2px solid #d6d6d6;
+            border: 2px solid var(--disabled-text-color);
         }
         #light .rs-handle.rs-focus  {
             border-color:var(--primary-color);
@@ -198,7 +207,11 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
             background-color: var(--primary-color);
         }
         #light .rs-border  {
-          border-color: transparent;
+          border-color: var(--rail-border-color);
+        }
+        #light .rs-inner.rs-bg-color.rs-border,
+        #light .rs-overlay.rs-transition.rs-bg-color {
+          background-color: var(--paper-card-background-color, white);
         }
         ha-icon {
           margin: auto;
@@ -215,10 +228,10 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
         }
         .name {
           padding-top: 40px;
-          font-size: 1.2rem;
+          font-size: var(--name-font-size);
         }
         .brightness {
-          font-size: 1.2rem;
+          font-size: var(--brightness-font-size);
           position: absolute;
           margin: 0 auto;
           left: 50%;
@@ -229,12 +242,8 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
           -moz-transition: opacity .5s ease-in-out;
           -webkit-transition: opacity .5s ease-in-out;
           cursor: pointer;
-          color: white;
-          text-shadow:
-            -1px -1px 0 #000,
-            1px -1px 0 #000,
-            -1px 1px 0 #000,
-            1px 1px 0 #000;
+          color: var(--brightness-font-color);
+          text-shadow: var(--brightness-font-text-shadow)
         }
         .show_brightness {
           opacity: 1;
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index c9277f2e5f..adae97a618 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -182,25 +182,31 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       }
       ha-card {
         overflow: hidden;
+        --rail-border-color: transparent;
+        --auto-color: green;
+        --cool-color: #2b9af9;
+        --heat-color: #FF8100;
+        --off-color: #8a8a8a;
+        --unknown-color: #bac;
       }
       #root {
         position: relative;
         overflow: hidden;
       }
       .auto {
-        --mode-color: green;
+        --mode-color: var(--auto-color);
       }
       .cool {
-        --mode-color: #2b9af9;
+        --mode-color: var(--cool-color);
       }
       .heat {
-        --mode-color: #FF8100;
+        --mode-color: var(--heat-color);
       }
       .off {
-        --mode-color: #8a8a8a;
+        --mode-color: var(--off-color);
       }
       .unknown-mode {
-        --mode-color: #bac;
+        --mode-color: var(--unknown-color);
       }
       .no-title {
         --title-margin-top: 33% !important;
@@ -245,12 +251,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         background-color: var(--mode-color, var(--disabled-text-color));
       }
       #thermostat .rs-path-color  {
-          background-color: #d6d6d6;
+          background-color: var(--disabled-text-color);
       }
       #thermostat .rs-handle  {
-          background-color: #FFF;
+          background-color: var(--paper-card-background-color, white);
           padding: 7px;
-          border: 2px solid #d6d6d6;
+          border: 2px solid var(--disabled-text-color);
       }
       #thermostat .rs-handle.rs-focus  {
           border-color: var(--mode-color, var(--disabled-text-color));
@@ -260,11 +266,15 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
           background-color: var(--mode-color, var(--disabled-text-color));
       }
       #thermostat .rs-border  {
-        border-color: transparent;
+        border-color: var(--rail-border-color);
       }
       #thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
         z-index: 20 !important;
       }
+      #thermostat .rs-inner.rs-bg-color.rs-border,
+      #thermostat .rs-overlay.rs-transition.rs-bg-color {
+        background-color: var(--paper-card-background-color, white);
+      }
       #tooltip {
         position: absolute;
         top: 0;
@@ -273,6 +283,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         height: 100%;
         text-align: center;
         z-index: 15;
+        color: var(--primary-text-color);
       }
       #set-temperature {
         font-size: var(--set-temperature-font-size);

From acab465c965da6768e2014daa25b03afe3801113 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 31 Oct 2018 03:45:38 -0500
Subject: [PATCH 52/67] Move click and tooltip function to LL folder (#1935)

---
 .../lovelace/common}/compute-tooltip.ts                |  6 +++---
 .../dom => panels/lovelace/common}/handle-click.ts     | 10 +++++-----
 src/panels/lovelace/elements/hui-icon-element.ts       |  4 ++--
 src/panels/lovelace/elements/hui-image-element.ts      |  4 ++--
 src/panels/lovelace/elements/hui-state-icon-element.ts |  4 ++--
 .../lovelace/elements/hui-state-label-element.ts       |  4 ++--
 6 files changed, 16 insertions(+), 16 deletions(-)
 rename src/{common/string => panels/lovelace/common}/compute-tooltip.ts (75%)
 rename src/{common/dom => panels/lovelace/common}/handle-click.ts (72%)

diff --git a/src/common/string/compute-tooltip.ts b/src/panels/lovelace/common/compute-tooltip.ts
similarity index 75%
rename from src/common/string/compute-tooltip.ts
rename to src/panels/lovelace/common/compute-tooltip.ts
index 4346e97234..d4441a9278 100644
--- a/src/common/string/compute-tooltip.ts
+++ b/src/panels/lovelace/common/compute-tooltip.ts
@@ -1,6 +1,6 @@
-import computeStateName from "../../common/entity/compute_state_name";
-import { HomeAssistant } from "../../types";
-import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
+import computeStateName from "../../../common/entity/compute_state_name";
+import { HomeAssistant } from "../../../types";
+import { LovelaceElementConfig } from "../elements/types";
 
 export const computeTooltip = (
   hass: HomeAssistant,
diff --git a/src/common/dom/handle-click.ts b/src/panels/lovelace/common/handle-click.ts
similarity index 72%
rename from src/common/dom/handle-click.ts
rename to src/panels/lovelace/common/handle-click.ts
index 99bd776524..4d98cf7ad7 100644
--- a/src/common/dom/handle-click.ts
+++ b/src/panels/lovelace/common/handle-click.ts
@@ -1,8 +1,8 @@
-import { HomeAssistant } from "../../types";
-import { LovelaceElementConfig } from "../../panels/lovelace/elements/types";
-import { fireEvent } from "../dom/fire_event.js";
-import { navigate } from "../../common/navigate";
-import toggleEntity from "../../../src/panels/lovelace/common/entity/toggle-entity";
+import { HomeAssistant } from "../../../types";
+import { LovelaceElementConfig } from "../elements/types";
+import { fireEvent } from "../../../common/dom/fire_event.js";
+import { navigate } from "../../../common/navigate";
+import toggleEntity from "../../../../src/panels/lovelace/common/entity/toggle-entity";
 
 export const handleClick = (
   node: HTMLElement,
diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
index 00c291a0c2..58c408b8dd 100644
--- a/src/panels/lovelace/elements/hui-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -2,8 +2,8 @@ import { html, LitElement } from "@polymer/lit-element";
 
 import "../../../components/ha-icon.js";
 
-import { computeTooltip } from "../../../common/string/compute-tooltip";
-import { handleClick } from "../../../common/dom/handle-click";
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types.js";
diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts
index 1b79f5a14c..97631063b3 100644
--- a/src/panels/lovelace/elements/hui-image-element.ts
+++ b/src/panels/lovelace/elements/hui-image-element.ts
@@ -2,8 +2,8 @@ import { html, LitElement } from "@polymer/lit-element";
 
 import "../components/hui-image.js";
 
-import { computeTooltip } from "../../../common/string/compute-tooltip";
-import { handleClick } from "../../../common/dom/handle-click";
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types.js";
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index d75098586a..574d2f620b 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -3,8 +3,8 @@ import { TemplateResult } from "lit-html";
 
 import "../../../components/entity/state-badge.js";
 
-import { computeTooltip } from "../../../common/string/compute-tooltip";
-import { handleClick } from "../../../common/dom/handle-click";
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types.js";
diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
index 50bf3d4e89..b066d81dae 100644
--- a/src/panels/lovelace/elements/hui-state-label-element.ts
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -2,9 +2,9 @@ import { html, LitElement } from "@polymer/lit-element";
 
 import "../../../components/entity/ha-state-label-badge.js";
 
-import { computeTooltip } from "../../../common/string/compute-tooltip";
 import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-import { handleClick } from "../../../common/dom/handle-click";
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types.js";

From ce78131258965ba48e07b8f114fe6d7910091b80 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 31 Oct 2018 03:49:11 -0500
Subject: [PATCH 53/67] Remove unused mixin (#1934)

---
 .../lovelace/mixins/element-click-mixin.js    | 70 -------------------
 1 file changed, 70 deletions(-)
 delete mode 100644 src/panels/lovelace/mixins/element-click-mixin.js

diff --git a/src/panels/lovelace/mixins/element-click-mixin.js b/src/panels/lovelace/mixins/element-click-mixin.js
deleted file mode 100644
index 02a7cdb9fd..0000000000
--- a/src/panels/lovelace/mixins/element-click-mixin.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import toggleEntity from "../common/entity/toggle-entity.js";
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name";
-
-/*
- * @polymerMixin
- * @appliesMixin EventsMixin
- * @appliesMixin NavigateMixin
- */
-export default dedupingMixin(
-  (superClass) =>
-    class extends NavigateMixin(EventsMixin(superClass)) {
-      handleClick(hass, config, hold) {
-        let action = config.tap_action || "more-info";
-        if (hold) {
-          action = config.hold_action;
-        }
-        if (action === "none") return;
-
-        switch (action) {
-          case "more-info":
-            this.fire("hass-more-info", { entityId: config.entity });
-            break;
-          case "navigate":
-            this.navigate(config.navigation_path);
-            break;
-          case "toggle":
-            toggleEntity(hass, config.entity);
-            break;
-          case "call-service": {
-            const [domain, service] = config.service.split(".", 2);
-            const serviceData = Object.assign(
-              {},
-              { entity_id: config.entity },
-              config.service_data
-            );
-            hass.callService(domain, service, serviceData);
-          }
-        }
-      }
-
-      computeTooltip(hass, config) {
-        if (config.title) return config.title;
-
-        const stateName =
-          config.entity in hass.states
-            ? computeStateName(hass.states[config.entity])
-            : config.entity;
-
-        let tooltip;
-        switch (config.tap_action) {
-          case "navigate":
-            tooltip = `Navigate to ${config.navigation_path}`;
-            break;
-          case "toggle":
-            tooltip = `Toggle ${stateName}`;
-            break;
-          case "call-service":
-            tooltip = `Call service ${config.service}`;
-            break;
-          default:
-            tooltip = `Show more-info: ${stateName}`;
-        }
-
-        return tooltip;
-      }
-    }
-);

From 447c06d817cef87218236d14614cd465ffe29a3c Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 1 Nov 2018 09:18:12 +0100
Subject: [PATCH 54/67] Fix overlapping device cards (#1940)

---
 src/panels/config/config-entries/ha-config-entry-page.js | 1 +
 src/panels/config/config-entries/ha-device-card.js       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/panels/config/config-entries/ha-config-entry-page.js b/src/panels/config/config-entries/ha-config-entry-page.js
index 6851c90096..676568365c 100644
--- a/src/panels/config/config-entries/ha-config-entry-page.js
+++ b/src/panels/config/config-entries/ha-config-entry-page.js
@@ -29,6 +29,7 @@ class HaConfigEntryPage extends NavigateMixin(
       box-sizing: border-box;
       display: flex;
       flex: 1 0 300px;
+      min-width: 0;
       max-width: 500px;
       padding: 8px;
     }
diff --git a/src/panels/config/config-entries/ha-device-card.js b/src/panels/config/config-entries/ha-device-card.js
index decb637e83..40c45246f9 100644
--- a/src/panels/config/config-entries/ha-device-card.js
+++ b/src/panels/config/config-entries/ha-device-card.js
@@ -32,6 +32,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
       paper-card {
         flex: 1 0 100%;
         padding-bottom: 10px;
+        min-width: 0;
       }
       .device {
         width: 30%;

From aebd1a1be1aa1aeeb2749184cedea9e2fbe9d672 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 2 Nov 2018 05:13:49 -0400
Subject: [PATCH 55/67] Remove side effects of render and Add types -
 Button/Glance (#1919)

* Remove side effects of render and Add types

* Addressing changes

* Updating when to apply theme

* Review Updates

* Fixing last reviews

* Updates from travis
---
 .../lovelace/cards/hui-entity-button-card.ts  | 87 +++++++++++--------
 src/panels/lovelace/cards/hui-glance-card.ts  | 80 ++++++++++++-----
 2 files changed, 109 insertions(+), 58 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts
index 0aa86b7762..62c8394539 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-button-card.ts
@@ -1,5 +1,12 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event.js";
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+import { TemplateResult } from "lit-html";
+import { styleMap } from "lit-html/directives/styleMap.js";
 
 import "../../../components/ha-card.js";
 
@@ -9,11 +16,11 @@ import stateIcon from "../../../common/entity/state_icon.js";
 import computeStateDomain from "../../../common/entity/compute_state_domain.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
-import { styleMap } from "lit-html/directives/styleMap.js";
-import { HomeAssistant } from "../../../types.js";
+import { HomeAssistant, LightEntity } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import { longPress } from "../common/directives/long-press-directive";
+import { fireEvent } from "../../../common/dom/fire_event.js";
 
 interface Config extends LovelaceConfig {
   entity: string;
@@ -29,38 +36,47 @@ interface Config extends LovelaceConfig {
 class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
-  protected config?: Config;
+  private _config?: Config;
 
   static get properties(): PropertyDeclarations {
     return {
       hass: {},
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 2;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!isValidEntityId(config.entity)) {
       throw new Error("Invalid Entity");
     }
 
-    this.config = { theme: "default", ...config };
-
-    if (this.hass) {
-      this.requestUpdate();
-    }
+    this._config = { theme: "default", ...config };
   }
 
-  protected render() {
-    if (!this.config) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_config")) {
+      return true;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (oldHass) {
+      return (
+        oldHass.states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    return true;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
       return html``;
     }
-    const stateObj = this.hass!.states[this.config.entity];
-
-    applyThemesOnElement(this, this.hass!.themes, this.config.theme);
+    const stateObj = this.hass.states[this._config.entity];
 
     return html`
       ${this.renderStyle()}
@@ -72,7 +88,7 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
         ${
           !stateObj
             ? html`<div class="not-found">Entity not available: ${
-                this.config.entity
+                this._config.entity
               }</div>`
             : html`
               <paper-button>
@@ -80,20 +96,14 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
                   <ha-icon
                     data-domain="${computeStateDomain(stateObj)}"
                     data-state="${stateObj.state}"
-                    .icon="${
-                      this.config.icon ? this.config.icon : stateIcon(stateObj)
-                    }"
+                    .icon="${this._config.icon || stateIcon(stateObj)}"
                     style="${styleMap({
                       filter: this._computeBrightness(stateObj),
                       color: this._computeColor(stateObj),
                     })}"
                   ></ha-icon>
                   <span>
-                    ${
-                      this.config.name
-                        ? this.config.name
-                        : computeStateName(stateObj)
-                    }
+                    ${this._config.name || computeStateName(stateObj)}
                   </span>
                 </div>
               </paper-button>
@@ -103,7 +113,17 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private renderStyle() {
+  protected updated(changedProps: PropertyValues): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.themes !== this.hass.themes) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
+  private renderStyle(): TemplateResult {
     return html`
     <style>
       ha-icon {
@@ -143,7 +163,7 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private _computeBrightness(stateObj) {
+  private _computeBrightness(stateObj: HassEntity | LightEntity): string {
     if (!stateObj.attributes.brightness) {
       return "";
     }
@@ -151,20 +171,19 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
     return `brightness(${(brightness + 245) / 5}%)`;
   }
 
-  private _computeColor(stateObj) {
+  private _computeColor(stateObj: HassEntity | LightEntity): string {
     if (!stateObj.attributes.hs_color) {
       return "";
     }
-    const hue = stateObj.attributes.hs_color[0];
-    const sat = stateObj.attributes.hs_color[1];
+    const { hue, sat } = stateObj.attributes.hs_color;
     if (sat <= 10) {
       return "";
     }
     return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
   }
 
-  private handleClick(hold) {
-    const config = this.config;
+  private handleClick(hold: boolean): void {
+    const config = this._config;
     if (!config) {
       return;
     }
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 594effabfa..14a1ccf554 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -1,4 +1,9 @@
-import { html, LitElement } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  PropertyValues,
+  PropertyDeclarations,
+} from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap.js";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display.js";
@@ -17,6 +22,7 @@ import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types.js";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import { longPress } from "../common/directives/long-press-directive";
+import { TemplateResult } from "lit-html";
 
 interface EntityConfig {
   name: string;
@@ -40,27 +46,25 @@ interface Config extends LovelaceConfig {
 export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
-  protected config?: Config;
-  protected configEntities?: EntityConfig[];
+  private _config?: Config;
+  private _configEntities?: EntityConfig[];
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
       hass: {},
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
-    const columns =
-      this.config!.columns || Math.min(this.config!.entities.length, 5);
+  public getCardSize(): number {
     return (
-      (this.config!.title ? 1 : 0) +
-      2 * Math.ceil(this.configEntities!.length / columns)
+      (this._config!.title ? 1 : 0) +
+      Math.ceil(this._configEntities!.length / 5)
     );
   }
 
-  public setConfig(config: Config) {
-    this.config = { theme: "default", ...config };
+  public setConfig(config: Config): void {
+    this._config = { theme: "default", ...config };
     const entities = processConfigEntities(config.entities);
 
     for (const entity of entities) {
@@ -78,26 +82,43 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
     const columns = config.columns || Math.min(config.entities.length, 5);
     this.style.setProperty("--glance-column-width", `${100 / columns}%`);
 
-    this.configEntities = entities;
+    this._configEntities = entities;
 
     if (this.hass) {
       this.requestUpdate();
     }
   }
 
-  protected render() {
-    if (!this.config || !this.hass) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_config")) {
+      return true;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (oldHass && this._configEntities) {
+      for (const entity of this._configEntities) {
+        if (
+          oldHass.states[entity.entity] !== this.hass!.states[entity.entity]
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
       return html``;
     }
-    const { title } = this.config;
-
-    applyThemesOnElement(this, this.hass!.themes, this.config.theme);
+    const { title } = this._config;
 
     return html`
       ${this.renderStyle()}
       <ha-card .header="${title}">
         <div class="entities ${classMap({ "no-header": !title })}">
-          ${this.configEntities!.map((entityConf) =>
+          ${this._configEntities!.map((entityConf) =>
             this.renderEntity(entityConf)
           )}
         </div>
@@ -105,7 +126,18 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private renderStyle() {
+  protected updated(changedProperties: PropertyValues): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const oldHass = changedProperties.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.themes !== this.hass.themes) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         .entities {
@@ -147,7 +179,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private renderEntity(entityConf) {
+  private renderEntity(entityConf): TemplateResult {
     const stateObj = this.hass!.states[entityConf.entity];
 
     if (!stateObj) {
@@ -165,7 +197,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
         .longPress="${longPress()}"
       >
         ${
-          this.config!.show_name !== false
+          this._config!.show_name !== false
             ? html`<div class="name">${
                 "name" in entityConf
                   ? entityConf.name
@@ -178,7 +210,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
           .overrideIcon="${entityConf.icon}"
         ></state-badge>
         ${
-          this.config!.show_state !== false
+          this._config!.show_state !== false
             ? html`<div>${computeStateDisplay(this.localize, stateObj)}</div>`
             : ""
         }
@@ -186,7 +218,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private handleClick(ev: MouseEvent, hold) {
+  private handleClick(ev: MouseEvent, hold: boolean): void {
     const config = (ev.currentTarget as any).entityConf as EntityConfig;
     const entityId = config.entity;
     const action = hold ? config.hold_action : config.tap_action || "more-info";

From eb505d4bd703c7d42a5818b38a9531181ff3ef14 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Fri, 2 Nov 2018 12:15:45 +0100
Subject: [PATCH 56/67] don't compress for CI runs (#1949)

---
 hassio/webpack.config.js | 2 ++
 webpack.config.js        | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/hassio/webpack.config.js b/hassio/webpack.config.js
index 8ce545eac9..34c0f578b2 100644
--- a/hassio/webpack.config.js
+++ b/hassio/webpack.config.js
@@ -4,6 +4,7 @@ const config = require("./config.js");
 const { babelLoaderConfig } = require("../config/babel.js");
 
 const isProdBuild = process.env.NODE_ENV === "production";
+const isCI = process.env.CI === "true";
 const chunkFilename = isProdBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
 
 module.exports = {
@@ -37,6 +38,7 @@ module.exports = {
         },
       }),
     isProdBuild &&
+      isCI &&
       new CompressionPlugin({
         cache: true,
         exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
diff --git a/webpack.config.js b/webpack.config.js
index fef0c37fc2..87b7105aed 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,6 +15,7 @@ if (!version) {
   throw Error("Version not found");
 }
 const VERSION = version[0];
+const isCI = process.env.CI === "true";
 
 const generateJSPage = (entrypoint, latestBuild) => {
   return new HtmlWebpackPlugin({
@@ -159,6 +160,7 @@ function createConfig(isProdBuild, latestBuild) {
         path.resolve(__dirname, "src/util/empty.js")
       ),
       isProdBuild &&
+        !isCI &&
         new CompressionPlugin({
           cache: true,
           exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],

From c0c7c0f41a5f19defb1353d984b4d8606ff72865 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 2 Nov 2018 06:26:03 -0500
Subject: [PATCH 57/67] Remove .js from imports (#1948)

* Remove .js from lovelace

Also cleaned up some trailing whitespace

* Go big or go home

* More removals

* Revert changes to gallery webpack

* Revert changes to webpack.config.js
---
 gallery/src/components/demo-card.js           |  14 +-
 gallery/src/components/demo-cards.js          |  10 +-
 gallery/src/components/demo-more-info.js      |  10 +-
 gallery/src/components/demo-more-infos.js     |  10 +-
 gallery/src/data/provide_hass.js              |   6 +-
 .../src/demos/demo-hui-alarm-panel-card.js    |  10 +-
 .../src/demos/demo-hui-conditional-card.js    |  10 +-
 gallery/src/demos/demo-hui-entities-card.js   |  10 +-
 .../src/demos/demo-hui-entity-button-card.js  |  10 +-
 .../src/demos/demo-hui-entity-filter-card.js  |  10 +-
 gallery/src/demos/demo-hui-gauge-card.js      |   6 +-
 gallery/src/demos/demo-hui-glance-card.js     |  10 +-
 gallery/src/demos/demo-hui-iframe-card.js     |   6 +-
 gallery/src/demos/demo-hui-light-card.js      |  10 +-
 gallery/src/demos/demo-hui-map-card.js        |  10 +-
 gallery/src/demos/demo-hui-markdown-card.js   |   6 +-
 .../src/demos/demo-hui-media-player-rows.js   |  12 +-
 .../demos/demo-hui-picture-elements-card.js   |  10 +-
 .../src/demos/demo-hui-picture-entity-card.js |   6 +-
 .../src/demos/demo-hui-picture-glance-card.js |   6 +-
 gallery/src/demos/demo-hui-stack-card.js      |  10 +-
 gallery/src/demos/demo-hui-thermostat-card.js |  10 +-
 gallery/src/demos/demo-more-info-light.js     |  14 +-
 gallery/src/entrypoint.js                     |  16 +-
 gallery/src/ha-gallery.js                     |  22 +-
 .../addon-store/hassio-addon-repository.js    |  12 +-
 hassio/src/addon-store/hassio-addon-store.js  |   8 +-
 .../addon-store/hassio-repositories-editor.js |  16 +-
 hassio/src/addon-view/hassio-addon-audio.js   |  20 +-
 hassio/src/addon-view/hassio-addon-config.js  |  12 +-
 hassio/src/addon-view/hassio-addon-info.js    |  22 +-
 hassio/src/addon-view/hassio-addon-logs.js    |  10 +-
 hassio/src/addon-view/hassio-addon-network.js |  14 +-
 hassio/src/addon-view/hassio-addon-view.js    |  30 +-
 hassio/src/components/hassio-card-content.js  |   8 +-
 hassio/src/dashboard/hassio-addons.js         |  12 +-
 hassio/src/dashboard/hassio-dashboard.js      |  10 +-
 hassio/src/dashboard/hassio-hass-update.js    |  14 +-
 hassio/src/hassio-app.js                      |   8 +-
 hassio/src/hassio-data.js                     |   2 +-
 hassio/src/hassio-main.js                     |  20 +-
 hassio/src/hassio-markdown-dialog.js          |  16 +-
 hassio/src/hassio-pages-with-tabs.js          |  36 +-
 hassio/src/resources/hassio-icons.js          |   2 +-
 hassio/src/snapshots/hassio-snapshot.js       |  20 +-
 hassio/src/snapshots/hassio-snapshots.js      |  22 +-
 hassio/src/system/hassio-host-info.js         |  12 +-
 hassio/src/system/hassio-supervisor-info.js   |  12 +-
 hassio/src/system/hassio-supervisor-log.js    |   8 +-
 hassio/src/system/hassio-system.js            |  12 +-
 src/auth/ha-auth-flow.js                      |  10 +-
 src/auth/ha-authorize.js                      |  16 +-
 src/auth/ha-pick-auth-provider.js             |  12 +-
 src/cards/ha-badges-card.js                   |   6 +-
 src/cards/ha-camera-card.js                   |  12 +-
 src/cards/ha-card-chooser.js                  |  18 +-
 src/cards/ha-entities-card.js                 |  24 +-
 src/cards/ha-history_graph-card.js            |  12 +-
 src/cards/ha-media_player-card.js             |  20 +-
 src/cards/ha-persistent_notification-card.js  |  14 +-
 src/cards/ha-plant-card.js                    |  12 +-
 src/cards/ha-weather-card.js                  |  12 +-
 src/common/entity/can_toggle_state.js         |   4 +-
 src/common/entity/compute_state_display.js    |   8 +-
 src/common/entity/compute_state_domain.js     |   2 +-
 src/common/entity/cover_icon.js               |   2 +-
 src/common/entity/domain_icon.js              |   2 +-
 src/common/entity/extract_views.js            |   2 +-
 src/common/entity/get_view_entities.js        |   4 +-
 src/common/entity/input_dateteime_icon.js     |   2 +-
 src/common/entity/sensor_icon.js              |   4 +-
 src/common/entity/split_by_groups.js          |   2 +-
 src/common/entity/state_card_type.js          |   6 +-
 src/common/entity/state_icon.js               |  14 +-
 src/common/entity/state_more_info_type.js     |   4 +-
 src/common/entity/states_sort_by_name.js      |   2 +-
 src/common/entity/timer_time_remaining.js     |   2 +-
 src/common/navigate.ts                        |   2 +-
 src/components/buttons/ha-call-api-button.js  |   4 +-
 .../buttons/ha-call-service-button.js         |   8 +-
 src/components/buttons/ha-progress-button.js  |   8 +-
 src/components/entity/ha-chart-base.js        |  16 +-
 src/components/entity/ha-entity-picker.js     |  22 +-
 src/components/entity/ha-entity-toggle.js     |  12 +-
 src/components/entity/ha-state-icon.js        |   8 +-
 src/components/entity/ha-state-label-badge.js |  24 +-
 src/components/entity/state-badge.js          |  10 +-
 src/components/entity/state-info.js           |  10 +-
 src/components/ha-attributes.js               |   8 +-
 src/components/ha-card.js                     |   6 +-
 src/components/ha-cards.js                    |  22 +-
 src/components/ha-climate-control.js          |  10 +-
 src/components/ha-climate-state.js            |   6 +-
 src/components/ha-color-picker.js             |   6 +-
 src/components/ha-combo-box.js                |  14 +-
 src/components/ha-cover-controls.js           |   8 +-
 src/components/ha-cover-tilt-controls.js      |  10 +-
 src/components/ha-demo-badge.js               |   6 +-
 src/components/ha-form.js                     |  20 +-
 src/components/ha-icon.js                     |   4 +-
 src/components/ha-iconset-svg.js              |   2 +-
 src/components/ha-label-badge.js              |   6 +-
 src/components/ha-labeled-slider.js           |   8 +-
 src/components/ha-markdown.js                 |   6 +-
 src/components/ha-menu-button.js              |   8 +-
 src/components/ha-paper-slider.js             |   2 +-
 .../ha-push-notifications-toggle.js           |   8 +-
 src/components/ha-relative-time.js            |   8 +-
 src/components/ha-service-description.js      |   4 +-
 src/components/ha-service-picker.js           |   8 +-
 src/components/ha-sidebar.js                  |  24 +-
 src/components/ha-start-voice-button.js       |  10 +-
 src/components/ha-textarea.js                 |   6 +-
 src/components/ha-toast.js                    |   2 +-
 src/components/ha-vacuum-state.js             |   8 +-
 src/components/ha-water_heater-control.js     |  10 +-
 src/components/ha-water_heater-state.js       |   6 +-
 src/components/paper-time-input.js            |  12 +-
 src/components/state-history-chart-line.js    |  12 +-
 .../state-history-chart-timeline.js           |  10 +-
 src/components/state-history-charts.js        |  12 +-
 src/data/ha-state-history-data.js             |   8 +-
 src/data/history.ts                           |  10 +-
 src/dialogs/ha-more-info-dialog.js            |  18 +-
 src/dialogs/ha-store-auth-card.js             |  12 +-
 src/dialogs/ha-voice-command-dialog.js        |  12 +-
 .../controls/more-info-alarm_control_panel.js |  14 +-
 .../controls/more-info-automation.js          |  10 +-
 .../more-info/controls/more-info-camera.js    |  10 +-
 .../more-info/controls/more-info-climate.js   |  28 +-
 .../controls/more-info-configurator.js        |  16 +-
 .../more-info/controls/more-info-content.js   |  46 +-
 .../more-info/controls/more-info-cover.js     |  16 +-
 .../more-info/controls/more-info-default.js   |   6 +-
 .../more-info/controls/more-info-fan.js       |  22 +-
 .../more-info/controls/more-info-group.js     |  10 +-
 .../controls/more-info-history_graph.js       |   8 +-
 .../controls/more-info-input_datetime.js      |  18 +-
 .../more-info/controls/more-info-light.js     |  22 +-
 .../more-info/controls/more-info-lock.js      |  12 +-
 .../controls/more-info-media_player.js        |  26 +-
 .../more-info/controls/more-info-script.js    |   6 +-
 .../more-info/controls/more-info-sun.js       |  12 +-
 .../more-info/controls/more-info-updater.js   |   4 +-
 .../more-info/controls/more-info-vacuum.js    |  20 +-
 .../controls/more-info-water_heater.js        |  26 +-
 .../more-info/controls/more-info-weather.js   |   8 +-
 src/dialogs/more-info/more-info-controls.js   |  28 +-
 src/dialogs/more-info/more-info-settings.js   |  22 +-
 src/entrypoints/app.js                        |  20 +-
 src/entrypoints/authorize.js                  |  14 +-
 src/entrypoints/core.js                       |  10 +-
 src/entrypoints/custom-panel.js               |  10 +-
 src/entrypoints/hass-icons.js                 |   2 +-
 src/entrypoints/onboarding.js                 |   6 +-
 src/layouts/app/auth-mixin.js                 |  10 +-
 src/layouts/app/connection-mixin.js           |  14 +-
 src/layouts/app/disconnect-toast-mixin.js     |   4 +-
 src/layouts/app/home-assistant.js             |  40 +-
 src/layouts/app/more-info-mixin.js            |   4 +-
 src/layouts/app/notification-mixin.js         |   2 +-
 src/layouts/app/sidebar-mixin.js              |   2 +-
 src/layouts/app/themes-mixin.js               |   6 +-
 src/layouts/app/translations-mixin.js         |   4 +-
 src/layouts/ha-app-layout.js                  |   6 +-
 src/layouts/ha-init-page.js                   |  14 +-
 src/layouts/hass-error-screen.js              |  10 +-
 src/layouts/hass-loading-screen.js            |  12 +-
 src/layouts/hass-subpage.js                   |  12 +-
 src/layouts/home-assistant-main.js            |  28 +-
 src/layouts/partial-cards.js                  |  44 +-
 src/layouts/partial-panel-resolver.js         |  52 +-
 src/managers/notification-manager.js          |   8 +-
 src/mixins/dialog-mixin.js                    |   6 +-
 src/mixins/events-mixin.js                    |   4 +-
 src/mixins/localize-base-mixin.ts             |   2 +-
 src/mixins/localize-lite-mixin.js             |   7 +-
 src/mixins/localize-mixin.js                  |   2 +-
 src/mixins/navigate-mixin.js                  |   2 +-
 src/onboarding/ha-onboarding.js               |  14 +-
 src/panels/calendar/ha-big-calendar.js        |   8 +-
 src/panels/calendar/ha-panel-calendar.js      |  26 +-
 .../config/automation/ha-automation-editor.js |  24 +-
 .../config/automation/ha-automation-picker.js |  30 +-
 .../config/automation/ha-config-automation.js |  12 +-
 .../config/cloud/ha-config-cloud-account.js   |  26 +-
 .../cloud/ha-config-cloud-forgot-password.js  |  16 +-
 .../config/cloud/ha-config-cloud-login.js     |  30 +-
 .../config/cloud/ha-config-cloud-register.js  |  18 +-
 src/panels/config/cloud/ha-config-cloud.js    |  22 +-
 .../config-entries/ha-ce-entities-card.js     |  20 +-
 .../ha-config-entries-dashboard.js            |  34 +-
 .../config-entries/ha-config-entries.js       |  18 +-
 .../config-entries/ha-config-entry-page.js    |  22 +-
 .../config/config-entries/ha-config-flow.js   |  24 +-
 .../config/config-entries/ha-device-card.js   |  22 +-
 src/panels/config/core/ha-config-core.js      |  18 +-
 .../config/core/ha-config-section-core.js     |  20 +-
 .../config/customize/ha-config-customize.js   |  28 +-
 .../customize/ha-customize-attribute.js       |  20 +-
 .../customize/ha-form-customize-attributes.js |   8 +-
 .../config/customize/ha-form-customize.js     |  14 +-
 .../customize/types/ha-customize-array.js     |  12 +-
 .../customize/types/ha-customize-boolean.js   |   6 +-
 .../customize/types/ha-customize-icon.js      |   8 +-
 .../customize/types/ha-customize-key-value.js |   6 +-
 .../customize/types/ha-customize-string.js    |   6 +-
 .../config/dashboard/ha-config-dashboard.js   |  30 +-
 .../config/dashboard/ha-config-navigation.js  |  18 +-
 src/panels/config/ha-config-section.js        |   6 +-
 src/panels/config/ha-entity-config.js         |  18 +-
 src/panels/config/ha-panel-config.js          |  34 +-
 src/panels/config/js/automation.js            |  14 +-
 .../config/js/condition/condition_edit.js     |  18 +-
 .../config/js/condition/condition_row.js      |  12 +-
 src/panels/config/js/condition/index.js       |   6 +-
 .../config/js/condition/numeric_state.js      |   8 +-
 src/panels/config/js/condition/state.js       |   6 +-
 src/panels/config/js/condition/sun.js         |   8 +-
 src/panels/config/js/condition/template.js    |   4 +-
 src/panels/config/js/condition/time.js        |   4 +-
 src/panels/config/js/condition/zone.js        |   8 +-
 src/panels/config/js/json_textarea.js         |   2 +-
 src/panels/config/js/script.js                |   8 +-
 src/panels/config/js/script/action_edit.js    |  16 +-
 src/panels/config/js/script/action_row.js     |  12 +-
 src/panels/config/js/script/call_service.js   |   4 +-
 src/panels/config/js/script/condition.js      |   4 +-
 src/panels/config/js/script/delay.js          |   4 +-
 src/panels/config/js/script/event.js          |   6 +-
 src/panels/config/js/script/index.js          |   6 +-
 src/panels/config/js/script/wait.js           |   6 +-
 src/panels/config/js/trigger/event.js         |   6 +-
 src/panels/config/js/trigger/homeassistant.js |   4 +-
 src/panels/config/js/trigger/index.js         |   8 +-
 src/panels/config/js/trigger/mqtt.js          |   4 +-
 src/panels/config/js/trigger/numeric_state.js |   8 +-
 src/panels/config/js/trigger/state.js         |   6 +-
 src/panels/config/js/trigger/sun.js           |   8 +-
 src/panels/config/js/trigger/template.js      |   4 +-
 src/panels/config/js/trigger/time.js          |   4 +-
 src/panels/config/js/trigger/trigger_edit.js  |  24 +-
 src/panels/config/js/trigger/trigger_row.js   |  12 +-
 src/panels/config/js/trigger/zone.js          |  12 +-
 src/panels/config/script/ha-config-script.js  |  14 +-
 src/panels/config/script/ha-script-editor.js  |  26 +-
 src/panels/config/script/ha-script-picker.js  |  28 +-
 src/panels/config/users/ha-config-users.js    |  18 +-
 src/panels/config/users/ha-dialog-add-user.js |  14 +-
 src/panels/config/users/ha-user-editor.js     |  16 +-
 src/panels/config/users/ha-user-picker.js     |  22 +-
 src/panels/config/zwave/ha-config-zwave.js    |  60 +-
 src/panels/config/zwave/zwave-groups.js       |  16 +-
 src/panels/config/zwave/zwave-log-dialog.js   |  12 +-
 src/panels/config/zwave/zwave-log.js          |  26 +-
 src/panels/config/zwave/zwave-network.js      |  16 +-
 src/panels/config/zwave/zwave-node-config.js  |  16 +-
 .../config/zwave/zwave-node-protection.js     |  16 +-
 src/panels/config/zwave/zwave-usercodes.js    |  16 +-
 src/panels/config/zwave/zwave-values.js       |  14 +-
 src/panels/custom/ha-panel-custom.js          |  12 +-
 src/panels/dev-event/events-list.js           |   6 +-
 src/panels/dev-event/ha-panel-dev-event.js    |  26 +-
 src/panels/dev-info/ha-loaded-components.js   |  12 +-
 src/panels/dev-info/ha-panel-dev-info.js      |  38 +-
 src/panels/dev-mqtt/ha-panel-dev-mqtt.js      |  24 +-
 .../dev-service/ha-panel-dev-service.js       |  24 +-
 src/panels/dev-state/ha-panel-dev-state.js    |  28 +-
 .../dev-template/ha-panel-dev-template.js     |  22 +-
 src/panels/history/ha-panel-history.js        |  34 +-
 src/panels/iframe/ha-panel-iframe.js          |  10 +-
 src/panels/kiosk/ha-panel-kiosk.js            |   6 +-
 src/panels/logbook/ha-logbook-data.js         |   2 +-
 src/panels/logbook/ha-logbook.js              |  16 +-
 src/panels/logbook/ha-panel-logbook.js        |  34 +-
 .../lovelace/cards/hui-alarm-panel-card.js    | 516 ++++++------
 .../lovelace/cards/hui-conditional-card.ts    | 166 ++--
 .../lovelace/cards/hui-entities-card.ts       | 374 ++++-----
 .../lovelace/cards/hui-entity-button-card.ts  |  22 +-
 .../lovelace/cards/hui-entity-filter-card.js  | 154 ++--
 src/panels/lovelace/cards/hui-gauge-card.ts   | 546 ++++++------
 src/panels/lovelace/cards/hui-glance-card.ts  |  36 +-
 .../lovelace/cards/hui-history-graph-card.js  | 172 ++--
 .../cards/hui-horizontal-stack-card.ts        | 100 +--
 src/panels/lovelace/cards/hui-iframe-card.ts  | 160 ++--
 .../lovelace/cards/hui-legacy-wrapper-card.js | 114 +--
 src/panels/lovelace/cards/hui-light-card.ts   | 654 +++++++--------
 src/panels/lovelace/cards/hui-map-card.js     | 610 +++++++-------
 .../lovelace/cards/hui-markdown-card.ts       | 186 ++---
 .../lovelace/cards/hui-media-control-card.js  |  22 +-
 src/panels/lovelace/cards/hui-picture-card.js | 134 +--
 .../cards/hui-picture-elements-card.ts        | 222 ++---
 .../lovelace/cards/hui-picture-entity-card.js | 402 ++++-----
 .../lovelace/cards/hui-picture-glance-card.js | 390 ++++-----
 .../lovelace/cards/hui-plant-status-card.js   |  22 +-
 src/panels/lovelace/cards/hui-sensor-card.js  | 584 ++++++-------
 src/panels/lovelace/cards/hui-stack-card.ts   | 132 +--
 .../lovelace/cards/hui-thermostat-card.ts     | 780 +++++++++---------
 .../lovelace/cards/hui-vertical-stack-card.ts | 100 +--
 .../cards/hui-weather-forecast-card.js        |  30 +-
 .../lovelace/common/compute-notifications.js  |  14 +-
 .../lovelace/common/create-card-element.js    | 224 ++---
 .../lovelace/common/create-hui-element.js     | 158 ++--
 .../lovelace/common/create-row-element.js     | 234 +++---
 .../lovelace/common/entity/toggle-entity.js   |  14 +-
 .../common/entity/turn-on-off-entities.js     |  68 +-
 .../common/entity/turn-on-off-entity.js       |  40 +-
 src/panels/lovelace/common/handle-click.ts    |   2 +-
 .../common/process-config-entities.js         |  76 +-
 .../lovelace/components/hui-card-options.ts   | 136 +--
 .../components/hui-entities-toggle.js         | 114 +--
 .../components/hui-generic-entity-row.js      | 274 +++---
 src/panels/lovelace/components/hui-image.js   | 396 ++++-----
 .../hui-configurator-notification-item.js     | 124 +--
 .../notifications/hui-notification-drawer.js  | 350 ++++----
 .../hui-notification-item-template.js         |  98 +--
 .../notifications/hui-notification-item.js    |  70 +-
 .../notifications/hui-notifications-button.js | 124 +--
 .../hui-persistent-notification-item.js       | 178 ++--
 .../lovelace/editor/hui-dialog-edit-card.ts   | 244 +++---
 .../lovelace/editor/hui-yaml-card-preview.ts  | 104 +--
 src/panels/lovelace/editor/hui-yaml-editor.ts |  82 +-
 .../lovelace/elements/hui-icon-element.ts     | 136 +--
 .../lovelace/elements/hui-image-element.ts    |   6 +-
 .../elements/hui-service-button-element.ts    |   6 +-
 .../elements/hui-state-badge-element.ts       |   6 +-
 .../elements/hui-state-icon-element.ts        |   6 +-
 .../elements/hui-state-label-element.ts       | 156 ++--
 .../entity-rows/hui-climate-entity-row.ts     |   8 +-
 .../entity-rows/hui-cover-entity-row.js       | 148 ++--
 .../entity-rows/hui-group-entity-row.js       | 156 ++--
 .../hui-input-number-entity-row.js            | 340 ++++----
 .../hui-input-select-entity-row.js            | 214 ++---
 .../entity-rows/hui-input-text-entity-row.js  | 146 ++--
 .../entity-rows/hui-lock-entity-row.js        | 166 ++--
 .../hui-media-player-entity-row.js            | 324 ++++----
 .../entity-rows/hui-scene-entity-row.js       | 140 ++--
 .../entity-rows/hui-script-entity-row.js      | 156 ++--
 .../entity-rows/hui-text-entity-row.js        | 140 ++--
 .../entity-rows/hui-timer-entity-row.js       | 206 ++---
 .../entity-rows/hui-toggle-entity-row.js      | 152 ++--
 src/panels/lovelace/ha-panel-lovelace.js      | 250 +++---
 src/panels/lovelace/hui-root.js               | 760 ++++++++---------
 src/panels/lovelace/hui-unused-entities.js    | 122 +--
 src/panels/lovelace/hui-view.js               | 436 +++++-----
 .../special-rows/hui-call-service-row.ts      |  10 +-
 .../lovelace/special-rows/hui-section-row.ts  |   2 +-
 .../lovelace/special-rows/hui-weblink-row.ts  |   2 +-
 .../mailbox/ha-dialog-show-audio-message.js   |  14 +-
 src/panels/mailbox/ha-panel-mailbox.js        |  36 +-
 src/panels/map/ha-entity-marker.js            |   8 +-
 src/panels/map/ha-panel-map.js                |  20 +-
 src/panels/profile/ha-change-password-card.js |  16 +-
 .../ha-long-lived-access-tokens-card.js       |  16 +-
 .../profile/ha-mfa-module-setup-flow.js       |  22 +-
 src/panels/profile/ha-mfa-modules-card.js     |  20 +-
 src/panels/profile/ha-panel-profile.js        |  40 +-
 src/panels/profile/ha-pick-language-row.js    |  18 +-
 src/panels/profile/ha-pick-theme-row.js       |  16 +-
 .../profile/ha-push-notifications-row.js      |  18 +-
 src/panels/profile/ha-refresh-tokens-card.js  |  16 +-
 src/panels/profile/ha-settings-row.js         |   4 +-
 .../shopping-list/ha-panel-shopping-list.js   |  34 +-
 src/resources/ha-style.js                     |   4 +-
 src/resources/html-import/import-href.js      |   2 +-
 src/state-summary/state-card-climate.js       |  10 +-
 src/state-summary/state-card-configurator.js  |  12 +-
 src/state-summary/state-card-content.js       |  38 +-
 src/state-summary/state-card-cover.js         |  14 +-
 src/state-summary/state-card-display.js       |  14 +-
 src/state-summary/state-card-input_number.js  |  14 +-
 src/state-summary/state-card-input_select.js  |  14 +-
 src/state-summary/state-card-input_text.js    |  10 +-
 src/state-summary/state-card-lock.js          |  12 +-
 src/state-summary/state-card-media_player.js  |  12 +-
 src/state-summary/state-card-scene.js         |  12 +-
 src/state-summary/state-card-script.js        |  14 +-
 src/state-summary/state-card-timer.js         |  12 +-
 src/state-summary/state-card-toggle.js        |  10 +-
 src/state-summary/state-card-vacuum.js        |  10 +-
 src/state-summary/state-card-water_heater.js  |  10 +-
 src/state-summary/state-card-weblink.js       |   8 +-
 src/util/app-localstorage-document.js         |   6 +-
 src/util/custom-panel/load-custom-panel.js    |   6 +-
 src/util/ha-url-sync.js                       |   4 +-
 src/util/hass-call-api.js                     |   2 +-
 src/util/legacy-support.js                    |   6 +-
 src/util/register-service-worker.js           |   4 +-
 src/util/show-new-frontend-toast.js           |   4 +-
 .../datetime/duration_to_seconds_test.js      |   2 +-
 .../datetime/seconds_to_duration_test.js      |   2 +-
 .../common/entity/compute_state_domain.js     |   2 +-
 .../common/entity/extract_views.spec.js       |   2 +-
 .../common/entity/get_group_entities.spec.js  |   2 +-
 .../common/entity/get_view_entities.spec.js   |   2 +-
 test-mocha/common/entity/has_location.test.js |   2 +-
 .../common/entity/split_by_groups.spec.js     |   2 +-
 .../common/entity/state_card_type_test.js     |   2 +-
 .../entity/state_more_info_type_test.js       |   2 +-
 .../entity/timer_time_remaining_test.js       |   2 +-
 .../common/util/parse_aspect_ratio_test.js    |   2 +-
 401 files changed, 9045 insertions(+), 9048 deletions(-)

diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js
index ed8238da36..8b3c816480 100644
--- a/gallery/src/components/demo-card.js
+++ b/gallery/src/components/demo-card.js
@@ -1,13 +1,13 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import JsYaml from "js-yaml";
 
-import HomeAssistant from "../data/hass.js";
-import { demoConfig } from "../data/demo_config.js";
+import HomeAssistant from "../data/hass";
+import { demoConfig } from "../data/demo_config";
 import { demoServices } from "../data/demo_services";
-import demoResources from "../data/demo_resources.js";
-import demoStates from "../data/demo_states.js";
-import createCardElement from "../../../src/panels/lovelace/common/create-card-element.js";
+import demoResources from "../data/demo_resources";
+import demoStates from "../data/demo_states";
+import createCardElement from "../../../src/panels/lovelace/common/create-card-element";
 
 class DemoCard extends PolymerElement {
   static get template() {
diff --git a/gallery/src/components/demo-cards.js b/gallery/src/components/demo-cards.js
index 45920ef5a5..227b696146 100644
--- a/gallery/src/components/demo-cards.js
+++ b/gallery/src/components/demo-cards.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-toggle-button/paper-toggle-button";
 
-import "./demo-card.js";
+import "./demo-card";
 
 class DemoCards extends PolymerElement {
   static get template() {
diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js
index 8438733d6e..13a8dea6b8 100644
--- a/gallery/src/components/demo-more-info.js
+++ b/gallery/src/components/demo-more-info.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/state-summary/state-card-content.js";
-import "../../../src/dialogs/more-info/controls/more-info-content.js";
-import "../../../src/components/ha-card.js";
+import "../../../src/state-summary/state-card-content";
+import "../../../src/dialogs/more-info/controls/more-info-content";
+import "../../../src/components/ha-card";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {
diff --git a/gallery/src/components/demo-more-infos.js b/gallery/src/components/demo-more-infos.js
index c44b114e95..c296b44887 100644
--- a/gallery/src/components/demo-more-infos.js
+++ b/gallery/src/components/demo-more-infos.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-toggle-button/paper-toggle-button";
 
-import "./demo-more-info.js";
+import "./demo-more-info";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
diff --git a/gallery/src/data/provide_hass.js b/gallery/src/data/provide_hass.js
index ffac268707..79db10cbda 100644
--- a/gallery/src/data/provide_hass.js
+++ b/gallery/src/data/provide_hass.js
@@ -1,8 +1,8 @@
-import { fireEvent } from "../../../src/common/dom/fire_event.js";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 
-import { demoConfig } from "./demo_config.js";
+import { demoConfig } from "./demo_config";
 import { demoServices } from "./demo_services";
-import demoResources from "./demo_resources.js";
+import demoResources from "./demo_resources";
 
 const ensureArray = (val) => (Array.isArray(val) ? val : [val]);
 
diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.js b/gallery/src/demos/demo-hui-alarm-panel-card.js
index 23c95804b5..41340e1c1e 100644
--- a/gallery/src/demos/demo-hui-alarm-panel-card.js
+++ b/gallery/src/demos/demo-hui-alarm-panel-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
diff --git a/gallery/src/demos/demo-hui-conditional-card.js b/gallery/src/demos/demo-hui-conditional-card.js
index 9511be12e0..2e58cae0bc 100644
--- a/gallery/src/demos/demo-hui-conditional-card.js
+++ b/gallery/src/demos/demo-hui-conditional-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "controller_1", "on", {
diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js
index 743ca273be..7cdc2b01ef 100644
--- a/gallery/src/demos/demo-hui-entities-card.js
+++ b/gallery/src/demos/demo-hui-entities-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
diff --git a/gallery/src/demos/demo-hui-entity-button-card.js b/gallery/src/demos/demo-hui-entity-button-card.js
index 439dd76e55..d440b02995 100644
--- a/gallery/src/demos/demo-hui-entity-button-card.js
+++ b/gallery/src/demos/demo-hui-entity-button-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
diff --git a/gallery/src/demos/demo-hui-entity-filter-card.js b/gallery/src/demos/demo-hui-entity-filter-card.js
index d3759c6614..80c5e4587e 100644
--- a/gallery/src/demos/demo-hui-entity-filter-card.js
+++ b/gallery/src/demos/demo-hui-entity-filter-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("device_tracker", "demo_paulus", "work", {
diff --git a/gallery/src/demos/demo-hui-gauge-card.js b/gallery/src/demos/demo-hui-gauge-card.js
index f737c4fd02..6f9b4c4ac4 100644
--- a/gallery/src/demos/demo-hui-gauge-card.js
+++ b/gallery/src/demos/demo-hui-gauge-card.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/demo-cards.js";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
diff --git a/gallery/src/demos/demo-hui-glance-card.js b/gallery/src/demos/demo-hui-glance-card.js
index 83440e6611..4f209b8a47 100644
--- a/gallery/src/demos/demo-hui-glance-card.js
+++ b/gallery/src/demos/demo-hui-glance-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("device_tracker", "demo_paulus", "home", {
diff --git a/gallery/src/demos/demo-hui-iframe-card.js b/gallery/src/demos/demo-hui-iframe-card.js
index c705916d5d..d7651473b1 100644
--- a/gallery/src/demos/demo-hui-iframe-card.js
+++ b/gallery/src/demos/demo-hui-iframe-card.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/demo-cards.js";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
diff --git a/gallery/src/demos/demo-hui-light-card.js b/gallery/src/demos/demo-hui-light-card.js
index 8f5b2cca28..1288b8a8cb 100644
--- a/gallery/src/demos/demo-hui-light-card.js
+++ b/gallery/src/demos/demo-hui-light-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
diff --git a/gallery/src/demos/demo-hui-map-card.js b/gallery/src/demos/demo-hui-map-card.js
index ed5426a2e2..ec6890b2aa 100644
--- a/gallery/src/demos/demo-hui-map-card.js
+++ b/gallery/src/demos/demo-hui-map-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("device_tracker", "demo_paulus", "not_home", {
diff --git a/gallery/src/demos/demo-hui-markdown-card.js b/gallery/src/demos/demo-hui-markdown-card.js
index b8bbc72582..fe0ca6d175 100644
--- a/gallery/src/demos/demo-hui-markdown-card.js
+++ b/gallery/src/demos/demo-hui-markdown-card.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/demo-cards.js";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
diff --git a/gallery/src/demos/demo-hui-media-player-rows.js b/gallery/src/demos/demo-hui-media-player-rows.js
index fb2f5020dd..a205186a23 100644
--- a/gallery/src/demos/demo-hui-media-player-rows.js
+++ b/gallery/src/demos/demo-hui-media-player-rows.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("media_player", "bedroom", "playing", {
@@ -65,7 +65,7 @@ const CONFIGS = [
     - entity: media_player.living_room
       name: Pause, No skip, tvshow
     - entity: media_player.android_cast
-      name: Screen casting 
+      name: Screen casting
     - entity: media_player.lounge_room
       name: Chromcast Idle
     - entity: media_player.theater
diff --git a/gallery/src/demos/demo-hui-picture-elements-card.js b/gallery/src/demos/demo-hui-picture-elements-card.js
index 99cfa7c12c..93d9bfcc6f 100644
--- a/gallery/src/demos/demo-hui-picture-elements-card.js
+++ b/gallery/src/demos/demo-hui-picture-elements-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
diff --git a/gallery/src/demos/demo-hui-picture-entity-card.js b/gallery/src/demos/demo-hui-picture-entity-card.js
index 7a5ef9b0e4..7940a5ad00 100644
--- a/gallery/src/demos/demo-hui-picture-entity-card.js
+++ b/gallery/src/demos/demo-hui-picture-entity-card.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/demo-cards.js";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
diff --git a/gallery/src/demos/demo-hui-picture-glance-card.js b/gallery/src/demos/demo-hui-picture-glance-card.js
index d78275ed2c..18b5643267 100644
--- a/gallery/src/demos/demo-hui-picture-glance-card.js
+++ b/gallery/src/demos/demo-hui-picture-glance-card.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/demo-cards.js";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
diff --git a/gallery/src/demos/demo-hui-stack-card.js b/gallery/src/demos/demo-hui-stack-card.js
index c06b3ffa30..31a30066eb 100644
--- a/gallery/src/demos/demo-hui-stack-card.js
+++ b/gallery/src/demos/demo-hui-stack-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "kitchen_lights", "on", {
diff --git a/gallery/src/demos/demo-hui-thermostat-card.js b/gallery/src/demos/demo-hui-thermostat-card.js
index 3c2d5d6cf1..4fc421df3b 100644
--- a/gallery/src/demos/demo-hui-thermostat-card.js
+++ b/gallery/src/demos/demo-hui-thermostat-card.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
-import "../components/demo-cards.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("climate", "ecobee", "auto", {
diff --git a/gallery/src/demos/demo-more-info-light.js b/gallery/src/demos/demo-more-info-light.js
index 601e731957..f1faa2017c 100644
--- a/gallery/src/demos/demo-more-info-light.js
+++ b/gallery/src/demos/demo-more-info-light.js
@@ -1,13 +1,13 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/dialogs/more-info/controls/more-info-content.js";
-import "../../../src/components/ha-card.js";
+import "../../../src/dialogs/more-info/controls/more-info-content";
+import "../../../src/components/ha-card";
 
-import getEntity from "../data/entity.js";
-import provideHass from "../data/provide_hass.js";
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
 
-import "../components/demo-more-infos.js";
+import "../components/demo-more-infos";
 
 /* eslint-disable no-unused-vars */
 
diff --git a/gallery/src/entrypoint.js b/gallery/src/entrypoint.js
index a690d9d3e0..6e656edc98 100644
--- a/gallery/src/entrypoint.js
+++ b/gallery/src/entrypoint.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-styles/typography.js";
-import "@polymer/polymer/lib/elements/dom-if.js";
-import "@polymer/polymer/lib/elements/dom-repeat.js";
+import "@polymer/paper-styles/typography";
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
 
-import "../../src/resources/hass-icons.js";
-import "../../src/resources/ha-style.js";
-import "../../src/resources/roboto.js";
-import "../../src/components/ha-iconset-svg.js";
+import "../../src/resources/hass-icons";
+import "../../src/resources/ha-style";
+import "../../src/resources/roboto";
+import "../../src/components/ha-iconset-svg";
 
-import "./ha-gallery.js";
+import "./ha-gallery";
 
 document.body.appendChild(document.createElement("ha-gallery"));
diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js
index e336f6e56f..73c3e666d6 100644
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -1,15 +1,15 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../src/managers/notification-manager.js";
+import "../../src/managers/notification-manager";
 
 const DEMOS = require.context("./demos", true, /^(.*\.(js$))[^.]*$/im);
 
diff --git a/hassio/src/addon-store/hassio-addon-repository.js b/hassio/src/addon-store/hassio-addon-repository.js
index 04eef73f61..0a75dfd925 100644
--- a/hassio/src/addon-store/hassio-addon-repository.js
+++ b/hassio/src/addon-store/hassio-addon-repository.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/hassio-card-content.js";
-import "../resources/hassio-style.js";
-import NavigateMixin from "../../../src/mixins/navigate-mixin.js";
+import "../components/hassio-card-content";
+import "../resources/hassio-style";
+import NavigateMixin from "../../../src/mixins/navigate-mixin";
 
 class HassioAddonRepository extends NavigateMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/addon-store/hassio-addon-store.js b/hassio/src/addon-store/hassio-addon-store.js
index 01bc52a0de..1cfae301e4 100644
--- a/hassio/src/addon-store/hassio-addon-store.js
+++ b/hassio/src/addon-store/hassio-addon-store.js
@@ -1,8 +1,8 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./hassio-addon-repository.js";
-import "./hassio-repositories-editor.js";
+import "./hassio-addon-repository";
+import "./hassio-repositories-editor";
 
 class HassioAddonStore extends PolymerElement {
   static get template() {
diff --git a/hassio/src/addon-store/hassio-repositories-editor.js b/hassio/src/addon-store/hassio-repositories-editor.js
index 3a07a9269f..cec3c40eb6 100644
--- a/hassio/src/addon-store/hassio-repositories-editor.js
+++ b/hassio/src/addon-store/hassio-repositories-editor.js
@@ -1,12 +1,12 @@
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
-import "../components/hassio-card-content.js";
-import "../resources/hassio-style.js";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../components/hassio-card-content";
+import "../resources/hassio-style";
 
 class HassioRepositoriesEditor extends PolymerElement {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-audio.js b/hassio/src/addon-view/hassio-addon-audio.js
index 0f03169cda..c651923b0a 100644
--- a/hassio/src/addon-view/hassio-addon-audio.js
+++ b/hassio/src/addon-view/hassio-addon-audio.js
@@ -1,15 +1,15 @@
-import "web-animations-js/web-animations-next-lite.min.js";
+import "web-animations-js/web-animations-next-lite.min";
 
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+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";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/resources/ha-style.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "../../../src/resources/ha-style";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
 class HassioAddonAudio extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-config.js b/hassio/src/addon-view/hassio-addon-config.js
index 3ae1361d65..56d73a8830 100644
--- a/hassio/src/addon-view/hassio-addon-config.js
+++ b/hassio/src/addon-view/hassio-addon-config.js
@@ -1,10 +1,10 @@
-import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
+import "../../../src/components/buttons/ha-call-api-button";
 
 class HassioAddonConfig extends PolymerElement {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js
index fb18a5695a..4871ba9f82 100644
--- a/hassio/src/addon-view/hassio-addon-info.js
+++ b/hassio/src/addon-view/hassio-addon-info.js
@@ -1,16 +1,16 @@
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
-import "../../../src/components/ha-markdown.js";
-import "../../../src/resources/ha-style.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/ha-markdown";
+import "../../../src/resources/ha-style";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
-import "../components/hassio-card-content.js";
+import "../components/hassio-card-content";
 
 class HassioAddonInfo extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js
index baa1a4c63f..d411fb928f 100644
--- a/hassio/src/addon-view/hassio-addon-logs.js
+++ b/hassio/src/addon-view/hassio-addon-logs.js
@@ -1,9 +1,9 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/resources/ha-style.js";
+import "../../../src/resources/ha-style";
 
 class HassioAddonLogs extends PolymerElement {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-network.js b/hassio/src/addon-view/hassio-addon-network.js
index 770ea2eef7..7041f89210 100644
--- a/hassio/src/addon-view/hassio-addon-network.js
+++ b/hassio/src/addon-view/hassio-addon-network.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
-import "../../../src/resources/ha-style.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/resources/ha-style";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
 class HassioAddonNetwork extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/addon-view/hassio-addon-view.js b/hassio/src/addon-view/hassio-addon-view.js
index 7fe9dc40ab..f20efe01cc 100644
--- a/hassio/src/addon-view/hassio-addon-view.js
+++ b/hassio/src/addon-view/hassio-addon-view.js
@@ -1,19 +1,19 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/app-route/app-route.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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/app-route/app-route";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/ha-menu-button.js";
-import "../../../src/resources/ha-style.js";
-import "../hassio-markdown-dialog.js";
-import "./hassio-addon-audio.js";
-import "./hassio-addon-config.js";
-import "./hassio-addon-info.js";
-import "./hassio-addon-logs.js";
-import "./hassio-addon-network.js";
+import "../../../src/components/ha-menu-button";
+import "../../../src/resources/ha-style";
+import "../hassio-markdown-dialog";
+import "./hassio-addon-audio";
+import "./hassio-addon-config";
+import "./hassio-addon-info";
+import "./hassio-addon-logs";
+import "./hassio-addon-network";
 
 class HassioAddonView extends PolymerElement {
   static get template() {
diff --git a/hassio/src/components/hassio-card-content.js b/hassio/src/components/hassio-card-content.js
index 84d2db9655..dfd5c0a49e 100644
--- a/hassio/src/components/hassio-card-content.js
+++ b/hassio/src/components/hassio-card-content.js
@@ -1,8 +1,8 @@
-import "@polymer/iron-icon/iron-icon.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/ha-relative-time.js";
+import "../../../src/components/ha-relative-time";
 
 class HassioCardContent extends PolymerElement {
   static get template() {
diff --git a/hassio/src/dashboard/hassio-addons.js b/hassio/src/dashboard/hassio-addons.js
index d4f5a56535..2418b9dfb4 100644
--- a/hassio/src/dashboard/hassio-addons.js
+++ b/hassio/src/dashboard/hassio-addons.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/hassio-card-content.js";
-import "../resources/hassio-style.js";
-import NavigateMixin from "../../../src/mixins/navigate-mixin.js";
+import "../components/hassio-card-content";
+import "../resources/hassio-style";
+import NavigateMixin from "../../../src/mixins/navigate-mixin";
 
 class HassioAddons extends NavigateMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/dashboard/hassio-dashboard.js b/hassio/src/dashboard/hassio-dashboard.js
index 3c9ecde4dd..c868c8dbb3 100644
--- a/hassio/src/dashboard/hassio-dashboard.js
+++ b/hassio/src/dashboard/hassio-dashboard.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./hassio-addons.js";
-import "./hassio-hass-update.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "./hassio-addons";
+import "./hassio-hass-update";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
 class HassioDashboard extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/dashboard/hassio-hass-update.js b/hassio/src/dashboard/hassio-hass-update.js
index dd7df1f429..0ad1b8a64b 100644
--- a/hassio/src/dashboard/hassio-hass-update.js
+++ b/hassio/src/dashboard/hassio-hass-update.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
-import "../components/hassio-card-content.js";
-import "../resources/hassio-style.js";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../components/hassio-card-content";
+import "../resources/hassio-style";
 
 class HassioHassUpdate extends PolymerElement {
   static get template() {
diff --git a/hassio/src/hassio-app.js b/hassio/src/hassio-app.js
index c85962b6e2..aee5c1ede0 100644
--- a/hassio/src/hassio-app.js
+++ b/hassio/src/hassio-app.js
@@ -1,8 +1,8 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./hassio-main.js";
-import "./resources/hassio-icons.js";
+import "./hassio-main";
+import "./resources/hassio-icons";
 
 class HassioApp extends PolymerElement {
   static get template() {
diff --git a/hassio/src/hassio-data.js b/hassio/src/hassio-data.js
index 39795402e9..38de4b5809 100644
--- a/hassio/src/hassio-data.js
+++ b/hassio/src/hassio-data.js
@@ -1,4 +1,4 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HassioData extends PolymerElement {
   static get properties() {
diff --git a/hassio/src/hassio-main.js b/hassio/src/hassio-main.js
index b18745edb2..2cc8de46ae 100644
--- a/hassio/src/hassio-main.js
+++ b/hassio/src/hassio-main.js
@@ -1,15 +1,15 @@
-import "@polymer/app-route/app-route.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../src/layouts/hass-loading-screen.js";
-import "./addon-view/hassio-addon-view.js";
-import "./hassio-data.js";
-import "./hassio-pages-with-tabs.js";
+import "../../src/layouts/hass-loading-screen";
+import "./addon-view/hassio-addon-view";
+import "./hassio-data";
+import "./hassio-pages-with-tabs";
 
-import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element.js";
-import EventsMixin from "../../src/mixins/events-mixin.js";
-import NavigateMixin from "../../src/mixins/navigate-mixin.js";
+import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
+import EventsMixin from "../../src/mixins/events-mixin";
+import NavigateMixin from "../../src/mixins/navigate-mixin";
 
 class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
   static get template() {
diff --git a/hassio/src/hassio-markdown-dialog.js b/hassio/src/hassio-markdown-dialog.js
index c12cf283bd..17eed8f4b3 100644
--- a/hassio/src/hassio-markdown-dialog.js
+++ b/hassio/src/hassio-markdown-dialog.js
@@ -1,12 +1,12 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../src/components/ha-markdown.js";
-import "../../src/resources/ha-style.js";
+import "../../src/components/ha-markdown";
+import "../../src/resources/ha-style";
 
 class HassioMarkdownDialog extends PolymerElement {
   static get template() {
diff --git a/hassio/src/hassio-pages-with-tabs.js b/hassio/src/hassio-pages-with-tabs.js
index d9ad4247a1..0d7d26a078 100644
--- a/hassio/src/hassio-pages-with-tabs.js
+++ b/hassio/src/hassio-pages-with-tabs.js
@@ -1,24 +1,24 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-tabs/paper-tab.js";
-import "@polymer/paper-tabs/paper-tabs.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-icon-button/paper-icon-button";
+import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../src/components/ha-menu-button.js";
-import "../../src/resources/ha-style.js";
-import "./addon-store/hassio-addon-store.js";
-import "./dashboard/hassio-dashboard.js";
-import "./hassio-markdown-dialog.js";
-import "./snapshots/hassio-snapshot.js";
-import "./snapshots/hassio-snapshots.js";
-import "./system/hassio-system.js";
+import "../../src/components/ha-menu-button";
+import "../../src/resources/ha-style";
+import "./addon-store/hassio-addon-store";
+import "./dashboard/hassio-dashboard";
+import "./hassio-markdown-dialog";
+import "./snapshots/hassio-snapshot";
+import "./snapshots/hassio-snapshots";
+import "./system/hassio-system";
 
-import scrollToTarget from "../../src/common/dom/scroll-to-target.js";
+import scrollToTarget from "../../src/common/dom/scroll-to-target";
 
-import NavigateMixin from "../../src/mixins/navigate-mixin.js";
+import NavigateMixin from "../../src/mixins/navigate-mixin";
 
 class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/resources/hassio-icons.js b/hassio/src/resources/hassio-icons.js
index 5f347236ab..ca4a7fa58f 100644
--- a/hassio/src/resources/hassio-icons.js
+++ b/hassio/src/resources/hassio-icons.js
@@ -1,4 +1,4 @@
-import "../../../src/components/ha-iconset-svg.js";
+import "../../../src/components/ha-iconset-svg";
 import iconSetContent from "../../hassio-icons.html";
 
 const documentContainer = document.createElement("template");
diff --git a/hassio/src/snapshots/hassio-snapshot.js b/hassio/src/snapshots/hassio-snapshot.js
index 929bc64ddf..6033cb2ca3 100644
--- a/hassio/src/snapshots/hassio-snapshot.js
+++ b/hassio/src/snapshots/hassio-snapshot.js
@@ -1,14 +1,14 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/resources/ha-style.js";
+import "../../../src/resources/ha-style";
 
 class HassioSnapshot extends PolymerElement {
   static get template() {
diff --git a/hassio/src/snapshots/hassio-snapshots.js b/hassio/src/snapshots/hassio-snapshots.js
index c2953b0137..99a8766d70 100644
--- a/hassio/src/snapshots/hassio-snapshots.js
+++ b/hassio/src/snapshots/hassio-snapshots.js
@@ -1,15 +1,15 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-radio-button/paper-radio-button.js";
-import "@polymer/paper-radio-group/paper-radio-group.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-radio-button/paper-radio-button";
+import "@polymer/paper-radio-group/paper-radio-group";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/hassio-card-content.js";
-import "../resources/hassio-style.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "../components/hassio-card-content";
+import "../resources/hassio-style";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
 class HassioSnapshots extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js
index 245c858065..4ade53491f 100644
--- a/hassio/src/system/hassio-host-info.js
+++ b/hassio/src/system/hassio-host-info.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "../../../src/components/buttons/ha-call-api-button";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
 class HassioHostInfo extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js
index d29c517e5c..c594bad418 100644
--- a/hassio/src/system/hassio-supervisor-info.js
+++ b/hassio/src/system/hassio-supervisor-info.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../src/components/buttons/ha-call-api-button.js";
-import EventsMixin from "../../../src/mixins/events-mixin.js";
+import "../../../src/components/buttons/ha-call-api-button";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
 class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js
index 759119f3b1..4b08600851 100644
--- a/hassio/src/system/hassio-supervisor-log.js
+++ b/hassio/src/system/hassio-supervisor-log.js
@@ -1,7 +1,7 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HassioSupervisorLog extends PolymerElement {
   static get template() {
diff --git a/hassio/src/system/hassio-system.js b/hassio/src/system/hassio-system.js
index 2abc884c27..48d963c35d 100644
--- a/hassio/src/system/hassio-system.js
+++ b/hassio/src/system/hassio-system.js
@@ -1,10 +1,10 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./hassio-host-info.js";
-import "./hassio-supervisor-info.js";
-import "./hassio-supervisor-log.js";
+import "./hassio-host-info";
+import "./hassio-supervisor-info";
+import "./hassio-supervisor-log";
 
 class HassioSystem extends PolymerElement {
   static get template() {
diff --git a/src/auth/ha-auth-flow.js b/src/auth/ha-auth-flow.js
index be44f10a93..22f4435c83 100644
--- a/src/auth/ha-auth-flow.js
+++ b/src/auth/ha-auth-flow.js
@@ -1,8 +1,8 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import "../components/ha-form.js";
-import LocalizeLiteMixin from "../mixins/localize-lite-mixin.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import "../components/ha-form";
+import LocalizeLiteMixin from "../mixins/localize-lite-mixin";
 
 class HaAuthFlow extends LocalizeLiteMixin(PolymerElement) {
   static get template() {
diff --git a/src/auth/ha-authorize.js b/src/auth/ha-authorize.js
index 41ed024505..dfc266898e 100644
--- a/src/auth/ha-authorize.js
+++ b/src/auth/ha-authorize.js
@@ -1,13 +1,13 @@
-import "@polymer/polymer/lib/elements/dom-if.js";
-import "@polymer/polymer/lib/elements/dom-repeat.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-markdown.js";
+import "../components/ha-markdown";
 
-import LocalizeLiteMixin from "../mixins/localize-lite-mixin.js";
+import LocalizeLiteMixin from "../mixins/localize-lite-mixin";
 
-import "./ha-auth-flow.js";
+import "./ha-auth-flow";
 
 class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
   static get template() {
@@ -87,7 +87,7 @@ class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
     if (query.state) props.oauth2State = query.state;
     this.setProperties(props);
 
-    import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider.js");
+    import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider");
 
     // Fetch auth providers
     try {
diff --git a/src/auth/ha-pick-auth-provider.js b/src/auth/ha-pick-auth-provider.js
index cbf188015c..378e656ad5 100644
--- a/src/auth/ha-pick-auth-provider.js
+++ b/src/auth/ha-pick-auth-provider.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
-import LocalizeLiteMixin from "../mixins/localize-lite-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
+import LocalizeLiteMixin from "../mixins/localize-lite-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/cards/ha-badges-card.js b/src/cards/ha-badges-card.js
index 35bd6ea490..47e8327eb0 100644
--- a/src/cards/ha-badges-card.js
+++ b/src/cards/ha-badges-card.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/ha-state-label-badge.js";
+import "../components/entity/ha-state-label-badge";
 
 class HaBadgesCard extends PolymerElement {
   static get template() {
diff --git a/src/cards/ha-camera-card.js b/src/cards/ha-camera-card.js
index 76fb22ce37..424867052e 100644
--- a/src/cards/ha-camera-card.js
+++ b/src/cards/ha-camera-card.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-styles/element-styles/paper-material-styles.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import computeStateName from "../common/entity/compute_state_name.js";
-import EventsMixin from "../mixins/events-mixin.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import computeStateName from "../common/entity/compute_state_name";
+import EventsMixin from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 const UPDATE_INTERVAL = 10000; // ms
 /*
diff --git a/src/cards/ha-card-chooser.js b/src/cards/ha-card-chooser.js
index 15e9896df1..d1b875964f 100644
--- a/src/cards/ha-card-chooser.js
+++ b/src/cards/ha-card-chooser.js
@@ -1,14 +1,14 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-camera-card.js";
-import "./ha-entities-card.js";
-import "./ha-history_graph-card.js";
-import "./ha-media_player-card.js";
-import "./ha-persistent_notification-card.js";
-import "./ha-plant-card.js";
-import "./ha-weather-card.js";
+import "./ha-camera-card";
+import "./ha-entities-card";
+import "./ha-history_graph-card";
+import "./ha-media_player-card";
+import "./ha-persistent_notification-card";
+import "./ha-plant-card";
+import "./ha-weather-card";
 
-import dynamicContentUpdater from "../common/dom/dynamic_content_updater.js";
+import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
 
 class HaCardChooser extends PolymerElement {
   static get properties() {
diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js
index 1cd7092bdc..b1ce669fd7 100644
--- a/src/cards/ha-entities-card.js
+++ b/src/cards/ha-entities-card.js
@@ -1,17 +1,17 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/ha-entity-toggle.js";
-import "../components/ha-card.js";
-import "../state-summary/state-card-content.js";
+import "../components/entity/ha-entity-toggle";
+import "../components/ha-card";
+import "../state-summary/state-card-content";
 
-import computeStateDomain from "../common/entity/compute_state_domain.js";
-import computeStateName from "../common/entity/compute_state_name.js";
-import stateMoreInfoType from "../common/entity/state_more_info_type.js";
-import canToggleState from "../common/entity/can_toggle_state.js";
-import EventsMixin from "../mixins/events-mixin.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import computeStateDomain from "../common/entity/compute_state_domain";
+import computeStateName from "../common/entity/compute_state_name";
+import stateMoreInfoType from "../common/entity/state_more_info_type";
+import canToggleState from "../common/entity/can_toggle_state";
+import EventsMixin from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
diff --git a/src/cards/ha-history_graph-card.js b/src/cards/ha-history_graph-card.js
index ca2e3aad7b..2b1e79a863 100644
--- a/src/cards/ha-history_graph-card.js
+++ b/src/cards/ha-history_graph-card.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/state-history-charts.js";
+import "../components/state-history-charts";
 import "../data/ha-state-history-data";
 
-import computeStateName from "../common/entity/compute_state_name.js";
-import EventsMixin from "../mixins/events-mixin.js";
+import computeStateName from "../common/entity/compute_state_name";
+import EventsMixin from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js
index 08c6141f7f..804ccb2780 100644
--- a/src/cards/ha-media_player-card.js
+++ b/src/cards/ha-media_player-card.js
@@ -1,15 +1,15 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-progress/paper-progress.js";
-import "@polymer/paper-styles/element-styles/paper-material-styles.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-progress/paper-progress";
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import HassMediaPlayerEntity from "../util/hass-media-player-model.js";
+import HassMediaPlayerEntity from "../util/hass-media-player-model";
 
-import computeStateName from "../common/entity/compute_state_name.js";
-import EventsMixin from "../mixins/events-mixin.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import computeStateName from "../common/entity/compute_state_name";
+import EventsMixin from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/cards/ha-persistent_notification-card.js b/src/cards/ha-persistent_notification-card.js
index e6ed980f29..9592c05699 100644
--- a/src/cards/ha-persistent_notification-card.js
+++ b/src/cards/ha-persistent_notification-card.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-card.js";
-import "../components/ha-markdown.js";
+import "../components/ha-card";
+import "../components/ha-markdown";
 
-import computeStateName from "../common/entity/compute_state_name.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import computeStateName from "../common/entity/compute_state_name";
+import LocalizeMixin from "../mixins/localize-mixin";
 import computeObjectId from "../common/entity/compute_object_id";
 
 /*
diff --git a/src/cards/ha-plant-card.js b/src/cards/ha-plant-card.js
index 63152f9437..93862dece0 100644
--- a/src/cards/ha-plant-card.js
+++ b/src/cards/ha-plant-card.js
@@ -1,11 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-card.js";
-import "../components/ha-icon.js";
+import "../components/ha-card";
+import "../components/ha-icon";
 
-import computeStateName from "../common/entity/compute_state_name.js";
-import EventsMixin from "../mixins/events-mixin.js";
+import computeStateName from "../common/entity/compute_state_name";
+import EventsMixin from "../mixins/events-mixin";
 
 class HaPlantCard extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index 90b49d97a3..f8a1c219da 100644
--- a/src/cards/ha-weather-card.js
+++ b/src/cards/ha-weather-card.js
@@ -1,11 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-card.js";
-import "../components/ha-icon.js";
+import "../components/ha-card";
+import "../components/ha-icon";
 
-import EventsMixin from "../mixins/events-mixin.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/common/entity/can_toggle_state.js b/src/common/entity/can_toggle_state.js
index cd056caaa8..8b7a1eaee0 100644
--- a/src/common/entity/can_toggle_state.js
+++ b/src/common/entity/can_toggle_state.js
@@ -1,5 +1,5 @@
-import canToggleDomain from "./can_toggle_domain.js";
-import computeStateDomain from "./compute_state_domain.js";
+import canToggleDomain from "./can_toggle_domain";
+import computeStateDomain from "./compute_state_domain";
 
 export default function canToggleState(hass, stateObj) {
   const domain = computeStateDomain(stateObj);
diff --git a/src/common/entity/compute_state_display.js b/src/common/entity/compute_state_display.js
index d383b3b5e8..56f5d28c48 100644
--- a/src/common/entity/compute_state_display.js
+++ b/src/common/entity/compute_state_display.js
@@ -1,7 +1,7 @@
-import computeStateDomain from "./compute_state_domain.js";
-import formatDateTime from "../datetime/format_date_time.js";
-import formatDate from "../datetime/format_date.js";
-import formatTime from "../datetime/format_time.js";
+import computeStateDomain from "./compute_state_domain";
+import formatDateTime from "../datetime/format_date_time";
+import formatDate from "../datetime/format_date";
+import formatTime from "../datetime/format_time";
 
 export default function computeStateDisplay(localize, stateObj, language) {
   if (!stateObj._stateDisplay) {
diff --git a/src/common/entity/compute_state_domain.js b/src/common/entity/compute_state_domain.js
index 64687a9f11..492b700eaa 100644
--- a/src/common/entity/compute_state_domain.js
+++ b/src/common/entity/compute_state_domain.js
@@ -1,4 +1,4 @@
-import computeDomain from "./compute_domain.js";
+import computeDomain from "./compute_domain";
 
 export default function computeStateDomain(stateObj) {
   return computeDomain(stateObj.entity_id);
diff --git a/src/common/entity/cover_icon.js b/src/common/entity/cover_icon.js
index 1db6b1a750..78876025b4 100644
--- a/src/common/entity/cover_icon.js
+++ b/src/common/entity/cover_icon.js
@@ -1,5 +1,5 @@
 /** Return an icon representing a cover state. */
-import domainIcon from "./domain_icon.js";
+import domainIcon from "./domain_icon";
 
 export default function coverIcon(state) {
   var open = state.state && state.state !== "closed";
diff --git a/src/common/entity/domain_icon.js b/src/common/entity/domain_icon.js
index 22b357d7e5..a50fcb943e 100644
--- a/src/common/entity/domain_icon.js
+++ b/src/common/entity/domain_icon.js
@@ -3,7 +3,7 @@
  *
  * Optionally pass in a state to influence the domain icon.
  */
-import { DEFAULT_DOMAIN_ICON } from "../const.js";
+import { DEFAULT_DOMAIN_ICON } from "../const";
 
 const fixedIcons = {
   alert: "hass:alert",
diff --git a/src/common/entity/extract_views.js b/src/common/entity/extract_views.js
index e5705ea6e3..c3b7949911 100644
--- a/src/common/entity/extract_views.js
+++ b/src/common/entity/extract_views.js
@@ -1,4 +1,4 @@
-import { DEFAULT_VIEW_ENTITY_ID } from "../const.js";
+import { DEFAULT_VIEW_ENTITY_ID } from "../const";
 
 // Return an ordered array of available views
 export default function extractViews(entities) {
diff --git a/src/common/entity/get_view_entities.js b/src/common/entity/get_view_entities.js
index 67a435ef07..00b21ee30e 100644
--- a/src/common/entity/get_view_entities.js
+++ b/src/common/entity/get_view_entities.js
@@ -1,5 +1,5 @@
-import computeDomain from "./compute_domain.js";
-import getGroupEntities from "./get_group_entities.js";
+import computeDomain from "./compute_domain";
+import getGroupEntities from "./get_group_entities";
 
 // Return an object containing all entities that the view will show
 // including embedded groups.
diff --git a/src/common/entity/input_dateteime_icon.js b/src/common/entity/input_dateteime_icon.js
index b14163c393..8418226e90 100644
--- a/src/common/entity/input_dateteime_icon.js
+++ b/src/common/entity/input_dateteime_icon.js
@@ -1,5 +1,5 @@
 /** Return an icon representing an input datetime state. */
-import domainIcon from "./domain_icon.js";
+import domainIcon from "./domain_icon";
 
 export default function inputDateTimeIcon(state) {
   if (!state.attributes.has_date) {
diff --git a/src/common/entity/sensor_icon.js b/src/common/entity/sensor_icon.js
index 9f555a5658..44e6f3ce09 100644
--- a/src/common/entity/sensor_icon.js
+++ b/src/common/entity/sensor_icon.js
@@ -1,6 +1,6 @@
 /** Return an icon representing a sensor state. */
-import { UNIT_C, UNIT_F } from "../const.js";
-import domainIcon from "./domain_icon.js";
+import { UNIT_C, UNIT_F } from "../const";
+import domainIcon from "./domain_icon";
 
 const fixedDeviceClassIcons = {
   humidity: "hass:water-percent",
diff --git a/src/common/entity/split_by_groups.js b/src/common/entity/split_by_groups.js
index ac4b60bbf6..e0631dfdda 100644
--- a/src/common/entity/split_by_groups.js
+++ b/src/common/entity/split_by_groups.js
@@ -1,4 +1,4 @@
-import computeDomain from "./compute_domain.js";
+import computeDomain from "./compute_domain";
 
 // Split a collection into a list of groups and a 'rest' list of ungrouped
 // entities.
diff --git a/src/common/entity/state_card_type.js b/src/common/entity/state_card_type.js
index 76bb4eda7b..170ca9cb8b 100644
--- a/src/common/entity/state_card_type.js
+++ b/src/common/entity/state_card_type.js
@@ -1,6 +1,6 @@
-import canToggleState from "./can_toggle_state.js";
-import computeStateDomain from "./compute_state_domain.js";
-import { DOMAINS_WITH_CARD } from "../const.js";
+import canToggleState from "./can_toggle_state";
+import computeStateDomain from "./compute_state_domain";
+import { DOMAINS_WITH_CARD } from "../const";
 
 export default function stateCardType(hass, stateObj) {
   if (stateObj.state === "unavailable") {
diff --git a/src/common/entity/state_icon.js b/src/common/entity/state_icon.js
index 3b5196cc8c..928d7bc186 100644
--- a/src/common/entity/state_icon.js
+++ b/src/common/entity/state_icon.js
@@ -1,13 +1,13 @@
 /** Return an icon representing a state. */
-import { DEFAULT_DOMAIN_ICON } from "../const.js";
+import { DEFAULT_DOMAIN_ICON } from "../const";
 
-import computeDomain from "./compute_domain.js";
-import domainIcon from "./domain_icon.js";
+import computeDomain from "./compute_domain";
+import domainIcon from "./domain_icon";
 
-import binarySensorIcon from "./binary_sensor_icon.js";
-import coverIcon from "./cover_icon.js";
-import sensorIcon from "./sensor_icon.js";
-import inputDateTimeIcon from "./input_dateteime_icon.js";
+import binarySensorIcon from "./binary_sensor_icon";
+import coverIcon from "./cover_icon";
+import sensorIcon from "./sensor_icon";
+import inputDateTimeIcon from "./input_dateteime_icon";
 
 const domainIcons = {
   binary_sensor: binarySensorIcon,
diff --git a/src/common/entity/state_more_info_type.js b/src/common/entity/state_more_info_type.js
index 7b31701c14..a35ad61f35 100644
--- a/src/common/entity/state_more_info_type.js
+++ b/src/common/entity/state_more_info_type.js
@@ -1,5 +1,5 @@
-import computeStateDomain from "./compute_state_domain.js";
-import { DOMAINS_HIDE_MORE_INFO, DOMAINS_WITH_MORE_INFO } from "../const.js";
+import computeStateDomain from "./compute_state_domain";
+import { DOMAINS_HIDE_MORE_INFO, DOMAINS_WITH_MORE_INFO } from "../const";
 
 export default function stateMoreInfoType(stateObj) {
   const domain = computeStateDomain(stateObj);
diff --git a/src/common/entity/states_sort_by_name.js b/src/common/entity/states_sort_by_name.js
index 8d28db1dc5..f4b67fe2b4 100644
--- a/src/common/entity/states_sort_by_name.js
+++ b/src/common/entity/states_sort_by_name.js
@@ -5,7 +5,7 @@
  *   const states = [state1, state2]
  *   states.sort(statesSortByName);
  */
-import computeStateName from "./compute_state_name.js";
+import computeStateName from "./compute_state_name";
 
 export default function sortStatesByName(entityA, entityB) {
   const nameA = computeStateName(entityA);
diff --git a/src/common/entity/timer_time_remaining.js b/src/common/entity/timer_time_remaining.js
index c61c7f5483..100c55a88c 100644
--- a/src/common/entity/timer_time_remaining.js
+++ b/src/common/entity/timer_time_remaining.js
@@ -1,4 +1,4 @@
-import durationToSeconds from "../datetime/duration_to_seconds.js";
+import durationToSeconds from "../datetime/duration_to_seconds";
 
 export default function timerTimeRemaining(stateObj) {
   let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
diff --git a/src/common/navigate.ts b/src/common/navigate.ts
index 6c9675a246..155cef6b69 100644
--- a/src/common/navigate.ts
+++ b/src/common/navigate.ts
@@ -1,4 +1,4 @@
-import { fireEvent } from "./dom/fire_event.js";
+import { fireEvent } from "./dom/fire_event";
 
 export const navigate = (
   node: HTMLElement,
diff --git a/src/components/buttons/ha-call-api-button.js b/src/components/buttons/ha-call-api-button.js
index cc1984bd58..01de64a64d 100644
--- a/src/components/buttons/ha-call-api-button.js
+++ b/src/components/buttons/ha-call-api-button.js
@@ -1,7 +1,7 @@
 import { LitElement, html } from "@polymer/lit-element";
 
-import "./ha-progress-button.js";
-import { fireEvent } from "../../common/dom/fire_event.js";
+import "./ha-progress-button";
+import { fireEvent } from "../../common/dom/fire_event";
 
 class HaCallApiButton extends LitElement {
   render() {
diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js
index fd64489c02..3f3b02860f 100644
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@@ -1,8 +1,8 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-progress-button.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import "./ha-progress-button";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/buttons/ha-progress-button.js b/src/components/buttons/ha-progress-button.js
index 30468267f0..f45a8a0c88 100644
--- a/src/components/buttons/ha-progress-button.js
+++ b/src/components/buttons/ha-progress-button.js
@@ -1,7 +1,7 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaProgressButton extends PolymerElement {
   static get template() {
diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 6ae433eda7..fa8364b480 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -1,12 +1,12 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 
-import formatTime from "../../common/datetime/format_time.js";
+import formatTime from "../../common/datetime/format_time";
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
 
diff --git a/src/components/entity/ha-entity-picker.js b/src/components/entity/ha-entity-picker.js
index 3e1a2e4ecb..d3e71eff98 100644
--- a/src/components/entity/ha-entity-picker.js
+++ b/src/components/entity/ha-entity-picker.js
@@ -1,16 +1,16 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-icon-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@vaadin/vaadin-combo-box/vaadin-combo-box-light.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
 
-import "./state-badge.js";
+import "./state-badge";
 
-import computeStateName from "../../common/entity/compute_state_name.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import computeStateName from "../../common/entity/compute_state_name";
+import LocalizeMixin from "../../mixins/localize-mixin";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index 646570140f..729def5660 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import { STATES_OFF } from "../../common/const.js";
-import computeStateDomain from "../../common/entity/compute_state_domain.js";
+import { STATES_OFF } from "../../common/const";
+import computeStateDomain from "../../common/entity/compute_state_domain";
 
 class HaEntityToggle extends PolymerElement {
   static get template() {
diff --git a/src/components/entity/ha-state-icon.js b/src/components/entity/ha-state-icon.js
index 9f76108abc..a70bd8d299 100644
--- a/src/components/entity/ha-state-icon.js
+++ b/src/components/entity/ha-state-icon.js
@@ -1,8 +1,8 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../ha-icon.js";
-import stateIcon from "../../common/entity/state_icon.js";
+import "../ha-icon";
+import stateIcon from "../../common/entity/state_icon";
 
 class HaStateIcon extends PolymerElement {
   static get template() {
diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index f192237b34..f40f24f0de 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -1,18 +1,18 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../ha-label-badge.js";
+import "../ha-label-badge";
 
-import computeStateDomain from "../../common/entity/compute_state_domain.js";
-import computeStateName from "../../common/entity/compute_state_name.js";
-import domainIcon from "../../common/entity/domain_icon.js";
-import stateIcon from "../../common/entity/state_icon.js";
-import timerTimeRemaining from "../../common/entity/timer_time_remaining.js";
-import attributeClassNames from "../../common/entity/attribute_class_names.js";
-import secondsToDuration from "../../common/datetime/seconds_to_duration.js";
+import computeStateDomain from "../../common/entity/compute_state_domain";
+import computeStateName from "../../common/entity/compute_state_name";
+import domainIcon from "../../common/entity/domain_icon";
+import stateIcon from "../../common/entity/state_icon";
+import timerTimeRemaining from "../../common/entity/timer_time_remaining";
+import attributeClassNames from "../../common/entity/attribute_class_names";
+import secondsToDuration from "../../common/datetime/seconds_to_duration";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/entity/state-badge.js b/src/components/entity/state-badge.js
index 2b4134be8b..c20fd31465 100644
--- a/src/components/entity/state-badge.js
+++ b/src/components/entity/state-badge.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../ha-icon.js";
-import computeStateDomain from "../../common/entity/compute_state_domain.js";
-import stateIcon from "../../common/entity/state_icon.js";
+import "../ha-icon";
+import computeStateDomain from "../../common/entity/compute_state_domain";
+import stateIcon from "../../common/entity/state_icon";
 
 class StateBadge extends PolymerElement {
   static get template() {
diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js
index f307fb5918..1b2f792088 100644
--- a/src/components/entity/state-info.js
+++ b/src/components/entity/state-info.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../ha-relative-time.js";
-import "./state-badge.js";
-import computeStateName from "../../common/entity/compute_state_name.js";
+import "../ha-relative-time";
+import "./state-badge";
+import computeStateName from "../../common/entity/compute_state_name";
 
 class StateInfo extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-attributes.js b/src/components/ha-attributes.js
index 7e0e8d844d..4197fd0ca1 100644
--- a/src/components/ha-attributes.js
+++ b/src/components/ha-attributes.js
@@ -1,8 +1,8 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import hassAttributeUtil from "../util/hass-attributes-util.js";
+import hassAttributeUtil from "../util/hass-attributes-util";
 
 class HaAttributes extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-card.js b/src/components/ha-card.js
index b7cb4fb2fc..785b48077b 100644
--- a/src/components/ha-card.js
+++ b/src/components/ha-card.js
@@ -1,6 +1,6 @@
-import "@polymer/paper-styles/element-styles/paper-material-styles.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaCard extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-cards.js b/src/components/ha-cards.js
index a81b40ff0f..a3ad11d92d 100644
--- a/src/components/ha-cards.js
+++ b/src/components/ha-cards.js
@@ -1,16 +1,16 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../cards/ha-badges-card.js";
-import "../cards/ha-card-chooser.js";
-import "./ha-demo-badge.js";
+import "../cards/ha-badges-card";
+import "../cards/ha-card-chooser";
+import "./ha-demo-badge";
 
-import computeStateDomain from "../common/entity/compute_state_domain.js";
-import splitByGroups from "../common/entity/split_by_groups.js";
-import getGroupEntities from "../common/entity/get_group_entities.js";
+import computeStateDomain from "../common/entity/compute_state_domain";
+import splitByGroups from "../common/entity/split_by_groups";
+import getGroupEntities from "../common/entity/get_group_entities";
 
 // mapping domain to size of the card.
 const DOMAINS_WITH_CARD = {
diff --git a/src/components/ha-climate-control.js b/src/components/ha-climate-control.js
index eb791852c4..e9515affb6 100644
--- a/src/components/ha-climate-control.js
+++ b/src/components/ha-climate-control.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-climate-state.js b/src/components/ha-climate-state.js
index 79462114d8..8cdc2e37d9 100644
--- a/src/components/ha-climate-state.js
+++ b/src/components/ha-climate-state.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index 1429afce33..fb363636e5 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 /**
  * Color-picker custom element
diff --git a/src/components/ha-combo-box.js b/src/components/ha-combo-box.js
index 29e3d0b202..51c75a0a99 100644
--- a/src/components/ha-combo-box.js
+++ b/src/components/ha-combo-box.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@vaadin/vaadin-combo-box/vaadin-combo-box-light.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 class HaComboBox extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/src/components/ha-cover-controls.js b/src/components/ha-cover-controls.js
index 5fdf73d781..d1f1c088a0 100644
--- a/src/components/ha-cover-controls.js
+++ b/src/components/ha-cover-controls.js
@@ -1,8 +1,8 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import CoverEntity from "../util/cover-model.js";
+import CoverEntity from "../util/cover-model";
 
 class HaCoverControls extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-cover-tilt-controls.js b/src/components/ha-cover-tilt-controls.js
index 610d2b2fbf..8791793fa1 100644
--- a/src/components/ha-cover-tilt-controls.js
+++ b/src/components/ha-cover-tilt-controls.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import CoverEntity from "../util/cover-model.js";
+import CoverEntity from "../util/cover-model";
 
 class HaCoverTiltControls extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-demo-badge.js b/src/components/ha-demo-badge.js
index f75210898d..76ab85f550 100644
--- a/src/components/ha-demo-badge.js
+++ b/src/components/ha-demo-badge.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-label-badge.js";
+import "./ha-label-badge";
 
 class HaDemoBadge extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-form.js b/src/components/ha-form.js
index a581babd44..71f4c0cdbe 100644
--- a/src/components/ha-form.js
+++ b/src/components/ha-form.js
@@ -1,14 +1,14 @@
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-paper-slider.js";
-import EventsMixin from "../mixins/events-mixin.js";
+import "./ha-paper-slider";
+import EventsMixin from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-icon.js b/src/components/ha-icon.js
index bdef41d4fb..29cb8b88b1 100644
--- a/src/components/ha-icon.js
+++ b/src/components/ha-icon.js
@@ -1,4 +1,4 @@
-import "@polymer/iron-icon/iron-icon.js";
+import "@polymer/iron-icon/iron-icon";
 
 const IronIconClass = customElements.get("iron-icon");
 
@@ -10,7 +10,7 @@ class HaIcon extends IronIconClass {
 
     if (!loaded && this._iconsetName === "mdi") {
       loaded = true;
-      import(/* webpackChunkName: "mdi-icons" */ "../resources/mdi-icons.js");
+      import(/* webpackChunkName: "mdi-icons" */ "../resources/mdi-icons");
     }
   }
 }
diff --git a/src/components/ha-iconset-svg.js b/src/components/ha-iconset-svg.js
index d2cedd78de..ae2b414a25 100644
--- a/src/components/ha-iconset-svg.js
+++ b/src/components/ha-iconset-svg.js
@@ -1,4 +1,4 @@
-import "@polymer/iron-iconset-svg/iron-iconset-svg.js";
+import "@polymer/iron-iconset-svg/iron-iconset-svg";
 
 const IronIconsetClass = customElements.get("iron-iconset-svg");
 
diff --git a/src/components/ha-label-badge.js b/src/components/ha-label-badge.js
index be672f0163..bad3c7dd5b 100644
--- a/src/components/ha-label-badge.js
+++ b/src/components/ha-label-badge.js
@@ -1,6 +1,6 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "./ha-icon.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "./ha-icon";
 
 class HaLabelBadge extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index d8b2691651..f91500a313 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -1,8 +1,8 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-paper-slider.js";
-import "./ha-icon.js";
+import "./ha-paper-slider";
+import "./ha-icon";
 
 class HaLabeledSlider extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-markdown.js b/src/components/ha-markdown.js
index a23ad01761..ed15dac150 100644
--- a/src/components/ha-markdown.js
+++ b/src/components/ha-markdown.js
@@ -1,5 +1,5 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import EventsMixin from "../mixins/events-mixin.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import EventsMixin from "../mixins/events-mixin";
 
 let loaded = null;
 
@@ -34,7 +34,7 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
     this._resize = () => this.fire("iron-resize");
 
     if (!loaded) {
-      loaded = import(/* webpackChunkName: "load_markdown" */ "../resources/load_markdown.js");
+      loaded = import(/* webpackChunkName: "load_markdown" */ "../resources/load_markdown");
     }
     loaded
       .then(
diff --git a/src/components/ha-menu-button.js b/src/components/ha-menu-button.js
index 9437eea702..2313e75197 100644
--- a/src/components/ha-menu-button.js
+++ b/src/components/ha-menu-button.js
@@ -1,8 +1,8 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-paper-slider.js b/src/components/ha-paper-slider.js
index fae25e6298..f7cad5fec2 100644
--- a/src/components/ha-paper-slider.js
+++ b/src/components/ha-paper-slider.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-slider/paper-slider.js";
+import "@polymer/paper-slider/paper-slider";
 
 /**
  * @polymer
diff --git a/src/components/ha-push-notifications-toggle.js b/src/components/ha-push-notifications-toggle.js
index 77cc969661..0974b5b82c 100644
--- a/src/components/ha-push-notifications-toggle.js
+++ b/src/components/ha-push-notifications-toggle.js
@@ -1,8 +1,8 @@
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 export const pushSupported =
   "serviceWorker" in navigator &&
diff --git a/src/components/ha-relative-time.js b/src/components/ha-relative-time.js
index caca4052b5..0d61285524 100644
--- a/src/components/ha-relative-time.js
+++ b/src/components/ha-relative-time.js
@@ -1,9 +1,9 @@
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import relativeTime from "../common/datetime/relative_time.js";
+import relativeTime from "../common/datetime/relative_time";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/ha-service-description.js b/src/components/ha-service-description.js
index ee769db586..dc0af4a04d 100644
--- a/src/components/ha-service-description.js
+++ b/src/components/ha-service-description.js
@@ -1,5 +1,5 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaServiceDescription extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-service-picker.js b/src/components/ha-service-picker.js
index e87eed9684..bb52246a3c 100644
--- a/src/components/ha-service-picker.js
+++ b/src/components/ha-service-picker.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-combo-box.js";
+import "./ha-combo-box";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/ha-sidebar.js b/src/components/ha-sidebar.js
index 0d63fba06b..a3d87db4c7 100644
--- a/src/components/ha-sidebar.js
+++ b/src/components/ha-sidebar.js
@@ -1,16 +1,16 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-icon-item.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "./ha-icon.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "./ha-icon";
 
-import "../util/hass-translation.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
-import isComponentLoaded from "../common/config/is_component_loaded.js";
+import "../util/hass-translation";
+import LocalizeMixin from "../mixins/localize-mixin";
+import isComponentLoaded from "../common/config/is_component_loaded";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/ha-start-voice-button.js b/src/components/ha-start-voice-button.js
index 193839f1c5..31e6427e00 100644
--- a/src/components/ha-start-voice-button.js
+++ b/src/components/ha-start-voice-button.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
-import isComponentLoaded from "../common/config/is_component_loaded.js";
+import isComponentLoaded from "../common/config/is_component_loaded";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-textarea.js b/src/components/ha-textarea.js
index 4de27c8abe..8146aa71e1 100644
--- a/src/components/ha-textarea.js
+++ b/src/components/ha-textarea.js
@@ -9,9 +9,9 @@ paper-textarea issue: https://github.com/PolymerElements/paper-input/issues/556
 WebKit issue: https://bugs.webkit.org/show_bug.cgi?id=174629
 */
 
-import "@polymer/paper-input/paper-textarea.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-input/paper-textarea";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaTextarea extends PolymerElement {
   static get template() {
diff --git a/src/components/ha-toast.js b/src/components/ha-toast.js
index 2371afb711..ba14c6a392 100644
--- a/src/components/ha-toast.js
+++ b/src/components/ha-toast.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-toast/paper-toast.js";
+import "@polymer/paper-toast/paper-toast";
 
 const PaperToast = customElements.get("paper-toast");
 
diff --git a/src/components/ha-vacuum-state.js b/src/components/ha-vacuum-state.js
index 0fb8faf46b..c6ad7e98a6 100644
--- a/src/components/ha-vacuum-state.js
+++ b/src/components/ha-vacuum-state.js
@@ -1,8 +1,8 @@
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 const STATES_INTERCEPTABLE = {
   cleaning: {
diff --git a/src/components/ha-water_heater-control.js b/src/components/ha-water_heater-control.js
index 3517a4aa5f..c65506ce5d 100644
--- a/src/components/ha-water_heater-control.js
+++ b/src/components/ha-water_heater-control.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/components/ha-water_heater-state.js b/src/components/ha-water_heater-state.js
index 9133b67da4..c116f5eaea 100644
--- a/src/components/ha-water_heater-state.js
+++ b/src/components/ha-water_heater-state.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/components/paper-time-input.js b/src/components/paper-time-input.js
index 30075398df..402f8807b6 100644
--- a/src/components/paper-time-input.js
+++ b/src/components/paper-time-input.js
@@ -16,12 +16,12 @@ Custom property | Description | Default
 `--paper-time-input-cotnainer` | Mixin applied to the inputs | `{}`
 `--paper-time-dropdown-input-cotnainer` | Mixin applied to the dropdown input | `{}`
 */
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class PaperTimeInput extends PolymerElement {
   static get template() {
diff --git a/src/components/state-history-chart-line.js b/src/components/state-history-chart-line.js
index 5981b68c9b..3e36e9a9a4 100644
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -1,11 +1,11 @@
-import "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./entity/ha-chart-base.js";
+import "./entity/ha-chart-base";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
-import formatDateTime from "../common/datetime/format_date_time.js";
+import LocalizeMixin from "../mixins/localize-mixin";
+import formatDateTime from "../common/datetime/format_date_time";
 
 class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
   static get template() {
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index 7aae50b7f8..45ff9646cc 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -1,10 +1,10 @@
-import "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
-import "./entity/ha-chart-base.js";
+import "./entity/ha-chart-base";
 
 import formatDateTime from "../common/datetime/format_date_time";
 
diff --git a/src/components/state-history-charts.js b/src/components/state-history-charts.js
index 2701eee073..fcb014de44 100644
--- a/src/components/state-history-charts.js
+++ b/src/components/state-history-charts.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./state-history-chart-line.js";
-import "./state-history-chart-timeline.js";
+import "./state-history-chart-line";
+import "./state-history-chart-timeline";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
   static get template() {
diff --git a/src/data/ha-state-history-data.js b/src/data/ha-state-history-data.js
index f366b1039d..bd97a759b2 100644
--- a/src/data/ha-state-history-data.js
+++ b/src/data/ha-state-history-data.js
@@ -1,8 +1,8 @@
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 import { computeHistory, fetchDate } from "./history";
 import { getRecent, getRecentWithCache } from "./cached-history";
diff --git a/src/data/history.ts b/src/data/history.ts
index de28f78cff..7699094454 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -1,9 +1,9 @@
-import computeStateName from "../common/entity/compute_state_name.js";
-import computeStateDomain from "../common/entity/compute_state_domain.js";
-import computeStateDisplay from "../common/entity/compute_state_display.js";
+import computeStateName from "../common/entity/compute_state_name";
+import computeStateDomain from "../common/entity/compute_state_domain";
+import computeStateDisplay from "../common/entity/compute_state_display";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LocalizeFunc } from "../mixins/localize-base-mixin.js";
-import { HomeAssistant } from "../types.js";
+import { LocalizeFunc } from "../mixins/localize-base-mixin";
+import { HomeAssistant } from "../types";
 
 const DOMAINS_USE_LAST_UPDATED = ["climate", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
diff --git a/src/dialogs/ha-more-info-dialog.js b/src/dialogs/ha-more-info-dialog.js
index b4000f4960..c8d7efdcbf 100644
--- a/src/dialogs/ha-more-info-dialog.js
+++ b/src/dialogs/ha-more-info-dialog.js
@@ -1,17 +1,17 @@
-import "@polymer/paper-dialog-behavior/paper-dialog-shared-styles.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-dialog-behavior/paper-dialog-shared-styles";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../resources/ha-style.js";
+import "../resources/ha-style";
 
-import "./more-info/more-info-controls.js";
-import "./more-info/more-info-settings.js";
+import "./more-info/more-info-controls";
+import "./more-info/more-info-settings";
 
 import computeStateDomain from "../common/entity/compute_state_domain";
-import isComponentLoaded from "../common/config/is_component_loaded.js";
+import isComponentLoaded from "../common/config/is_component_loaded";
 
-import DialogMixin from "../mixins/dialog-mixin.js";
+import DialogMixin from "../mixins/dialog-mixin";
 
 /*
  * @appliesMixin DialogMixin
diff --git a/src/dialogs/ha-store-auth-card.js b/src/dialogs/ha-store-auth-card.js
index ebeb73ac88..c1f6a2bd26 100644
--- a/src/dialogs/ha-store-auth-card.js
+++ b/src/dialogs/ha-store-auth-card.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import { enableWrite } from "../common/auth/token_storage.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import { enableWrite } from "../common/auth/token_storage";
+import LocalizeMixin from "../mixins/localize-mixin";
 
-import "../resources/ha-style.js";
+import "../resources/ha-style";
 
 class HaStoreAuth extends LocalizeMixin(PolymerElement) {
   static get template() {
diff --git a/src/dialogs/ha-voice-command-dialog.js b/src/dialogs/ha-voice-command-dialog.js
index bab4a97a2a..abc5029cca 100644
--- a/src/dialogs/ha-voice-command-dialog.js
+++ b/src/dialogs/ha-voice-command-dialog.js
@@ -1,10 +1,10 @@
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-dialog-behavior/paper-dialog-shared-styles.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-dialog-behavior/paper-dialog-shared-styles";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import DialogMixin from "../mixins/dialog-mixin.js";
+import DialogMixin from "../mixins/dialog-mixin";
 
 /*
  * @appliesMixin DialogMixin
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
index dd27860f11..5d92024fd0 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 class MoreInfoAlarmControlPanel extends LocalizeMixin(
   EventsMixin(PolymerElement)
diff --git a/src/dialogs/more-info/controls/more-info-automation.js b/src/dialogs/more-info/controls/more-info-automation.js
index f225bf3376..311ba9a317 100644
--- a/src/dialogs/more-info/controls/more-info-automation.js
+++ b/src/dialogs/more-info/controls/more-info-automation.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-relative-time.js";
+import "../../../components/ha-relative-time";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-camera.js b/src/dialogs/more-info/controls/more-info-camera.js
index 607c7b95c0..d82ac7034c 100644
--- a/src/dialogs/more-info/controls/more-info-camera.js
+++ b/src/dialogs/more-info/controls/more-info-camera.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import emptyImageBase64 from "../../../common/empty_image_base64.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
+import computeStateName from "../../../common/entity/compute_state_name";
+import emptyImageBase64 from "../../../common/empty_image_base64";
+import EventsMixin from "../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/dialogs/more-info/controls/more-info-climate.js b/src/dialogs/more-info/controls/more-info-climate.js
index eaa3913056..bd769921b5 100644
--- a/src/dialogs/more-info/controls/more-info-climate.js
+++ b/src/dialogs/more-info/controls/more-info-climate.js
@@ -1,21 +1,21 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-climate-control.js";
-import "../../../components/ha-paper-slider.js";
+import "../../../components/ha-climate-control";
+import "../../../components/ha-paper-slider";
 
-import attributeClassNames from "../../../common/entity/attribute_class_names.js";
+import attributeClassNames from "../../../common/entity/attribute_class_names";
 import featureClassNames from "../../../common/entity/feature_class_names";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js
index 03a6b465e4..c3dcdad2d1 100644
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -1,12 +1,12 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/iron-input/iron-input.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/iron-input/iron-input";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-markdown.js";
+import "../../../components/ha-markdown";
 
 class MoreInfoConfigurator extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-content.js b/src/dialogs/more-info/controls/more-info-content.js
index f2f1473fe1..2d4f20a7c1 100644
--- a/src/dialogs/more-info/controls/more-info-content.js
+++ b/src/dialogs/more-info/controls/more-info-content.js
@@ -1,28 +1,28 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./more-info-alarm_control_panel.js";
-import "./more-info-automation.js";
-import "./more-info-camera.js";
-import "./more-info-climate.js";
-import "./more-info-configurator.js";
-import "./more-info-cover.js";
-import "./more-info-default.js";
-import "./more-info-fan.js";
-import "./more-info-group.js";
-import "./more-info-history_graph.js";
-import "./more-info-input_datetime.js";
-import "./more-info-light.js";
-import "./more-info-lock.js";
-import "./more-info-media_player.js";
-import "./more-info-script.js";
-import "./more-info-sun.js";
-import "./more-info-updater.js";
-import "./more-info-vacuum.js";
-import "./more-info-water_heater.js";
-import "./more-info-weather.js";
+import "./more-info-alarm_control_panel";
+import "./more-info-automation";
+import "./more-info-camera";
+import "./more-info-climate";
+import "./more-info-configurator";
+import "./more-info-cover";
+import "./more-info-default";
+import "./more-info-fan";
+import "./more-info-group";
+import "./more-info-history_graph";
+import "./more-info-input_datetime";
+import "./more-info-light";
+import "./more-info-lock";
+import "./more-info-media_player";
+import "./more-info-script";
+import "./more-info-sun";
+import "./more-info-updater";
+import "./more-info-vacuum";
+import "./more-info-water_heater";
+import "./more-info-weather";
 
-import stateMoreInfoType from "../../../common/entity/state_more_info_type.js";
-import dynamicContentUpdater from "../../../common/dom/dynamic_content_updater.js";
+import stateMoreInfoType from "../../../common/entity/state_more_info_type";
+import dynamicContentUpdater from "../../../common/dom/dynamic_content_updater";
 
 class MoreInfoContent extends PolymerElement {
   static get properties() {
diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js
index 4dcdae6773..fcec33fd45 100644
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@@ -1,16 +1,16 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-cover-tilt-controls.js";
-import "../../../components/ha-labeled-slider.js";
-import CoverEntity from "../../../util/cover-model.js";
+import "../../../components/ha-cover-tilt-controls";
+import "../../../components/ha-labeled-slider";
+import CoverEntity from "../../../util/cover-model";
 
 import attributeClassNames from "../../../common/entity/attribute_class_names";
 import featureClassNames from "../../../common/entity/feature_class_names";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 const FEATURE_CLASS_NAMES = {
   128: "has-set_tilt_position",
diff --git a/src/dialogs/more-info/controls/more-info-default.js b/src/dialogs/more-info/controls/more-info-default.js
index a2e97d61d8..f9062ecef4 100644
--- a/src/dialogs/more-info/controls/more-info-default.js
+++ b/src/dialogs/more-info/controls/more-info-default.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-attributes.js";
+import "../../../components/ha-attributes";
 
 class MoreInfoDefault extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js
index 0d7bbfc31d..f1a95a61bc 100644
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -1,17 +1,17 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-attributes.js";
+import "../../../components/ha-attributes";
 
 import attributeClassNames from "../../../common/entity/attribute_class_names";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/dialogs/more-info/controls/more-info-group.js b/src/dialogs/more-info/controls/more-info-group.js
index 0c93ab21f7..d551efc6b2 100644
--- a/src/dialogs/more-info/controls/more-info-group.js
+++ b/src/dialogs/more-info/controls/more-info-group.js
@@ -1,11 +1,11 @@
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../state-summary/state-card-content.js";
+import "../../../state-summary/state-card-content";
 
 import computeStateDomain from "../../../common/entity/compute_state_domain";
-import dynamicContentUpdater from "../../../common/dom/dynamic_content_updater.js";
+import dynamicContentUpdater from "../../../common/dom/dynamic_content_updater";
 
 class MoreInfoGroup extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-history_graph.js b/src/dialogs/more-info/controls/more-info-history_graph.js
index 1680228162..713b17f573 100644
--- a/src/dialogs/more-info/controls/more-info-history_graph.js
+++ b/src/dialogs/more-info/controls/more-info-history_graph.js
@@ -1,8 +1,8 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../cards/ha-history_graph-card.js";
-import "../../../components/ha-attributes.js";
+import "../../../cards/ha-history_graph-card";
+import "../../../components/ha-attributes";
 
 class MoreInfoHistoryGraph extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.js b/src/dialogs/more-info/controls/more-info-input_datetime.js
index 0cc236a871..aa112ef38b 100644
--- a/src/dialogs/more-info/controls/more-info-input_datetime.js
+++ b/src/dialogs/more-info/controls/more-info-input_datetime.js
@@ -1,14 +1,14 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/polymer/polymer-legacy.js";
-import "@vaadin/vaadin-date-picker/vaadin-date-picker.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/polymer/polymer-legacy";
+import "@vaadin/vaadin-date-picker/vaadin-date-picker";
 
-import "../../../components/ha-relative-time.js";
-import "../../../components/paper-time-input.js";
+import "../../../components/ha-relative-time";
+import "../../../components/paper-time-input";
 
-import attributeClassNames from "../../../common/entity/attribute_class_names.js";
+import attributeClassNames from "../../../common/entity/attribute_class_names";
 
 class DatetimeInput extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js
index 7aff5eb1e7..403db8efe4 100644
--- a/src/dialogs/more-info/controls/more-info-light.js
+++ b/src/dialogs/more-info/controls/more-info-light.js
@@ -1,17 +1,17 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-attributes.js";
-import "../../../components/ha-color-picker.js";
-import "../../../components/ha-labeled-slider.js";
+import "../../../components/ha-attributes";
+import "../../../components/ha-color-picker";
+import "../../../components/ha-labeled-slider";
 
 import featureClassNames from "../../../common/entity/feature_class_names";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 const FEATURE_CLASS_NAMES = {
   1: "has-brightness",
diff --git a/src/dialogs/more-info/controls/more-info-lock.js b/src/dialogs/more-info/controls/more-info-lock.js
index 5c5a232790..c4f8adda68 100644
--- a/src/dialogs/more-info/controls/more-info-lock.js
+++ b/src/dialogs/more-info/controls/more-info-lock.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-attributes.js";
+import "../../../components/ha-attributes";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 7c23250852..a7164ee92f 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -1,19 +1,19 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-paper-slider.js";
-import HassMediaPlayerEntity from "../../../util/hass-media-player-model.js";
+import "../../../components/ha-paper-slider";
+import HassMediaPlayerEntity from "../../../util/hass-media-player-model";
 
 import attributeClassNames from "../../../common/entity/attribute_class_names";
-import isComponentLoaded from "../../../common/config/is_component_loaded.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import isComponentLoaded from "../../../common/config/is_component_loaded";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/dialogs/more-info/controls/more-info-script.js b/src/dialogs/more-info/controls/more-info-script.js
index af6f3f1115..93a7e7552d 100644
--- a/src/dialogs/more-info/controls/more-info-script.js
+++ b/src/dialogs/more-info/controls/more-info-script.js
@@ -1,6 +1,6 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class MoreInfoScript extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-sun.js b/src/dialogs/more-info/controls/more-info-sun.js
index 46a8d6cab5..3104fdf188 100644
--- a/src/dialogs/more-info/controls/more-info-sun.js
+++ b/src/dialogs/more-info/controls/more-info-sun.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-relative-time.js";
+import "../../../components/ha-relative-time";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import formatTime from "../../../common/datetime/format_time.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import formatTime from "../../../common/datetime/format_time";
 
 class MoreInfoSun extends LocalizeMixin(PolymerElement) {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-updater.js b/src/dialogs/more-info/controls/more-info-updater.js
index c6ab550025..7b687fa823 100644
--- a/src/dialogs/more-info/controls/more-info-updater.js
+++ b/src/dialogs/more-info/controls/more-info-updater.js
@@ -1,5 +1,5 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class MoreInfoUpdater extends PolymerElement {
   static get template() {
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.js b/src/dialogs/more-info/controls/more-info-vacuum.js
index bdf1704abb..293180b84d 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.js
+++ b/src/dialogs/more-info/controls/more-info-vacuum.js
@@ -1,13 +1,13 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-attributes.js";
+import "../../../components/ha-attributes";
 
 class MoreInfoVacuum extends PolymerElement {
   static get template() {
@@ -54,7 +54,7 @@ class MoreInfoVacuum extends PolymerElement {
             <paper-icon-button icon="hass:play-pause" on-click="onPlayPause" title="Pause"></paper-icon-button>
           </div>
         </template>
-        
+
         <div hidden$="[[!supportsStop(stateObj)]]">
           <paper-icon-button icon="hass:stop" on-click="onStop" title="Stop"></paper-icon-button>
         </div>
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js
index 757f8791b2..49a15e24fd 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -1,20 +1,20 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-water_heater-control.js";
-import "../../../components/ha-paper-slider.js";
+import "../../../components/ha-water_heater-control";
+import "../../../components/ha-paper-slider";
 
 import featureClassNames from "../../../common/entity/feature_class_names";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/dialogs/more-info/controls/more-info-weather.js b/src/dialogs/more-info/controls/more-info-weather.js
index eb787675c2..118c2ca234 100644
--- a/src/dialogs/more-info/controls/more-info-weather.js
+++ b/src/dialogs/more-info/controls/more-info-weather.js
@@ -1,8 +1,8 @@
-import "@polymer/iron-icon/iron-icon.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/dialogs/more-info/more-info-controls.js b/src/dialogs/more-info/more-info-controls.js
index a23cf38be8..dcfb91414e 100644
--- a/src/dialogs/more-info/more-info-controls.js
+++ b/src/dialogs/more-info/more-info-controls.js
@@ -1,21 +1,21 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../components/state-history-charts.js";
+import "../../components/state-history-charts";
 import "../../data/ha-state-history-data";
-import "../../resources/ha-style.js";
-import "../../state-summary/state-card-content.js";
+import "../../resources/ha-style";
+import "../../state-summary/state-card-content";
 
-import "./controls/more-info-content.js";
+import "./controls/more-info-content";
 
-import computeStateName from "../../common/entity/compute_state_name.js";
-import computeStateDomain from "../../common/entity/compute_state_domain.js";
-import isComponentLoaded from "../../common/config/is_component_loaded.js";
-import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import computeStateName from "../../common/entity/compute_state_name";
+import computeStateDomain from "../../common/entity/compute_state_domain";
+import isComponentLoaded from "../../common/config/is_component_loaded";
+import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
+import EventsMixin from "../../mixins/events-mixin";
 
 const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
 /*
diff --git a/src/dialogs/more-info/more-info-settings.js b/src/dialogs/more-info/more-info-settings.js
index 11a36f03f8..484b76eb7c 100644
--- a/src/dialogs/more-info/more-info-settings.js
+++ b/src/dialogs/more-info/more-info-settings.js
@@ -1,16 +1,16 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
-import computeStateName from "../../common/entity/compute_state_name.js";
-import computeDomain from "../../common/entity/compute_domain.js";
-import isComponentLoaded from "../../common/config/is_component_loaded.js";
+import computeStateName from "../../common/entity/compute_state_name";
+import computeDomain from "../../common/entity/compute_domain";
+import isComponentLoaded from "../../common/config/is_component_loaded";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/entrypoints/app.js b/src/entrypoints/app.js
index 5f5226349c..12dc9c588a 100644
--- a/src/entrypoints/app.js
+++ b/src/entrypoints/app.js
@@ -1,25 +1,25 @@
 // Load polyfill first so HTML imports start resolving
 /* eslint-disable import/first */
-import "../resources/html-import/polyfill.js";
-import "@polymer/app-route/app-location.js";
-import "@polymer/app-route/app-route.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-styles/typography.js";
-import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings.js";
+import "../resources/html-import/polyfill";
+import "@polymer/app-route/app-location";
+import "@polymer/app-route/app-route";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-styles/typography";
+import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
 
 import "../util/legacy-support";
-import "../resources/roboto.js";
+import "../resources/roboto";
 
 // For MDI icons. Needs to be part of main bundle or else it won't hook
 // properly into iron-meta, which is used to transfer iconsets to iron-icon.
-import "../components/ha-iconset-svg.js";
+import "../components/ha-iconset-svg";
 
-import "../layouts/app/home-assistant.js";
+import "../layouts/app/home-assistant";
 
 /* polyfill for paper-dropdown */
 setTimeout(
   () =>
-    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min.js"),
+    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"),
   2000
 );
 
diff --git a/src/entrypoints/authorize.js b/src/entrypoints/authorize.js
index a4b7fb67d3..c6147479e8 100644
--- a/src/entrypoints/authorize.js
+++ b/src/entrypoints/authorize.js
@@ -1,15 +1,15 @@
-import "@polymer/polymer/lib/elements/dom-if.js";
-import "@polymer/polymer/lib/elements/dom-repeat.js";
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
 
-import "../components/ha-iconset-svg.js";
-import "../resources/ha-style.js";
-import "../resources/roboto.js";
+import "../components/ha-iconset-svg";
+import "../resources/ha-style";
+import "../resources/roboto";
 
-import "../auth/ha-authorize.js";
+import "../auth/ha-authorize";
 
 /* polyfill for paper-dropdown */
 setTimeout(
   () =>
-    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min.js"),
+    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"),
   2000
 );
diff --git a/src/entrypoints/core.js b/src/entrypoints/core.js
index 2890c0ef5f..560fb8c96c 100644
--- a/src/entrypoints/core.js
+++ b/src/entrypoints/core.js
@@ -7,17 +7,17 @@ import {
   ERR_INVALID_AUTH,
 } from "home-assistant-js-websocket";
 
-import { loadTokens, saveTokens } from "../common/auth/token_storage.js";
-import { subscribePanels } from "../data/ws-panels.js";
-import { subscribeThemes } from "../data/ws-themes.js";
-import { subscribeUser } from "../data/ws-user.js";
+import { loadTokens, saveTokens } from "../common/auth/token_storage";
+import { subscribePanels } from "../data/ws-panels";
+import { subscribeThemes } from "../data/ws-themes";
+import { subscribeUser } from "../data/ws-user";
 
 const hassUrl = `${location.protocol}//${location.host}`;
 const isExternal = location.search.includes("external_auth=1");
 
 const authProm = isExternal
   ? () =>
-      import("../common/auth/external_auth.js").then(
+      import("../common/auth/external_auth").then(
         (mod) => new mod.default(hassUrl)
       )
   : () =>
diff --git a/src/entrypoints/custom-panel.js b/src/entrypoints/custom-panel.js
index 2a6fe2ccbb..6cb6495e51 100644
--- a/src/entrypoints/custom-panel.js
+++ b/src/entrypoints/custom-panel.js
@@ -1,7 +1,7 @@
-import { loadJS } from "../common/dom/load_resource.js";
-import loadCustomPanel from "../util/custom-panel/load-custom-panel.js";
-import createCustomPanelElement from "../util/custom-panel/create-custom-panel-element.js";
-import setCustomPanelProperties from "../util/custom-panel/set-custom-panel-properties.js";
+import { loadJS } from "../common/dom/load_resource";
+import loadCustomPanel from "../util/custom-panel/load-custom-panel";
+import createCustomPanelElement from "../util/custom-panel/create-custom-panel-element";
+import setCustomPanelProperties from "../util/custom-panel/set-custom-panel-properties";
 
 const webComponentsSupported =
   "customElements" in window &&
@@ -14,7 +14,7 @@ window.loadES5Adapter = () => {
   if (!es5Loaded) {
     es5Loaded = Promise.all([
       loadJS(`${__STATIC_PATH__}custom-elements-es5-adapter.js`).catch(),
-      import(/* webpackChunkName: "compat" */ "./compatibility.js"),
+      import(/* webpackChunkName: "compat" */ "./compatibility"),
     ]);
   }
   return es5Loaded;
diff --git a/src/entrypoints/hass-icons.js b/src/entrypoints/hass-icons.js
index ee033f3152..dcb7c48fc8 100644
--- a/src/entrypoints/hass-icons.js
+++ b/src/entrypoints/hass-icons.js
@@ -1 +1 @@
-import "../resources/hass-icons.js";
+import "../resources/hass-icons";
diff --git a/src/entrypoints/onboarding.js b/src/entrypoints/onboarding.js
index 256b61a7c8..ab286de092 100644
--- a/src/entrypoints/onboarding.js
+++ b/src/entrypoints/onboarding.js
@@ -1,3 +1,3 @@
-import "../components/ha-iconset-svg.js";
-import "../resources/roboto.js";
-import "../onboarding/ha-onboarding.js";
+import "../components/ha-iconset-svg";
+import "../resources/roboto";
+import "../onboarding/ha-onboarding";
diff --git a/src/layouts/app/auth-mixin.js b/src/layouts/app/auth-mixin.js
index 41452068f6..b913bac7ea 100644
--- a/src/layouts/app/auth-mixin.js
+++ b/src/layouts/app/auth-mixin.js
@@ -1,8 +1,8 @@
-import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
+import { afterNextRender } from "@polymer/polymer/lib/utils/render-status";
 import { getUser } from "home-assistant-js-websocket";
-import { clearState } from "../../util/ha-pref-storage.js";
-import { askWrite } from "../../common/auth/token_storage.js";
-import { subscribeUser } from "../../data/ws-user.js";
+import { clearState } from "../../util/ha-pref-storage";
+import { askWrite } from "../../common/auth/token_storage";
+import { subscribeUser } from "../../data/ws-user";
 
 export default (superClass) =>
   class extends superClass {
@@ -24,7 +24,7 @@ export default (superClass) =>
           const el = document.createElement("ha-store-auth-card");
           this.shadowRoot.appendChild(el);
           this.provideHass(el);
-          import(/* webpackChunkName: "ha-store-auth-card" */ "../../dialogs/ha-store-auth-card.js");
+          import(/* webpackChunkName: "ha-store-auth-card" */ "../../dialogs/ha-store-auth-card");
         }
       });
     }
diff --git a/src/layouts/app/connection-mixin.js b/src/layouts/app/connection-mixin.js
index e12b19bc33..222d1b4ea2 100644
--- a/src/layouts/app/connection-mixin.js
+++ b/src/layouts/app/connection-mixin.js
@@ -8,14 +8,14 @@ import {
 
 import translationMetadata from "../../../build-translations/translationMetadata.json";
 
-import LocalizeMixin from "../../mixins/localize-mixin.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import LocalizeMixin from "../../mixins/localize-mixin";
+import EventsMixin from "../../mixins/events-mixin";
 
-import { getState } from "../../util/ha-pref-storage.js";
-import { getActiveTranslation } from "../../util/hass-translation.js";
-import { fetchWithAuth } from "../../util/fetch-with-auth.js";
-import hassCallApi from "../../util/hass-call-api.js";
-import computeStateName from "../../common/entity/compute_state_name.js";
+import { getState } from "../../util/ha-pref-storage";
+import { getActiveTranslation } from "../../util/hass-translation";
+import { fetchWithAuth } from "../../util/fetch-with-auth";
+import hassCallApi from "../../util/hass-call-api";
+import computeStateName from "../../common/entity/compute_state_name";
 import { subscribePanels } from "../../data/ws-panels";
 
 export default (superClass) =>
diff --git a/src/layouts/app/disconnect-toast-mixin.js b/src/layouts/app/disconnect-toast-mixin.js
index 0e0b5aaf00..42f160592e 100644
--- a/src/layouts/app/disconnect-toast-mixin.js
+++ b/src/layouts/app/disconnect-toast-mixin.js
@@ -1,11 +1,11 @@
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 export default (superClass) =>
   class extends LocalizeMixin(superClass) {
     hassConnected() {
       super.hassConnected();
       // Need to load in advance because when disconnected, can't dynamically load code.
-      import(/* webpackChunkName: "ha-toast" */ "../../components/ha-toast.js");
+      import(/* webpackChunkName: "ha-toast" */ "../../components/ha-toast");
     }
 
     hassReconnected() {
diff --git a/src/layouts/app/home-assistant.js b/src/layouts/app/home-assistant.js
index e3818099e3..bf1a3e2677 100644
--- a/src/layouts/app/home-assistant.js
+++ b/src/layouts/app/home-assistant.js
@@ -1,25 +1,25 @@
-import "@polymer/app-route/app-location.js";
-import "@polymer/app-route/app-route.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
+import "@polymer/app-route/app-location";
+import "@polymer/app-route/app-route";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { afterNextRender } from "@polymer/polymer/lib/utils/render-status";
 
-import "../home-assistant-main.js";
-import "../ha-init-page.js";
-import "../../resources/ha-style.js";
-import registerServiceWorker from "../../util/register-service-worker.js";
+import "../home-assistant-main";
+import "../ha-init-page";
+import "../../resources/ha-style";
+import registerServiceWorker from "../../util/register-service-worker";
 
-import HassBaseMixin from "./hass-base-mixin.js";
-import AuthMixin from "./auth-mixin.js";
-import TranslationsMixin from "./translations-mixin.js";
-import ThemesMixin from "./themes-mixin.js";
-import MoreInfoMixin from "./more-info-mixin.js";
-import SidebarMixin from "./sidebar-mixin.js";
-import DialogManagerMixin from "./dialog-manager-mixin.js";
-import ConnectionMixin from "./connection-mixin.js";
-import NotificationMixin from "./notification-mixin.js";
-import DisconnectToastMixin from "./disconnect-toast-mixin.js";
+import HassBaseMixin from "./hass-base-mixin";
+import AuthMixin from "./auth-mixin";
+import TranslationsMixin from "./translations-mixin";
+import ThemesMixin from "./themes-mixin";
+import MoreInfoMixin from "./more-info-mixin";
+import SidebarMixin from "./sidebar-mixin";
+import DialogManagerMixin from "./dialog-manager-mixin";
+import ConnectionMixin from "./connection-mixin";
+import NotificationMixin from "./notification-mixin";
+import DisconnectToastMixin from "./disconnect-toast-mixin";
 
 const ext = (baseClass, mixins) =>
   mixins.reduceRight((base, mixin) => mixin(base), baseClass);
diff --git a/src/layouts/app/more-info-mixin.js b/src/layouts/app/more-info-mixin.js
index 1a373027e0..a15ce2f0e9 100644
--- a/src/layouts/app/more-info-mixin.js
+++ b/src/layouts/app/more-info-mixin.js
@@ -1,4 +1,4 @@
-import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
+import { afterNextRender } from "@polymer/polymer/lib/utils/render-status";
 
 export default (superClass) =>
   class extends superClass {
@@ -8,7 +8,7 @@ export default (superClass) =>
 
       // Load it once we are having the initial rendering done.
       afterNextRender(null, () =>
-        import(/* webpackChunkName: "more-info-dialog" */ "../../dialogs/ha-more-info-dialog.js")
+        import(/* webpackChunkName: "more-info-dialog" */ "../../dialogs/ha-more-info-dialog")
       );
     }
 
diff --git a/src/layouts/app/notification-mixin.js b/src/layouts/app/notification-mixin.js
index cf4492e69c..c1fba46902 100644
--- a/src/layouts/app/notification-mixin.js
+++ b/src/layouts/app/notification-mixin.js
@@ -6,7 +6,7 @@ export default (superClass) =>
         dialogShowEvent: "hass-notification",
         dialogTag: "notification-manager",
         dialogImport: () =>
-          import(/* webpackChunkName: "notification-manager" */ "../../managers/notification-manager.js"),
+          import(/* webpackChunkName: "notification-manager" */ "../../managers/notification-manager"),
       });
     }
   };
diff --git a/src/layouts/app/sidebar-mixin.js b/src/layouts/app/sidebar-mixin.js
index 304a4433c4..c0ff17804f 100644
--- a/src/layouts/app/sidebar-mixin.js
+++ b/src/layouts/app/sidebar-mixin.js
@@ -1,4 +1,4 @@
-import { storeState } from "../../util/ha-pref-storage.js";
+import { storeState } from "../../util/ha-pref-storage";
 
 export default (superClass) =>
   class extends superClass {
diff --git a/src/layouts/app/themes-mixin.js b/src/layouts/app/themes-mixin.js
index ff8f33b385..7698dc0746 100644
--- a/src/layouts/app/themes-mixin.js
+++ b/src/layouts/app/themes-mixin.js
@@ -1,6 +1,6 @@
-import applyThemesOnElement from "../../common/dom/apply_themes_on_element.js";
-import { storeState } from "../../util/ha-pref-storage.js";
-import { subscribeThemes } from "../../data/ws-themes.js";
+import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
+import { storeState } from "../../util/ha-pref-storage";
+import { subscribeThemes } from "../../data/ws-themes";
 
 export default (superClass) =>
   class extends superClass {
diff --git a/src/layouts/app/translations-mixin.js b/src/layouts/app/translations-mixin.js
index a623aab069..4414f2a03d 100644
--- a/src/layouts/app/translations-mixin.js
+++ b/src/layouts/app/translations-mixin.js
@@ -1,7 +1,7 @@
 import translationMetadata from "../../../build-translations/translationMetadata.json";
-import { getTranslation } from "../../util/hass-translation.js";
+import { getTranslation } from "../../util/hass-translation";
 
-import { storeState } from "../../util/ha-pref-storage.js";
+import { storeState } from "../../util/ha-pref-storage";
 
 /*
  * superClass needs to contain `this.hass` and `this._updateHass`.
diff --git a/src/layouts/ha-app-layout.js b/src/layouts/ha-app-layout.js
index 712a08be56..3b2e0a12aa 100644
--- a/src/layouts/ha-app-layout.js
+++ b/src/layouts/ha-app-layout.js
@@ -17,9 +17,9 @@ transform: translate(0) is added.
   from HTML and may be out of place here. Review them and
   then delete this comment!
 */
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import "@polymer/polymer/polymer-element";
 
 class HaAppLayout extends customElements.get("app-header-layout") {
   static get template() {
diff --git a/src/layouts/ha-init-page.js b/src/layouts/ha-init-page.js
index c4d605bee2..893af7b40c 100644
--- a/src/layouts/ha-init-page.js
+++ b/src/layouts/ha-init-page.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
-import EventsMixin from "../mixins/events-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
+import EventsMixin from "../mixins/events-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/layouts/hass-error-screen.js b/src/layouts/hass-error-screen.js
index e6177a9622..52e5ff97d3 100644
--- a/src/layouts/hass-error-screen.js
+++ b/src/layouts/hass-error-screen.js
@@ -1,8 +1,8 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HassErrorScreen extends PolymerElement {
   static get template() {
diff --git a/src/layouts/hass-loading-screen.js b/src/layouts/hass-loading-screen.js
index d49f8e6153..fabd6b74db 100644
--- a/src/layouts/hass-loading-screen.js
+++ b/src/layouts/hass-loading-screen.js
@@ -1,10 +1,10 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-menu-button.js";
+import "../components/ha-menu-button";
 
 class HassLoadingScreen extends PolymerElement {
   static get template() {
diff --git a/src/layouts/hass-subpage.js b/src/layouts/hass-subpage.js
index fca7ad8254..f36b57271c 100644
--- a/src/layouts/hass-subpage.js
+++ b/src/layouts/hass-subpage.js
@@ -1,9 +1,9 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HassSubpage extends PolymerElement {
   static get template() {
diff --git a/src/layouts/home-assistant-main.js b/src/layouts/home-assistant-main.js
index c15c58ec6e..aed68ad85c 100644
--- a/src/layouts/home-assistant-main.js
+++ b/src/layouts/home-assistant-main.js
@@ -1,20 +1,20 @@
-import "@polymer/app-layout/app-drawer-layout/app-drawer-layout.js";
-import "@polymer/app-layout/app-drawer/app-drawer.js";
-import "@polymer/app-route/app-route.js";
-import "@polymer/iron-media-query/iron-media-query.js";
-import "@polymer/iron-pages/iron-pages.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
+import "@polymer/app-layout/app-drawer/app-drawer";
+import "@polymer/app-route/app-route";
+import "@polymer/iron-media-query/iron-media-query";
+import "@polymer/iron-pages/iron-pages";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../util/ha-url-sync.js";
+import "../util/ha-url-sync";
 
-import "./partial-cards.js";
-import "./partial-panel-resolver.js";
-import EventsMixin from "../mixins/events-mixin.js";
-import NavigateMixin from "../mixins/navigate-mixin.js";
+import "./partial-cards";
+import "./partial-panel-resolver";
+import EventsMixin from "../mixins/events-mixin";
+import NavigateMixin from "../mixins/navigate-mixin";
 
-import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar.js");
-import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog.js");
+import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
+import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog");
 
 const NON_SWIPABLE_PANELS = ["kiosk", "map"];
 
diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index c9c68a1c40..bf0c6b8071 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -1,28 +1,28 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-scroll-effects/effects/waterfall.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/app-route/app-route.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/iron-pages/iron-pages.js";
-import "@polymer/paper-tabs/paper-tab.js";
-import "@polymer/paper-tabs/paper-tabs.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/app-route/app-route";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/iron-pages/iron-pages";
+import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/ha-cards.js";
-import "../components/ha-icon.js";
-import "../components/ha-menu-button.js";
-import "../components/ha-start-voice-button.js";
+import "../components/ha-cards";
+import "../components/ha-icon";
+import "../components/ha-menu-button";
+import "../components/ha-start-voice-button";
 
-import "./ha-app-layout.js";
+import "./ha-app-layout";
 
-import extractViews from "../common/entity/extract_views.js";
-import getViewEntities from "../common/entity/get_view_entities.js";
-import computeStateName from "../common/entity/compute_state_name.js";
-import computeStateDomain from "../common/entity/compute_state_domain.js";
-import computeLocationName from "../common/config/location_name.js";
-import NavigateMixin from "../mixins/navigate-mixin.js";
-import EventsMixin from "../mixins/events-mixin.js";
+import extractViews from "../common/entity/extract_views";
+import getViewEntities from "../common/entity/get_view_entities";
+import computeStateName from "../common/entity/compute_state_name";
+import computeStateDomain from "../common/entity/compute_state_domain";
+import computeLocationName from "../common/config/location_name";
+import NavigateMixin from "../mixins/navigate-mixin";
+import EventsMixin from "../mixins/events-mixin";
 
 const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
 const ALWAYS_SHOW_DOMAIN = ["persistent_notification", "configurator"];
diff --git a/src/layouts/partial-panel-resolver.js b/src/layouts/partial-panel-resolver.js
index 4a32702374..6f5fb81f9a 100644
--- a/src/layouts/partial-panel-resolver.js
+++ b/src/layouts/partial-panel-resolver.js
@@ -1,14 +1,14 @@
-import "@polymer/app-route/app-route.js";
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./hass-loading-screen.js";
-import "./hass-error-screen.js";
+import "./hass-loading-screen";
+import "./hass-error-screen";
 import { importHref } from "../resources/html-import/import-href";
 
-import dynamicContentUpdater from "../common/dom/dynamic_content_updater.js";
-import NavigateMixin from "../mixins/navigate-mixin.js";
+import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
+import NavigateMixin from "../mixins/navigate-mixin";
 
 const loaded = {};
 
@@ -19,75 +19,75 @@ function ensureLoaded(panel) {
   // Name each panel we support here, that way Webpack knows about it.
   switch (panel) {
     case "config":
-      imported = import(/* webpackChunkName: "panel-config" */ "../panels/config/ha-panel-config.js");
+      imported = import(/* webpackChunkName: "panel-config" */ "../panels/config/ha-panel-config");
       break;
 
     case "custom":
-      imported = import(/* webpackChunkName: "panel-custom" */ "../panels/custom/ha-panel-custom.js");
+      imported = import(/* webpackChunkName: "panel-custom" */ "../panels/custom/ha-panel-custom");
       break;
 
     case "dev-event":
-      imported = import(/* webpackChunkName: "panel-dev-event" */ "../panels/dev-event/ha-panel-dev-event.js");
+      imported = import(/* webpackChunkName: "panel-dev-event" */ "../panels/dev-event/ha-panel-dev-event");
       break;
 
     case "dev-info":
-      imported = import(/* webpackChunkName: "panel-dev-info" */ "../panels/dev-info/ha-panel-dev-info.js");
+      imported = import(/* webpackChunkName: "panel-dev-info" */ "../panels/dev-info/ha-panel-dev-info");
       break;
 
     case "dev-mqtt":
-      imported = import(/* webpackChunkName: "panel-dev-mqtt" */ "../panels/dev-mqtt/ha-panel-dev-mqtt.js");
+      imported = import(/* webpackChunkName: "panel-dev-mqtt" */ "../panels/dev-mqtt/ha-panel-dev-mqtt");
       break;
 
     case "dev-service":
-      imported = import(/* webpackChunkName: "panel-dev-service" */ "../panels/dev-service/ha-panel-dev-service.js");
+      imported = import(/* webpackChunkName: "panel-dev-service" */ "../panels/dev-service/ha-panel-dev-service");
       break;
 
     case "dev-state":
-      imported = import(/* webpackChunkName: "panel-dev-state" */ "../panels/dev-state/ha-panel-dev-state.js");
+      imported = import(/* webpackChunkName: "panel-dev-state" */ "../panels/dev-state/ha-panel-dev-state");
       break;
 
     case "dev-template":
-      imported = import(/* webpackChunkName: "panel-dev-template" */ "../panels/dev-template/ha-panel-dev-template.js");
+      imported = import(/* webpackChunkName: "panel-dev-template" */ "../panels/dev-template/ha-panel-dev-template");
       break;
 
     case "lovelace":
-      imported = import(/* webpackChunkName: "panel-lovelace" */ "../panels/lovelace/ha-panel-lovelace.js");
+      imported = import(/* webpackChunkName: "panel-lovelace" */ "../panels/lovelace/ha-panel-lovelace");
       break;
 
     case "history":
-      imported = import(/* webpackChunkName: "panel-history" */ "../panels/history/ha-panel-history.js");
+      imported = import(/* webpackChunkName: "panel-history" */ "../panels/history/ha-panel-history");
       break;
 
     case "iframe":
-      imported = import(/* webpackChunkName: "panel-iframe" */ "../panels/iframe/ha-panel-iframe.js");
+      imported = import(/* webpackChunkName: "panel-iframe" */ "../panels/iframe/ha-panel-iframe");
       break;
 
     case "kiosk":
-      imported = import(/* webpackChunkName: "panel-kiosk" */ "../panels/kiosk/ha-panel-kiosk.js");
+      imported = import(/* webpackChunkName: "panel-kiosk" */ "../panels/kiosk/ha-panel-kiosk");
       break;
 
     case "logbook":
-      imported = import(/* webpackChunkName: "panel-logbook" */ "../panels/logbook/ha-panel-logbook.js");
+      imported = import(/* webpackChunkName: "panel-logbook" */ "../panels/logbook/ha-panel-logbook");
       break;
 
     case "mailbox":
-      imported = import(/* webpackChunkName: "panel-mailbox" */ "../panels/mailbox/ha-panel-mailbox.js");
+      imported = import(/* webpackChunkName: "panel-mailbox" */ "../panels/mailbox/ha-panel-mailbox");
       break;
 
     case "map":
-      imported = import(/* webpackChunkName: "panel-map" */ "../panels/map/ha-panel-map.js");
+      imported = import(/* webpackChunkName: "panel-map" */ "../panels/map/ha-panel-map");
       break;
 
     case "profile":
-      imported = import(/* webpackChunkName: "panel-profile" */ "../panels/profile/ha-panel-profile.js");
+      imported = import(/* webpackChunkName: "panel-profile" */ "../panels/profile/ha-panel-profile");
       break;
 
     case "shopping-list":
-      imported = import(/* webpackChunkName: "panel-shopping-list" */ "../panels/shopping-list/ha-panel-shopping-list.js");
+      imported = import(/* webpackChunkName: "panel-shopping-list" */ "../panels/shopping-list/ha-panel-shopping-list");
       break;
 
     case "calendar":
-      imported = import(/* webpackChunkName: "panel-calendar" */ "../panels/calendar/ha-panel-calendar.js");
+      imported = import(/* webpackChunkName: "panel-calendar" */ "../panels/calendar/ha-panel-calendar");
       break;
 
     default:
diff --git a/src/managers/notification-manager.js b/src/managers/notification-manager.js
index 727c29b99d..d2451dfe87 100644
--- a/src/managers/notification-manager.js
+++ b/src/managers/notification-manager.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 class NotificationManager extends LocalizeMixin(PolymerElement) {
   static get template() {
@@ -32,7 +32,7 @@ class NotificationManager extends LocalizeMixin(PolymerElement) {
 
   ready() {
     super.ready();
-    import(/* webpackChunkName: "ha-toast" */ "../components/ha-toast.js");
+    import(/* webpackChunkName: "ha-toast" */ "../components/ha-toast");
   }
 
   showDialog({ message }) {
diff --git a/src/mixins/dialog-mixin.js b/src/mixins/dialog-mixin.js
index 4acecbcc75..61e6da06de 100644
--- a/src/mixins/dialog-mixin.js
+++ b/src/mixins/dialog-mixin.js
@@ -1,6 +1,6 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
-import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior.js";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
+import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
+import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior";
+import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import EventsMixin from "./events-mixin";
 /**
  * @polymerMixin
diff --git a/src/mixins/events-mixin.js b/src/mixins/events-mixin.js
index 81cea3bfe4..80b5d33e7d 100644
--- a/src/mixins/events-mixin.js
+++ b/src/mixins/events-mixin.js
@@ -1,6 +1,6 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
+import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
 
-import { fireEvent } from "../common/dom/fire_event.js";
+import { fireEvent } from "../common/dom/fire_event";
 
 // Polymer legacy event helpers used courtesy of the Polymer project.
 //
diff --git a/src/mixins/localize-base-mixin.ts b/src/mixins/localize-base-mixin.ts
index 9214c0d6f2..f7084902e8 100644
--- a/src/mixins/localize-base-mixin.ts
+++ b/src/mixins/localize-base-mixin.ts
@@ -1,4 +1,4 @@
-import IntlMessageFormat from "intl-messageformat/src/main.js";
+import IntlMessageFormat from "intl-messageformat/src/main";
 
 /**
  * Adapted from Polymer app-localize-behavior.
diff --git a/src/mixins/localize-lite-mixin.js b/src/mixins/localize-lite-mixin.js
index 6f2aec4b96..8df031b522 100644
--- a/src/mixins/localize-lite-mixin.js
+++ b/src/mixins/localize-lite-mixin.js
@@ -1,12 +1,9 @@
 /**
  * Lite mixin to add localization without depending on the Hass object.
  */
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
+import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
 import { localizeBaseMixin } from "./localize-base-mixin";
-import {
-  getActiveTranslation,
-  getTranslation,
-} from "../util/hass-translation.js";
+import { getActiveTranslation, getTranslation } from "../util/hass-translation";
 
 /**
  * @polymerMixin
diff --git a/src/mixins/localize-mixin.js b/src/mixins/localize-mixin.js
index 5928fb36db..06884ddbcf 100644
--- a/src/mixins/localize-mixin.js
+++ b/src/mixins/localize-mixin.js
@@ -1,4 +1,4 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
+import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
 import { localizeBaseMixin } from "./localize-base-mixin";
 /**
  * Polymer Mixin to enable a localize function powered by language/resources from hass object.
diff --git a/src/mixins/navigate-mixin.js b/src/mixins/navigate-mixin.js
index c00a502b00..7b8764c65b 100644
--- a/src/mixins/navigate-mixin.js
+++ b/src/mixins/navigate-mixin.js
@@ -1,4 +1,4 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
+import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
 import { navigate } from "../common/navigate";
 
 /*
diff --git a/src/onboarding/ha-onboarding.js b/src/onboarding/ha-onboarding.js
index 8c5350ef7a..3a30c3c8c5 100644
--- a/src/onboarding/ha-onboarding.js
+++ b/src/onboarding/ha-onboarding.js
@@ -1,10 +1,10 @@
-import "@polymer/polymer/lib/elements/dom-if.js";
-import "@polymer/polymer/lib/elements/dom-repeat.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import localizeLiteMixin from "../mixins/localize-lite-mixin.js";
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import localizeLiteMixin from "../mixins/localize-lite-mixin";
 
 class HaOnboarding extends localizeLiteMixin(PolymerElement) {
   static get template() {
diff --git a/src/panels/calendar/ha-big-calendar.js b/src/panels/calendar/ha-big-calendar.js
index 50572a2ec2..80bf29598f 100644
--- a/src/panels/calendar/ha-big-calendar.js
+++ b/src/panels/calendar/ha-big-calendar.js
@@ -1,5 +1,5 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 /* eslint-disable */
 import { render } from "react-dom";
@@ -7,9 +7,9 @@ import React from "react";
 /* eslint-enable */
 import BigCalendar from "react-big-calendar";
 import moment from "moment";
-import EventsMixin from "../../mixins/events-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
 
-import "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
 BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));
 
diff --git a/src/panels/calendar/ha-panel-calendar.js b/src/panels/calendar/ha-panel-calendar.js
index 2c69f198f4..a806315c54 100644
--- a/src/panels/calendar/ha-panel-calendar.js
+++ b/src/panels/calendar/ha-panel-calendar.js
@@ -1,20 +1,20 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import moment from "moment";
 import dates from "react-big-calendar/lib/utils/dates";
 
-import "../../components/ha-menu-button.js";
-import "../../resources/ha-style.js";
-import "./ha-big-calendar.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
+import "./ha-big-calendar";
 
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 const DEFAULT_VIEW = "month";
 
diff --git a/src/panels/config/automation/ha-automation-editor.js b/src/panels/config/automation/ha-automation-editor.js
index 047da257c9..35d3ee3425 100644
--- a/src/panels/config/automation/ha-automation-editor.js
+++ b/src/panels/config/automation/ha-automation-editor.js
@@ -1,19 +1,19 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-fab/paper-fab.js";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-fab/paper-fab";
 
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { h, render } from "preact";
 
-import "../../../layouts/ha-app-layout.js";
+import "../../../layouts/ha-app-layout";
 
-import Automation from "../js/automation.js";
-import unmountPreact from "../../../common/preact/unmount.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import Automation from "../js/automation";
+import unmountPreact from "../../../common/preact/unmount";
+import computeStateName from "../../../common/entity/compute_state_name";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 function AutomationEditor(mountEl, props, mergeEl) {
   return render(h(Automation, props), mountEl, mergeEl);
diff --git a/src/panels/config/automation/ha-automation-picker.js b/src/panels/config/automation/ha-automation-picker.js
index 6e8e234d26..c393ecff09 100644
--- a/src/panels/config/automation/ha-automation-picker.js
+++ b/src/panels/config/automation/ha-automation-picker.js
@@ -1,21 +1,21 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-fab/paper-fab.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-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-markdown.js";
-import "../../../layouts/ha-app-layout.js";
+import "../../../components/ha-markdown";
+import "../../../layouts/ha-app-layout";
 
-import "../ha-config-section.js";
+import "../ha-config-section";
 
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import computeStateName from "../../../common/entity/compute_state_name";
 /*
  * @appliesMixin LocalizeMixin
  * @appliesMixin NavigateMixin
diff --git a/src/panels/config/automation/ha-config-automation.js b/src/panels/config/automation/ha-config-automation.js
index 02dd8e59a4..f9bf17bc9f 100644
--- a/src/panels/config/automation/ha-config-automation.js
+++ b/src/panels/config/automation/ha-config-automation.js
@@ -1,11 +1,11 @@
-import "@polymer/app-route/app-route.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-automation-editor.js";
-import "./ha-automation-picker.js";
+import "./ha-automation-editor";
+import "./ha-automation-picker";
 
-import computeStateDomain from "../../../common/entity/compute_state_domain.js";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
 
 class HaConfigAutomation extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/cloud/ha-config-cloud-account.js b/src/panels/config/cloud/ha-config-cloud-account.js
index 8c5a0b634a..3aabd609de 100644
--- a/src/panels/config/cloud/ha-config-cloud-account.js
+++ b/src/panels/config/cloud/ha-config-cloud-account.js
@@ -1,19 +1,19 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-api-button.js";
-import "../../../layouts/hass-subpage.js";
-import "../../../resources/ha-style.js";
+import "../../../components/buttons/ha-call-api-button";
+import "../../../layouts/hass-subpage";
+import "../../../resources/ha-style";
 
-import "../ha-config-section.js";
+import "../ha-config-section";
 
-import formatDateTime from "../../../common/datetime/format_date_time.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import formatDateTime from "../../../common/datetime/format_date_time";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/config/cloud/ha-config-cloud-forgot-password.js b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
index bf7aa9c52e..4d425785cd 100644
--- a/src/panels/config/cloud/ha-config-cloud-forgot-password.js
+++ b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-progress-button.js";
-import "../../../layouts/hass-subpage.js";
-import "../../../resources/ha-style.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
+import "../../../components/buttons/ha-progress-button";
+import "../../../layouts/hass-subpage";
+import "../../../resources/ha-style";
+import EventsMixin from "../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/config/cloud/ha-config-cloud-login.js b/src/panels/config/cloud/ha-config-cloud-login.js
index 5f25789207..ed4230ef4f 100644
--- a/src/panels/config/cloud/ha-config-cloud-login.js
+++ b/src/panels/config/cloud/ha-config-cloud-login.js
@@ -1,20 +1,20 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-ripple/paper-ripple.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-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-body";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-ripple/paper-ripple";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-progress-button.js";
-import "../../../layouts/hass-subpage.js";
-import "../../../resources/ha-style.js";
+import "../../../components/buttons/ha-progress-button";
+import "../../../layouts/hass-subpage";
+import "../../../resources/ha-style";
 
-import "../ha-config-section.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
+import "../ha-config-section";
+import EventsMixin from "../../../mixins/events-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
 
 /*
  * @appliesMixin NavigateMixin
diff --git a/src/panels/config/cloud/ha-config-cloud-register.js b/src/panels/config/cloud/ha-config-cloud-register.js
index c0f6d4fea4..05c4f89829 100644
--- a/src/panels/config/cloud/ha-config-cloud-register.js
+++ b/src/panels/config/cloud/ha-config-cloud-register.js
@@ -1,13 +1,13 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-progress-button.js";
-import "../../../layouts/hass-subpage.js";
-import "../../../resources/ha-style.js";
-import "../ha-config-section.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
+import "../../../components/buttons/ha-progress-button";
+import "../../../layouts/hass-subpage";
+import "../../../resources/ha-style";
+import "../ha-config-section";
+import EventsMixin from "../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/config/cloud/ha-config-cloud.js b/src/panels/config/cloud/ha-config-cloud.js
index ab0d85e9ee..62947dd828 100644
--- a/src/panels/config/cloud/ha-config-cloud.js
+++ b/src/panels/config/cloud/ha-config-cloud.js
@@ -1,15 +1,15 @@
-import "@polymer/app-route/app-route.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../ha-config-section.js";
-import "./ha-config-cloud-account.js";
-import "./ha-config-cloud-forgot-password.js";
-import "./ha-config-cloud-login.js";
-import "./ha-config-cloud-register.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
+import "../ha-config-section";
+import "./ha-config-cloud-account";
+import "./ha-config-cloud-forgot-password";
+import "./ha-config-cloud-login";
+import "./ha-config-cloud-register";
+import NavigateMixin from "../../../mixins/navigate-mixin";
 
 const LOGGED_IN_URLS = ["/cloud/account"];
 const NOT_LOGGED_IN_URLS = [
diff --git a/src/panels/config/config-entries/ha-ce-entities-card.js b/src/panels/config/config-entries/ha-ce-entities-card.js
index 78719c584a..9f4faafa16 100644
--- a/src/panels/config/config-entries/ha-ce-entities-card.js
+++ b/src/panels/config/config-entries/ha-ce-entities-card.js
@@ -1,15 +1,15 @@
-import "@polymer/paper-item/paper-icon-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../layouts/hass-subpage.js";
+import "../../../layouts/hass-subpage";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixIn from "../../../mixins/localize-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import "../../../components/entity/state-badge.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixIn from "../../../mixins/localize-mixin";
+import computeStateName from "../../../common/entity/compute_state_name";
+import "../../../components/entity/state-badge";
 
 function computeEntityName(hass, entity) {
   if (entity.name) return entity.name;
diff --git a/src/panels/config/config-entries/ha-config-entries-dashboard.js b/src/panels/config/config-entries/ha-config-entries-dashboard.js
index 1149e6ddbf..de6b2ec56a 100644
--- a/src/panels/config/config-entries/ha-config-entries-dashboard.js
+++ b/src/panels/config/config-entries/ha-config-entries-dashboard.js
@@ -1,21 +1,21 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-tooltip/paper-tooltip.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-tooltip/paper-tooltip";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/entity/ha-state-icon.js";
-import "../../../layouts/hass-subpage.js";
-import "../../../resources/ha-style.js";
+import "../../../components/entity/ha-state-icon";
+import "../../../layouts/hass-subpage";
+import "../../../resources/ha-style";
 
-import "../ha-config-section.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
+import "../ha-config-section";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import computeStateName from "../../../common/entity/compute_state_name";
 
 let registeredDialog = false;
 
@@ -153,7 +153,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
       this.fire("register-dialog", {
         dialogShowEvent: "show-config-flow",
         dialogTag: "ha-config-flow",
-        dialogImport: () => import("./ha-config-flow.js"),
+        dialogImport: () => import("./ha-config-flow"),
       });
     }
   }
diff --git a/src/panels/config/config-entries/ha-config-entries.js b/src/panels/config/config-entries/ha-config-entries.js
index 85804246f3..0826e0fed2 100644
--- a/src/panels/config/config-entries/ha-config-entries.js
+++ b/src/panels/config/config-entries/ha-config-entries.js
@@ -1,13 +1,13 @@
-import "@polymer/app-route/app-route.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
+import "@polymer/app-route/app-route";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
 
-import "./ha-config-entries-dashboard.js";
-import "./ha-config-entry-page.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import compare from "../../../common/string/compare.js";
+import "./ha-config-entries-dashboard";
+import "./ha-config-entry-page";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import compare from "../../../common/string/compare";
 
 class HaConfigEntries extends NavigateMixin(PolymerElement) {
   static get template() {
diff --git a/src/panels/config/config-entries/ha-config-entry-page.js b/src/panels/config/config-entries/ha-config-entry-page.js
index 676568365c..7ba95bcf45 100644
--- a/src/panels/config/config-entries/ha-config-entry-page.js
+++ b/src/panels/config/config-entries/ha-config-entry-page.js
@@ -1,17 +1,17 @@
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../layouts/hass-subpage.js";
+import "../../../layouts/hass-subpage";
 
-import "../../../components/entity/state-badge.js";
-import compare from "../../../common/string/compare.js";
+import "../../../components/entity/state-badge";
+import compare from "../../../common/string/compare";
 
-import "./ha-device-card.js";
-import "./ha-ce-entities-card.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
+import "./ha-device-card";
+import "./ha-ce-entities-card";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
 
 class HaConfigEntryPage extends NavigateMixin(
   EventsMixin(LocalizeMixin(PolymerElement))
diff --git a/src/panels/config/config-entries/ha-config-flow.js b/src/panels/config/config-entries/ha-config-flow.js
index e60ac2338c..94a1a3bac4 100644
--- a/src/panels/config/config-entries/ha-config-flow.js
+++ b/src/panels/config/config-entries/ha-config-flow.js
@@ -1,17 +1,17 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-tooltip/paper-tooltip.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-tooltip/paper-tooltip";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/ha-form.js";
-import "../../../components/ha-markdown.js";
-import "../../../resources/ha-style.js";
+import "../../../components/ha-form";
+import "../../../components/ha-markdown";
+import "../../../resources/ha-style";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 let instance = 0;
 
diff --git a/src/panels/config/config-entries/ha-device-card.js b/src/panels/config/config-entries/ha-device-card.js
index 40c45246f9..4b4ffd5413 100644
--- a/src/panels/config/config-entries/ha-device-card.js
+++ b/src/panels/config/config-entries/ha-device-card.js
@@ -1,16 +1,16 @@
-import "@polymer/paper-item/paper-icon-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../layouts/hass-subpage.js";
+import "../../../layouts/hass-subpage";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import "../../../components/entity/state-badge.js";
-import compare from "../../../common/string/compare.js";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import computeStateName from "../../../common/entity/compute_state_name";
+import "../../../components/entity/state-badge";
+import compare from "../../../common/string/compare";
 
 function computeEntityName(hass, entity) {
   if (entity.name) return entity.name;
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js
index 1d3bae2b25..1a960b6abf 100644
--- a/src/panels/config/core/ha-config-core.js
+++ b/src/panels/config/core/ha-config-core.js
@@ -1,15 +1,15 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../layouts/hass-subpage.js";
-import "../../../resources/ha-style.js";
+import "../../../layouts/hass-subpage";
+import "../../../resources/ha-style";
 
-import "./ha-config-section-core.js";
+import "./ha-config-section-core";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js
index 946b5699b5..c70d767e08 100644
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/src/panels/config/core/ha-config-section-core.js
@@ -1,16 +1,16 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-service-button.js";
-import "../../../resources/ha-style.js";
+import "../../../components/buttons/ha-call-service-button";
+import "../../../resources/ha-style";
 
-import "../ha-config-section.js";
+import "../ha-config-section";
 
-import isComponentLoaded from "../../../common/config/is_component_loaded.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import isComponentLoaded from "../../../common/config/is_component_loaded";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js
index 965891df1d..d37674ed64 100644
--- a/src/panels/config/customize/ha-config-customize.js
+++ b/src/panels/config/customize/ha-config-customize.js
@@ -1,20 +1,20 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../resources/ha-style.js";
+import "../../../resources/ha-style";
 
-import "../ha-config-section.js";
-import "../ha-entity-config.js";
-import "./ha-form-customize.js";
+import "../ha-config-section";
+import "../ha-entity-config";
+import "./ha-form-customize";
 
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import computeStateDomain from "../../../common/entity/compute_state_domain.js";
-import sortByName from "../../../common/entity/states_sort_by_name.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import computeStateName from "../../../common/entity/compute_state_name";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
+import sortByName from "../../../common/entity/states_sort_by_name";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/customize/ha-customize-attribute.js b/src/panels/config/customize/ha-customize-attribute.js
index dda62ab813..072e649a9a 100644
--- a/src/panels/config/customize/ha-customize-attribute.js
+++ b/src/panels/config/customize/ha-customize-attribute.js
@@ -1,14 +1,14 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import hassAttributeUtil from "../../../util/hass-attributes-util.js";
-import "../ha-form-style.js";
-import "./types/ha-customize-array.js";
-import "./types/ha-customize-boolean.js";
-import "./types/ha-customize-icon.js";
-import "./types/ha-customize-key-value.js";
-import "./types/ha-customize-string.js";
+import hassAttributeUtil from "../../../util/hass-attributes-util";
+import "../ha-form-style";
+import "./types/ha-customize-array";
+import "./types/ha-customize-boolean";
+import "./types/ha-customize-icon";
+import "./types/ha-customize-key-value";
+import "./types/ha-customize-string";
 
 class HaCustomizeAttribute extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/customize/ha-form-customize-attributes.js b/src/panels/config/customize/ha-form-customize-attributes.js
index a6d19e1db7..d572a67faa 100644
--- a/src/panels/config/customize/ha-form-customize-attributes.js
+++ b/src/panels/config/customize/ha-form-customize-attributes.js
@@ -1,8 +1,8 @@
-import { MutableData } from "@polymer/polymer/lib/mixins/mutable-data.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { MutableData } from "@polymer/polymer/lib/mixins/mutable-data";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-customize-attribute.js";
+import "./ha-customize-attribute";
 
 class HaFormCustomizeAttributes extends MutableData(PolymerElement) {
   static get template() {
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index cf79fc85f2..d3f51377b9 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/src/panels/config/customize/ha-form-customize.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import hassAttributeUtil from "../../../util/hass-attributes-util.js";
-import "./ha-form-customize-attributes.js";
+import hassAttributeUtil from "../../../util/hass-attributes-util";
+import "./ha-form-customize-attributes";
 
 import computeStateDomain from "../../../common/entity/compute_state_domain";
 
diff --git a/src/panels/config/customize/types/ha-customize-array.js b/src/panels/config/customize/types/ha-customize-array.js
index 2401fa6772..dc1eb05128 100644
--- a/src/panels/config/customize/types/ha-customize-array.js
+++ b/src/panels/config/customize/types/ha-customize-array.js
@@ -1,10 +1,10 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../../../mixins/events-mixin.js";
+import EventsMixin from "../../../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/config/customize/types/ha-customize-boolean.js b/src/panels/config/customize/types/ha-customize-boolean.js
index a9f0049d6f..d85892892e 100644
--- a/src/panels/config/customize/types/ha-customize-boolean.js
+++ b/src/panels/config/customize/types/ha-customize-boolean.js
@@ -1,6 +1,6 @@
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-checkbox/paper-checkbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaCustomizeBoolean extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/customize/types/ha-customize-icon.js b/src/panels/config/customize/types/ha-customize-icon.js
index 81bf8a23ec..da9547db2c 100644
--- a/src/panels/config/customize/types/ha-customize-icon.js
+++ b/src/panels/config/customize/types/ha-customize-icon.js
@@ -1,7 +1,7 @@
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaCustomizeIcon extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/customize/types/ha-customize-key-value.js b/src/panels/config/customize/types/ha-customize-key-value.js
index a540a6fcb6..d572cd8a18 100644
--- a/src/panels/config/customize/types/ha-customize-key-value.js
+++ b/src/panels/config/customize/types/ha-customize-key-value.js
@@ -1,6 +1,6 @@
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaCustomizeKeyValue extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/customize/types/ha-customize-string.js b/src/panels/config/customize/types/ha-customize-string.js
index 8fab122a8a..845f9e10d2 100644
--- a/src/panels/config/customize/types/ha-customize-string.js
+++ b/src/panels/config/customize/types/ha-customize-string.js
@@ -1,6 +1,6 @@
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaCustomizeString extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/dashboard/ha-config-dashboard.js b/src/panels/config/dashboard/ha-config-dashboard.js
index 56da4e2fb8..f6338ba5f9 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.js
+++ b/src/panels/config/dashboard/ha-config-dashboard.js
@@ -1,21 +1,21 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-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-menu-button.js";
+import "../../../components/ha-menu-button";
 
-import "../ha-config-section.js";
-import "./ha-config-navigation.js";
+import "../ha-config-section";
+import "./ha-config-navigation";
 
-import isComponentLoaded from "../../../common/config/is_component_loaded.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
+import isComponentLoaded from "../../../common/config/is_component_loaded";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/dashboard/ha-config-navigation.js b/src/panels/config/dashboard/ha-config-navigation.js
index fb559abd6d..c419b11715 100644
--- a/src/panels/config/dashboard/ha-config-navigation.js
+++ b/src/panels/config/dashboard/ha-config-navigation.js
@@ -1,14 +1,14 @@
-import "@polymer/iron-icon/iron-icon.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-icon/iron-icon";
+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 NavigateMixin from "../../../mixins/navigate-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
-import isComponentLoaded from "../../../common/config/is_component_loaded.js";
+import isComponentLoaded from "../../../common/config/is_component_loaded";
 
 const CORE_PAGES = ["core", "customize"];
 /*
diff --git a/src/panels/config/ha-config-section.js b/src/panels/config/ha-config-section.js
index 12f00b4a56..7ceeaebc23 100644
--- a/src/panels/config/ha-config-section.js
+++ b/src/panels/config/ha-config-section.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
 class HaConfigSection extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js
index 5696241c7e..235ddb8c0e 100644
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@@ -1,13 +1,13 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+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";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import computeStateName from "../../common/entity/compute_state_name.js";
+import computeStateName from "../../common/entity/compute_state_name";
 
 class HaEntityConfig extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/ha-panel-config.js b/src/panels/config/ha-panel-config.js
index eb84083689..3c32084e40 100644
--- a/src/panels/config/ha-panel-config.js
+++ b/src/panels/config/ha-panel-config.js
@@ -1,23 +1,23 @@
-import "@polymer/app-route/app-route.js";
-import "@polymer/iron-media-query/iron-media-query.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import "@polymer/iron-media-query/iron-media-query";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../layouts/hass-error-screen.js";
+import "../../layouts/hass-error-screen";
 
-import isComponentLoaded from "../../common/config/is_component_loaded.js";
-import EventsMixin from "../../mixins/events-mixin.js";
-import NavigateMixin from "../../mixins/navigate-mixin.js";
+import isComponentLoaded from "../../common/config/is_component_loaded";
+import EventsMixin from "../../mixins/events-mixin";
+import NavigateMixin from "../../mixins/navigate-mixin";
 
-import(/* webpackChunkName: "panel-config-automation" */ "./automation/ha-config-automation.js");
-import(/* webpackChunkName: "panel-config-cloud" */ "./cloud/ha-config-cloud.js");
-import(/* webpackChunkName: "panel-config-config" */ "./config-entries/ha-config-entries.js");
-import(/* webpackChunkName: "panel-config-core" */ "./core/ha-config-core.js");
-import(/* webpackChunkName: "panel-config-customize" */ "./customize/ha-config-customize.js");
-import(/* webpackChunkName: "panel-config-dashboard" */ "./dashboard/ha-config-dashboard.js");
-import(/* webpackChunkName: "panel-config-script" */ "./script/ha-config-script.js");
-import(/* webpackChunkName: "panel-config-users" */ "./users/ha-config-users.js");
-import(/* webpackChunkName: "panel-config-zwave" */ "./zwave/ha-config-zwave.js");
+import(/* webpackChunkName: "panel-config-automation" */ "./automation/ha-config-automation");
+import(/* webpackChunkName: "panel-config-cloud" */ "./cloud/ha-config-cloud");
+import(/* webpackChunkName: "panel-config-config" */ "./config-entries/ha-config-entries");
+import(/* webpackChunkName: "panel-config-core" */ "./core/ha-config-core");
+import(/* webpackChunkName: "panel-config-customize" */ "./customize/ha-config-customize");
+import(/* webpackChunkName: "panel-config-dashboard" */ "./dashboard/ha-config-dashboard");
+import(/* webpackChunkName: "panel-config-script" */ "./script/ha-config-script");
+import(/* webpackChunkName: "panel-config-users" */ "./users/ha-config-users");
+import(/* webpackChunkName: "panel-config-zwave" */ "./zwave/ha-config-zwave");
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/config/js/automation.js b/src/panels/config/js/automation.js
index 515bc6804b..4c16a8cf52 100644
--- a/src/panels/config/js/automation.js
+++ b/src/panels/config/js/automation.js
@@ -1,13 +1,13 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import "../ha-config-section.js";
-import "../../../components/ha-markdown.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import "../ha-config-section";
+import "../../../components/ha-markdown";
 
-import Trigger from "./trigger/index.js";
-import Condition from "./condition/index.js";
-import Script from "./script/index.js";
+import Trigger from "./trigger/index";
+import Condition from "./condition/index";
+import Script from "./script/index";
 
 export default class Automation extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/condition_edit.js b/src/panels/config/js/condition/condition_edit.js
index 362455ea53..3012aca885 100644
--- a/src/panels/config/js/condition/condition_edit.js
+++ b/src/panels/config/js/condition/condition_edit.js
@@ -1,14 +1,14 @@
 import { h, Component } from "preact";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-item/paper-item.js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-item";
 
-import NumericStateCondition from "./numeric_state.js";
-import StateCondition from "./state.js";
-import SunCondition from "./sun.js";
-import TemplateCondition from "./template.js";
-import TimeCondition from "./time.js";
-import ZoneCondition from "./zone.js";
+import NumericStateCondition from "./numeric_state";
+import StateCondition from "./state";
+import SunCondition from "./sun";
+import TemplateCondition from "./template";
+import TimeCondition from "./time";
+import ZoneCondition from "./zone";
 
 const TYPES = {
   state: StateCondition,
diff --git a/src/panels/config/js/condition/condition_row.js b/src/panels/config/js/condition/condition_row.js
index 7767a4be02..b518af93bc 100644
--- a/src/panels/config/js/condition/condition_row.js
+++ b/src/panels/config/js/condition/condition_row.js
@@ -1,11 +1,11 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-menu-button/paper-menu-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-item/paper-item.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-menu-button/paper-menu-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-item";
 
-import ConditionEdit from "./condition_edit.js";
+import ConditionEdit from "./condition_edit";
 
 export default class ConditionRow extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/index.js b/src/panels/config/js/condition/index.js
index 1dff74c1d9..b568c9e63e 100644
--- a/src/panels/config/js/condition/index.js
+++ b/src/panels/config/js/condition/index.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-button/paper-button.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-button/paper-button";
 
-import ConditionRow from "./condition_row.js";
+import ConditionRow from "./condition_row";
 
 export default class Condition extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/numeric_state.js b/src/panels/config/js/condition/numeric_state.js
index 0e3dd10cca..abb01edc4d 100644
--- a/src/panels/config/js/condition/numeric_state.js
+++ b/src/panels/config/js/condition/numeric_state.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
-import "../../../../components/ha-textarea.js";
-import "../../../../components/entity/ha-entity-picker.js";
+import "@polymer/paper-input/paper-input";
+import "../../../../components/ha-textarea";
+import "../../../../components/entity/ha-entity-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class NumericStateCondition extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/state.js b/src/panels/config/js/condition/state.js
index 1968283bfe..4249ef60cd 100644
--- a/src/panels/config/js/condition/state.js
+++ b/src/panels/config/js/condition/state.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
-import "../../../../components/entity/ha-entity-picker.js";
+import "@polymer/paper-input/paper-input";
+import "../../../../components/entity/ha-entity-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class StateCondition extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/sun.js b/src/panels/config/js/condition/sun.js
index 5ec8bce6b1..793a91af52 100644
--- a/src/panels/config/js/condition/sun.js
+++ b/src/panels/config/js/condition/sun.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-radio-button/paper-radio-button.js";
-import "@polymer/paper-radio-group/paper-radio-group.js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-radio-button/paper-radio-button";
+import "@polymer/paper-radio-group/paper-radio-group";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class SunCondition extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/template.js b/src/panels/config/js/condition/template.js
index 1d2f4e64bb..ba4fc00ba3 100644
--- a/src/panels/config/js/condition/template.js
+++ b/src/panels/config/js/condition/template.js
@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
-import "../../../../components/ha-textarea.js";
+import "../../../../components/ha-textarea";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class TemplateCondition extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/time.js b/src/panels/config/js/condition/time.js
index d3f19f1b4b..269b3dad8b 100644
--- a/src/panels/config/js/condition/time.js
+++ b/src/panels/config/js/condition/time.js
@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
+import "@polymer/paper-input/paper-input";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class TimeCondition extends Component {
   constructor() {
diff --git a/src/panels/config/js/condition/zone.js b/src/panels/config/js/condition/zone.js
index f2ffa0fe85..a09ae77e2a 100644
--- a/src/panels/config/js/condition/zone.js
+++ b/src/panels/config/js/condition/zone.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
-import "../../../../components/entity/ha-entity-picker.js";
-import { onChangeEvent } from "../../../../common/preact/event.js";
-import hasLocation from "../../../../common/entity/has_location.js";
-import computeStateDomain from "../../../../common/entity/compute_state_domain.js";
+import "../../../../components/entity/ha-entity-picker";
+import { onChangeEvent } from "../../../../common/preact/event";
+import hasLocation from "../../../../common/entity/has_location";
+import computeStateDomain from "../../../../common/entity/compute_state_domain";
 
 function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
diff --git a/src/panels/config/js/json_textarea.js b/src/panels/config/js/json_textarea.js
index d3e0da2632..5903673522 100644
--- a/src/panels/config/js/json_textarea.js
+++ b/src/panels/config/js/json_textarea.js
@@ -1,5 +1,5 @@
 import { h, Component } from "preact";
-import "../../../components/ha-textarea.js";
+import "../../../components/ha-textarea";
 
 export default class JSONTextArea extends Component {
   constructor(props) {
diff --git a/src/panels/config/js/script.js b/src/panels/config/js/script.js
index 21dc481e68..cca985573a 100644
--- a/src/panels/config/js/script.js
+++ b/src/panels/config/js/script.js
@@ -1,10 +1,10 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import "../ha-config-section.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
+import "../ha-config-section";
 
-import Script from "./script/index.js";
+import Script from "./script/index";
 
 export default class ScriptEditor extends Component {
   constructor() {
diff --git a/src/panels/config/js/script/action_edit.js b/src/panels/config/js/script/action_edit.js
index 53ffa2a6de..b114ab512e 100644
--- a/src/panels/config/js/script/action_edit.js
+++ b/src/panels/config/js/script/action_edit.js
@@ -1,13 +1,13 @@
 import { h, Component } from "preact";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-item/paper-item.js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-item";
 
-import CallServiceAction from "./call_service.js";
-import ConditionAction from "./condition.js";
-import DelayAction from "./delay.js";
-import EventAction from "./event.js";
-import WaitAction from "./wait.js";
+import CallServiceAction from "./call_service";
+import ConditionAction from "./condition";
+import DelayAction from "./delay";
+import EventAction from "./event";
+import WaitAction from "./wait";
 
 const TYPES = {
   service: CallServiceAction,
diff --git a/src/panels/config/js/script/action_row.js b/src/panels/config/js/script/action_row.js
index 9b9c1bc5b9..a83bbaa9cc 100644
--- a/src/panels/config/js/script/action_row.js
+++ b/src/panels/config/js/script/action_row.js
@@ -1,11 +1,11 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-menu-button/paper-menu-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-menu-button/paper-menu-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
 
-import ActionEdit from "./action_edit.js";
+import ActionEdit from "./action_edit";
 
 export default class Action extends Component {
   constructor() {
diff --git a/src/panels/config/js/script/call_service.js b/src/panels/config/js/script/call_service.js
index ea6f793d89..0584e9cc3c 100644
--- a/src/panels/config/js/script/call_service.js
+++ b/src/panels/config/js/script/call_service.js
@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
-import "../../../../components/ha-service-picker.js";
+import "../../../../components/ha-service-picker";
 
-import JSONTextArea from "../json_textarea.js";
+import JSONTextArea from "../json_textarea";
 
 export default class CallServiceAction extends Component {
   constructor() {
diff --git a/src/panels/config/js/script/condition.js b/src/panels/config/js/script/condition.js
index b15ffb8444..01421c9306 100644
--- a/src/panels/config/js/script/condition.js
+++ b/src/panels/config/js/script/condition.js
@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
 
-import StateCondition from "../condition/state.js";
-import ConditionEdit from "../condition/condition_edit.js";
+import StateCondition from "../condition/state";
+import ConditionEdit from "../condition/condition_edit";
 
 export default class ConditionAction extends Component {
   // eslint-disable-next-line
diff --git a/src/panels/config/js/script/delay.js b/src/panels/config/js/script/delay.js
index a14ff39e09..0fbfcda90d 100644
--- a/src/panels/config/js/script/delay.js
+++ b/src/panels/config/js/script/delay.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import "@polymer/paper-input/paper-input";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class DelayAction extends Component {
   constructor() {
diff --git a/src/panels/config/js/script/event.js b/src/panels/config/js/script/event.js
index 9d53ed6236..f11eb12170 100644
--- a/src/panels/config/js/script/event.js
+++ b/src/panels/config/js/script/event.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
+import "@polymer/paper-input/paper-input";
 
-import JSONTextArea from "../json_textarea.js";
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import JSONTextArea from "../json_textarea";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class EventAction extends Component {
   constructor() {
diff --git a/src/panels/config/js/script/index.js b/src/panels/config/js/script/index.js
index bf0eaf6cb5..1874115c53 100644
--- a/src/panels/config/js/script/index.js
+++ b/src/panels/config/js/script/index.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-button/paper-button.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-button/paper-button";
 
-import ActionRow from "./action_row.js";
+import ActionRow from "./action_row";
 
 export default class Script extends Component {
   constructor() {
diff --git a/src/panels/config/js/script/wait.js b/src/panels/config/js/script/wait.js
index ce258afa79..9691d92a0f 100644
--- a/src/panels/config/js/script/wait.js
+++ b/src/panels/config/js/script/wait.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
+import "@polymer/paper-input/paper-input";
 
-import "../../../../components/ha-textarea.js";
+import "../../../../components/ha-textarea";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class WaitAction extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/event.js b/src/panels/config/js/trigger/event.js
index 2f9cb07b34..c41a2faf1c 100644
--- a/src/panels/config/js/trigger/event.js
+++ b/src/panels/config/js/trigger/event.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
+import "@polymer/paper-input/paper-input";
 
-import JSONTextArea from "../json_textarea.js";
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import JSONTextArea from "../json_textarea";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class EventTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/homeassistant.js b/src/panels/config/js/trigger/homeassistant.js
index 90ecc31b64..732a549987 100644
--- a/src/panels/config/js/trigger/homeassistant.js
+++ b/src/panels/config/js/trigger/homeassistant.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-radio-button/paper-radio-button.js";
-import "@polymer/paper-radio-group/paper-radio-group.js";
+import "@polymer/paper-radio-button/paper-radio-button";
+import "@polymer/paper-radio-group/paper-radio-group";
 
 export default class HassTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/index.js b/src/panels/config/js/trigger/index.js
index aa160bc625..6ae1411d16 100644
--- a/src/panels/config/js/trigger/index.js
+++ b/src/panels/config/js/trigger/index.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-button/paper-button.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-button/paper-button";
 
-import TriggerRow from "./trigger_row.js";
-import StateTrigger from "./state.js";
+import TriggerRow from "./trigger_row";
+import StateTrigger from "./state";
 
 export default class Trigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/mqtt.js b/src/panels/config/js/trigger/mqtt.js
index 9dfd9945e0..f59c7618f5 100644
--- a/src/panels/config/js/trigger/mqtt.js
+++ b/src/panels/config/js/trigger/mqtt.js
@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
+import "@polymer/paper-input/paper-input";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class MQTTTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/numeric_state.js b/src/panels/config/js/trigger/numeric_state.js
index 0390390421..41cf07838d 100644
--- a/src/panels/config/js/trigger/numeric_state.js
+++ b/src/panels/config/js/trigger/numeric_state.js
@@ -1,10 +1,10 @@
 import { h, Component } from "preact";
-import "@polymer/paper-input/paper-input.js";
-import "../../../../components/ha-textarea.js";
+import "@polymer/paper-input/paper-input";
+import "../../../../components/ha-textarea";
 
-import "../../../../components/entity/ha-entity-picker.js";
+import "../../../../components/entity/ha-entity-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class NumericStateTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/state.js b/src/panels/config/js/trigger/state.js
index 4c461f3e2b..fe3d4e7acc 100644
--- a/src/panels/config/js/trigger/state.js
+++ b/src/panels/config/js/trigger/state.js
@@ -1,9 +1,9 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-input/paper-input.js";
-import "../../../../components/entity/ha-entity-picker.js";
+import "@polymer/paper-input/paper-input";
+import "../../../../components/entity/ha-entity-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class StateTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/sun.js b/src/panels/config/js/trigger/sun.js
index 0203c7d13d..a0bd5bc990 100644
--- a/src/panels/config/js/trigger/sun.js
+++ b/src/panels/config/js/trigger/sun.js
@@ -1,10 +1,10 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-radio-button/paper-radio-button.js";
-import "@polymer/paper-radio-group/paper-radio-group.js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-radio-button/paper-radio-button";
+import "@polymer/paper-radio-group/paper-radio-group";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class SunTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/template.js b/src/panels/config/js/trigger/template.js
index 9c1d1c5f3d..f23152838c 100644
--- a/src/panels/config/js/trigger/template.js
+++ b/src/panels/config/js/trigger/template.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
 
-import "../../../../components/ha-textarea.js";
+import "../../../../components/ha-textarea";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class TemplateTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/time.js b/src/panels/config/js/trigger/time.js
index b4e226f712..dd2c4c535d 100644
--- a/src/panels/config/js/trigger/time.js
+++ b/src/panels/config/js/trigger/time.js
@@ -1,8 +1,8 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-input/paper-input.js";
+import "@polymer/paper-input/paper-input";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
+import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class TimeTrigger extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/trigger_edit.js b/src/panels/config/js/trigger/trigger_edit.js
index 479285103e..6af80b3dea 100644
--- a/src/panels/config/js/trigger/trigger_edit.js
+++ b/src/panels/config/js/trigger/trigger_edit.js
@@ -1,18 +1,18 @@
 import { h, Component } from "preact";
 
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
 
-import EventTrigger from "./event.js";
-import HassTrigger from "./homeassistant.js";
-import MQTTTrigger from "./mqtt.js";
-import NumericStateTrigger from "./numeric_state.js";
-import StateTrigger from "./state.js";
-import SunTrigger from "./sun.js";
-import TemplateTrigger from "./template.js";
-import TimeTrigger from "./time.js";
-import ZoneTrigger from "./zone.js";
+import EventTrigger from "./event";
+import HassTrigger from "./homeassistant";
+import MQTTTrigger from "./mqtt";
+import NumericStateTrigger from "./numeric_state";
+import StateTrigger from "./state";
+import SunTrigger from "./sun";
+import TemplateTrigger from "./template";
+import TimeTrigger from "./time";
+import ZoneTrigger from "./zone";
 
 const TYPES = {
   event: EventTrigger,
diff --git a/src/panels/config/js/trigger/trigger_row.js b/src/panels/config/js/trigger/trigger_row.js
index 8030f1b410..13f3a542de 100644
--- a/src/panels/config/js/trigger/trigger_row.js
+++ b/src/panels/config/js/trigger/trigger_row.js
@@ -1,11 +1,11 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-menu-button/paper-menu-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-menu-button/paper-menu-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
 
-import TriggerEdit from "./trigger_edit.js";
+import TriggerEdit from "./trigger_edit";
 
 export default class TriggerRow extends Component {
   constructor() {
diff --git a/src/panels/config/js/trigger/zone.js b/src/panels/config/js/trigger/zone.js
index 528ecc5568..be3b385a01 100644
--- a/src/panels/config/js/trigger/zone.js
+++ b/src/panels/config/js/trigger/zone.js
@@ -1,11 +1,11 @@
 import { h, Component } from "preact";
-import "@polymer/paper-radio-button/paper-radio-button.js";
-import "@polymer/paper-radio-group/paper-radio-group.js";
-import "../../../../components/entity/ha-entity-picker.js";
+import "@polymer/paper-radio-button/paper-radio-button";
+import "@polymer/paper-radio-group/paper-radio-group";
+import "../../../../components/entity/ha-entity-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event.js";
-import hasLocation from "../../../../common/entity/has_location.js";
-import computeStateDomain from "../../../../common/entity/compute_state_domain.js";
+import { onChangeEvent } from "../../../../common/preact/event";
+import hasLocation from "../../../../common/entity/has_location";
+import computeStateDomain from "../../../../common/entity/compute_state_domain";
 
 function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
diff --git a/src/panels/config/script/ha-config-script.js b/src/panels/config/script/ha-config-script.js
index 3fde65eb3b..0790d7d3be 100644
--- a/src/panels/config/script/ha-config-script.js
+++ b/src/panels/config/script/ha-config-script.js
@@ -1,12 +1,12 @@
-import "@polymer/app-route/app-route.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./ha-script-editor.js";
-import "./ha-script-picker.js";
+import "./ha-script-editor";
+import "./ha-script-picker";
 
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import computeStateDomain from "../../../common/entity/compute_state_domain.js";
+import computeStateName from "../../../common/entity/compute_state_name";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
 
 class HaConfigScript extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/script/ha-script-editor.js b/src/panels/config/script/ha-script-editor.js
index 34dd73a56a..67876c38f4 100644
--- a/src/panels/config/script/ha-script-editor.js
+++ b/src/panels/config/script/ha-script-editor.js
@@ -1,20 +1,20 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-fab/paper-fab.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-fab/paper-fab";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { h, render } from "preact";
 
-import "../../../layouts/ha-app-layout.js";
+import "../../../layouts/ha-app-layout";
 
-import Script from "../js/script.js";
-import unmountPreact from "../../../common/preact/unmount.js";
+import Script from "../js/script";
+import unmountPreact from "../../../common/preact/unmount";
 
-import computeObjectId from "../../../common/entity/compute_object_id.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import computeObjectId from "../../../common/entity/compute_object_id";
+import computeStateName from "../../../common/entity/compute_state_name";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 function ScriptEditor(mountEl, props, mergeEl) {
   return render(h(Script, props), mountEl, mergeEl);
diff --git a/src/panels/config/script/ha-script-picker.js b/src/panels/config/script/ha-script-picker.js
index 5055c9faeb..d69917f988 100644
--- a/src/panels/config/script/ha-script-picker.js
+++ b/src/panels/config/script/ha-script-picker.js
@@ -1,20 +1,20 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-fab/paper-fab.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-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 "../../../layouts/ha-app-layout.js";
+import "../../../layouts/ha-app-layout";
 
-import "../ha-config-section.js";
+import "../ha-config-section";
 
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import computeStateName from "../../../common/entity/compute_state_name";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/users/ha-config-users.js b/src/panels/config/users/ha-config-users.js
index 4e5791d53e..6d3f4d2de0 100644
--- a/src/panels/config/users/ha-config-users.js
+++ b/src/panels/config/users/ha-config-users.js
@@ -1,14 +1,14 @@
-import "@polymer/app-route/app-route.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/app-route/app-route";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
+import NavigateMixin from "../../../mixins/navigate-mixin";
 
-import "./ha-user-picker.js";
-import "./ha-user-editor.js";
-import { fireEvent } from "../../../common/dom/fire_event.js";
+import "./ha-user-picker";
+import "./ha-user-editor";
+import { fireEvent } from "../../../common/dom/fire_event";
 
 /*
  * @appliesMixin NavigateMixin
diff --git a/src/panels/config/users/ha-dialog-add-user.js b/src/panels/config/users/ha-dialog-add-user.js
index 0373738caf..65f25d7f1f 100644
--- a/src/panels/config/users/ha-dialog-add-user.js
+++ b/src/panels/config/users/ha-dialog-add-user.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../resources/ha-style.js";
+import "../../../resources/ha-style";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/users/ha-user-editor.js b/src/panels/config/users/ha-user-editor.js
index b45ad27701..5de48d3915 100644
--- a/src/panels/config/users/ha-user-editor.js
+++ b/src/panels/config/users/ha-user-editor.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../layouts/hass-subpage.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
+import "../../../layouts/hass-subpage";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import EventsMixin from "../../../mixins/events-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/config/users/ha-user-picker.js b/src/panels/config/users/ha-user-picker.js
index d09c1e7ecf..4c3d8e961d 100644
--- a/src/panels/config/users/ha-user-picker.js
+++ b/src/panels/config/users/ha-user-picker.js
@@ -1,15 +1,15 @@
-import "@polymer/paper-fab/paper-fab.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item-body.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-fab/paper-fab";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-item/paper-item-body";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../layouts/hass-subpage.js";
+import "../../../layouts/hass-subpage";
 
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import EventsMixin from "../../../mixins/events-mixin";
 
 let registeredDialog = false;
 
@@ -90,7 +90,7 @@ class HaUserPicker extends EventsMixin(
       this.fire("register-dialog", {
         dialogShowEvent: "show-add-user",
         dialogTag: "ha-dialog-add-user",
-        dialogImport: () => import("./ha-dialog-add-user.js"),
+        dialogImport: () => import("./ha-dialog-add-user"),
       });
     }
   }
diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index 832c8b7bf7..03ec58f05f 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/src/panels/config/zwave/ha-config-zwave.js
@@ -1,35 +1,35 @@
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-service-button.js";
-import "../../../components/ha-menu-button.js";
-import "../../../components/ha-service-description.js";
-import "../../../layouts/ha-app-layout.js";
-import "../../../resources/ha-style.js";
+import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-menu-button";
+import "../../../components/ha-service-description";
+import "../../../layouts/ha-app-layout";
+import "../../../resources/ha-style";
 
-import "../ha-config-section.js";
-import "../ha-form-style.js";
-import "./zwave-groups.js";
-import "./zwave-log.js";
-import "./zwave-network.js";
-import "./zwave-node-config.js";
-import "./zwave-usercodes.js";
-import "./zwave-values.js";
-import "./zwave-node-protection.js";
+import "../ha-config-section";
+import "../ha-form-style";
+import "./zwave-groups";
+import "./zwave-log";
+import "./zwave-network";
+import "./zwave-node-config";
+import "./zwave-usercodes";
+import "./zwave-values";
+import "./zwave-node-protection";
 
-import sortByName from "../../../common/entity/states_sort_by_name.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import computeStateDomain from "../../../common/entity/compute_state_domain.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
+import sortByName from "../../../common/entity/states_sort_by_name";
+import computeStateName from "../../../common/entity/compute_state_name";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -297,7 +297,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
             selected-node="[[selectedNode]]"
             protection="[[_protection]]"
           ></zwave-node-protection>
-        </template> 
+        </template>
 
         <!--User Codes-->
         <template is="dom-if" if="{{hasNodeUserCodes}}">
diff --git a/src/panels/config/zwave/zwave-groups.js b/src/panels/config/zwave/zwave-groups.js
index 45bde5d3f5..aca7718ffe 100644
--- a/src/panels/config/zwave/zwave-groups.js
+++ b/src/panels/config/zwave/zwave-groups.js
@@ -1,13 +1,13 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-service-button.js";
+import "../../../components/buttons/ha-call-service-button";
 
-import computeStateName from "../../../common/entity/compute_state_name.js";
+import computeStateName from "../../../common/entity/compute_state_name";
 
 class ZwaveGroups extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-log-dialog.js b/src/panels/config/zwave/zwave-log-dialog.js
index f2e9ed320b..799234ccdf 100644
--- a/src/panels/config/zwave/zwave-log-dialog.js
+++ b/src/panels/config/zwave/zwave-log-dialog.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../resources/ha-style.js";
+import "../../../resources/ha-style";
 
-import EventsMixin from "../../../mixins/events-mixin.js";
+import EventsMixin from "../../../mixins/events-mixin";
 
 class ZwaveLogDialog extends EventsMixin(PolymerElement) {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js
index ef6727f3ab..866869ca41 100644
--- a/src/panels/config/zwave/zwave-log.js
+++ b/src/panels/config/zwave/zwave-log.js
@@ -1,15 +1,15 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import EventsMixin from "../../../mixins/events-mixin.js";
-import isPwa from "../../../common/config/is_pwa.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import EventsMixin from "../../../mixins/events-mixin";
+import isPwa from "../../../common/config/is_pwa";
 
-import "../ha-config-section.js";
+import "../ha-config-section";
 
 let registeredDialog = false;
 
@@ -42,7 +42,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
           </paper-input>
         </div>
         <div class="card-actions">
-          <paper-button raised="true" on-click="_openLogWindow">Load</paper-button>   
+          <paper-button raised="true" on-click="_openLogWindow">Load</paper-button>
           <paper-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</paper-button>
       </paper-card>
     </ha-config-section>
@@ -133,7 +133,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
       this.fire("register-dialog", {
         dialogShowEvent: "show-ozwlog-dialog",
         dialogTag: "zwave-log-dialog",
-        dialogImport: () => import("./zwave-log-dialog.js"),
+        dialogImport: () => import("./zwave-log-dialog"),
       });
     }
   }
diff --git a/src/panels/config/zwave/zwave-network.js b/src/panels/config/zwave/zwave-network.js
index a22f390254..826a6dbc91 100644
--- a/src/panels/config/zwave/zwave-network.js
+++ b/src/panels/config/zwave/zwave-network.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
 
-import "../../../components/buttons/ha-call-api-button.js";
-import "../../../components/buttons/ha-call-service-button.js";
-import "../../../components/ha-service-description.js";
-import "../ha-config-section.js";
+import "../../../components/buttons/ha-call-api-button";
+import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-service-description";
+import "../ha-config-section";
 
 class ZwaveNetwork extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-node-config.js b/src/panels/config/zwave/zwave-node-config.js
index 5c659a91df..80743c5182 100644
--- a/src/panels/config/zwave/zwave-node-config.js
+++ b/src/panels/config/zwave/zwave-node-config.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-service-button.js";
+import "../../../components/buttons/ha-call-service-button";
 
 class ZwaveNodeConfig extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-node-protection.js b/src/panels/config/zwave/zwave-node-protection.js
index cc5a170513..c25be2a348 100644
--- a/src/panels/config/zwave/zwave-node-protection.js
+++ b/src/panels/config/zwave/zwave-node-protection.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-api-button.js";
+import "../../../components/buttons/ha-call-api-button";
 
 class ZwaveNodeProtection extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-usercodes.js b/src/panels/config/zwave/zwave-usercodes.js
index 0e1f2295b3..54440313ba 100644
--- a/src/panels/config/zwave/zwave-usercodes.js
+++ b/src/panels/config/zwave/zwave-usercodes.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-service-button.js";
+import "../../../components/buttons/ha-call-service-button";
 
 class ZwaveUsercodes extends PolymerElement {
   static get template() {
diff --git a/src/panels/config/zwave/zwave-values.js b/src/panels/config/zwave/zwave-values.js
index d5928c7a32..a1128bda58 100644
--- a/src/panels/config/zwave/zwave-values.js
+++ b/src/panels/config/zwave/zwave-values.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../../components/buttons/ha-call-service-button.js";
+import "../../../components/buttons/ha-call-service-button";
 
 class ZwaveValues extends PolymerElement {
   static get template() {
diff --git a/src/panels/custom/ha-panel-custom.js b/src/panels/custom/ha-panel-custom.js
index cea0b0507e..d0a60efae8 100644
--- a/src/panels/custom/ha-panel-custom.js
+++ b/src/panels/custom/ha-panel-custom.js
@@ -1,10 +1,10 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import NavigateMixin from "../../mixins/navigate-mixin.js";
-import loadCustomPanel from "../../util/custom-panel/load-custom-panel.js";
-import createCustomPanelElement from "../../util/custom-panel/create-custom-panel-element.js";
-import setCustomPanelProperties from "../../util/custom-panel/set-custom-panel-properties.js";
+import EventsMixin from "../../mixins/events-mixin";
+import NavigateMixin from "../../mixins/navigate-mixin";
+import loadCustomPanel from "../../util/custom-panel/load-custom-panel";
+import createCustomPanelElement from "../../util/custom-panel/create-custom-panel-element";
+import setCustomPanelProperties from "../../util/custom-panel/set-custom-panel-properties";
 
 /*
  * Mixins are used by ifram to communicate with main frontend.
diff --git a/src/panels/dev-event/events-list.js b/src/panels/dev-event/events-list.js
index f3c33190d9..249d060f91 100644
--- a/src/panels/dev-event/events-list.js
+++ b/src/panels/dev-event/events-list.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/dev-event/ha-panel-dev-event.js b/src/panels/dev-event/ha-panel-dev-event.js
index 7addfe31de..41f332bc06 100644
--- a/src/panels/dev-event/ha-panel-dev-event.js
+++ b/src/panels/dev-event/ha-panel-dev-event.js
@@ -1,17 +1,17 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-input/paper-textarea.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+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-menu-button.js";
-import "../../resources/ha-style.js";
-import "./events-list.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
+import "./events-list";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/dev-info/ha-loaded-components.js b/src/panels/dev-info/ha-loaded-components.js
index 3c42576ab6..30ec7f06be 100644
--- a/src/panels/dev-info/ha-loaded-components.js
+++ b/src/panels/dev-info/ha-loaded-components.js
@@ -1,11 +1,11 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/dev-info/ha-panel-dev-info.js b/src/panels/dev-info/ha-panel-dev-info.js
index 49c4bc30a6..bd827a6e4a 100644
--- a/src/panels/dev-info/ha-panel-dev-info.js
+++ b/src/panels/dev-info/ha-panel-dev-info.js
@@ -1,24 +1,24 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+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/buttons/ha-call-service-button.js";
-import "../../components/ha-menu-button.js";
-import "../../resources/ha-style.js";
+import "../../components/buttons/ha-call-service-button";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
 
-import formatDateTime from "../../common/datetime/format_date_time.js";
-import formatTime from "../../common/datetime/format_time.js";
+import formatDateTime from "../../common/datetime/format_date_time";
+import formatTime from "../../common/datetime/format_time";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 let registeredDialog = false;
 
@@ -311,7 +311,7 @@ class HaPanelDevInfo extends EventsMixin(LocalizeMixin(PolymerElement)) {
       this.fire("register-dialog", {
         dialogShowEvent: "show-loaded-components",
         dialogTag: "ha-loaded-components",
-        dialogImport: () => import("./ha-loaded-components.js"),
+        dialogImport: () => import("./ha-loaded-components"),
       });
     }
 
diff --git a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
index 7fddd12cd1..503bed8b18 100644
--- a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
+++ b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
@@ -1,16 +1,16 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-input/paper-textarea.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-button/paper-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-menu-button.js";
-import "../../resources/ha-style.js";
-import "../../util/app-localstorage-document.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
+import "../../util/app-localstorage-document";
 
 class HaPanelDevMqtt extends PolymerElement {
   static get template() {
diff --git a/src/panels/dev-service/ha-panel-dev-service.js b/src/panels/dev-service/ha-panel-dev-service.js
index b154d33aa7..7459810fc0 100644
--- a/src/panels/dev-service/ha-panel-dev-service.js
+++ b/src/panels/dev-service/ha-panel-dev-service.js
@@ -1,16 +1,16 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-input/paper-textarea.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-button/paper-button";
+import "@polymer/paper-input/paper-textarea";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../components/entity/ha-entity-picker.js";
-import "../../components/ha-menu-button.js";
-import "../../components/ha-service-picker.js";
-import "../../resources/ha-style.js";
-import "../../util/app-localstorage-document.js";
+import "../../components/entity/ha-entity-picker";
+import "../../components/ha-menu-button";
+import "../../components/ha-service-picker";
+import "../../resources/ha-style";
+import "../../util/app-localstorage-document";
 
 const ERROR_SENTINEL = {};
 class HaPanelDevService extends PolymerElement {
diff --git a/src/panels/dev-state/ha-panel-dev-state.js b/src/panels/dev-state/ha-panel-dev-state.js
index 339a62b330..4979fe85cf 100644
--- a/src/panels/dev-state/ha-panel-dev-state.js
+++ b/src/panels/dev-state/ha-panel-dev-state.js
@@ -1,17 +1,17 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-input/paper-textarea.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-button/paper-button";
+import "@polymer/paper-checkbox/paper-checkbox";
+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/entity/ha-entity-picker.js";
-import "../../components/ha-menu-button.js";
-import "../../resources/ha-style.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import "../../components/entity/ha-entity-picker";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
@@ -98,7 +98,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
             value='{{_state}}'
             class='state-input'
           ></paper-input>
-          <paper-textarea 
+          <paper-textarea
             label="State attributes (JSON, optional)"
             autocapitalize='none'
             autocomplete='off'
diff --git a/src/panels/dev-template/ha-panel-dev-template.js b/src/panels/dev-template/ha-panel-dev-template.js
index 5822c38b01..7f5436e60e 100644
--- a/src/panels/dev-template/ha-panel-dev-template.js
+++ b/src/panels/dev-template/ha-panel-dev-template.js
@@ -1,15 +1,15 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-input/paper-textarea.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { timeOut } from "@polymer/polymer/lib/utils/async.js";
-import { Debouncer } from "@polymer/polymer/lib/utils/debounce.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-input/paper-textarea";
+import "@polymer/paper-spinner/paper-spinner";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../components/ha-menu-button.js";
-import "../../resources/ha-style.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
 
 class HaPanelDevTemplate extends PolymerElement {
   static get template() {
diff --git a/src/panels/history/ha-panel-history.js b/src/panels/history/ha-panel-history.js
index 3b3732923c..94dc6bbd0f 100644
--- a/src/panels/history/ha-panel-history.js
+++ b/src/panels/history/ha-panel-history.js
@@ -1,23 +1,23 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@vaadin/vaadin-date-picker/vaadin-date-picker.js";
+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-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@vaadin/vaadin-date-picker/vaadin-date-picker";
 
-import "../../components/ha-menu-button.js";
-import "../../components/state-history-charts.js";
+import "../../components/ha-menu-button";
+import "../../components/state-history-charts";
 import "../../data/ha-state-history-data";
-import "../../resources/ha-date-picker-style.js";
-import "../../resources/ha-style.js";
+import "../../resources/ha-date-picker-style";
+import "../../resources/ha-style";
 
-import formatDate from "../../common/datetime/format_date.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import formatDate from "../../common/datetime/format_date";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/iframe/ha-panel-iframe.js b/src/panels/iframe/ha-panel-iframe.js
index c92211dfc3..4477738788 100644
--- a/src/panels/iframe/ha-panel-iframe.js
+++ b/src/panels/iframe/ha-panel-iframe.js
@@ -1,9 +1,9 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-menu-button.js";
-import "../../resources/ha-style.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
 
 class HaPanelIframe extends PolymerElement {
   static get template() {
diff --git a/src/panels/kiosk/ha-panel-kiosk.js b/src/panels/kiosk/ha-panel-kiosk.js
index 511b00a029..a10ddf1e6b 100644
--- a/src/panels/kiosk/ha-panel-kiosk.js
+++ b/src/panels/kiosk/ha-panel-kiosk.js
@@ -1,7 +1,7 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../layouts/partial-cards.js";
+import "../../layouts/partial-cards";
 
 class HaPanelKiosk extends PolymerElement {
   static get template() {
diff --git a/src/panels/logbook/ha-logbook-data.js b/src/panels/logbook/ha-logbook-data.js
index afd55b3447..8be479e4f8 100644
--- a/src/panels/logbook/ha-logbook-data.js
+++ b/src/panels/logbook/ha-logbook-data.js
@@ -1,4 +1,4 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 const DATA_CACHE = {};
 const ALL_ENTITIES = "*";
diff --git a/src/panels/logbook/ha-logbook.js b/src/panels/logbook/ha-logbook.js
index 8954052f43..7e633e412e 100644
--- a/src/panels/logbook/ha-logbook.js
+++ b/src/panels/logbook/ha-logbook.js
@@ -1,12 +1,12 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/iron-icon/iron-icon.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/iron-icon/iron-icon";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import formatTime from "../../common/datetime/format_time.js";
-import formatDate from "../../common/datetime/format_date.js";
-import EventsMixin from "../../mixins/events-mixin.js";
-import domainIcon from "../../common/entity/domain_icon.js";
+import formatTime from "../../common/datetime/format_time";
+import formatDate from "../../common/datetime/format_date";
+import EventsMixin from "../../mixins/events-mixin";
+import domainIcon from "../../common/entity/domain_icon";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/logbook/ha-panel-logbook.js b/src/panels/logbook/ha-panel-logbook.js
index ab6af17b63..a377b9f17e 100644
--- a/src/panels/logbook/ha-panel-logbook.js
+++ b/src/panels/logbook/ha-panel-logbook.js
@@ -1,23 +1,23 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@vaadin/vaadin-date-picker/vaadin-date-picker.js";
+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-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@vaadin/vaadin-date-picker/vaadin-date-picker";
 
-import "../../components/ha-menu-button.js";
-import "../../components/entity/ha-entity-picker.js";
-import "../../resources/ha-date-picker-style.js";
-import "../../resources/ha-style.js";
+import "../../components/ha-menu-button";
+import "../../components/entity/ha-entity-picker";
+import "../../resources/ha-date-picker-style";
+import "../../resources/ha-style";
 
-import "./ha-logbook-data.js";
-import "./ha-logbook.js";
+import "./ha-logbook-data";
+import "./ha-logbook";
 
-import formatDate from "../../common/datetime/format_date.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import formatDate from "../../common/datetime/format_date";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.js b/src/panels/lovelace/cards/hui-alarm-panel-card.js
index f14ac4b801..967234d737 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.js
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.js
@@ -1,258 +1,258 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import "../../../components/ha-label-badge.js";
-
-/*
- * @appliesMixin EventsMixin
- */
-
-const Icons = {
-  armed_away: "hass:security-lock",
-  armed_custom_bypass: "hass:security",
-  armed_home: "hass:security-home",
-  armed_night: "hass:security-home",
-  disarmed: "hass:verified",
-  pending: "hass:shield-outline",
-  triggered: "hass:bell-ring",
-};
-
-class HuiAlarmPanelCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-    <style>
-      ha-card {
-        padding-bottom: 16px;
-        position: relative;
-        --alarm-color-disarmed: var(--label-badge-green);
-        --alarm-color-pending: var(--label-badge-yellow);
-        --alarm-color-triggered: var(--label-badge-red);
-        --alarm-color-armed: var(--label-badge-red);
-        --alarm-color-autoarm: rgba(0, 153, 255, .1);
-        --alarm-state-color: var(--alarm-color-armed);
-        --base-unit: 15px;
-        font-size: calc(var(--base-unit));
-      }
-      ha-label-badge {
-        --ha-label-badge-color:  var(--alarm-state-color);
-        --label-badge-text-color: var(--alarm-state-color);
-        color: var(--alarm-state-color);
-        position: absolute;
-        right: 12px;
-        top: 12px;
-      }
-      .disarmed {
-        --alarm-state-color: var(--alarm-color-disarmed);
-      }
-      .triggered {
-        --alarm-state-color: var(--alarm-color-triggered);
-        animation: pulse 1s infinite;
-      }
-      .arming {
-        --alarm-state-color: var(--alarm-color-pending);
-        animation: pulse 1s infinite;
-      }
-      .pending {
-        --alarm-state-color: var(--alarm-color-pending);
-        animation: pulse 1s infinite;
-      }
-      @keyframes pulse {
-        0% {
-          --ha-label-badge-color: var(--alarm-state-color);
-        }
-        100% {
-          --ha-label-badge-color: rgba(255, 153, 0, 0.3);
-        }
-      }
-      paper-input {
-        margin: auto;
-        max-width: 200px;
-        font-size: calc(var(--base-unit));
-      }
-      .state {
-        margin-left: 16px;
-        font-size: calc(var(--base-unit) * 0.9);
-        position: relative;
-        bottom: 16px;
-        color: var(--alarm-state-color);
-        animation: none;
-      }
-      #keypad {
-        display: flex;
-        justify-content: center;
-      }
-      #keypad div {
-        display: flex;
-        flex-direction: column;
-      }
-      #keypad paper-button {
-        margin-bottom: 10%;
-        position: relative;
-        padding: calc(var(--base-unit));
-        font-size: calc(var(--base-unit) * 1.1);
-      }
-      .actions {
-        margin: 0 8px;
-        padding-top: 20px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        font-size: calc(var(--base-unit) * 1);
-      }
-      .actions paper-button {
-        min-width: calc(var(--base-unit) * 9);
-        color: var(--primary-color);
-      }
-      paper-button#disarm {
-        color: var(--google-red-500);
-      }
-      .not-found {
-        flex: 1;
-        background-color: yellow;
-        padding: 8px;
-      }
-    </style>
-    <ha-card
-      header$="[[_computeHeader(localize, _stateObj)]]"
-      class$="[[_computeClassName(_stateObj)]]"
-    >
-      <template is="dom-if" if="[[_stateObj]]">
-        <ha-label-badge
-          class$="[[_stateObj.state]]"
-          icon="[[_computeIcon(_stateObj)]]"
-          label="[[_stateIconLabel(_stateObj.state)]]"
-        ></ha-label-badge>
-        <template is="dom-if" if="[[_showActionToggle(_stateObj.state)]]">
-          <div id="armActions" class="actions">
-            <template is="dom-repeat" items="[[_config.states]]">
-              <paper-button noink raised id="[[item]]" on-click="_handleActionClick">[[_label(localize, item)]]</paper-button>
-            </template>
-          </div>
-        </template>
-        <template is="dom-if" if="[[!_showActionToggle(_stateObj.state)]]">
-          <div id="disarmActions" class="actions">
-            <paper-button noink raised id="disarm" on-click="_handleActionClick">[[_label(localize, "disarm")]]</paper-button>
-          </div>
-        </template>
-        <paper-input label="Alarm Code" type="password" value="[[_value]]"></paper-input>
-        <div id="keypad">
-          <div>
-            <paper-button noink raised value="1" on-click="_handlePadClick">1</paper-button>
-            <paper-button noink raised value="4" on-click="_handlePadClick">4</paper-button>
-            <paper-button noink raised value="7" on-click="_handlePadClick">7</paper-button>
-          </div>
-          <div>
-            <paper-button noink raised value="2" on-click="_handlePadClick">2</paper-button>
-            <paper-button noink raised value="5" on-click="_handlePadClick">5</paper-button>
-            <paper-button noink raised value="8" on-click="_handlePadClick">8</paper-button>
-            <paper-button noink raised value="0" on-click="_handlePadClick">0</paper-button>
-          </div>
-          <div>
-            <paper-button noink raised value="3" on-click="_handlePadClick">3</paper-button>
-            <paper-button noink raised value="6" on-click="_handlePadClick">6</paper-button>
-            <paper-button noink raised value="9" on-click="_handlePadClick">9</paper-button>
-            <paper-button noink raised value="clear" on-click="_handlePadClick">[[_label(localize, "clear_code")]]</paper-button>
-          </div>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div>Entity not available: [[_config.entity]]</div>
-      </template>
-    </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _value: {
-        type: String,
-        value: "",
-      },
-    };
-  }
-
-  getCardSize() {
-    return 4;
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.entity ||
-      config.entity.split(".")[0] !== "alarm_control_panel"
-    ) {
-      throw new Error("Invalid card configuration");
-    }
-
-    const defaults = {
-      states: ["arm_away", "arm_home"],
-    };
-
-    this._config = { ...defaults, ...config };
-    this._icons = Icons;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeHeader(localize, stateObj) {
-    if (!stateObj) return "";
-    return this._config.title
-      ? this._config.title
-      : this._label(localize, stateObj.state);
-  }
-
-  _computeIcon(stateObj) {
-    return this._icons[stateObj.state] || "hass:shield-outline";
-  }
-
-  _label(localize, state) {
-    return (
-      localize(`state.alarm_control_panel.${state}`) ||
-      localize(`ui.card.alarm_control_panel.${state}`)
-    );
-  }
-
-  _stateIconLabel(state) {
-    const stateLabel = state.split("_").pop();
-    return stateLabel === "disarmed" || stateLabel === "triggered"
-      ? ""
-      : stateLabel;
-  }
-
-  _showActionToggle(state) {
-    return state === "disarmed";
-  }
-
-  _computeClassName(stateObj) {
-    if (!stateObj) return "not-found";
-    return "";
-  }
-
-  _handlePadClick(e) {
-    const val = e.target.getAttribute("value");
-    this._value = val === "clear" ? "" : this._value + val;
-  }
-
-  _handleActionClick(e) {
-    this.hass.callService("alarm_control_panel", "alarm_" + e.target.id, {
-      entity_id: this._stateObj.entity_id,
-      code: this._value,
-    });
-    this._value = "";
-  }
-}
-
-customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import "../../../components/ha-label-badge";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+
+const Icons = {
+  armed_away: "hass:security-lock",
+  armed_custom_bypass: "hass:security",
+  armed_home: "hass:security-home",
+  armed_night: "hass:security-home",
+  disarmed: "hass:verified",
+  pending: "hass:shield-outline",
+  triggered: "hass:bell-ring",
+};
+
+class HuiAlarmPanelCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+    <style>
+      ha-card {
+        padding-bottom: 16px;
+        position: relative;
+        --alarm-color-disarmed: var(--label-badge-green);
+        --alarm-color-pending: var(--label-badge-yellow);
+        --alarm-color-triggered: var(--label-badge-red);
+        --alarm-color-armed: var(--label-badge-red);
+        --alarm-color-autoarm: rgba(0, 153, 255, .1);
+        --alarm-state-color: var(--alarm-color-armed);
+        --base-unit: 15px;
+        font-size: calc(var(--base-unit));
+      }
+      ha-label-badge {
+        --ha-label-badge-color:  var(--alarm-state-color);
+        --label-badge-text-color: var(--alarm-state-color);
+        color: var(--alarm-state-color);
+        position: absolute;
+        right: 12px;
+        top: 12px;
+      }
+      .disarmed {
+        --alarm-state-color: var(--alarm-color-disarmed);
+      }
+      .triggered {
+        --alarm-state-color: var(--alarm-color-triggered);
+        animation: pulse 1s infinite;
+      }
+      .arming {
+        --alarm-state-color: var(--alarm-color-pending);
+        animation: pulse 1s infinite;
+      }
+      .pending {
+        --alarm-state-color: var(--alarm-color-pending);
+        animation: pulse 1s infinite;
+      }
+      @keyframes pulse {
+        0% {
+          --ha-label-badge-color: var(--alarm-state-color);
+        }
+        100% {
+          --ha-label-badge-color: rgba(255, 153, 0, 0.3);
+        }
+      }
+      paper-input {
+        margin: auto;
+        max-width: 200px;
+        font-size: calc(var(--base-unit));
+      }
+      .state {
+        margin-left: 16px;
+        font-size: calc(var(--base-unit) * 0.9);
+        position: relative;
+        bottom: 16px;
+        color: var(--alarm-state-color);
+        animation: none;
+      }
+      #keypad {
+        display: flex;
+        justify-content: center;
+      }
+      #keypad div {
+        display: flex;
+        flex-direction: column;
+      }
+      #keypad paper-button {
+        margin-bottom: 10%;
+        position: relative;
+        padding: calc(var(--base-unit));
+        font-size: calc(var(--base-unit) * 1.1);
+      }
+      .actions {
+        margin: 0 8px;
+        padding-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        font-size: calc(var(--base-unit) * 1);
+      }
+      .actions paper-button {
+        min-width: calc(var(--base-unit) * 9);
+        color: var(--primary-color);
+      }
+      paper-button#disarm {
+        color: var(--google-red-500);
+      }
+      .not-found {
+        flex: 1;
+        background-color: yellow;
+        padding: 8px;
+      }
+    </style>
+    <ha-card
+      header$="[[_computeHeader(localize, _stateObj)]]"
+      class$="[[_computeClassName(_stateObj)]]"
+    >
+      <template is="dom-if" if="[[_stateObj]]">
+        <ha-label-badge
+          class$="[[_stateObj.state]]"
+          icon="[[_computeIcon(_stateObj)]]"
+          label="[[_stateIconLabel(_stateObj.state)]]"
+        ></ha-label-badge>
+        <template is="dom-if" if="[[_showActionToggle(_stateObj.state)]]">
+          <div id="armActions" class="actions">
+            <template is="dom-repeat" items="[[_config.states]]">
+              <paper-button noink raised id="[[item]]" on-click="_handleActionClick">[[_label(localize, item)]]</paper-button>
+            </template>
+          </div>
+        </template>
+        <template is="dom-if" if="[[!_showActionToggle(_stateObj.state)]]">
+          <div id="disarmActions" class="actions">
+            <paper-button noink raised id="disarm" on-click="_handleActionClick">[[_label(localize, "disarm")]]</paper-button>
+          </div>
+        </template>
+        <paper-input label="Alarm Code" type="password" value="[[_value]]"></paper-input>
+        <div id="keypad">
+          <div>
+            <paper-button noink raised value="1" on-click="_handlePadClick">1</paper-button>
+            <paper-button noink raised value="4" on-click="_handlePadClick">4</paper-button>
+            <paper-button noink raised value="7" on-click="_handlePadClick">7</paper-button>
+          </div>
+          <div>
+            <paper-button noink raised value="2" on-click="_handlePadClick">2</paper-button>
+            <paper-button noink raised value="5" on-click="_handlePadClick">5</paper-button>
+            <paper-button noink raised value="8" on-click="_handlePadClick">8</paper-button>
+            <paper-button noink raised value="0" on-click="_handlePadClick">0</paper-button>
+          </div>
+          <div>
+            <paper-button noink raised value="3" on-click="_handlePadClick">3</paper-button>
+            <paper-button noink raised value="6" on-click="_handlePadClick">6</paper-button>
+            <paper-button noink raised value="9" on-click="_handlePadClick">9</paper-button>
+            <paper-button noink raised value="clear" on-click="_handlePadClick">[[_label(localize, "clear_code")]]</paper-button>
+          </div>
+      </template>
+      <template is="dom-if" if="[[!_stateObj]]">
+        <div>Entity not available: [[_config.entity]]</div>
+      </template>
+    </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+      },
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _value: {
+        type: String,
+        value: "",
+      },
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  setConfig(config) {
+    if (
+      !config ||
+      !config.entity ||
+      config.entity.split(".")[0] !== "alarm_control_panel"
+    ) {
+      throw new Error("Invalid card configuration");
+    }
+
+    const defaults = {
+      states: ["arm_away", "arm_home"],
+    };
+
+    this._config = { ...defaults, ...config };
+    this._icons = Icons;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeHeader(localize, stateObj) {
+    if (!stateObj) return "";
+    return this._config.title
+      ? this._config.title
+      : this._label(localize, stateObj.state);
+  }
+
+  _computeIcon(stateObj) {
+    return this._icons[stateObj.state] || "hass:shield-outline";
+  }
+
+  _label(localize, state) {
+    return (
+      localize(`state.alarm_control_panel.${state}`) ||
+      localize(`ui.card.alarm_control_panel.${state}`)
+    );
+  }
+
+  _stateIconLabel(state) {
+    const stateLabel = state.split("_").pop();
+    return stateLabel === "disarmed" || stateLabel === "triggered"
+      ? ""
+      : stateLabel;
+  }
+
+  _showActionToggle(state) {
+    return state === "disarmed";
+  }
+
+  _computeClassName(stateObj) {
+    if (!stateObj) return "not-found";
+    return "";
+  }
+
+  _handlePadClick(e) {
+    const val = e.target.getAttribute("value");
+    this._value = val === "clear" ? "" : this._value + val;
+  }
+
+  _handleActionClick(e) {
+    this.hass.callService("alarm_control_panel", "alarm_" + e.target.id, {
+      entity_id: this._stateObj.entity_id,
+      code: this._value,
+    });
+    this._value = "";
+  }
+}
+
+customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);
diff --git a/src/panels/lovelace/cards/hui-conditional-card.ts b/src/panels/lovelace/cards/hui-conditional-card.ts
index 508cf50df5..0852483643 100644
--- a/src/panels/lovelace/cards/hui-conditional-card.ts
+++ b/src/panels/lovelace/cards/hui-conditional-card.ts
@@ -1,83 +1,83 @@
-import computeCardSize from "../common/compute-card-size.js";
-import createCardElement from "../common/create-card-element.js";
-import { HomeAssistant } from "../../../types.js";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-
-interface Condition {
-  entity: string;
-  state?: string;
-  state_not?: string;
-}
-
-interface Config extends LovelaceConfig {
-  card: LovelaceConfig;
-  conditions: Condition[];
-}
-
-class HuiConditionalCard extends HTMLElement implements LovelaceCard {
-  private _hass?: HomeAssistant;
-  private _config?: Config;
-  private _card?: LovelaceCard;
-
-  public setConfig(config) {
-    if (
-      !config.card ||
-      !config.conditions ||
-      !Array.isArray(config.conditions) ||
-      !config.conditions.every((c) => c.entity && (c.state || c.state_not))
-    ) {
-      throw new Error("Error in card configuration.");
-    }
-
-    if (this._card && this._card.parentElement) {
-      this.removeChild(this._card);
-    }
-
-    this._config = config;
-    this._card = createCardElement(config.card);
-    if (this._hass) {
-      this.hass = this._hass;
-    }
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._card) {
-      return;
-    }
-
-    const visible =
-      this._config &&
-      this._config.conditions.every((c) => {
-        if (!(c.entity in hass.states)) {
-          return false;
-        }
-        if (c.state) {
-          return hass.states[c.entity].state === c.state;
-        }
-        return hass.states[c.entity].state !== c.state_not;
-      });
-
-    if (visible) {
-      this._card.hass = hass;
-      if (!this._card.parentElement) {
-        this.appendChild(this._card);
-      }
-    } else if (this._card.parentElement) {
-      this.removeChild(this._card);
-    }
-  }
-
-  public getCardSize() {
-    return computeCardSize(this._card);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-conditional-card": HuiConditionalCard;
-  }
-}
-
-customElements.define("hui-conditional-card", HuiConditionalCard);
+import computeCardSize from "../common/compute-card-size";
+import createCardElement from "../common/create-card-element";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard, LovelaceConfig } from "../types";
+
+interface Condition {
+  entity: string;
+  state?: string;
+  state_not?: string;
+}
+
+interface Config extends LovelaceConfig {
+  card: LovelaceConfig;
+  conditions: Condition[];
+}
+
+class HuiConditionalCard extends HTMLElement implements LovelaceCard {
+  private _hass?: HomeAssistant;
+  private _config?: Config;
+  private _card?: LovelaceCard;
+
+  public setConfig(config) {
+    if (
+      !config.card ||
+      !config.conditions ||
+      !Array.isArray(config.conditions) ||
+      !config.conditions.every((c) => c.entity && (c.state || c.state_not))
+    ) {
+      throw new Error("Error in card configuration.");
+    }
+
+    if (this._card && this._card.parentElement) {
+      this.removeChild(this._card);
+    }
+
+    this._config = config;
+    this._card = createCardElement(config.card);
+    if (this._hass) {
+      this.hass = this._hass;
+    }
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+
+    if (!this._card) {
+      return;
+    }
+
+    const visible =
+      this._config &&
+      this._config.conditions.every((c) => {
+        if (!(c.entity in hass.states)) {
+          return false;
+        }
+        if (c.state) {
+          return hass.states[c.entity].state === c.state;
+        }
+        return hass.states[c.entity].state !== c.state_not;
+      });
+
+    if (visible) {
+      this._card.hass = hass;
+      if (!this._card.parentElement) {
+        this.appendChild(this._card);
+      }
+    } else if (this._card.parentElement) {
+      this.removeChild(this._card);
+    }
+  }
+
+  public getCardSize() {
+    return computeCardSize(this._card);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-conditional-card": HuiConditionalCard;
+  }
+}
+
+customElements.define("hui-conditional-card", HuiConditionalCard);
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index d8288198dd..2a27b2923f 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -1,187 +1,187 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import "../../../components/ha-card.js";
-import "../components/hui-entities-toggle.js";
-
-import { fireEvent } from "../../../common/dom/fire_event.js";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { HomeAssistant } from "../../../types.js";
-import { EntityConfig, EntityRow } from "../entity-rows/types.js";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import processConfigEntities from "../common/process-config-entities";
-import createRowElement from "../common/create-row-element.js";
-import computeDomain from "../../../common/entity/compute_domain.js";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
-
-interface ConfigEntity extends EntityConfig {
-  type?: string;
-  secondary_info: "entity-id" | "last-changed";
-  action_name?: string;
-  service?: string;
-  service_data?: object;
-  url?: string;
-}
-
-interface Config extends LovelaceConfig {
-  show_header_toggle?: boolean;
-  title?: string;
-  entities: ConfigEntity[];
-  theme?: string;
-}
-
-class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
-  protected _hass?: HomeAssistant;
-  protected _config?: Config;
-  protected _configEntities?: ConfigEntity[];
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
-      (element: unknown) => {
-        (element as EntityRow).hass = hass;
-      }
-    );
-    const entitiesToggle = this.shadowRoot!.querySelector(
-      "hui-entities-toggle"
-    );
-    if (entitiesToggle) {
-      (entitiesToggle as any).hass = hass;
-    }
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    if (!this._config) {
-      return 0;
-    }
-    // +1 for the header
-    return (this._config.title ? 1 : 0) + this._config.entities.length;
-  }
-
-  public setConfig(config: Config): void {
-    const entities = processConfigEntities(config.entities);
-
-    this._config = { theme: "default", ...config };
-    this._configEntities = entities;
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    if (this._hass && this._config) {
-      applyThemesOnElement(this, this._hass.themes, this._config.theme);
-    }
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config || !this._hass) {
-      return html``;
-    }
-    const { show_header_toggle, title } = this._config;
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card>
-        ${
-          !title && !show_header_toggle
-            ? html``
-            : html`
-            <div class='header'>
-              <div class="name">${title}</div>
-              ${
-                show_header_toggle === false
-                  ? html``
-                  : html`
-                  <hui-entities-toggle
-                    .hass="${this._hass}"
-                    .entities="${this._configEntities!.map(
-                      (conf) => conf.entity
-                    )}"
-                  ></hui-entities-toggle>`
-              }
-            </div>`
-        }
-        <div id="states">
-          ${this._configEntities!.map((entityConf) =>
-            this.renderEntity(entityConf)
-          )}
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          padding: 16px;
-        }
-        #states {
-          margin: -4px 0;
-        }
-        #states > * {
-          margin: 8px 0;
-        }
-        #states > div > * {
-          overflow: hidden;
-        }
-        .header {
-          @apply --paper-font-headline;
-          /* overwriting line-height +8 because entity-toggle can be 40px height,
-            compensating this with reduced padding */
-          line-height: 40px;
-          color: var(--primary-text-color);
-          padding: 4px 0 12px;
-          display: flex;
-          justify-content: space-between;
-        }
-        .header .name {
-          @apply --paper-font-common-nowrap;
-        }
-        .state-card-dialog {
-          cursor: pointer;
-        }
-      </style>
-    `;
-  }
-
-  private renderEntity(entityConf: ConfigEntity): TemplateResult {
-    const element = createRowElement(entityConf);
-    if (this._hass) {
-      element.hass = this._hass;
-    }
-    if (
-      entityConf.entity &&
-      !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
-    ) {
-      element.classList.add("state-card-dialog");
-      element.addEventListener("click", () => this._handleClick(entityConf));
-    }
-
-    return html`<div>${element}</div>`;
-  }
-
-  private _handleClick(entityConf: ConfigEntity): void {
-    const entityId = entityConf.entity;
-    fireEvent(this, "hass-more-info", { entityId });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-entities-card": HuiEntitiesCard;
-  }
-}
-
-customElements.define("hui-entities-card", HuiEntitiesCard);
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-card";
+import "../components/hui-entities-toggle";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { EntityConfig, EntityRow } from "../entity-rows/types";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import processConfigEntities from "../common/process-config-entities";
+import createRowElement from "../common/create-row-element";
+import computeDomain from "../../../common/entity/compute_domain";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+
+interface ConfigEntity extends EntityConfig {
+  type?: string;
+  secondary_info: "entity-id" | "last-changed";
+  action_name?: string;
+  service?: string;
+  service_data?: object;
+  url?: string;
+}
+
+interface Config extends LovelaceConfig {
+  show_header_toggle?: boolean;
+  title?: string;
+  entities: ConfigEntity[];
+  theme?: string;
+}
+
+class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  protected _hass?: HomeAssistant;
+  protected _config?: Config;
+  protected _configEntities?: ConfigEntity[];
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
+      (element: unknown) => {
+        (element as EntityRow).hass = hass;
+      }
+    );
+    const entitiesToggle = this.shadowRoot!.querySelector(
+      "hui-entities-toggle"
+    );
+    if (entitiesToggle) {
+      (entitiesToggle as any).hass = hass;
+    }
+  }
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    if (!this._config) {
+      return 0;
+    }
+    // +1 for the header
+    return (this._config.title ? 1 : 0) + this._config.entities.length;
+  }
+
+  public setConfig(config: Config): void {
+    const entities = processConfigEntities(config.entities);
+
+    this._config = { theme: "default", ...config };
+    this._configEntities = entities;
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (this._hass && this._config) {
+      applyThemesOnElement(this, this._hass.themes, this._config.theme);
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this._hass) {
+      return html``;
+    }
+    const { show_header_toggle, title } = this._config;
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card>
+        ${
+          !title && !show_header_toggle
+            ? html``
+            : html`
+            <div class='header'>
+              <div class="name">${title}</div>
+              ${
+                show_header_toggle === false
+                  ? html``
+                  : html`
+                  <hui-entities-toggle
+                    .hass="${this._hass}"
+                    .entities="${this._configEntities!.map(
+                      (conf) => conf.entity
+                    )}"
+                  ></hui-entities-toggle>`
+              }
+            </div>`
+        }
+        <div id="states">
+          ${this._configEntities!.map((entityConf) =>
+            this.renderEntity(entityConf)
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        #states {
+          margin: -4px 0;
+        }
+        #states > * {
+          margin: 8px 0;
+        }
+        #states > div > * {
+          overflow: hidden;
+        }
+        .header {
+          @apply --paper-font-headline;
+          /* overwriting line-height +8 because entity-toggle can be 40px height,
+            compensating this with reduced padding */
+          line-height: 40px;
+          color: var(--primary-text-color);
+          padding: 4px 0 12px;
+          display: flex;
+          justify-content: space-between;
+        }
+        .header .name {
+          @apply --paper-font-common-nowrap;
+        }
+        .state-card-dialog {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+
+  private renderEntity(entityConf: ConfigEntity): TemplateResult {
+    const element = createRowElement(entityConf);
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+    if (
+      entityConf.entity &&
+      !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
+    ) {
+      element.classList.add("state-card-dialog");
+      element.addEventListener("click", () => this._handleClick(entityConf));
+    }
+
+    return html`<div>${element}</div>`;
+  }
+
+  private _handleClick(entityConf: ConfigEntity): void {
+    const entityId = entityConf.entity;
+    fireEvent(this, "hass-more-info", { entityId });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-entities-card": HuiEntitiesCard;
+  }
+}
+
+customElements.define("hui-entities-card", HuiEntitiesCard);
diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts
index 62c8394539..69e66b226f 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-button-card.ts
@@ -6,21 +6,21 @@ import {
 } from "@polymer/lit-element";
 import { HassEntity } from "home-assistant-js-websocket";
 import { TemplateResult } from "lit-html";
-import { styleMap } from "lit-html/directives/styleMap.js";
+import { styleMap } from "lit-html/directives/styleMap";
 
-import "../../../components/ha-card.js";
+import "../../../components/ha-card";
 
-import toggleEntity from "../common/entity/toggle-entity.js";
-import isValidEntityId from "../../../common/entity/valid_entity_id.js";
-import stateIcon from "../../../common/entity/state_icon.js";
-import computeStateDomain from "../../../common/entity/compute_state_domain.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
-import { HomeAssistant, LightEntity } from "../../../types.js";
+import toggleEntity from "../common/entity/toggle-entity";
+import isValidEntityId from "../../../common/entity/valid_entity_id";
+import stateIcon from "../../../common/entity/state_icon";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
+import computeStateName from "../../../common/entity/compute_state_name";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { HomeAssistant, LightEntity } from "../../../types";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { LovelaceCard, LovelaceConfig } from "../types";
 import { longPress } from "../common/directives/long-press-directive";
-import { fireEvent } from "../../../common/dom/fire_event.js";
+import { fireEvent } from "../../../common/dom/fire_event";
 
 interface Config extends LovelaceConfig {
   entity: string;
diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.js b/src/panels/lovelace/cards/hui-entity-filter-card.js
index 9924e56142..c76299b00b 100644
--- a/src/panels/lovelace/cards/hui-entity-filter-card.js
+++ b/src/panels/lovelace/cards/hui-entity-filter-card.js
@@ -1,77 +1,77 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import createCardElement from "../common/create-card-element.js";
-import processConfigEntities from "../common/process-config-entities.js";
-
-function getEntities(hass, filterState, entities) {
-  return entities.filter((entityConf) => {
-    const stateObj = hass.states[entityConf.entity];
-    return stateObj && filterState.includes(stateObj.state);
-  });
-}
-
-class HuiEntitiesCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-    };
-  }
-
-  getCardSize() {
-    return this.lastChild ? this.lastChild.getCardSize() : 1;
-  }
-
-  setConfig(config) {
-    if (!config.state_filter || !Array.isArray(config.state_filter)) {
-      throw new Error("Incorrect filter config.");
-    }
-
-    this._config = config;
-    this._configEntities = processConfigEntities(config.entities);
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-      this._element = null;
-    }
-
-    const card = "card" in config ? { ...config.card } : {};
-    if (!card.type) card.type = "entities";
-    card.entities = [];
-
-    const element = createCardElement(card);
-    element._filterRawConfig = card;
-    this._updateCardConfig(element);
-
-    this._element = element;
-  }
-
-  _hassChanged() {
-    this._updateCardConfig(this._element);
-  }
-
-  _updateCardConfig(element) {
-    if (!element || element.tagName === "HUI-ERROR-CARD" || !this.hass) return;
-    const entitiesList = getEntities(
-      this.hass,
-      this._config.state_filter,
-      this._configEntities
-    );
-
-    if (entitiesList.length === 0 && this._config.show_empty === false) {
-      this.style.display = "none";
-      return;
-    }
-
-    this.style.display = "block";
-    element.setConfig({ ...element._filterRawConfig, entities: entitiesList });
-    element.isPanel = this.isPanel;
-    element.hass = this.hass;
-
-    // Attach element if it has never been attached.
-    if (!this.lastChild) this.appendChild(element);
-  }
-}
-customElements.define("hui-entity-filter-card", HuiEntitiesCard);
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import createCardElement from "../common/create-card-element";
+import processConfigEntities from "../common/process-config-entities";
+
+function getEntities(hass, filterState, entities) {
+  return entities.filter((entityConf) => {
+    const stateObj = hass.states[entityConf.entity];
+    return stateObj && filterState.includes(stateObj.state);
+  });
+}
+
+class HuiEntitiesCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+    };
+  }
+
+  getCardSize() {
+    return this.lastChild ? this.lastChild.getCardSize() : 1;
+  }
+
+  setConfig(config) {
+    if (!config.state_filter || !Array.isArray(config.state_filter)) {
+      throw new Error("Incorrect filter config.");
+    }
+
+    this._config = config;
+    this._configEntities = processConfigEntities(config.entities);
+
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+      this._element = null;
+    }
+
+    const card = "card" in config ? { ...config.card } : {};
+    if (!card.type) card.type = "entities";
+    card.entities = [];
+
+    const element = createCardElement(card);
+    element._filterRawConfig = card;
+    this._updateCardConfig(element);
+
+    this._element = element;
+  }
+
+  _hassChanged() {
+    this._updateCardConfig(this._element);
+  }
+
+  _updateCardConfig(element) {
+    if (!element || element.tagName === "HUI-ERROR-CARD" || !this.hass) return;
+    const entitiesList = getEntities(
+      this.hass,
+      this._config.state_filter,
+      this._configEntities
+    );
+
+    if (entitiesList.length === 0 && this._config.show_empty === false) {
+      this.style.display = "none";
+      return;
+    }
+
+    this.style.display = "block";
+    element.setConfig({ ...element._filterRawConfig, entities: entitiesList });
+    element.isPanel = this.isPanel;
+    element.hass = this.hass;
+
+    // Attach element if it has never been attached.
+    if (!this.lastChild) this.appendChild(element);
+  }
+}
+customElements.define("hui-entity-filter-card", HuiEntitiesCard);
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 4f04285ce8..5061ad26ba 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -1,273 +1,273 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import { HomeAssistant } from "../../../types.js";
-import { fireEvent } from "../../../common/dom/fire_event.js";
-import { TemplateResult } from "lit-html";
-import isValidEntityId from "../../../common/entity/valid_entity_id.js";
-
-import "../../../components/ha-card.js";
-
-interface Config extends LovelaceConfig {
-  entity: string;
-  title?: string;
-  unit_of_measurement?: string;
-  min?: number;
-  max?: number;
-  severity?: object;
-}
-
-const severityMap = {
-  red: "var(--label-badge-red)",
-  green: "var(--label-badge-green)",
-  yellow: "var(--label-badge-yellow)",
-  normal: "var(--label-badge-blue)",
-};
-
-class HuiGaugeCard extends LitElement implements LovelaceCard {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 2;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config || !config.entity) {
-      throw new Error("Invalid card configuration");
-    }
-    if (!isValidEntityId(config.entity)) {
-      throw new Error("Invalid Entity");
-    }
-    this._config = { min: 0, max: 100, ...config };
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config || !this.hass) {
-      return html``;
-    }
-    const stateObj = this.hass.states[this._config.entity];
-    let error;
-    if (!stateObj) {
-      error = "Entity not available: " + this._config.entity;
-    } else if (isNaN(Number(stateObj.state))) {
-      error = "Entity is non-numeric: " + this._config.entity;
-    }
-
-    return html`
-    ${this.renderStyle()}
-    <ha-card @click="${this._handleClick}">
-    ${
-      error
-        ? html`<div class="not-found">${error}</div>`
-        : html`
-          <div class='container'>
-            <div class='gauge-a'></div>
-            <div class='gauge-b'></div>
-            <div class='gauge-c' id='gauge'></div>
-            <div class='gauge-data'>
-              <div id='percent'>${stateObj.state}
-              ${this._config.unit_of_measurement ||
-                stateObj.attributes.unit_of_measurement ||
-                ""}
-              </div>
-              <div id='title'>${this._config.title}
-
-              </div>
-            </div>
-          </div>
-        `
-    }
-    </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    if (changedProps.get("_config")) {
-      return changedProps.get("_config") !== this._config;
-    }
-    return true;
-  }
-
-  protected updated(): void {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.shadowRoot!.getElementById("gauge")
-    ) {
-      return;
-    }
-    const stateObj = this.hass.states[this._config.entity];
-    if (isNaN(Number(stateObj.state))) {
-      return;
-    }
-
-    const turn = this._translateTurn(Number(stateObj.state), this._config);
-
-    this.shadowRoot!.getElementById(
-      "gauge"
-    )!.style.cssText = `transform: rotate(${turn}turn); background-color: ${this._computeSeverity(
-      stateObj.state,
-      this._config.severity!
-    )}`;
-
-    (this.shadowRoot!.querySelector(
-      "ha-card"
-    )! as HTMLElement).style.setProperty(
-      "--base-unit",
-      this._computeBaseUnit()
-    );
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          --base-unit: 50px;
-          height: calc(var(--base-unit)*3);
-          position: relative;
-          cursor: pointer;
-        }
-        .container{
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          position: absolute;
-          top: calc(var(--base-unit)*1.5);
-          left: 50%;
-          overflow: hidden;
-          text-align: center;
-          transform: translate(-50%, -50%);
-        }
-        .gauge-a{
-          z-index: 1;
-          position: absolute;
-          background-color: var(--primary-background-color);
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          top: 0%;
-          border-radius:calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
-        }
-        .gauge-b{
-          z-index: 3;
-          position: absolute;
-          background-color: var(--paper-card-background-color);
-          width: calc(var(--base-unit) * 2.5);
-          height: calc(var(--base-unit) * 1.25);
-          top: calc(var(--base-unit) * 0.75);
-          margin-left: calc(var(--base-unit) * 0.75);
-          margin-right: auto;
-          border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
-        }
-        .gauge-c{
-          z-index: 2;
-          position: absolute;
-          background-color: var(--label-badge-blue);
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          top: calc(var(--base-unit) * 2);
-          margin-left: auto;
-          margin-right: auto;
-          border-radius: 0px 0px calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) ;
-          transform-origin: center top;
-          transition: all 1.3s ease-in-out;
-        }
-        .gauge-data{
-          z-index: 4;
-          color: var(--primary-text-color);
-          line-height: calc(var(--base-unit) * 0.3);
-          position: absolute;
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2.1);
-          top: calc(var(--base-unit) * 1.2);
-          margin-left: auto;
-          margin-right: auto;
-          transition: all 1s ease-out;
-        }
-        .gauge-data #percent{
-          font-size: calc(var(--base-unit) * 0.55);
-        }
-        .gauge-data #title{
-          padding-top: calc(var(--base-unit) * 0.15);
-          font-size: calc(var(--base-unit) * 0.30);
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  private _computeSeverity(stateValue: string, sections: object): string {
-    const numberValue = Number(stateValue);
-
-    if (!sections) {
-      return severityMap.normal;
-    }
-
-    const sectionsArray = Object.keys(sections);
-    const sortable = sectionsArray.map((severity) => [
-      severity,
-      sections[severity],
-    ]);
-
-    for (const severity of sortable) {
-      if (severityMap[severity[0]] == null || isNaN(severity[1])) {
-        return severityMap.normal;
-      }
-    }
-    sortable.sort((a, b) => a[1] - b[1]);
-
-    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
-      return severityMap[sortable[0][0]];
-    }
-    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
-      return severityMap[sortable[1][0]];
-    }
-    if (numberValue >= sortable[2][1]) {
-      return severityMap[sortable[2][0]];
-    }
-    return severityMap.normal;
-  }
-
-  private _translateTurn(value: number, config: Config): number {
-    const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
-    return (
-      (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
-    );
-  }
-
-  private _computeBaseUnit(): string {
-    return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
-  }
-
-  private _handleClick(): void {
-    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-gauge-card": HuiGaugeCard;
-  }
-}
-
-customElements.define("hui-gauge-card", HuiGaugeCard);
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { TemplateResult } from "lit-html";
+import isValidEntityId from "../../../common/entity/valid_entity_id";
+
+import "../../../components/ha-card";
+
+interface Config extends LovelaceConfig {
+  entity: string;
+  title?: string;
+  unit_of_measurement?: string;
+  min?: number;
+  max?: number;
+  severity?: object;
+}
+
+const severityMap = {
+  red: "var(--label-badge-red)",
+  green: "var(--label-badge-green)",
+  yellow: "var(--label-badge-yellow)",
+  normal: "var(--label-badge-blue)",
+};
+
+class HuiGaugeCard extends LitElement implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid card configuration");
+    }
+    if (!isValidEntityId(config.entity)) {
+      throw new Error("Invalid Entity");
+    }
+    this._config = { min: 0, max: 100, ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+    const stateObj = this.hass.states[this._config.entity];
+    let error;
+    if (!stateObj) {
+      error = "Entity not available: " + this._config.entity;
+    } else if (isNaN(Number(stateObj.state))) {
+      error = "Entity is non-numeric: " + this._config.entity;
+    }
+
+    return html`
+    ${this.renderStyle()}
+    <ha-card @click="${this._handleClick}">
+    ${
+      error
+        ? html`<div class="not-found">${error}</div>`
+        : html`
+          <div class='container'>
+            <div class='gauge-a'></div>
+            <div class='gauge-b'></div>
+            <div class='gauge-c' id='gauge'></div>
+            <div class='gauge-data'>
+              <div id='percent'>${stateObj.state}
+              ${this._config.unit_of_measurement ||
+                stateObj.attributes.unit_of_measurement ||
+                ""}
+              </div>
+              <div id='title'>${this._config.title}
+
+              </div>
+            </div>
+          </div>
+        `
+    }
+    </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    if (changedProps.get("_config")) {
+      return changedProps.get("_config") !== this._config;
+    }
+    return true;
+  }
+
+  protected updated(): void {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.shadowRoot!.getElementById("gauge")
+    ) {
+      return;
+    }
+    const stateObj = this.hass.states[this._config.entity];
+    if (isNaN(Number(stateObj.state))) {
+      return;
+    }
+
+    const turn = this._translateTurn(Number(stateObj.state), this._config);
+
+    this.shadowRoot!.getElementById(
+      "gauge"
+    )!.style.cssText = `transform: rotate(${turn}turn); background-color: ${this._computeSeverity(
+      stateObj.state,
+      this._config.severity!
+    )}`;
+
+    (this.shadowRoot!.querySelector(
+      "ha-card"
+    )! as HTMLElement).style.setProperty(
+      "--base-unit",
+      this._computeBaseUnit()
+    );
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          --base-unit: 50px;
+          height: calc(var(--base-unit)*3);
+          position: relative;
+          cursor: pointer;
+        }
+        .container{
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          position: absolute;
+          top: calc(var(--base-unit)*1.5);
+          left: 50%;
+          overflow: hidden;
+          text-align: center;
+          transform: translate(-50%, -50%);
+        }
+        .gauge-a{
+          z-index: 1;
+          position: absolute;
+          background-color: var(--primary-background-color);
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          top: 0%;
+          border-radius:calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
+        }
+        .gauge-b{
+          z-index: 3;
+          position: absolute;
+          background-color: var(--paper-card-background-color);
+          width: calc(var(--base-unit) * 2.5);
+          height: calc(var(--base-unit) * 1.25);
+          top: calc(var(--base-unit) * 0.75);
+          margin-left: calc(var(--base-unit) * 0.75);
+          margin-right: auto;
+          border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
+        }
+        .gauge-c{
+          z-index: 2;
+          position: absolute;
+          background-color: var(--label-badge-blue);
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          top: calc(var(--base-unit) * 2);
+          margin-left: auto;
+          margin-right: auto;
+          border-radius: 0px 0px calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) ;
+          transform-origin: center top;
+          transition: all 1.3s ease-in-out;
+        }
+        .gauge-data{
+          z-index: 4;
+          color: var(--primary-text-color);
+          line-height: calc(var(--base-unit) * 0.3);
+          position: absolute;
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2.1);
+          top: calc(var(--base-unit) * 1.2);
+          margin-left: auto;
+          margin-right: auto;
+          transition: all 1s ease-out;
+        }
+        .gauge-data #percent{
+          font-size: calc(var(--base-unit) * 0.55);
+        }
+        .gauge-data #title{
+          padding-top: calc(var(--base-unit) * 0.15);
+          font-size: calc(var(--base-unit) * 0.30);
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  private _computeSeverity(stateValue: string, sections: object): string {
+    const numberValue = Number(stateValue);
+
+    if (!sections) {
+      return severityMap.normal;
+    }
+
+    const sectionsArray = Object.keys(sections);
+    const sortable = sectionsArray.map((severity) => [
+      severity,
+      sections[severity],
+    ]);
+
+    for (const severity of sortable) {
+      if (severityMap[severity[0]] == null || isNaN(severity[1])) {
+        return severityMap.normal;
+      }
+    }
+    sortable.sort((a, b) => a[1] - b[1]);
+
+    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
+      return severityMap[sortable[0][0]];
+    }
+    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
+      return severityMap[sortable[1][0]];
+    }
+    if (numberValue >= sortable[2][1]) {
+      return severityMap[sortable[2][0]];
+    }
+    return severityMap.normal;
+  }
+
+  private _translateTurn(value: number, config: Config): number {
+    const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
+    return (
+      (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
+    );
+  }
+
+  private _computeBaseUnit(): string {
+    return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
+  }
+
+  private _handleClick(): void {
+    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-gauge-card": HuiGaugeCard;
+  }
+}
+
+customElements.define("hui-gauge-card", HuiGaugeCard);
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 14a1ccf554..0bda6acae7 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -4,25 +4,25 @@ import {
   PropertyValues,
   PropertyDeclarations,
 } from "@polymer/lit-element";
-import { classMap } from "lit-html/directives/classMap.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import processConfigEntities from "../common/process-config-entities";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
-
-import toggleEntity from "../common/entity/toggle-entity.js";
-
-import "../../../components/entity/state-badge.js";
-import "../../../components/ha-card.js";
-import "../../../components/ha-icon.js";
-
-import { fireEvent } from "../../../common/dom/fire_event.js";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { HomeAssistant } from "../../../types.js";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import { longPress } from "../common/directives/long-press-directive";
 import { TemplateResult } from "lit-html";
+import { classMap } from "lit-html/directives/classMap";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import computeStateName from "../../../common/entity/compute_state_name";
+import processConfigEntities from "../common/process-config-entities";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+
+import toggleEntity from "../common/entity/toggle-entity";
+
+import "../../../components/entity/state-badge";
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { longPress } from "../common/directives/long-press-directive";
 
 interface EntityConfig {
   name: string;
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js
index 7a3f4dfdb8..66e56b326d 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.js
+++ b/src/panels/lovelace/cards/hui-history-graph-card.js
@@ -1,86 +1,86 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-import "../../../components/state-history-charts.js";
-import "../../../data/ha-state-history-data";
-
-import processConfigEntities from "../common/process-config-entities.js";
-
-class HuiHistoryGraphCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          padding: 16px;
-        }
-        ha-card[header] {
-          padding-top: 0;
-        }
-      </style>
-
-      <ha-card header$='[[_config.title]]'>
-        <ha-state-history-data
-          hass="[[hass]]"
-          filter-type="recent-entity"
-          entity-id="[[_entities]]"
-          data="{{_stateHistory}}"
-          is-loading="{{_stateHistoryLoading}}"
-          cache-config="[[_cacheConfig]]"
-        ></ha-state-history-data>
-        <state-history-charts
-          hass="[[hass]]"
-          history-data="[[_stateHistory]]"
-          is-loading-data="[[_stateHistoryLoading]]"
-          names="[[_names]]"
-          up-to-now
-          no-single
-        ></state-history-charts>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _names: Object,
-      _entities: Array,
-
-      _stateHistory: Object,
-      _stateHistoryLoading: Boolean,
-      _cacheConfig: Object,
-    };
-  }
-
-  getCardSize() {
-    return 4;
-  }
-
-  setConfig(config) {
-    const entities = processConfigEntities(config.entities);
-
-    this._config = config;
-
-    const _entities = [];
-    const _names = {};
-    for (const entity of entities) {
-      _entities.push(entity.entity);
-      if (entity.name) {
-        _names[entity.entity] = entity.name;
-      }
-    }
-
-    this.setProperties({
-      _cacheConfig: {
-        cacheKey: _entities.sort().join(),
-        hoursToShow: config.hours_to_show || 24,
-        refresh: config.refresh_interval || 0,
-      },
-      _entities,
-      _names,
-    });
-  }
-}
-
-customElements.define("hui-history-graph-card", HuiHistoryGraphCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+import "../../../components/state-history-charts";
+import "../../../data/ha-state-history-data";
+
+import processConfigEntities from "../common/process-config-entities";
+
+class HuiHistoryGraphCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        ha-card[header] {
+          padding-top: 0;
+        }
+      </style>
+
+      <ha-card header$='[[_config.title]]'>
+        <ha-state-history-data
+          hass="[[hass]]"
+          filter-type="recent-entity"
+          entity-id="[[_entities]]"
+          data="{{_stateHistory}}"
+          is-loading="{{_stateHistoryLoading}}"
+          cache-config="[[_cacheConfig]]"
+        ></ha-state-history-data>
+        <state-history-charts
+          hass="[[hass]]"
+          history-data="[[_stateHistory]]"
+          is-loading-data="[[_stateHistoryLoading]]"
+          names="[[_names]]"
+          up-to-now
+          no-single
+        ></state-history-charts>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _names: Object,
+      _entities: Array,
+
+      _stateHistory: Object,
+      _stateHistoryLoading: Boolean,
+      _cacheConfig: Object,
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  setConfig(config) {
+    const entities = processConfigEntities(config.entities);
+
+    this._config = config;
+
+    const _entities = [];
+    const _names = {};
+    for (const entity of entities) {
+      _entities.push(entity.entity);
+      if (entity.name) {
+        _names[entity.entity] = entity.name;
+      }
+    }
+
+    this.setProperties({
+      _cacheConfig: {
+        cacheKey: _entities.sort().join(),
+        hoursToShow: config.hours_to_show || 24,
+        refresh: config.refresh_interval || 0,
+      },
+      _entities,
+      _names,
+    });
+  }
+}
+
+customElements.define("hui-history-graph-card", HuiHistoryGraphCard);
diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index ba9d1dff0f..3559e4cdb1 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -1,50 +1,50 @@
-import { html } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import computeCardSize from "../common/compute-card-size.js";
-
-import { HuiStackCard } from "./hui-stack-card";
-
-class HuiHorizontalStackCard extends HuiStackCard {
-  public getCardSize(): number {
-    let totalSize = 0;
-
-    if (this._cards) {
-      for (const element of this._cards) {
-        const elementSize = computeCardSize(element);
-        totalSize = elementSize > totalSize ? elementSize : totalSize;
-      }
-    }
-
-    return totalSize;
-  }
-
-  protected renderStyle(): TemplateResult {
-    return html`
-      <style>
-        #root {
-          display: flex;
-        }
-        #root > * {
-          flex: 1 1 0;
-          margin: 0 4px;
-          min-width: 0;
-        }
-        #root > *:first-child {
-          margin-left: 0;
-        }
-        #root > *:last-child {
-          margin-right: 0;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-horitzontal-stack-card": HuiHorizontalStackCard;
-  }
-}
-
-customElements.define("hui-horizontal-stack-card", HuiHorizontalStackCard);
+import { html } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import computeCardSize from "../common/compute-card-size";
+
+import { HuiStackCard } from "./hui-stack-card";
+
+class HuiHorizontalStackCard extends HuiStackCard {
+  public getCardSize(): number {
+    let totalSize = 0;
+
+    if (this._cards) {
+      for (const element of this._cards) {
+        const elementSize = computeCardSize(element);
+        totalSize = elementSize > totalSize ? elementSize : totalSize;
+      }
+    }
+
+    return totalSize;
+  }
+
+  protected renderStyle(): TemplateResult {
+    return html`
+      <style>
+        #root {
+          display: flex;
+        }
+        #root > * {
+          flex: 1 1 0;
+          margin: 0 4px;
+          min-width: 0;
+        }
+        #root > *:first-child {
+          margin-left: 0;
+        }
+        #root > *:last-child {
+          margin-right: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-horitzontal-stack-card": HuiHorizontalStackCard;
+  }
+}
+
+customElements.define("hui-horizontal-stack-card", HuiHorizontalStackCard);
diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 6530a7c13d..11c96a22fe 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -1,80 +1,80 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-
-import "../../../components/ha-card.js";
-
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceConfig {
-  aspect_ratio?: string;
-  title?: string;
-  url: string;
-}
-
-export class HuiIframeCard extends LitElement implements LovelaceCard {
-  protected _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 1 + this.offsetHeight / 50;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.url) {
-      throw new Error("URL required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card .header="${this._config.title}">
-        <div id="root">
-          <iframe src="${this._config.url}"></iframe>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        #root {
-          width: 100%;
-          position: relative;
-          padding-top: ${this._config!.aspect_ratio || "50%"};
-        }
-        iframe {
-          position: absolute;
-          border: none;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-iframe-card": HuiIframeCard;
-  }
-}
-
-customElements.define("hui-iframe-card", HuiIframeCard);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+
+import "../../../components/ha-card";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceConfig {
+  aspect_ratio?: string;
+  title?: string;
+  url: string;
+}
+
+export class HuiIframeCard extends LitElement implements LovelaceCard {
+  protected _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 1 + this.offsetHeight / 50;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.url) {
+      throw new Error("URL required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this._config.title}">
+        <div id="root">
+          <iframe src="${this._config.url}"></iframe>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        #root {
+          width: 100%;
+          position: relative;
+          padding-top: ${this._config!.aspect_ratio || "50%"};
+        }
+        iframe {
+          position: absolute;
+          border: none;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-iframe-card": HuiIframeCard;
+  }
+}
+
+customElements.define("hui-iframe-card", HuiIframeCard);
diff --git a/src/panels/lovelace/cards/hui-legacy-wrapper-card.js b/src/panels/lovelace/cards/hui-legacy-wrapper-card.js
index dda181d13f..b9903dd697 100644
--- a/src/panels/lovelace/cards/hui-legacy-wrapper-card.js
+++ b/src/panels/lovelace/cards/hui-legacy-wrapper-card.js
@@ -1,57 +1,57 @@
-import createErrorCardConfig from "../common/create-error-card-config.js";
-import computeDomain from "../../../common/entity/compute_domain.js";
-
-export default class LegacyWrapperCard extends HTMLElement {
-  constructor(tag, domain) {
-    super();
-    this._tag = tag.toUpperCase();
-    this._domain = domain;
-    this._element = null;
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!config.entity) {
-      throw new Error("No entity specified");
-    }
-
-    if (computeDomain(config.entity) !== this._domain) {
-      throw new Error(
-        `Specified entity needs to be of domain ${this._domain}.`
-      );
-    }
-
-    this._config = config;
-  }
-
-  set hass(hass) {
-    const entityId = this._config.entity;
-
-    if (entityId in hass.states) {
-      this._ensureElement(this._tag);
-      this.lastChild.hass = hass;
-      this.lastChild.stateObj = hass.states[entityId];
-    } else {
-      this._ensureElement("HUI-ERROR-CARD");
-      this.lastChild.setConfig(
-        createErrorCardConfig(
-          `No state available for ${entityId}`,
-          this._config
-        )
-      );
-    }
-  }
-
-  _ensureElement(tag) {
-    if (this.lastChild && this.lastChild.tagName === tag) return;
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    this.appendChild(document.createElement(tag));
-  }
-}
+import createErrorCardConfig from "../common/create-error-card-config";
+import computeDomain from "../../../common/entity/compute_domain";
+
+export default class LegacyWrapperCard extends HTMLElement {
+  constructor(tag, domain) {
+    super();
+    this._tag = tag.toUpperCase();
+    this._domain = domain;
+    this._element = null;
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config.entity) {
+      throw new Error("No entity specified");
+    }
+
+    if (computeDomain(config.entity) !== this._domain) {
+      throw new Error(
+        `Specified entity needs to be of domain ${this._domain}.`
+      );
+    }
+
+    this._config = config;
+  }
+
+  set hass(hass) {
+    const entityId = this._config.entity;
+
+    if (entityId in hass.states) {
+      this._ensureElement(this._tag);
+      this.lastChild.hass = hass;
+      this.lastChild.stateObj = hass.states[entityId];
+    } else {
+      this._ensureElement("HUI-ERROR-CARD");
+      this.lastChild.setConfig(
+        createErrorCardConfig(
+          `No state available for ${entityId}`,
+          this._config
+        )
+      );
+    }
+  }
+
+  _ensureElement(tag) {
+    if (this.lastChild && this.lastChild.tagName === tag) return;
+
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    this.appendChild(document.createElement(tag));
+  }
+}
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index cacacc7efc..53f8dfdee0 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -1,327 +1,327 @@
-import {
-  html,
-  LitElement,
-  PropertyValues,
-  PropertyDeclarations,
-} from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event.js";
-import { styleMap } from "lit-html/directives/styleMap.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import stateIcon from "../../../common/entity/state_icon.js";
-import { jQuery } from "../../../resources/jquery";
-
-import "../../../components/ha-card.js";
-import "../../../components/ha-icon.js";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
-
-import { HomeAssistant, LightEntity } from "../../../types.js";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import { longPress } from "../common/directives/long-press-directive";
-import { TemplateResult } from "lit-html";
-
-const lightConfig = {
-  radius: 80,
-  step: 1,
-  circleShape: "pie",
-  startAngle: 315,
-  width: 5,
-  min: 1,
-  max: 100,
-  sliderType: "min-range",
-  lineCap: "round",
-  handleSize: "+12",
-  showTooltip: false,
-};
-
-interface Config extends LovelaceConfig {
-  entity: string;
-  name?: string;
-}
-
-export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-  private _brightnessTimout?: number;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 2;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.entity || config.entity.split(".")[0] !== "light") {
-      throw new Error("Specify an entity from within the light domain.");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-
-    const stateObj = this.hass.states[this._config!.entity] as LightEntity;
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card>
-        ${
-          !stateObj
-            ? html`
-              <div class="not-found">Entity not available: ${
-                this._config.entity
-              }</div>`
-            : html`
-              <div id="light"></div>
-              <div id="tooltip">
-                <div class="icon-state">
-                  <ha-icon
-                    data-state="${stateObj.state}"
-                    .icon="${stateIcon(stateObj)}"
-                    style="${styleMap({
-                      filter: this._computeBrightness(stateObj),
-                      color: this._computeColor(stateObj),
-                    })}"
-                    @ha-click="${() => this._handleClick(false)}"
-                    @ha-hold="${() => this._handleClick(true)}"
-                    .longPress="${longPress()}"
-                  ></ha-icon>
-                  <div
-                    class="brightness"
-                    @ha-click="${() => this._handleClick(false)}"
-                    @ha-hold="${() => this._handleClick(true)}"
-                    .longPress="${longPress()}"
-                  ></div>
-                  <div class="name">${this._config.name ||
-                    computeStateName(stateObj)}</div>
-                </div>
-              </div>
-            `
-        }
-
-      </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    return (changedProps as unknown) as boolean;
-  }
-
-  protected firstUpdated(): void {
-    const brightness = this.hass!.states[this._config!.entity].attributes
-      .brightness;
-    jQuery("#light", this.shadowRoot).roundSlider({
-      ...lightConfig,
-      change: (value) => this._setBrightness(value),
-      drag: (value) => this._dragEvent(value),
-      start: () => this._showBrightness(),
-      stop: () => this._hideBrightness(),
-    });
-    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
-      (Math.round((brightness / 254) * 100) || 0) + "%";
-  }
-
-  protected updated(): void {
-    const attrs = this.hass!.states[this._config!.entity].attributes;
-
-    jQuery("#light", this.shadowRoot).roundSlider({
-      value: Math.round((attrs.brightness / 254) * 100) || 0,
-    });
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-    ${roundSliderStyle}
-      <style>
-        :host {
-          display: block;
-        }
-        ha-card {
-          position: relative;
-          overflow: hidden;
-          --brightness-font-color: white;
-          --brightness-font-text-shadow:
-            -1px -1px 0 #000,
-            1px -1px 0 #000,
-            -1px 1px 0 #000,
-            1px 1px 0 #000;
-          --name-font-size: 1.2rem;
-          --brightness-font-size: 1.2rem;
-          --rail-border-color: transparent;
-        }
-        #tooltip {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: 100%;
-          text-align: center;
-          z-index: 15;
-        }
-        .icon-state {
-          display: block;
-          margin: auto;
-          width: 100%;
-          height: 100%;
-          transform: translate(0,25%);
-        }
-        #light {
-          margin: 0 auto;
-          padding-top: 16px;
-          padding-bottom: 16px;
-        }
-        #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
-          z-index: 20 !important;
-        }
-        #light .rs-range-color  {
-          background-color: var(--primary-color);
-        }
-        #light .rs-path-color  {
-            background-color: var(--disabled-text-color);
-        }
-        #light .rs-handle  {
-            background-color: var(--paper-card-background-color, white);
-            padding: 7px;
-            border: 2px solid var(--disabled-text-color);
-        }
-        #light .rs-handle.rs-focus  {
-            border-color:var(--primary-color);
-        }
-        #light .rs-handle:after  {
-            border-color: var(--primary-color);
-            background-color: var(--primary-color);
-        }
-        #light .rs-border  {
-          border-color: var(--rail-border-color);
-        }
-        #light .rs-inner.rs-bg-color.rs-border,
-        #light .rs-overlay.rs-transition.rs-bg-color {
-          background-color: var(--paper-card-background-color, white);
-        }
-        ha-icon {
-          margin: auto;
-          width: 76px;
-          height: 76px;
-          color: var(--paper-item-icon-color, #44739e);
-          cursor: pointer;
-        }
-        ha-icon[data-state=on] {
-          color: var(--paper-item-icon-active-color, #FDD835);
-        }
-        ha-icon[data-state=unavailable] {
-          color: var(--state-icon-unavailable-color);
-        }
-        .name {
-          padding-top: 40px;
-          font-size: var(--name-font-size);
-        }
-        .brightness {
-          font-size: var(--brightness-font-size);
-          position: absolute;
-          margin: 0 auto;
-          left: 50%;
-          top: 10%;
-          transform: translate(-50%);
-          opacity: 0;
-          transition: opacity .5s ease-in-out;
-          -moz-transition: opacity .5s ease-in-out;
-          -webkit-transition: opacity .5s ease-in-out;
-          cursor: pointer;
-          color: var(--brightness-font-color);
-          text-shadow: var(--brightness-font-text-shadow)
-        }
-        .show_brightness {
-          opacity: 1;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  private _dragEvent(e: any): void {
-    this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
-  }
-
-  private _showBrightness(): void {
-    clearTimeout(this._brightnessTimout);
-    this.shadowRoot!.querySelector(".brightness")!.classList.add(
-      "show_brightness"
-    );
-  }
-
-  private _hideBrightness(): void {
-    this._brightnessTimout = window.setTimeout(() => {
-      this.shadowRoot!.querySelector(".brightness")!.classList.remove(
-        "show_brightness"
-      );
-    }, 500);
-  }
-
-  private _setBrightness(e: any): void {
-    this.hass!.callService("light", "turn_on", {
-      entity_id: this._config!.entity,
-      brightness_pct: e.value,
-    });
-  }
-
-  private _computeBrightness(stateObj: LightEntity): string {
-    if (!stateObj.attributes.brightness) {
-      return "";
-    }
-    const brightness = stateObj.attributes.brightness;
-    return `brightness(${(brightness + 245) / 5}%)`;
-  }
-
-  private _computeColor(stateObj: LightEntity): string {
-    if (!stateObj.attributes.hs_color) {
-      return "";
-    }
-    const [hue, sat] = stateObj.attributes.hs_color;
-    if (sat <= 10) {
-      return "";
-    }
-    return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
-  }
-
-  private _handleClick(hold: boolean): void {
-    const entityId = this._config!.entity;
-
-    if (hold) {
-      fireEvent(this, "hass-more-info", {
-        entityId,
-      });
-      return;
-    }
-
-    this.hass!.callService("light", "toggle", {
-      entity_id: entityId,
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-light-card": HuiLightCard;
-  }
-}
-
-customElements.define("hui-light-card", HuiLightCard);
+import {
+  html,
+  LitElement,
+  PropertyValues,
+  PropertyDeclarations,
+} from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { styleMap } from "lit-html/directives/styleMap";
+import computeStateName from "../../../common/entity/compute_state_name";
+import stateIcon from "../../../common/entity/state_icon";
+import { jQuery } from "../../../resources/jquery";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import { roundSliderStyle } from "../../../resources/jquery.roundslider";
+
+import { HomeAssistant, LightEntity } from "../../../types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { longPress } from "../common/directives/long-press-directive";
+import { TemplateResult } from "lit-html";
+
+const lightConfig = {
+  radius: 80,
+  step: 1,
+  circleShape: "pie",
+  startAngle: 315,
+  width: 5,
+  min: 1,
+  max: 100,
+  sliderType: "min-range",
+  lineCap: "round",
+  handleSize: "+12",
+  showTooltip: false,
+};
+
+interface Config extends LovelaceConfig {
+  entity: string;
+  name?: string;
+}
+
+export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private _brightnessTimout?: number;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity || config.entity.split(".")[0] !== "light") {
+      throw new Error("Specify an entity from within the light domain.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config!.entity] as LightEntity;
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card>
+        ${
+          !stateObj
+            ? html`
+              <div class="not-found">Entity not available: ${
+                this._config.entity
+              }</div>`
+            : html`
+              <div id="light"></div>
+              <div id="tooltip">
+                <div class="icon-state">
+                  <ha-icon
+                    data-state="${stateObj.state}"
+                    .icon="${stateIcon(stateObj)}"
+                    style="${styleMap({
+                      filter: this._computeBrightness(stateObj),
+                      color: this._computeColor(stateObj),
+                    })}"
+                    @ha-click="${() => this._handleClick(false)}"
+                    @ha-hold="${() => this._handleClick(true)}"
+                    .longPress="${longPress()}"
+                  ></ha-icon>
+                  <div
+                    class="brightness"
+                    @ha-click="${() => this._handleClick(false)}"
+                    @ha-hold="${() => this._handleClick(true)}"
+                    .longPress="${longPress()}"
+                  ></div>
+                  <div class="name">${this._config.name ||
+                    computeStateName(stateObj)}</div>
+                </div>
+              </div>
+            `
+        }
+
+      </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    return (changedProps as unknown) as boolean;
+  }
+
+  protected firstUpdated(): void {
+    const brightness = this.hass!.states[this._config!.entity].attributes
+      .brightness;
+    jQuery("#light", this.shadowRoot).roundSlider({
+      ...lightConfig,
+      change: (value) => this._setBrightness(value),
+      drag: (value) => this._dragEvent(value),
+      start: () => this._showBrightness(),
+      stop: () => this._hideBrightness(),
+    });
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
+      (Math.round((brightness / 254) * 100) || 0) + "%";
+  }
+
+  protected updated(): void {
+    const attrs = this.hass!.states[this._config!.entity].attributes;
+
+    jQuery("#light", this.shadowRoot).roundSlider({
+      value: Math.round((attrs.brightness / 254) * 100) || 0,
+    });
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+    ${roundSliderStyle}
+      <style>
+        :host {
+          display: block;
+        }
+        ha-card {
+          position: relative;
+          overflow: hidden;
+          --brightness-font-color: white;
+          --brightness-font-text-shadow:
+            -1px -1px 0 #000,
+            1px -1px 0 #000,
+            -1px 1px 0 #000,
+            1px 1px 0 #000;
+          --name-font-size: 1.2rem;
+          --brightness-font-size: 1.2rem;
+          --rail-border-color: transparent;
+        }
+        #tooltip {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 100%;
+          text-align: center;
+          z-index: 15;
+        }
+        .icon-state {
+          display: block;
+          margin: auto;
+          width: 100%;
+          height: 100%;
+          transform: translate(0,25%);
+        }
+        #light {
+          margin: 0 auto;
+          padding-top: 16px;
+          padding-bottom: 16px;
+        }
+        #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
+          z-index: 20 !important;
+        }
+        #light .rs-range-color  {
+          background-color: var(--primary-color);
+        }
+        #light .rs-path-color  {
+            background-color: var(--disabled-text-color);
+        }
+        #light .rs-handle  {
+            background-color: var(--paper-card-background-color, white);
+            padding: 7px;
+            border: 2px solid var(--disabled-text-color);
+        }
+        #light .rs-handle.rs-focus  {
+            border-color:var(--primary-color);
+        }
+        #light .rs-handle:after  {
+            border-color: var(--primary-color);
+            background-color: var(--primary-color);
+        }
+        #light .rs-border  {
+          border-color: var(--rail-border-color);
+        }
+        #light .rs-inner.rs-bg-color.rs-border,
+        #light .rs-overlay.rs-transition.rs-bg-color {
+          background-color: var(--paper-card-background-color, white);
+        }
+        ha-icon {
+          margin: auto;
+          width: 76px;
+          height: 76px;
+          color: var(--paper-item-icon-color, #44739e);
+          cursor: pointer;
+        }
+        ha-icon[data-state=on] {
+          color: var(--paper-item-icon-active-color, #FDD835);
+        }
+        ha-icon[data-state=unavailable] {
+          color: var(--state-icon-unavailable-color);
+        }
+        .name {
+          padding-top: 40px;
+          font-size: var(--name-font-size);
+        }
+        .brightness {
+          font-size: var(--brightness-font-size);
+          position: absolute;
+          margin: 0 auto;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%);
+          opacity: 0;
+          transition: opacity .5s ease-in-out;
+          -moz-transition: opacity .5s ease-in-out;
+          -webkit-transition: opacity .5s ease-in-out;
+          cursor: pointer;
+          color: var(--brightness-font-color);
+          text-shadow: var(--brightness-font-text-shadow)
+        }
+        .show_brightness {
+          opacity: 1;
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  private _dragEvent(e: any): void {
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
+  }
+
+  private _showBrightness(): void {
+    clearTimeout(this._brightnessTimout);
+    this.shadowRoot!.querySelector(".brightness")!.classList.add(
+      "show_brightness"
+    );
+  }
+
+  private _hideBrightness(): void {
+    this._brightnessTimout = window.setTimeout(() => {
+      this.shadowRoot!.querySelector(".brightness")!.classList.remove(
+        "show_brightness"
+      );
+    }, 500);
+  }
+
+  private _setBrightness(e: any): void {
+    this.hass!.callService("light", "turn_on", {
+      entity_id: this._config!.entity,
+      brightness_pct: e.value,
+    });
+  }
+
+  private _computeBrightness(stateObj: LightEntity): string {
+    if (!stateObj.attributes.brightness) {
+      return "";
+    }
+    const brightness = stateObj.attributes.brightness;
+    return `brightness(${(brightness + 245) / 5}%)`;
+  }
+
+  private _computeColor(stateObj: LightEntity): string {
+    if (!stateObj.attributes.hs_color) {
+      return "";
+    }
+    const [hue, sat] = stateObj.attributes.hs_color;
+    if (sat <= 10) {
+      return "";
+    }
+    return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
+  }
+
+  private _handleClick(hold: boolean): void {
+    const entityId = this._config!.entity;
+
+    if (hold) {
+      fireEvent(this, "hass-more-info", {
+        entityId,
+      });
+      return;
+    }
+
+    this.hass!.callService("light", "toggle", {
+      entity_id: entityId,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-light-card": HuiLightCard;
+  }
+}
+
+customElements.define("hui-light-card", HuiLightCard);
diff --git a/src/panels/lovelace/cards/hui-map-card.js b/src/panels/lovelace/cards/hui-map-card.js
index 4bc17097f7..4f213b88a5 100644
--- a/src/panels/lovelace/cards/hui-map-card.js
+++ b/src/panels/lovelace/cards/hui-map-card.js
@@ -1,305 +1,305 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import Leaflet from "leaflet";
-
-import "../../map/ha-entity-marker.js";
-
-import setupLeafletMap from "../../../common/dom/setup-leaflet-map.js";
-import processConfigEntities from "../common/process-config-entities.js";
-import computeStateDomain from "../../../common/entity/compute_state_domain.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import debounce from "../../../common/util/debounce.js";
-
-Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
-
-class HuiMapCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host([is-panel]) ha-card {
-          left: 0;
-          top: 0;
-          width: 100%;
-          /**
-           * In panel mode we want a full height map. Since parent #view
-           * only sets min-height, we need absolute positioning here
-           */
-          height: 100%;
-          position: absolute;
-        }
-
-        ha-card {
-          overflow: hidden;
-        }
-
-        #map {
-          z-index: 0;
-          border: none;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-
-        paper-icon-button {
-          position: absolute;
-          top: 75px;
-          left: 7px;
-        }
-
-        #root {
-          position: relative;
-        }
-
-        :host([is-panel]) #root {
-          height: 100%;
-        }
-      </style>
-
-      <ha-card id="card" header="[[_config.title]]">
-        <div id="root">
-          <div id="map"></div>
-          <paper-icon-button
-            on-click="_fitMap"
-            icon="hass:image-filter-center-focus"
-            title="Reset focus"
-          ></paper-icon-button>
-        </div>
-      </ha-card>
-
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_drawEntities",
-      },
-      _config: Object,
-      isPanel: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this._debouncedResizeListener = debounce(this._resetMap.bind(this), 100);
-  }
-
-  ready() {
-    super.ready();
-
-    if (!this._config || this.isPanel) {
-      return;
-    }
-
-    this.$.root.style.paddingTop = this._config.aspect_ratio || "100%";
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._configEntities = processConfigEntities(config.entities);
-    this._config = config;
-  }
-
-  getCardSize() {
-    let ar = this._config.aspect_ratio || "100%";
-    ar = ar.substr(0, ar.length - 1);
-    return 1 + Math.floor(ar / 25) || 3;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Observe changes to map size and invalidate to prevent broken rendering
-    // Uses ResizeObserver in Chrome, otherwise window resize event
-    if (typeof ResizeObserver === "function") {
-      this._resizeObserver = new ResizeObserver(() =>
-        this._debouncedResizeListener()
-      );
-      this._resizeObserver.observe(this.$.map);
-    } else {
-      window.addEventListener("resize", this._debouncedResizeListener);
-    }
-
-    this._map = setupLeafletMap(this.$.map);
-    this._drawEntities(this.hass);
-
-    setTimeout(() => {
-      this._resetMap();
-      this._fitMap();
-    }, 1);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    if (this._map) {
-      this._map.remove();
-    }
-
-    if (this._resizeObserver) {
-      this._resizeObserver.unobserve(this.$.map);
-    } else {
-      window.removeEventListener("resize", this._debouncedResizeListener);
-    }
-  }
-
-  _resetMap() {
-    if (!this._map) {
-      return;
-    }
-    this._map.invalidateSize();
-  }
-
-  _fitMap() {
-    const zoom = this._config.default_zoom;
-    if (this._mapItems.length === 0) {
-      this._map.setView(
-        new Leaflet.LatLng(
-          this.hass.config.latitude,
-          this.hass.config.longitude
-        ),
-        zoom || 14
-      );
-      return;
-    }
-
-    const bounds = new Leaflet.latLngBounds(
-      this._mapItems.map((item) => item.getLatLng())
-    );
-    this._map.fitBounds(bounds.pad(0.5));
-
-    if (zoom && this._map.getZoom() > zoom) {
-      this._map.setZoom(zoom);
-    }
-  }
-
-  _drawEntities(hass) {
-    const map = this._map;
-    if (!map) {
-      return;
-    }
-
-    if (this._mapItems) {
-      this._mapItems.forEach((marker) => marker.remove());
-    }
-    const mapItems = (this._mapItems = []);
-
-    this._configEntities.forEach((entity) => {
-      const entityId = entity.entity;
-      if (!(entityId in hass.states)) {
-        return;
-      }
-      const stateObj = hass.states[entityId];
-      const title = computeStateName(stateObj);
-      const {
-        latitude,
-        longitude,
-        passive,
-        icon,
-        radius,
-        entity_picture: entityPicture,
-        gps_accuracy: gpsAccuracy,
-      } = stateObj.attributes;
-
-      if (!(latitude && longitude)) {
-        return;
-      }
-
-      let markerIcon;
-      let iconHTML;
-      let el;
-
-      if (computeStateDomain(stateObj) === "zone") {
-        // DRAW ZONE
-        if (passive) return;
-
-        // create icon
-        if (icon) {
-          el = document.createElement("ha-icon");
-          el.setAttribute("icon", icon);
-          iconHTML = el.outerHTML;
-        } else {
-          iconHTML = title;
-        }
-
-        markerIcon = Leaflet.divIcon({
-          html: iconHTML,
-          iconSize: [24, 24],
-          className: "",
-        });
-
-        // create market with the icon
-        mapItems.push(
-          Leaflet.marker([latitude, longitude], {
-            icon: markerIcon,
-            interactive: false,
-            title: title,
-          }).addTo(map)
-        );
-
-        // create circle around it
-        mapItems.push(
-          Leaflet.circle([latitude, longitude], {
-            interactive: false,
-            color: "#FF9800",
-            radius: radius,
-          }).addTo(map)
-        );
-
-        return;
-      }
-
-      // DRAW ENTITY
-      // create icon
-      const entityName = title
-        .split(" ")
-        .map((part) => part[0])
-        .join("")
-        .substr(0, 3);
-
-      el = document.createElement("ha-entity-marker");
-      el.setAttribute("entity-id", entityId);
-      el.setAttribute("entity-name", entityName);
-      el.setAttribute("entity-picture", entityPicture || "");
-
-      /* Leaflet clones this element before adding it to the map. This messes up
-         our Polymer object and we can't pass data through. Thus we hack like this. */
-      markerIcon = Leaflet.divIcon({
-        html: el.outerHTML,
-        iconSize: [48, 48],
-        className: "",
-      });
-
-      // create market with the icon
-      mapItems.push(
-        Leaflet.marker([latitude, longitude], {
-          icon: markerIcon,
-          title: computeStateName(stateObj),
-        }).addTo(map)
-      );
-
-      // create circle around if entity has accuracy
-      if (gpsAccuracy) {
-        mapItems.push(
-          Leaflet.circle([latitude, longitude], {
-            interactive: false,
-            color: "#0288D1",
-            radius: gpsAccuracy,
-          }).addTo(map)
-        );
-      }
-    });
-  }
-}
-
-customElements.define("hui-map-card", HuiMapCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+import Leaflet from "leaflet";
+
+import "../../map/ha-entity-marker";
+
+import setupLeafletMap from "../../../common/dom/setup-leaflet-map";
+import processConfigEntities from "../common/process-config-entities";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
+import computeStateName from "../../../common/entity/compute_state_name";
+import debounce from "../../../common/util/debounce";
+
+Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
+
+class HuiMapCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host([is-panel]) ha-card {
+          left: 0;
+          top: 0;
+          width: 100%;
+          /**
+           * In panel mode we want a full height map. Since parent #view
+           * only sets min-height, we need absolute positioning here
+           */
+          height: 100%;
+          position: absolute;
+        }
+
+        ha-card {
+          overflow: hidden;
+        }
+
+        #map {
+          z-index: 0;
+          border: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        paper-icon-button {
+          position: absolute;
+          top: 75px;
+          left: 7px;
+        }
+
+        #root {
+          position: relative;
+        }
+
+        :host([is-panel]) #root {
+          height: 100%;
+        }
+      </style>
+
+      <ha-card id="card" header="[[_config.title]]">
+        <div id="root">
+          <div id="map"></div>
+          <paper-icon-button
+            on-click="_fitMap"
+            icon="hass:image-filter-center-focus"
+            title="Reset focus"
+          ></paper-icon-button>
+        </div>
+      </ha-card>
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_drawEntities",
+      },
+      _config: Object,
+      isPanel: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this._debouncedResizeListener = debounce(this._resetMap.bind(this), 100);
+  }
+
+  ready() {
+    super.ready();
+
+    if (!this._config || this.isPanel) {
+      return;
+    }
+
+    this.$.root.style.paddingTop = this._config.aspect_ratio || "100%";
+  }
+
+  setConfig(config) {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._configEntities = processConfigEntities(config.entities);
+    this._config = config;
+  }
+
+  getCardSize() {
+    let ar = this._config.aspect_ratio || "100%";
+    ar = ar.substr(0, ar.length - 1);
+    return 1 + Math.floor(ar / 25) || 3;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Observe changes to map size and invalidate to prevent broken rendering
+    // Uses ResizeObserver in Chrome, otherwise window resize event
+    if (typeof ResizeObserver === "function") {
+      this._resizeObserver = new ResizeObserver(() =>
+        this._debouncedResizeListener()
+      );
+      this._resizeObserver.observe(this.$.map);
+    } else {
+      window.addEventListener("resize", this._debouncedResizeListener);
+    }
+
+    this._map = setupLeafletMap(this.$.map);
+    this._drawEntities(this.hass);
+
+    setTimeout(() => {
+      this._resetMap();
+      this._fitMap();
+    }, 1);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this._map) {
+      this._map.remove();
+    }
+
+    if (this._resizeObserver) {
+      this._resizeObserver.unobserve(this.$.map);
+    } else {
+      window.removeEventListener("resize", this._debouncedResizeListener);
+    }
+  }
+
+  _resetMap() {
+    if (!this._map) {
+      return;
+    }
+    this._map.invalidateSize();
+  }
+
+  _fitMap() {
+    const zoom = this._config.default_zoom;
+    if (this._mapItems.length === 0) {
+      this._map.setView(
+        new Leaflet.LatLng(
+          this.hass.config.latitude,
+          this.hass.config.longitude
+        ),
+        zoom || 14
+      );
+      return;
+    }
+
+    const bounds = new Leaflet.latLngBounds(
+      this._mapItems.map((item) => item.getLatLng())
+    );
+    this._map.fitBounds(bounds.pad(0.5));
+
+    if (zoom && this._map.getZoom() > zoom) {
+      this._map.setZoom(zoom);
+    }
+  }
+
+  _drawEntities(hass) {
+    const map = this._map;
+    if (!map) {
+      return;
+    }
+
+    if (this._mapItems) {
+      this._mapItems.forEach((marker) => marker.remove());
+    }
+    const mapItems = (this._mapItems = []);
+
+    this._configEntities.forEach((entity) => {
+      const entityId = entity.entity;
+      if (!(entityId in hass.states)) {
+        return;
+      }
+      const stateObj = hass.states[entityId];
+      const title = computeStateName(stateObj);
+      const {
+        latitude,
+        longitude,
+        passive,
+        icon,
+        radius,
+        entity_picture: entityPicture,
+        gps_accuracy: gpsAccuracy,
+      } = stateObj.attributes;
+
+      if (!(latitude && longitude)) {
+        return;
+      }
+
+      let markerIcon;
+      let iconHTML;
+      let el;
+
+      if (computeStateDomain(stateObj) === "zone") {
+        // DRAW ZONE
+        if (passive) return;
+
+        // create icon
+        if (icon) {
+          el = document.createElement("ha-icon");
+          el.setAttribute("icon", icon);
+          iconHTML = el.outerHTML;
+        } else {
+          iconHTML = title;
+        }
+
+        markerIcon = Leaflet.divIcon({
+          html: iconHTML,
+          iconSize: [24, 24],
+          className: "",
+        });
+
+        // create market with the icon
+        mapItems.push(
+          Leaflet.marker([latitude, longitude], {
+            icon: markerIcon,
+            interactive: false,
+            title: title,
+          }).addTo(map)
+        );
+
+        // create circle around it
+        mapItems.push(
+          Leaflet.circle([latitude, longitude], {
+            interactive: false,
+            color: "#FF9800",
+            radius: radius,
+          }).addTo(map)
+        );
+
+        return;
+      }
+
+      // DRAW ENTITY
+      // create icon
+      const entityName = title
+        .split(" ")
+        .map((part) => part[0])
+        .join("")
+        .substr(0, 3);
+
+      el = document.createElement("ha-entity-marker");
+      el.setAttribute("entity-id", entityId);
+      el.setAttribute("entity-name", entityName);
+      el.setAttribute("entity-picture", entityPicture || "");
+
+      /* Leaflet clones this element before adding it to the map. This messes up
+         our Polymer object and we can't pass data through. Thus we hack like this. */
+      markerIcon = Leaflet.divIcon({
+        html: el.outerHTML,
+        iconSize: [48, 48],
+        className: "",
+      });
+
+      // create market with the icon
+      mapItems.push(
+        Leaflet.marker([latitude, longitude], {
+          icon: markerIcon,
+          title: computeStateName(stateObj),
+        }).addTo(map)
+      );
+
+      // create circle around if entity has accuracy
+      if (gpsAccuracy) {
+        mapItems.push(
+          Leaflet.circle([latitude, longitude], {
+            interactive: false,
+            color: "#0288D1",
+            radius: gpsAccuracy,
+          }).addTo(map)
+        );
+      }
+    });
+  }
+}
+
+customElements.define("hui-map-card", HuiMapCard);
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 4f24f48daa..6c71fd904a 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -1,93 +1,93 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { classMap } from "lit-html/directives/classMap.js";
-
-import "../../../components/ha-card.js";
-import "../../../components/ha-markdown.js";
-
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceConfig {
-  content: string;
-  title?: string;
-}
-
-export class HuiMarkdownCard extends LitElement implements LovelaceCard {
-  private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return this._config!.content.split("\n").length;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.content) {
-      throw new Error("Invalid Configuration: Content Required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card .header="${this._config.title}">
-        <ha-markdown
-          class="markdown ${classMap({
-            "no-header": !this._config.title,
-          })}"
-          .content="${this._config.content}"
-        ></ha-markdown>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          @apply --paper-font-body1;
-        }
-        ha-markdown {
-          display: block;
-          padding: 0 16px 16px;
-          -ms-user-select: initial;
-          -webkit-user-select: initial;
-          -moz-user-select: initial;
-        }
-        .markdown.no-header {
-          padding-top: 16px;
-        }
-        ha-markdown > *:first-child {
-          margin-top: 0;
-        }
-        ha-markdown > *:last-child {
-          margin-bottom: 0;
-        }
-        ha-markdown a {
-          color: var(--primary-color);
-        }
-        ha-markdown img {
-          max-width: 100%;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-markdown-card": HuiMarkdownCard;
-  }
-}
-
-customElements.define("hui-markdown-card", HuiMarkdownCard);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap";
+
+import "../../../components/ha-card";
+import "../../../components/ha-markdown";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceConfig {
+  content: string;
+  title?: string;
+}
+
+export class HuiMarkdownCard extends LitElement implements LovelaceCard {
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return this._config!.content.split("\n").length;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.content) {
+      throw new Error("Invalid Configuration: Content Required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this._config.title}">
+        <ha-markdown
+          class="markdown ${classMap({
+            "no-header": !this._config.title,
+          })}"
+          .content="${this._config.content}"
+        ></ha-markdown>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        .markdown.no-header {
+          padding-top: 16px;
+        }
+        ha-markdown > *:first-child {
+          margin-top: 0;
+        }
+        ha-markdown > *:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-markdown-card": HuiMarkdownCard;
+  }
+}
+
+customElements.define("hui-markdown-card", HuiMarkdownCard);
diff --git a/src/panels/lovelace/cards/hui-media-control-card.js b/src/panels/lovelace/cards/hui-media-control-card.js
index 6c8dc12e09..96ad0e75c6 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.js
+++ b/src/panels/lovelace/cards/hui-media-control-card.js
@@ -1,11 +1,11 @@
-import "../../../cards/ha-media_player-card.js";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card.js";
-
-class HuiMediaControlCard extends LegacyWrapperCard {
-  constructor() {
-    super("ha-media_player-card", "media_player");
-  }
-}
-
-customElements.define("hui-media-control-card", HuiMediaControlCard);
+import "../../../cards/ha-media_player-card";
+
+import LegacyWrapperCard from "./hui-legacy-wrapper-card";
+
+class HuiMediaControlCard extends LegacyWrapperCard {
+  constructor() {
+    super("ha-media_player-card", "media_player");
+  }
+}
+
+customElements.define("hui-media-control-card", HuiMediaControlCard);
diff --git a/src/panels/lovelace/cards/hui-picture-card.js b/src/panels/lovelace/cards/hui-picture-card.js
index 6318eb3a5b..881f3a46df 100644
--- a/src/panels/lovelace/cards/hui-picture-card.js
+++ b/src/panels/lovelace/cards/hui-picture-card.js
@@ -1,67 +1,67 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-
-/*
- * @appliesMixin NavigateMixin
- */
-class HuiPictureCard extends NavigateMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        ha-card[clickable] {
-          cursor: pointer;
-        }
-        img {
-          display: block;
-          width: 100%;
-        }
-      </style>
-
-      <ha-card on-click="_cardClicked" clickable$='[[_computeClickable(_config)]]'>
-        <img src='[[_config.image]]' />
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!config || !config.image) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._config = config;
-  }
-
-  _computeClickable(config) {
-    return config.navigation_path || config.service;
-  }
-
-  _cardClicked() {
-    if (this._config.navigation_path) {
-      this.navigate(this._config.navigation_path);
-    }
-    if (this._config.service) {
-      const [domain, service] = this._config.service.split(".", 2);
-      this.hass.callService(domain, service, this._config.service_data);
-    }
-  }
-}
-
-customElements.define("hui-picture-card", HuiPictureCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+
+import NavigateMixin from "../../../mixins/navigate-mixin";
+
+/*
+ * @appliesMixin NavigateMixin
+ */
+class HuiPictureCard extends NavigateMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        ha-card[clickable] {
+          cursor: pointer;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      </style>
+
+      <ha-card on-click="_cardClicked" clickable$='[[_computeClickable(_config)]]'>
+        <img src='[[_config.image]]' />
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config || !config.image) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = config;
+  }
+
+  _computeClickable(config) {
+    return config.navigation_path || config.service;
+  }
+
+  _cardClicked() {
+    if (this._config.navigation_path) {
+      this.navigate(this._config.navigation_path);
+    }
+    if (this._config.service) {
+      const [domain, service] = this._config.service.split(".", 2);
+      this.hass.callService(domain, service, this._config.service_data);
+    }
+  }
+}
+
+customElements.define("hui-picture-card", HuiPictureCard);
diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 0a3c7b9e12..2251f0bb27 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -1,111 +1,111 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import createHuiElement from "../common/create-hui-element.js";
-
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { HomeAssistant } from "../../../types.js";
-import { LovelaceElementConfig, LovelaceElement } from "../elements/types.js";
-
-interface Config extends LovelaceConfig {
-  title?: string;
-  image: string;
-  elements: LovelaceElementConfig[];
-}
-
-class HuiPictureElementsCard extends LitElement implements LovelaceCard {
-  private _config?: Config;
-  private _hass?: HomeAssistant;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    for (const el of this.shadowRoot!.querySelectorAll("#root > *")) {
-      const element = el as LovelaceElement;
-      element.hass = this._hass;
-    }
-  }
-
-  public getCardSize(): number {
-    return 4;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config) {
-      throw new Error("Invalid Configuration");
-    } else if (!config.image) {
-      throw new Error("Invalid Configuration: image required");
-    } else if (!Array.isArray(config.elements)) {
-      throw new Error("Invalid Configuration: elements required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card .header="${this._config.title}">
-        <div id="root">
-          <img src="${this._config.image}">
-          ${this._config.elements.map((elementConfig: LovelaceElementConfig) =>
-            this._createHuiElement(elementConfig)
-          )}
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        #root {
-          position: relative;
-          overflow: hidden;
-        }
-        #root img {
-          display: block;
-          width: 100%;
-        }
-        .element {
-          position: absolute;
-          transform: translate(-50%, -50%);
-        }
-      </style>
-    `;
-  }
-
-  private _createHuiElement(
-    elementConfig: LovelaceElementConfig
-  ): LovelaceElement {
-    const element = createHuiElement(elementConfig) as LovelaceElement;
-    element.hass = this._hass;
-    element.classList.add("element");
-
-    Object.keys(elementConfig.style).forEach((prop) => {
-      element.style.setProperty(prop, elementConfig.style[prop]);
-    });
-
-    return element;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-picture-elements-card": HuiPictureElementsCard;
-  }
-}
-
-customElements.define("hui-picture-elements-card", HuiPictureElementsCard);
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import createHuiElement from "../common/create-hui-element";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
+
+interface Config extends LovelaceConfig {
+  title?: string;
+  image: string;
+  elements: LovelaceElementConfig[];
+}
+
+class HuiPictureElementsCard extends LitElement implements LovelaceCard {
+  private _config?: Config;
+  private _hass?: HomeAssistant;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    for (const el of this.shadowRoot!.querySelectorAll("#root > *")) {
+      const element = el as LovelaceElement;
+      element.hass = this._hass;
+    }
+  }
+
+  public getCardSize(): number {
+    return 4;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config) {
+      throw new Error("Invalid Configuration");
+    } else if (!config.image) {
+      throw new Error("Invalid Configuration: image required");
+    } else if (!Array.isArray(config.elements)) {
+      throw new Error("Invalid Configuration: elements required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this._config.title}">
+        <div id="root">
+          <img src="${this._config.image}">
+          ${this._config.elements.map((elementConfig: LovelaceElementConfig) =>
+            this._createHuiElement(elementConfig)
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        #root {
+          position: relative;
+          overflow: hidden;
+        }
+        #root img {
+          display: block;
+          width: 100%;
+        }
+        .element {
+          position: absolute;
+          transform: translate(-50%, -50%);
+        }
+      </style>
+    `;
+  }
+
+  private _createHuiElement(
+    elementConfig: LovelaceElementConfig
+  ): LovelaceElement {
+    const element = createHuiElement(elementConfig) as LovelaceElement;
+    element.hass = this._hass;
+    element.classList.add("element");
+
+    Object.keys(elementConfig.style).forEach((prop) => {
+      element.style.setProperty(prop, elementConfig.style[prop]);
+    });
+
+    return element;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-picture-elements-card": HuiPictureElementsCard;
+  }
+}
+
+customElements.define("hui-picture-elements-card", HuiPictureElementsCard);
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.js b/src/panels/lovelace/cards/hui-picture-entity-card.js
index cc1a432b96..77898ab8cb 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.js
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.js
@@ -1,201 +1,201 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-import "../components/hui-image.js";
-
-import computeDomain from "../../../common/entity/compute_domain.js";
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import toggleEntity from "../common/entity/toggle-entity.js";
-
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-const UNAVAILABLE = "Unavailable";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin EventsMixin
- */
-class HuiPictureEntityCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          min-height: 75px;
-          overflow: hidden;
-          position: relative;
-        }
-        ha-card.canInteract {
-          cursor: pointer;
-        }
-        .footer {
-          @apply --paper-font-common-nowrap;
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(0, 0, 0, 0.3);
-          padding: 16px;
-          font-size: 16px;
-          line-height: 16px;
-          color: white;
-        }
-        .both {
-          display: flex;
-          justify-content: space-between;
-        }
-        .state {
-          text-align: right;
-        }
-      </style>
-
-      <ha-card id='card'>
-        <hui-image
-          hass="[[hass]]"
-          image="[[_config.image]]"
-          state-image="[[_config.state_image]]"
-          camera-image="[[_getCameraImage(_config)]]"
-          entity="[[_config.entity]]"
-          aspect-ratio="[[_config.aspect_ratio]]"
-        ></hui-image>
-        <template is="dom-if" if="[[_showNameAndState(_config)]]">
-          <div class="footer both">
-            <div>[[_name]]</div>
-            <div>[[_state]]</div>
-        </div>
-        </template>
-        <template is="dom-if" if="[[_showName(_config)]]">
-          <div class="footer">
-            [[_name]]
-          </div>
-        </template>
-        <template is="dom-if" if="[[_showState(_config)]]">
-          <div class="footer state">
-            [[_state]]
-          </div>
-        </template>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      _config: Object,
-      _name: String,
-      _state: String,
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._entityDomain = computeDomain(config.entity);
-    if (
-      this._entityDomain !== "camera" &&
-      (!config.image && !config.state_image && !config.camera_image)
-    ) {
-      throw new Error("No image source configured.");
-    }
-
-    this._config = config;
-  }
-
-  ready() {
-    super.ready();
-    const card = this.shadowRoot.querySelector("#card");
-    longPressBind(card);
-    card.addEventListener("ha-click", () => this._cardClicked(false));
-    card.addEventListener("ha-hold", () => this._cardClicked(true));
-  }
-
-  _hassChanged(hass) {
-    const config = this._config;
-    const entityId = config.entity;
-    const stateObj = hass.states[entityId];
-
-    // Nothing changed
-    if (
-      (!stateObj && this._oldState === UNAVAILABLE) ||
-      (stateObj && stateObj.state === this._oldState)
-    ) {
-      return;
-    }
-
-    let name;
-    let state;
-    let stateLabel;
-    let available;
-
-    if (stateObj) {
-      name = config.name || computeStateName(stateObj);
-      state = stateObj.state;
-      stateLabel = computeStateDisplay(this.localize, stateObj);
-      available = true;
-    } else {
-      name = config.name || entityId;
-      state = UNAVAILABLE;
-      stateLabel = this.localize("state.default.unavailable");
-      available = false;
-    }
-
-    this.setProperties({
-      _name: name,
-      _state: stateLabel,
-      _oldState: state,
-    });
-
-    this.$.card.classList.toggle("canInteract", available);
-  }
-
-  _showNameAndState(config) {
-    return config.show_name !== false && config.show_state !== false;
-  }
-
-  _showName(config) {
-    return config.show_name !== false && config.show_state === false;
-  }
-
-  _showState(config) {
-    return config.show_name === false && config.show_state !== false;
-  }
-
-  _cardClicked(hold) {
-    const config = this._config;
-    const entityId = config.entity;
-
-    if (!(entityId in this.hass.states)) return;
-
-    const action = hold ? config.hold_action : config.tap_action || "more-info";
-
-    switch (action) {
-      case "toggle":
-        toggleEntity(this.hass, entityId);
-        break;
-      case "more-info":
-        this.fire("hass-more-info", { entityId });
-        break;
-      default:
-    }
-  }
-
-  _getCameraImage(config) {
-    return this._entityDomain === "camera"
-      ? config.entity
-      : config.camera_image;
-  }
-}
-
-customElements.define("hui-picture-entity-card", HuiPictureEntityCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+import "../components/hui-image";
+
+import computeDomain from "../../../common/entity/compute_domain";
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import computeStateName from "../../../common/entity/compute_state_name";
+import toggleEntity from "../common/entity/toggle-entity";
+
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import { longPressBind } from "../common/directives/long-press-directive";
+
+const UNAVAILABLE = "Unavailable";
+
+/*
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
+ */
+class HuiPictureEntityCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          min-height: 75px;
+          overflow: hidden;
+          position: relative;
+        }
+        ha-card.canInteract {
+          cursor: pointer;
+        }
+        .footer {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 16px;
+          font-size: 16px;
+          line-height: 16px;
+          color: white;
+        }
+        .both {
+          display: flex;
+          justify-content: space-between;
+        }
+        .state {
+          text-align: right;
+        }
+      </style>
+
+      <ha-card id='card'>
+        <hui-image
+          hass="[[hass]]"
+          image="[[_config.image]]"
+          state-image="[[_config.state_image]]"
+          camera-image="[[_getCameraImage(_config)]]"
+          entity="[[_config.entity]]"
+          aspect-ratio="[[_config.aspect_ratio]]"
+        ></hui-image>
+        <template is="dom-if" if="[[_showNameAndState(_config)]]">
+          <div class="footer both">
+            <div>[[_name]]</div>
+            <div>[[_state]]</div>
+        </div>
+        </template>
+        <template is="dom-if" if="[[_showName(_config)]]">
+          <div class="footer">
+            [[_name]]
+          </div>
+        </template>
+        <template is="dom-if" if="[[_showState(_config)]]">
+          <div class="footer state">
+            [[_state]]
+          </div>
+        </template>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      _config: Object,
+      _name: String,
+      _state: String,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._entityDomain = computeDomain(config.entity);
+    if (
+      this._entityDomain !== "camera" &&
+      (!config.image && !config.state_image && !config.camera_image)
+    ) {
+      throw new Error("No image source configured.");
+    }
+
+    this._config = config;
+  }
+
+  ready() {
+    super.ready();
+    const card = this.shadowRoot.querySelector("#card");
+    longPressBind(card);
+    card.addEventListener("ha-click", () => this._cardClicked(false));
+    card.addEventListener("ha-hold", () => this._cardClicked(true));
+  }
+
+  _hassChanged(hass) {
+    const config = this._config;
+    const entityId = config.entity;
+    const stateObj = hass.states[entityId];
+
+    // Nothing changed
+    if (
+      (!stateObj && this._oldState === UNAVAILABLE) ||
+      (stateObj && stateObj.state === this._oldState)
+    ) {
+      return;
+    }
+
+    let name;
+    let state;
+    let stateLabel;
+    let available;
+
+    if (stateObj) {
+      name = config.name || computeStateName(stateObj);
+      state = stateObj.state;
+      stateLabel = computeStateDisplay(this.localize, stateObj);
+      available = true;
+    } else {
+      name = config.name || entityId;
+      state = UNAVAILABLE;
+      stateLabel = this.localize("state.default.unavailable");
+      available = false;
+    }
+
+    this.setProperties({
+      _name: name,
+      _state: stateLabel,
+      _oldState: state,
+    });
+
+    this.$.card.classList.toggle("canInteract", available);
+  }
+
+  _showNameAndState(config) {
+    return config.show_name !== false && config.show_state !== false;
+  }
+
+  _showName(config) {
+    return config.show_name !== false && config.show_state === false;
+  }
+
+  _showState(config) {
+    return config.show_name === false && config.show_state !== false;
+  }
+
+  _cardClicked(hold) {
+    const config = this._config;
+    const entityId = config.entity;
+
+    if (!(entityId in this.hass.states)) return;
+
+    const action = hold ? config.hold_action : config.tap_action || "more-info";
+
+    switch (action) {
+      case "toggle":
+        toggleEntity(this.hass, entityId);
+        break;
+      case "more-info":
+        this.fire("hass-more-info", { entityId });
+        break;
+      default:
+    }
+  }
+
+  _getCameraImage(config) {
+    return this._entityDomain === "camera"
+      ? config.entity
+      : config.camera_image;
+  }
+}
+
+customElements.define("hui-picture-entity-card", HuiPictureEntityCard);
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
index 727d44b4e3..0b7783a3c8 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.js
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.js
@@ -1,195 +1,195 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/ha-card.js";
-import "../../../components/ha-icon.js";
-import "../components/hui-image.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import { DOMAINS_TOGGLE } from "../../../common/const.js";
-import stateIcon from "../../../common/entity/state_icon.js";
-import toggleEntity from "../common/entity/toggle-entity.js";
-import processConfigEntities from "../common/process-config-entities";
-
-import EventsMixin from "../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-import NavigateMixin from "../../../mixins/navigate-mixin.js";
-import computeDomain from "../../../common/entity/compute_domain";
-
-const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- * @appliesMixin NavigateMixin
- */
-class HuiPictureGlanceCard extends NavigateMixin(
-  LocalizeMixin(EventsMixin(PolymerElement))
-) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          position: relative;
-          min-height: 48px;
-          overflow: hidden;
-        }
-        hui-image.clickable {
-          cursor: pointer;
-        }
-        .box {
-          @apply --paper-font-common-nowrap;
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(0, 0, 0, 0.3);
-          padding: 4px 8px;
-          font-size: 16px;
-          line-height: 40px;
-          color: white;
-          display: flex;
-          justify-content: space-between;
-        }
-        .box .title {
-          font-weight: 500;
-          margin-left: 8px;
-        }
-        ha-icon {
-          cursor: pointer;
-          padding: 8px;
-          color: #A9A9A9;
-        }
-        ha-icon.state-on {
-          color: white;
-        }
-      </style>
-
-      <ha-card>
-        <hui-image
-          class$='[[_computeImageClass(_config)]]'
-          on-click='_handleImageClick'
-          hass="[[hass]]"
-          image="[[_config.image]]"
-          state-image="[[_config.state_image]]"
-          camera-image="[[_config.camera_image]]"
-          entity="[[_config.entity]]"
-          aspect-ratio="[[_config.aspect_ratio]]"
-        ></hui-image>
-        <div class="box">
-          <template is="dom-if" if="[[_config.title]]">
-            <div class="title">[[_config.title]]</div>
-          </template>
-          <div>
-            <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
-              <ha-icon
-                on-click="_openDialog"
-                class$="[[_computeButtonClass(item.entity, hass.states)]]"
-                icon="[[_computeIcon(item, hass.states)]]"
-                title="[[_computeTooltip(item.entity, hass.states)]]"
-              ></ha-icon>
-            </template>
-          </div>
-          <div>
-            <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
-              <ha-icon
-                on-click="_callService"
-                class$="[[_computeButtonClass(item.entity, hass.states)]]"
-                icon="[[_computeIcon(item, hass.states)]]"
-                title="[[_computeTooltip(item.entity, hass.states)]]"
-              ></ha-icon>
-            </template>
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _entitiesDialog: Array,
-      _entitiesToggle: Array,
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.entities ||
-      !Array.isArray(config.entities) ||
-      !(config.image || config.camera_image || config.state_image) ||
-      (config.state_image && !config.entity)
-    ) {
-      throw new Error("Invalid card configuration");
-    }
-    const entities = processConfigEntities(config.entities);
-    const dialog = [];
-    const toggle = [];
-
-    entities.forEach((item) => {
-      if (
-        config.force_dialog ||
-        !DOMAINS_TOGGLE.has(computeDomain(item.entity))
-      ) {
-        dialog.push(item);
-      } else {
-        toggle.push(item);
-      }
-    });
-    this.setProperties({
-      _config: config,
-      _entitiesDialog: dialog,
-      _entitiesToggle: toggle,
-    });
-  }
-
-  _computeVisible(collection, states) {
-    return collection.filter((el) => el.entity in states);
-  }
-
-  _computeIcon(item, states) {
-    return item.icon || stateIcon(states[item.entity]);
-  }
-
-  _computeButtonClass(entityId, states) {
-    return STATES_OFF.has(states[entityId].state) ? "" : "state-on";
-  }
-
-  _computeTooltip(entityId, states) {
-    return `${computeStateName(states[entityId])}: ${computeStateDisplay(
-      this.localize,
-      states[entityId]
-    )}`;
-  }
-
-  _computeImageClass(config) {
-    return config.navigation_path || config.camera_image ? "clickable" : "";
-  }
-
-  _openDialog(ev) {
-    this.fire("hass-more-info", { entityId: ev.model.item.entity });
-  }
-
-  _callService(ev) {
-    toggleEntity(this.hass, ev.model.item.entity);
-  }
-
-  _handleImageClick() {
-    if (this._config.navigation_path) {
-      this.navigate(this._config.navigation_path);
-      return;
-    }
-
-    if (this._config.camera_image) {
-      this.fire("hass-more-info", { entityId: this._config.camera_image });
-    }
-  }
-}
-customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import "../components/hui-image";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import computeStateName from "../../../common/entity/compute_state_name";
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import stateIcon from "../../../common/entity/state_icon";
+import toggleEntity from "../common/entity/toggle-entity";
+import processConfigEntities from "../common/process-config-entities";
+
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import computeDomain from "../../../common/entity/compute_domain";
+
+const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
+
+/*
+ * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin NavigateMixin
+ */
+class HuiPictureGlanceCard extends NavigateMixin(
+  LocalizeMixin(EventsMixin(PolymerElement))
+) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          position: relative;
+          min-height: 48px;
+          overflow: hidden;
+        }
+        hui-image.clickable {
+          cursor: pointer;
+        }
+        .box {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 4px 8px;
+          font-size: 16px;
+          line-height: 40px;
+          color: white;
+          display: flex;
+          justify-content: space-between;
+        }
+        .box .title {
+          font-weight: 500;
+          margin-left: 8px;
+        }
+        ha-icon {
+          cursor: pointer;
+          padding: 8px;
+          color: #A9A9A9;
+        }
+        ha-icon.state-on {
+          color: white;
+        }
+      </style>
+
+      <ha-card>
+        <hui-image
+          class$='[[_computeImageClass(_config)]]'
+          on-click='_handleImageClick'
+          hass="[[hass]]"
+          image="[[_config.image]]"
+          state-image="[[_config.state_image]]"
+          camera-image="[[_config.camera_image]]"
+          entity="[[_config.entity]]"
+          aspect-ratio="[[_config.aspect_ratio]]"
+        ></hui-image>
+        <div class="box">
+          <template is="dom-if" if="[[_config.title]]">
+            <div class="title">[[_config.title]]</div>
+          </template>
+          <div>
+            <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
+              <ha-icon
+                on-click="_openDialog"
+                class$="[[_computeButtonClass(item.entity, hass.states)]]"
+                icon="[[_computeIcon(item, hass.states)]]"
+                title="[[_computeTooltip(item.entity, hass.states)]]"
+              ></ha-icon>
+            </template>
+          </div>
+          <div>
+            <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
+              <ha-icon
+                on-click="_callService"
+                class$="[[_computeButtonClass(item.entity, hass.states)]]"
+                icon="[[_computeIcon(item, hass.states)]]"
+                title="[[_computeTooltip(item.entity, hass.states)]]"
+              ></ha-icon>
+            </template>
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _entitiesDialog: Array,
+      _entitiesToggle: Array,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (
+      !config ||
+      !config.entities ||
+      !Array.isArray(config.entities) ||
+      !(config.image || config.camera_image || config.state_image) ||
+      (config.state_image && !config.entity)
+    ) {
+      throw new Error("Invalid card configuration");
+    }
+    const entities = processConfigEntities(config.entities);
+    const dialog = [];
+    const toggle = [];
+
+    entities.forEach((item) => {
+      if (
+        config.force_dialog ||
+        !DOMAINS_TOGGLE.has(computeDomain(item.entity))
+      ) {
+        dialog.push(item);
+      } else {
+        toggle.push(item);
+      }
+    });
+    this.setProperties({
+      _config: config,
+      _entitiesDialog: dialog,
+      _entitiesToggle: toggle,
+    });
+  }
+
+  _computeVisible(collection, states) {
+    return collection.filter((el) => el.entity in states);
+  }
+
+  _computeIcon(item, states) {
+    return item.icon || stateIcon(states[item.entity]);
+  }
+
+  _computeButtonClass(entityId, states) {
+    return STATES_OFF.has(states[entityId].state) ? "" : "state-on";
+  }
+
+  _computeTooltip(entityId, states) {
+    return `${computeStateName(states[entityId])}: ${computeStateDisplay(
+      this.localize,
+      states[entityId]
+    )}`;
+  }
+
+  _computeImageClass(config) {
+    return config.navigation_path || config.camera_image ? "clickable" : "";
+  }
+
+  _openDialog(ev) {
+    this.fire("hass-more-info", { entityId: ev.model.item.entity });
+  }
+
+  _callService(ev) {
+    toggleEntity(this.hass, ev.model.item.entity);
+  }
+
+  _handleImageClick() {
+    if (this._config.navigation_path) {
+      this.navigate(this._config.navigation_path);
+      return;
+    }
+
+    if (this._config.camera_image) {
+      this.fire("hass-more-info", { entityId: this._config.camera_image });
+    }
+  }
+}
+customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.js b/src/panels/lovelace/cards/hui-plant-status-card.js
index 1b82cf190d..500bc61df9 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.js
+++ b/src/panels/lovelace/cards/hui-plant-status-card.js
@@ -1,11 +1,11 @@
-import "../../../cards/ha-plant-card.js";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card.js";
-
-class HuiPlantStatusCard extends LegacyWrapperCard {
-  constructor() {
-    super("ha-plant-card", "plant");
-  }
-}
-
-customElements.define("hui-plant-status-card", HuiPlantStatusCard);
+import "../../../cards/ha-plant-card";
+
+import LegacyWrapperCard from "./hui-legacy-wrapper-card";
+
+class HuiPlantStatusCard extends LegacyWrapperCard {
+  constructor() {
+    super("ha-plant-card", "plant");
+  }
+}
+
+customElements.define("hui-plant-status-card", HuiPlantStatusCard);
diff --git a/src/panels/lovelace/cards/hui-sensor-card.js b/src/panels/lovelace/cards/hui-sensor-card.js
index ec11bb7ac0..ea25043f30 100644
--- a/src/panels/lovelace/cards/hui-sensor-card.js
+++ b/src/panels/lovelace/cards/hui-sensor-card.js
@@ -1,292 +1,292 @@
-import { LitElement, html, svg } from "@polymer/lit-element";
-
-import "../../../components/ha-card.js";
-import "../../../components/ha-icon.js";
-
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import stateIcon from "../../../common/entity/state_icon.js";
-
-import EventsMixin from "../../../mixins/events-mixin.js";
-
-class HuiSensorCard extends EventsMixin(LitElement) {
-  set hass(hass) {
-    this._hass = hass;
-    const entity = hass.states[this._config.entity];
-    if (entity && this._entity !== entity) {
-      this._entity = entity;
-      if (
-        this._config.graph !== "none" &&
-        entity.attributes.unit_of_measurement
-      ) {
-        this._getHistory();
-      }
-    }
-  }
-
-  static get properties() {
-    return {
-      _hass: {},
-      _config: {},
-      _entity: {},
-      _line: String,
-    };
-  }
-
-  setConfig(config) {
-    if (!config.entity || config.entity.split(".")[0] !== "sensor") {
-      throw new Error("Specify an entity from within the sensor domain.");
-    }
-
-    const cardConfig = {
-      icon: false,
-      hours_to_show: 24,
-      accuracy: 10,
-      height: 100,
-      line_width: 5,
-      line_color: "var(--accent-color)",
-      ...config,
-    };
-    cardConfig.hours_to_show = Number(cardConfig.hours_to_show);
-    cardConfig.accuracy = Number(cardConfig.accuracy);
-    cardConfig.height = Number(cardConfig.height);
-    cardConfig.line_width = Number(cardConfig.line_width);
-
-    this._config = cardConfig;
-  }
-
-  shouldUpdate(changedProps) {
-    const change = changedProps.has("_entity") || changedProps.has("_line");
-    return change;
-  }
-
-  render({ _config, _entity, _line } = this) {
-    return html`
-      ${this._style()}
-      <ha-card @click=${this._handleClick}>
-        <div class='flex'>
-          <div class='icon'>
-            <ha-icon .icon=${this._computeIcon(_entity)}></ha-icon>
-          </div>
-          <div class='header'>
-            <span class='name'>${this._computeName(_entity)}</span>
-          </div>
-        </div>
-        <div class='flex info'>
-          <span id='value'>${_entity.state}</span>
-          <span id='measurement'>${this._computeUom(_entity)}</span>
-        </div>
-        <div class='graph'>
-          <div>
-            ${
-              _line
-                ? svg`
-            <svg width='100%' height='100%' viewBox='0 0 500 ${_config.height}'>
-              <path d=${_line} fill='none' stroke=${_config.line_color}
-                stroke-width=${_config.line_width}
-                stroke-linecap='round' stroke-linejoin='round' />
-            </svg>`
-                : ""
-            }
-          </div>
-        </div>
-      </ha-card>`;
-  }
-
-  _handleClick() {
-    this.fire("hass-more-info", { entityId: this._config.entity });
-  }
-
-  _computeIcon(item) {
-    return this._config.icon || stateIcon(item);
-  }
-
-  _computeName(item) {
-    return this._config.name || computeStateName(item);
-  }
-
-  _computeUom(item) {
-    return this._config.unit || item.attributes.unit_of_measurement;
-  }
-
-  _getGraph(items, width, height) {
-    const values = this._getValueArr(items);
-    const coords = this._calcCoordinates(values, width, height);
-    return this._getPath(coords);
-  }
-
-  _getValueArr(items) {
-    return items.map((item) => Number(item.state) || 0);
-  }
-
-  _calcCoordinates(values, width, height) {
-    const margin = this._config.line_width;
-    width -= margin * 2;
-    height -= margin * 2;
-    const min = Math.floor(Math.min.apply(null, values) * 0.95);
-    const max = Math.ceil(Math.max.apply(null, values) * 1.05);
-
-    if (values.length === 1) values.push(values[0]);
-
-    const yRatio = (max - min) / height;
-    const xRatio = width / (values.length - 1);
-
-    return values.map((value, i) => {
-      const y = height - (value - min) / yRatio || 0;
-      const x = xRatio * i + margin;
-      return [x, y];
-    });
-  }
-
-  _getPath(points) {
-    const SPACE = " ";
-    let next;
-    let Z;
-    const X = 0;
-    const Y = 1;
-    let path = "";
-    let point = points[0];
-
-    path += "M" + point[X] + "," + point[Y];
-    const first = point;
-
-    for (let i = 0; i < points.length; i++) {
-      next = points[i];
-      Z = this._midPoint(point[X], point[Y], next[X], next[Y]);
-      path += SPACE + Z[X] + "," + Z[Y];
-      path += "Q" + Math.floor(next[X]) + "," + next[Y];
-      point = next;
-    }
-
-    const second = points[1];
-    Z = this._midPoint(first[X], first[Y], second[X], second[Y]);
-    path += SPACE + Math.floor(next[X]) + "." + points[points.length - 1];
-    return path;
-  }
-
-  _midPoint(Ax, Ay, Bx, By) {
-    const Zx = (Ax - Bx) / 2 + Bx;
-    const Zy = (Ay - By) / 2 + By;
-    return [Zx, Zy];
-  }
-
-  async _getHistory() {
-    const endTime = new Date();
-    const startTime = new Date();
-    startTime.setHours(endTime.getHours() - this._config.hours_to_show);
-    const stateHistory = await this._fetchRecent(
-      this._config.entity,
-      startTime,
-      endTime
-    );
-    const history = stateHistory[0];
-    const valArray = [history[history.length - 1]];
-
-    let pos = history.length - 1;
-    const accuracy = this._config.accuracy <= pos ? this._config.accuracy : pos;
-    let increment = Math.ceil(history.length / accuracy);
-    increment = increment <= 0 ? 1 : increment;
-    for (let i = accuracy; i >= 2; i--) {
-      pos -= increment;
-      valArray.unshift(pos >= 0 ? history[pos] : history[0]);
-    }
-    this._line = this._getGraph(valArray, 500, this._config.height);
-  }
-
-  async _fetchRecent(entityId, startTime, endTime) {
-    let url = "history/period";
-    if (startTime) url += "/" + startTime.toISOString();
-    url += "?filter_entity_id=" + entityId;
-    if (endTime) url += "&end_time=" + endTime.toISOString();
-
-    return await this._hass.callApi("GET", url);
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  _style() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-        }
-        ha-card {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          padding: 16px;
-          position: relative;
-          cursor: pointer;
-        }
-        .flex {
-          display: flex;
-        }
-        .header {
-          align-items: center;
-          display: flex;
-          min-width: 0;
-          opacity: .8;
-          position: relative;
-        }
-        .name {
-          display: block;
-          display: -webkit-box;
-          font-size: 1.2rem;
-          font-weight: 500;
-          max-height: 1.4rem;
-          margin-top: 2px;
-          opacity: .8;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          word-wrap: break-word;
-          word-break: break-all;
-        }
-        .icon {
-          color: var(--paper-item-icon-color, #44739e);
-          display: inline-block;
-          flex: 0 0 40px;
-          line-height: 40px;
-          position: relative;
-          text-align: center;
-          width: 40px;
-        }
-        .info {
-          flex-wrap: wrap;
-          margin: 16px 0 16px 8px;
-        }
-        #value {
-          display: inline-block;
-          font-size: 2rem;
-          font-weight: 400;
-          line-height: 1em;
-          margin-right: 4px;
-        }
-        #measurement {
-          align-self: flex-end;
-          display: inline-block;
-          font-size: 1.3rem;
-          line-height: 1.2em;
-          margin-top: .1em;
-          opacity: .6;
-          vertical-align: bottom;
-        }
-        .graph {
-          align-self: flex-end;
-          margin: auto;
-          margin-bottom: 0px;
-          position: relative;
-          width: 100%;
-        }
-        .graph > div {
-          align-self: flex-end;
-          margin: auto 8px;
-        }
-      </style>`;
-  }
-}
-
-customElements.define("hui-sensor-card", HuiSensorCard);
+import { LitElement, html, svg } from "@polymer/lit-element";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import stateIcon from "../../../common/entity/state_icon";
+
+import EventsMixin from "../../../mixins/events-mixin";
+
+class HuiSensorCard extends EventsMixin(LitElement) {
+  set hass(hass) {
+    this._hass = hass;
+    const entity = hass.states[this._config.entity];
+    if (entity && this._entity !== entity) {
+      this._entity = entity;
+      if (
+        this._config.graph !== "none" &&
+        entity.attributes.unit_of_measurement
+      ) {
+        this._getHistory();
+      }
+    }
+  }
+
+  static get properties() {
+    return {
+      _hass: {},
+      _config: {},
+      _entity: {},
+      _line: String,
+    };
+  }
+
+  setConfig(config) {
+    if (!config.entity || config.entity.split(".")[0] !== "sensor") {
+      throw new Error("Specify an entity from within the sensor domain.");
+    }
+
+    const cardConfig = {
+      icon: false,
+      hours_to_show: 24,
+      accuracy: 10,
+      height: 100,
+      line_width: 5,
+      line_color: "var(--accent-color)",
+      ...config,
+    };
+    cardConfig.hours_to_show = Number(cardConfig.hours_to_show);
+    cardConfig.accuracy = Number(cardConfig.accuracy);
+    cardConfig.height = Number(cardConfig.height);
+    cardConfig.line_width = Number(cardConfig.line_width);
+
+    this._config = cardConfig;
+  }
+
+  shouldUpdate(changedProps) {
+    const change = changedProps.has("_entity") || changedProps.has("_line");
+    return change;
+  }
+
+  render({ _config, _entity, _line } = this) {
+    return html`
+      ${this._style()}
+      <ha-card @click=${this._handleClick}>
+        <div class='flex'>
+          <div class='icon'>
+            <ha-icon .icon=${this._computeIcon(_entity)}></ha-icon>
+          </div>
+          <div class='header'>
+            <span class='name'>${this._computeName(_entity)}</span>
+          </div>
+        </div>
+        <div class='flex info'>
+          <span id='value'>${_entity.state}</span>
+          <span id='measurement'>${this._computeUom(_entity)}</span>
+        </div>
+        <div class='graph'>
+          <div>
+            ${
+              _line
+                ? svg`
+            <svg width='100%' height='100%' viewBox='0 0 500 ${_config.height}'>
+              <path d=${_line} fill='none' stroke=${_config.line_color}
+                stroke-width=${_config.line_width}
+                stroke-linecap='round' stroke-linejoin='round' />
+            </svg>`
+                : ""
+            }
+          </div>
+        </div>
+      </ha-card>`;
+  }
+
+  _handleClick() {
+    this.fire("hass-more-info", { entityId: this._config.entity });
+  }
+
+  _computeIcon(item) {
+    return this._config.icon || stateIcon(item);
+  }
+
+  _computeName(item) {
+    return this._config.name || computeStateName(item);
+  }
+
+  _computeUom(item) {
+    return this._config.unit || item.attributes.unit_of_measurement;
+  }
+
+  _getGraph(items, width, height) {
+    const values = this._getValueArr(items);
+    const coords = this._calcCoordinates(values, width, height);
+    return this._getPath(coords);
+  }
+
+  _getValueArr(items) {
+    return items.map((item) => Number(item.state) || 0);
+  }
+
+  _calcCoordinates(values, width, height) {
+    const margin = this._config.line_width;
+    width -= margin * 2;
+    height -= margin * 2;
+    const min = Math.floor(Math.min.apply(null, values) * 0.95);
+    const max = Math.ceil(Math.max.apply(null, values) * 1.05);
+
+    if (values.length === 1) values.push(values[0]);
+
+    const yRatio = (max - min) / height;
+    const xRatio = width / (values.length - 1);
+
+    return values.map((value, i) => {
+      const y = height - (value - min) / yRatio || 0;
+      const x = xRatio * i + margin;
+      return [x, y];
+    });
+  }
+
+  _getPath(points) {
+    const SPACE = " ";
+    let next;
+    let Z;
+    const X = 0;
+    const Y = 1;
+    let path = "";
+    let point = points[0];
+
+    path += "M" + point[X] + "," + point[Y];
+    const first = point;
+
+    for (let i = 0; i < points.length; i++) {
+      next = points[i];
+      Z = this._midPoint(point[X], point[Y], next[X], next[Y]);
+      path += SPACE + Z[X] + "," + Z[Y];
+      path += "Q" + Math.floor(next[X]) + "," + next[Y];
+      point = next;
+    }
+
+    const second = points[1];
+    Z = this._midPoint(first[X], first[Y], second[X], second[Y]);
+    path += SPACE + Math.floor(next[X]) + "." + points[points.length - 1];
+    return path;
+  }
+
+  _midPoint(Ax, Ay, Bx, By) {
+    const Zx = (Ax - Bx) / 2 + Bx;
+    const Zy = (Ay - By) / 2 + By;
+    return [Zx, Zy];
+  }
+
+  async _getHistory() {
+    const endTime = new Date();
+    const startTime = new Date();
+    startTime.setHours(endTime.getHours() - this._config.hours_to_show);
+    const stateHistory = await this._fetchRecent(
+      this._config.entity,
+      startTime,
+      endTime
+    );
+    const history = stateHistory[0];
+    const valArray = [history[history.length - 1]];
+
+    let pos = history.length - 1;
+    const accuracy = this._config.accuracy <= pos ? this._config.accuracy : pos;
+    let increment = Math.ceil(history.length / accuracy);
+    increment = increment <= 0 ? 1 : increment;
+    for (let i = accuracy; i >= 2; i--) {
+      pos -= increment;
+      valArray.unshift(pos >= 0 ? history[pos] : history[0]);
+    }
+    this._line = this._getGraph(valArray, 500, this._config.height);
+  }
+
+  async _fetchRecent(entityId, startTime, endTime) {
+    let url = "history/period";
+    if (startTime) url += "/" + startTime.toISOString();
+    url += "?filter_entity_id=" + entityId;
+    if (endTime) url += "&end_time=" + endTime.toISOString();
+
+    return await this._hass.callApi("GET", url);
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  _style() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
+        ha-card {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          padding: 16px;
+          position: relative;
+          cursor: pointer;
+        }
+        .flex {
+          display: flex;
+        }
+        .header {
+          align-items: center;
+          display: flex;
+          min-width: 0;
+          opacity: .8;
+          position: relative;
+        }
+        .name {
+          display: block;
+          display: -webkit-box;
+          font-size: 1.2rem;
+          font-weight: 500;
+          max-height: 1.4rem;
+          margin-top: 2px;
+          opacity: .8;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+          word-break: break-all;
+        }
+        .icon {
+          color: var(--paper-item-icon-color, #44739e);
+          display: inline-block;
+          flex: 0 0 40px;
+          line-height: 40px;
+          position: relative;
+          text-align: center;
+          width: 40px;
+        }
+        .info {
+          flex-wrap: wrap;
+          margin: 16px 0 16px 8px;
+        }
+        #value {
+          display: inline-block;
+          font-size: 2rem;
+          font-weight: 400;
+          line-height: 1em;
+          margin-right: 4px;
+        }
+        #measurement {
+          align-self: flex-end;
+          display: inline-block;
+          font-size: 1.3rem;
+          line-height: 1.2em;
+          margin-top: .1em;
+          opacity: .6;
+          vertical-align: bottom;
+        }
+        .graph {
+          align-self: flex-end;
+          margin: auto;
+          margin-bottom: 0px;
+          position: relative;
+          width: 100%;
+        }
+        .graph > div {
+          align-self: flex-end;
+          margin: auto 8px;
+        }
+      </style>`;
+  }
+}
+
+customElements.define("hui-sensor-card", HuiSensorCard);
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 7c2e69651a..709bf441d2 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -1,66 +1,66 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import createCardElement from "../common/create-card-element.js";
-
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { HomeAssistant } from "../../../types";
-
-interface Config extends LovelaceConfig {
-  cards: LovelaceConfig[];
-}
-
-export abstract class HuiStackCard extends LitElement implements LovelaceCard {
-  protected _cards?: LovelaceCard[];
-  private _config?: Config;
-  private _hass?: HomeAssistant;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._cards) {
-      return;
-    }
-
-    for (const element of this._cards) {
-      element.hass = this._hass;
-    }
-  }
-
-  public abstract getCardSize(): number;
-
-  public setConfig(config: Config): void {
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      throw new Error("Card config incorrect");
-    }
-    this._config = config;
-    this._cards = config.cards.map((card) => {
-      const element = createCardElement(card) as LovelaceCard;
-      if (this._hass) {
-        element.hass = this._hass;
-      }
-      return element;
-    });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <div id="root">
-        ${this._cards}
-      </div>
-    `;
-  }
-
-  protected abstract renderStyle(): TemplateResult;
-}
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import createCardElement from "../common/create-card-element";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+
+interface Config extends LovelaceConfig {
+  cards: LovelaceConfig[];
+}
+
+export abstract class HuiStackCard extends LitElement implements LovelaceCard {
+  protected _cards?: LovelaceCard[];
+  private _config?: Config;
+  private _hass?: HomeAssistant;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+
+    if (!this._cards) {
+      return;
+    }
+
+    for (const element of this._cards) {
+      element.hass = this._hass;
+    }
+  }
+
+  public abstract getCardSize(): number;
+
+  public setConfig(config: Config): void {
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      throw new Error("Card config incorrect");
+    }
+    this._config = config;
+    this._cards = config.cards.map((card) => {
+      const element = createCardElement(card) as LovelaceCard;
+      if (this._hass) {
+        element.hass = this._hass;
+      }
+      return element;
+    });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div id="root">
+        ${this._cards}
+      </div>
+    `;
+  }
+
+  protected abstract renderStyle(): TemplateResult;
+}
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index adae97a618..708a7bcb0a 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -1,390 +1,390 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { classMap } from "lit-html/directives/classMap.js";
-import { jQuery } from "../../../resources/jquery";
-
-import "../../../components/ha-card.js";
-import "../../../components/ha-icon.js";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
-
-import { HomeAssistant, ClimateEntity } from "../../../types.js";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard, LovelaceConfig } from "../types.js";
-import computeStateName from "../../../common/entity/compute_state_name.js";
-import { TemplateResult } from "lit-html";
-
-const thermostatConfig = {
-  radius: 150,
-  step: 1,
-  circleShape: "pie",
-  startAngle: 315,
-  width: 5,
-  lineCap: "round",
-  handleSize: "+10",
-  showTooltip: false,
-};
-
-const modeIcons = {
-  auto: "hass:autorenew",
-  heat: "hass:fire",
-  cool: "hass:snowflake",
-  off: "hass:power",
-};
-
-interface Config extends LovelaceConfig {
-  entity: string;
-}
-
-function formatTemp(temps: string[]): string {
-  return temps.filter(Boolean).join("-");
-}
-
-export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 4;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.entity || config.entity.split(".")[0] !== "climate") {
-      throw new Error("Specify an entity from within the climate domain.");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
-    const broadCard = this.clientWidth > 390;
-    const mode = modeIcons[stateObj.attributes.operation_mode || ""]
-      ? stateObj.attributes.operation_mode!
-      : "unknown-mode";
-    return html`
-      ${this.renderStyle()}
-      <ha-card
-        class="${classMap({
-          [mode]: true,
-          large: broadCard,
-          small: !broadCard,
-        })}">
-        <div id="root">
-          <div id="thermostat"></div>
-          <div id="tooltip">
-            <div class="title">${computeStateName(stateObj)}</div>
-            <div class="current-temperature">
-              <span class="current-temperature-text">${
-                stateObj.attributes.current_temperature
-              }
-                <span class="uom">${
-                  this.hass.config.unit_system.temperature
-                }</span>
-              </span>
-            </div>
-            <div class="climate-info">
-            <div id="set-temperature"></div>
-            <div class="current-mode">${this.localize(
-              `state.climate.${stateObj.state}`
-            )}</div>
-            <div class="modes">
-              ${(stateObj.attributes.operation_list || []).map((modeItem) =>
-                this._renderIcon(modeItem, mode)
-              )}
-            </div>
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    if (changedProps.has("_config")) {
-      return true;
-    }
-    return true;
-  }
-
-  protected firstUpdated(): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
-
-    const _sliderType =
-      stateObj.attributes.target_temp_low &&
-      stateObj.attributes.target_temp_high
-        ? "range"
-        : "min-range";
-
-    jQuery("#thermostat", this.shadowRoot).roundSlider({
-      ...thermostatConfig,
-      radius: this.clientWidth / 3,
-      min: stateObj.attributes.min_temp,
-      max: stateObj.attributes.max_temp,
-      sliderType: _sliderType,
-      change: (value) => this._setTemperature(value),
-      drag: (value) => this._dragEvent(value),
-    });
-  }
-
-  protected updated(): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
-
-    let sliderValue;
-    let uiValue;
-
-    if (
-      stateObj.attributes.target_temp_low &&
-      stateObj.attributes.target_temp_high
-    ) {
-      sliderValue = `${stateObj.attributes.target_temp_low}, ${
-        stateObj.attributes.target_temp_high
-      }`;
-      uiValue = formatTemp([
-        String(stateObj.attributes.target_temp_low),
-        String(stateObj.attributes.target_temp_high),
-      ]);
-    } else {
-      sliderValue = uiValue = stateObj.attributes.temperature;
-    }
-
-    jQuery("#thermostat", this.shadowRoot).roundSlider({
-      value: sliderValue,
-    });
-    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-    ${roundSliderStyle}
-    <style>
-      :host {
-        display: block;
-      }
-      ha-card {
-        overflow: hidden;
-        --rail-border-color: transparent;
-        --auto-color: green;
-        --cool-color: #2b9af9;
-        --heat-color: #FF8100;
-        --off-color: #8a8a8a;
-        --unknown-color: #bac;
-      }
-      #root {
-        position: relative;
-        overflow: hidden;
-      }
-      .auto {
-        --mode-color: var(--auto-color);
-      }
-      .cool {
-        --mode-color: var(--cool-color);
-      }
-      .heat {
-        --mode-color: var(--heat-color);
-      }
-      .off {
-        --mode-color: var(--off-color);
-      }
-      .unknown-mode {
-        --mode-color: var(--unknown-color);
-      }
-      .no-title {
-        --title-margin-top: 33% !important;
-      }
-      .large {
-        --thermostat-padding-top: 25px;
-        --thermostat-margin-bottom: 25px;
-        --title-font-size: 28px;
-        --title-margin-top: 20%;
-        --climate-info-margin-top: 17%;
-        --modes-margin-top: 2%;
-        --set-temperature-font-size: 25px;
-        --current-temperature-font-size: 71px;
-        --current-temperature-margin-top: 10%;
-        --current-temperature-text-padding-left: 15px;
-        --uom-font-size: 20px;
-        --uom-margin-left: -18px;
-        --current-mode-font-size: 18px;
-        --set-temperature-padding-bottom: 5px;
-      }
-      .small {
-        --thermostat-padding-top: 15px;
-        --thermostat-margin-bottom: 15px;
-        --title-font-size: 18px;
-        --title-margin-top: 20%;
-        --climate-info-margin-top: 7.5%;
-        --modes-margin-top: 1%;
-        --set-temperature-font-size: 16px;
-        --current-temperature-font-size: 25px;
-        --current-temperature-margin-top: 5%;
-        --current-temperature-text-padding-left: 7px;
-        --uom-font-size: 12px;
-        --uom-margin-left: -5px;
-        --current-mode-font-size: 14px;
-        --set-temperature-padding-bottom: 0px;
-      }
-      #thermostat {
-        margin: 0 auto var(--thermostat-margin-bottom);
-        padding-top: var(--thermostat-padding-top);
-      }
-      #thermostat .rs-range-color  {
-        background-color: var(--mode-color, var(--disabled-text-color));
-      }
-      #thermostat .rs-path-color  {
-          background-color: var(--disabled-text-color);
-      }
-      #thermostat .rs-handle  {
-          background-color: var(--paper-card-background-color, white);
-          padding: 7px;
-          border: 2px solid var(--disabled-text-color);
-      }
-      #thermostat .rs-handle.rs-focus  {
-          border-color: var(--mode-color, var(--disabled-text-color));
-      }
-      #thermostat .rs-handle:after  {
-          border-color: var(--mode-color, var(--disabled-text-color));
-          background-color: var(--mode-color, var(--disabled-text-color));
-      }
-      #thermostat .rs-border  {
-        border-color: var(--rail-border-color);
-      }
-      #thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
-        z-index: 20 !important;
-      }
-      #thermostat .rs-inner.rs-bg-color.rs-border,
-      #thermostat .rs-overlay.rs-transition.rs-bg-color {
-        background-color: var(--paper-card-background-color, white);
-      }
-      #tooltip {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 100%;
-        text-align: center;
-        z-index: 15;
-        color: var(--primary-text-color);
-      }
-      #set-temperature {
-        font-size: var(--set-temperature-font-size);
-        padding-bottom: var(--set-temperature-padding-bottom);
-      }
-      .title {
-        font-size: var(--title-font-size);
-        margin-top: var(--title-margin-top);
-      }
-      .climate-info {
-        margin-top: var(--climate-info-margin-top);
-      }
-      .current-mode {
-        font-size: var(--current-mode-font-size);
-        color: var(--secondary-text-color);
-      }
-      .modes {
-        margin-top: var(--modes-margin-top);
-      }
-      .modes ha-icon {
-        color: var(--disabled-text-color);
-        cursor: pointer;
-        display: inline-block;
-        margin: 0 10px;
-      }
-      .modes ha-icon.selected-icon {
-        color: var(--mode-color);
-      }
-      .current-temperature {
-        margin-top: var(--current-temperature-margin-top);
-        font-size: var(--current-temperature-font-size);
-      }
-      .current-temperature-text {
-        padding-left: var(--current-temperature-text-padding-left);
-      }
-      .uom {
-        font-size: var(--uom-font-size);
-        vertical-align: top;
-        margin-left: var(--uom-margin-left);
-      }
-    </style>
-    `;
-  }
-
-  private _dragEvent(e): void {
-    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
-      String(e.value).split(",")
-    );
-  }
-
-  private _setTemperature(e): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
-    if (
-      stateObj.attributes.target_temp_low &&
-      stateObj.attributes.target_temp_high
-    ) {
-      if (e.handle.index === 1) {
-        this.hass!.callService("climate", "set_temperature", {
-          entity_id: this._config!.entity,
-          target_temp_low: e.handle.value,
-          target_temp_high: stateObj.attributes.target_temp_high,
-        });
-      } else {
-        this.hass!.callService("climate", "set_temperature", {
-          entity_id: this._config!.entity,
-          target_temp_low: stateObj.attributes.target_temp_low,
-          target_temp_high: e.handle.value,
-        });
-      }
-    } else {
-      this.hass!.callService("climate", "set_temperature", {
-        entity_id: this._config!.entity,
-        temperature: e.value,
-      });
-    }
-  }
-
-  private _renderIcon(mode: string, currentMode: string): TemplateResult {
-    if (!modeIcons[mode]) {
-      return html``;
-    }
-    return html`<ha-icon
-      class="${classMap({ "selected-icon": currentMode === mode })}"
-      .mode="${mode}"
-      .icon="${modeIcons[mode]}"
-      @click="${this._handleModeClick}"
-    ></ha-icon>`;
-  }
-
-  private _handleModeClick(e: MouseEvent): void {
-    this.hass!.callService("climate", "set_operation_mode", {
-      entity_id: this._config!.entity,
-      operation_mode: (e.currentTarget as any).mode,
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-thermostat-card": HuiThermostatCard;
-  }
-}
-
-customElements.define("hui-thermostat-card", HuiThermostatCard);
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap";
+import { jQuery } from "../../../resources/jquery";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import { roundSliderStyle } from "../../../resources/jquery.roundslider";
+
+import { HomeAssistant, ClimateEntity } from "../../../types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import computeStateName from "../../../common/entity/compute_state_name";
+import { TemplateResult } from "lit-html";
+
+const thermostatConfig = {
+  radius: 150,
+  step: 1,
+  circleShape: "pie",
+  startAngle: 315,
+  width: 5,
+  lineCap: "round",
+  handleSize: "+10",
+  showTooltip: false,
+};
+
+const modeIcons = {
+  auto: "hass:autorenew",
+  heat: "hass:fire",
+  cool: "hass:snowflake",
+  off: "hass:power",
+};
+
+interface Config extends LovelaceConfig {
+  entity: string;
+}
+
+function formatTemp(temps: string[]): string {
+  return temps.filter(Boolean).join("-");
+}
+
+export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 4;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity || config.entity.split(".")[0] !== "climate") {
+      throw new Error("Specify an entity from within the climate domain.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
+    const broadCard = this.clientWidth > 390;
+    const mode = modeIcons[stateObj.attributes.operation_mode || ""]
+      ? stateObj.attributes.operation_mode!
+      : "unknown-mode";
+    return html`
+      ${this.renderStyle()}
+      <ha-card
+        class="${classMap({
+          [mode]: true,
+          large: broadCard,
+          small: !broadCard,
+        })}">
+        <div id="root">
+          <div id="thermostat"></div>
+          <div id="tooltip">
+            <div class="title">${computeStateName(stateObj)}</div>
+            <div class="current-temperature">
+              <span class="current-temperature-text">${
+                stateObj.attributes.current_temperature
+              }
+                <span class="uom">${
+                  this.hass.config.unit_system.temperature
+                }</span>
+              </span>
+            </div>
+            <div class="climate-info">
+            <div id="set-temperature"></div>
+            <div class="current-mode">${this.localize(
+              `state.climate.${stateObj.state}`
+            )}</div>
+            <div class="modes">
+              ${(stateObj.attributes.operation_list || []).map((modeItem) =>
+                this._renderIcon(modeItem, mode)
+              )}
+            </div>
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    if (changedProps.has("_config")) {
+      return true;
+    }
+    return true;
+  }
+
+  protected firstUpdated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+
+    const _sliderType =
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+        ? "range"
+        : "min-range";
+
+    jQuery("#thermostat", this.shadowRoot).roundSlider({
+      ...thermostatConfig,
+      radius: this.clientWidth / 3,
+      min: stateObj.attributes.min_temp,
+      max: stateObj.attributes.max_temp,
+      sliderType: _sliderType,
+      change: (value) => this._setTemperature(value),
+      drag: (value) => this._dragEvent(value),
+    });
+  }
+
+  protected updated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+
+    let sliderValue;
+    let uiValue;
+
+    if (
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+    ) {
+      sliderValue = `${stateObj.attributes.target_temp_low}, ${
+        stateObj.attributes.target_temp_high
+      }`;
+      uiValue = formatTemp([
+        String(stateObj.attributes.target_temp_low),
+        String(stateObj.attributes.target_temp_high),
+      ]);
+    } else {
+      sliderValue = uiValue = stateObj.attributes.temperature;
+    }
+
+    jQuery("#thermostat", this.shadowRoot).roundSlider({
+      value: sliderValue,
+    });
+    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+    ${roundSliderStyle}
+    <style>
+      :host {
+        display: block;
+      }
+      ha-card {
+        overflow: hidden;
+        --rail-border-color: transparent;
+        --auto-color: green;
+        --cool-color: #2b9af9;
+        --heat-color: #FF8100;
+        --off-color: #8a8a8a;
+        --unknown-color: #bac;
+      }
+      #root {
+        position: relative;
+        overflow: hidden;
+      }
+      .auto {
+        --mode-color: var(--auto-color);
+      }
+      .cool {
+        --mode-color: var(--cool-color);
+      }
+      .heat {
+        --mode-color: var(--heat-color);
+      }
+      .off {
+        --mode-color: var(--off-color);
+      }
+      .unknown-mode {
+        --mode-color: var(--unknown-color);
+      }
+      .no-title {
+        --title-margin-top: 33% !important;
+      }
+      .large {
+        --thermostat-padding-top: 25px;
+        --thermostat-margin-bottom: 25px;
+        --title-font-size: 28px;
+        --title-margin-top: 20%;
+        --climate-info-margin-top: 17%;
+        --modes-margin-top: 2%;
+        --set-temperature-font-size: 25px;
+        --current-temperature-font-size: 71px;
+        --current-temperature-margin-top: 10%;
+        --current-temperature-text-padding-left: 15px;
+        --uom-font-size: 20px;
+        --uom-margin-left: -18px;
+        --current-mode-font-size: 18px;
+        --set-temperature-padding-bottom: 5px;
+      }
+      .small {
+        --thermostat-padding-top: 15px;
+        --thermostat-margin-bottom: 15px;
+        --title-font-size: 18px;
+        --title-margin-top: 20%;
+        --climate-info-margin-top: 7.5%;
+        --modes-margin-top: 1%;
+        --set-temperature-font-size: 16px;
+        --current-temperature-font-size: 25px;
+        --current-temperature-margin-top: 5%;
+        --current-temperature-text-padding-left: 7px;
+        --uom-font-size: 12px;
+        --uom-margin-left: -5px;
+        --current-mode-font-size: 14px;
+        --set-temperature-padding-bottom: 0px;
+      }
+      #thermostat {
+        margin: 0 auto var(--thermostat-margin-bottom);
+        padding-top: var(--thermostat-padding-top);
+      }
+      #thermostat .rs-range-color  {
+        background-color: var(--mode-color, var(--disabled-text-color));
+      }
+      #thermostat .rs-path-color  {
+          background-color: var(--disabled-text-color);
+      }
+      #thermostat .rs-handle  {
+          background-color: var(--paper-card-background-color, white);
+          padding: 7px;
+          border: 2px solid var(--disabled-text-color);
+      }
+      #thermostat .rs-handle.rs-focus  {
+          border-color: var(--mode-color, var(--disabled-text-color));
+      }
+      #thermostat .rs-handle:after  {
+          border-color: var(--mode-color, var(--disabled-text-color));
+          background-color: var(--mode-color, var(--disabled-text-color));
+      }
+      #thermostat .rs-border  {
+        border-color: var(--rail-border-color);
+      }
+      #thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
+        z-index: 20 !important;
+      }
+      #thermostat .rs-inner.rs-bg-color.rs-border,
+      #thermostat .rs-overlay.rs-transition.rs-bg-color {
+        background-color: var(--paper-card-background-color, white);
+      }
+      #tooltip {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        text-align: center;
+        z-index: 15;
+        color: var(--primary-text-color);
+      }
+      #set-temperature {
+        font-size: var(--set-temperature-font-size);
+        padding-bottom: var(--set-temperature-padding-bottom);
+      }
+      .title {
+        font-size: var(--title-font-size);
+        margin-top: var(--title-margin-top);
+      }
+      .climate-info {
+        margin-top: var(--climate-info-margin-top);
+      }
+      .current-mode {
+        font-size: var(--current-mode-font-size);
+        color: var(--secondary-text-color);
+      }
+      .modes {
+        margin-top: var(--modes-margin-top);
+      }
+      .modes ha-icon {
+        color: var(--disabled-text-color);
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+      }
+      .modes ha-icon.selected-icon {
+        color: var(--mode-color);
+      }
+      .current-temperature {
+        margin-top: var(--current-temperature-margin-top);
+        font-size: var(--current-temperature-font-size);
+      }
+      .current-temperature-text {
+        padding-left: var(--current-temperature-text-padding-left);
+      }
+      .uom {
+        font-size: var(--uom-font-size);
+        vertical-align: top;
+        margin-left: var(--uom-margin-left);
+      }
+    </style>
+    `;
+  }
+
+  private _dragEvent(e): void {
+    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
+      String(e.value).split(",")
+    );
+  }
+
+  private _setTemperature(e): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+    if (
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+    ) {
+      if (e.handle.index === 1) {
+        this.hass!.callService("climate", "set_temperature", {
+          entity_id: this._config!.entity,
+          target_temp_low: e.handle.value,
+          target_temp_high: stateObj.attributes.target_temp_high,
+        });
+      } else {
+        this.hass!.callService("climate", "set_temperature", {
+          entity_id: this._config!.entity,
+          target_temp_low: stateObj.attributes.target_temp_low,
+          target_temp_high: e.handle.value,
+        });
+      }
+    } else {
+      this.hass!.callService("climate", "set_temperature", {
+        entity_id: this._config!.entity,
+        temperature: e.value,
+      });
+    }
+  }
+
+  private _renderIcon(mode: string, currentMode: string): TemplateResult {
+    if (!modeIcons[mode]) {
+      return html``;
+    }
+    return html`<ha-icon
+      class="${classMap({ "selected-icon": currentMode === mode })}"
+      .mode="${mode}"
+      .icon="${modeIcons[mode]}"
+      @click="${this._handleModeClick}"
+    ></ha-icon>`;
+  }
+
+  private _handleModeClick(e: MouseEvent): void {
+    this.hass!.callService("climate", "set_operation_mode", {
+      entity_id: this._config!.entity,
+      operation_mode: (e.currentTarget as any).mode,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-thermostat-card": HuiThermostatCard;
+  }
+}
+
+customElements.define("hui-thermostat-card", HuiThermostatCard);
diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
index 863641cf1d..3d13d2827c 100644
--- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
@@ -1,50 +1,50 @@
-import { html } from "@polymer/lit-element";
-
-import computeCardSize from "../common/compute-card-size.js";
-
-import { HuiStackCard } from "./hui-stack-card";
-import { TemplateResult } from "lit-html";
-
-class HuiVerticalStackCard extends HuiStackCard {
-  public getCardSize() {
-    let totalSize = 0;
-
-    if (!this._cards) {
-      return totalSize;
-    }
-
-    for (const element of this._cards) {
-      totalSize += computeCardSize(element);
-    }
-
-    return totalSize;
-  }
-
-  protected renderStyle(): TemplateResult {
-    return html`
-      <style>
-        #root {
-          display: flex;
-          flex-direction: column;
-        }
-        #root > * {
-          margin: 4px 0 4px 0;
-        }
-        #root > *:first-child {
-          margin-top: 0;
-        }
-        #root > *:last-child {
-          margin-bottom: 0;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-vertical-stack-card": HuiVerticalStackCard;
-  }
-}
-
-customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);
+import { html } from "@polymer/lit-element";
+
+import computeCardSize from "../common/compute-card-size";
+
+import { HuiStackCard } from "./hui-stack-card";
+import { TemplateResult } from "lit-html";
+
+class HuiVerticalStackCard extends HuiStackCard {
+  public getCardSize() {
+    let totalSize = 0;
+
+    if (!this._cards) {
+      return totalSize;
+    }
+
+    for (const element of this._cards) {
+      totalSize += computeCardSize(element);
+    }
+
+    return totalSize;
+  }
+
+  protected renderStyle(): TemplateResult {
+    return html`
+      <style>
+        #root {
+          display: flex;
+          flex-direction: column;
+        }
+        #root > * {
+          margin: 4px 0 4px 0;
+        }
+        #root > *:first-child {
+          margin-top: 0;
+        }
+        #root > *:last-child {
+          margin-bottom: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-vertical-stack-card": HuiVerticalStackCard;
+  }
+}
+
+customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js
index 082c5fc7d4..9ad4374231 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.js
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.js
@@ -1,15 +1,15 @@
-import "../../../cards/ha-camera-card.js";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card.js";
-
-class HuiWeatherForecastCard extends LegacyWrapperCard {
-  constructor() {
-    super("ha-weather-card", "weather");
-  }
-
-  getCardSize() {
-    return 4;
-  }
-}
-
-customElements.define("hui-weather-forecast-card", HuiWeatherForecastCard);
+import "../../../cards/ha-camera-card";
+
+import LegacyWrapperCard from "./hui-legacy-wrapper-card";
+
+class HuiWeatherForecastCard extends LegacyWrapperCard {
+  constructor() {
+    super("ha-weather-card", "weather");
+  }
+
+  getCardSize() {
+    return 4;
+  }
+}
+
+customElements.define("hui-weather-forecast-card", HuiWeatherForecastCard);
diff --git a/src/panels/lovelace/common/compute-notifications.js b/src/panels/lovelace/common/compute-notifications.js
index 94c894e860..0e9f57316f 100644
--- a/src/panels/lovelace/common/compute-notifications.js
+++ b/src/panels/lovelace/common/compute-notifications.js
@@ -1,7 +1,7 @@
-import computeDomain from "../../../common/entity/compute_domain.js";
-
-export default function computeNotifications(states) {
-  return Object.keys(states)
-    .filter((entityId) => computeDomain(entityId) === "configurator")
-    .map((entityId) => states[entityId]);
-}
+import computeDomain from "../../../common/entity/compute_domain";
+
+export default function computeNotifications(states) {
+  return Object.keys(states)
+    .filter((entityId) => computeDomain(entityId) === "configurator")
+    .map((entityId) => states[entityId]);
+}
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index 92db6f4a6f..9417fa8989 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/src/panels/lovelace/common/create-card-element.js
@@ -1,112 +1,112 @@
-import { fireEvent } from "../../../common/dom/fire_event.js";
-
-import "../cards/hui-alarm-panel-card.js";
-import "../cards/hui-conditional-card.ts";
-import "../cards/hui-entities-card.ts";
-import "../cards/hui-entity-button-card.ts";
-import "../cards/hui-entity-filter-card.js";
-import "../cards/hui-error-card.ts";
-import "../cards/hui-glance-card.ts";
-import "../cards/hui-history-graph-card.js";
-import "../cards/hui-horizontal-stack-card.ts";
-import "../cards/hui-iframe-card.ts";
-import "../cards/hui-light-card";
-import "../cards/hui-map-card.js";
-import "../cards/hui-markdown-card.ts";
-import "../cards/hui-media-control-card.js";
-import "../cards/hui-picture-card.js";
-import "../cards/hui-picture-elements-card";
-import "../cards/hui-picture-entity-card";
-import "../cards/hui-picture-glance-card";
-import "../cards/hui-plant-status-card.js";
-import "../cards/hui-sensor-card.js";
-import "../cards/hui-vertical-stack-card.ts";
-import "../cards/hui-thermostat-card.ts";
-import "../cards/hui-weather-forecast-card";
-import "../cards/hui-gauge-card";
-
-import createErrorCardConfig from "./create-error-card-config.js";
-
-const CARD_TYPES = new Set([
-  "alarm-panel",
-  "conditional",
-  "entities",
-  "entity-button",
-  "entity-filter",
-  "error",
-  "gauge",
-  "glance",
-  "history-graph",
-  "horizontal-stack",
-  "iframe",
-  "light",
-  "map",
-  "markdown",
-  "media-control",
-  "picture",
-  "picture-elements",
-  "picture-entity",
-  "picture-glance",
-  "plant-status",
-  "sensor",
-  "thermostat",
-  "vertical-stack",
-  "weather-forecast",
-]);
-const CUSTOM_TYPE_PREFIX = "custom:";
-const TIMEOUT = 2000;
-
-function _createElement(tag, config) {
-  const element = document.createElement(tag);
-  try {
-    element.setConfig(config);
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(tag, err);
-    // eslint-disable-next-line
-    return _createErrorElement(err.message, config);
-  }
-  return element;
-}
-
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
-
-export default function createCardElement(config) {
-  if (!config || typeof config !== "object" || !config.type) {
-    return _createErrorElement("No card type configured.", config);
-  }
-
-  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
-
-    if (customElements.get(tag)) {
-      return _createElement(tag, config);
-    }
-    const element = _createErrorElement(
-      `Custom element doesn't exist: ${tag}.`,
-      config
-    );
-    element.style.display = "None";
-    const timer = window.setTimeout(() => {
-      element.style.display = "";
-    }, TIMEOUT);
-
-    customElements.whenDefined(tag).then(() => {
-      clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
-    });
-
-    return element;
-  }
-
-  if (!CARD_TYPES.has(config.type)) {
-    return _createErrorElement(
-      `Unknown card type encountered: ${config.type}.`,
-      config
-    );
-  }
-
-  return _createElement(`hui-${config.type}-card`, config);
-}
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "../cards/hui-alarm-panel-card";
+import "../cards/hui-conditional-card.ts";
+import "../cards/hui-entities-card.ts";
+import "../cards/hui-entity-button-card.ts";
+import "../cards/hui-entity-filter-card";
+import "../cards/hui-error-card.ts";
+import "../cards/hui-glance-card.ts";
+import "../cards/hui-history-graph-card";
+import "../cards/hui-horizontal-stack-card.ts";
+import "../cards/hui-iframe-card.ts";
+import "../cards/hui-light-card";
+import "../cards/hui-map-card";
+import "../cards/hui-markdown-card.ts";
+import "../cards/hui-media-control-card";
+import "../cards/hui-picture-card";
+import "../cards/hui-picture-elements-card";
+import "../cards/hui-picture-entity-card";
+import "../cards/hui-picture-glance-card";
+import "../cards/hui-plant-status-card";
+import "../cards/hui-sensor-card";
+import "../cards/hui-vertical-stack-card.ts";
+import "../cards/hui-thermostat-card.ts";
+import "../cards/hui-weather-forecast-card";
+import "../cards/hui-gauge-card";
+
+import createErrorCardConfig from "./create-error-card-config";
+
+const CARD_TYPES = new Set([
+  "alarm-panel",
+  "conditional",
+  "entities",
+  "entity-button",
+  "entity-filter",
+  "error",
+  "gauge",
+  "glance",
+  "history-graph",
+  "horizontal-stack",
+  "iframe",
+  "light",
+  "map",
+  "markdown",
+  "media-control",
+  "picture",
+  "picture-elements",
+  "picture-entity",
+  "picture-glance",
+  "plant-status",
+  "sensor",
+  "thermostat",
+  "vertical-stack",
+  "weather-forecast",
+]);
+const CUSTOM_TYPE_PREFIX = "custom:";
+const TIMEOUT = 2000;
+
+function _createElement(tag, config) {
+  const element = document.createElement(tag);
+  try {
+    element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement("hui-error-card", createErrorCardConfig(error, config));
+}
+
+export default function createCardElement(config) {
+  if (!config || typeof config !== "object" || !config.type) {
+    return _createErrorElement("No card type configured.", config);
+  }
+
+  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config);
+    }
+    const element = _createErrorElement(
+      `Custom element doesn't exist: ${tag}.`,
+      config
+    );
+    element.style.display = "None";
+    const timer = window.setTimeout(() => {
+      element.style.display = "";
+    }, TIMEOUT);
+
+    customElements.whenDefined(tag).then(() => {
+      clearTimeout(timer);
+      fireEvent(element, "rebuild-view");
+    });
+
+    return element;
+  }
+
+  if (!CARD_TYPES.has(config.type)) {
+    return _createErrorElement(
+      `Unknown card type encountered: ${config.type}.`,
+      config
+    );
+  }
+
+  return _createElement(`hui-${config.type}-card`, config);
+}
diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index 39d99926c9..b02b86dbcf 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,79 +1,79 @@
-import "../elements/hui-icon-element";
-import "../elements/hui-image-element";
-import "../elements/hui-service-button-element";
-import "../elements/hui-state-badge-element";
-import "../elements/hui-state-icon-element";
-import "../elements/hui-state-label-element";
-
-import { fireEvent } from "../../../common/dom/fire_event.js";
-import createErrorCardConfig from "./create-error-card-config.js";
-
-const CUSTOM_TYPE_PREFIX = "custom:";
-const ELEMENT_TYPES = new Set([
-  "icon",
-  "image",
-  "service-button",
-  "state-badge",
-  "state-icon",
-  "state-label",
-]);
-const TIMEOUT = 2000;
-
-function _createElement(tag, config) {
-  const element = document.createElement(tag);
-  try {
-    element.setConfig(config);
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(tag, err);
-    // eslint-disable-next-line
-    return _createErrorElement(err.message, config);
-  }
-  return element;
-}
-
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
-
-function _hideErrorElement(element) {
-  element.style.display = "None";
-  return window.setTimeout(() => {
-    element.style.display = "";
-  }, TIMEOUT);
-}
-
-export default function createHuiElement(config) {
-  if (!config || typeof config !== "object" || !config.type) {
-    return _createErrorElement("No element type configured.", config);
-  }
-
-  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
-
-    if (customElements.get(tag)) {
-      return _createElement(tag, config);
-    }
-    const element = _createErrorElement(
-      `Custom element doesn't exist: ${tag}.`,
-      config
-    );
-    const timer = _hideErrorElement(element);
-
-    customElements.whenDefined(tag).then(() => {
-      clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
-    });
-
-    return element;
-  }
-
-  if (!ELEMENT_TYPES.has(config.type)) {
-    return _createErrorElement(
-      `Unknown element type encountered: ${config.type}.`,
-      config
-    );
-  }
-
-  return _createElement(`hui-${config.type}-element`, config);
-}
+import "../elements/hui-icon-element";
+import "../elements/hui-image-element";
+import "../elements/hui-service-button-element";
+import "../elements/hui-state-badge-element";
+import "../elements/hui-state-icon-element";
+import "../elements/hui-state-label-element";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import createErrorCardConfig from "./create-error-card-config";
+
+const CUSTOM_TYPE_PREFIX = "custom:";
+const ELEMENT_TYPES = new Set([
+  "icon",
+  "image",
+  "service-button",
+  "state-badge",
+  "state-icon",
+  "state-label",
+]);
+const TIMEOUT = 2000;
+
+function _createElement(tag, config) {
+  const element = document.createElement(tag);
+  try {
+    element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement("hui-error-card", createErrorCardConfig(error, config));
+}
+
+function _hideErrorElement(element) {
+  element.style.display = "None";
+  return window.setTimeout(() => {
+    element.style.display = "";
+  }, TIMEOUT);
+}
+
+export default function createHuiElement(config) {
+  if (!config || typeof config !== "object" || !config.type) {
+    return _createErrorElement("No element type configured.", config);
+  }
+
+  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config);
+    }
+    const element = _createErrorElement(
+      `Custom element doesn't exist: ${tag}.`,
+      config
+    );
+    const timer = _hideErrorElement(element);
+
+    customElements.whenDefined(tag).then(() => {
+      clearTimeout(timer);
+      fireEvent(element, "rebuild-view");
+    });
+
+    return element;
+  }
+
+  if (!ELEMENT_TYPES.has(config.type)) {
+    return _createErrorElement(
+      `Unknown element type encountered: ${config.type}.`,
+      config
+    );
+  }
+
+  return _createElement(`hui-${config.type}-element`, config);
+}
diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index 74222bc258..f973db948d 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -1,117 +1,117 @@
-import { fireEvent } from "../../../common/dom/fire_event.js";
-
-import "../entity-rows/hui-climate-entity-row";
-import "../entity-rows/hui-cover-entity-row.js";
-import "../entity-rows/hui-group-entity-row.js";
-import "../entity-rows/hui-input-number-entity-row.js";
-import "../entity-rows/hui-input-select-entity-row.js";
-import "../entity-rows/hui-input-text-entity-row.js";
-import "../entity-rows/hui-lock-entity-row.js";
-import "../entity-rows/hui-media-player-entity-row.js";
-import "../entity-rows/hui-scene-entity-row.js";
-import "../entity-rows/hui-script-entity-row.js";
-import "../entity-rows/hui-text-entity-row.js";
-import "../entity-rows/hui-timer-entity-row.js";
-import "../entity-rows/hui-toggle-entity-row.js";
-
-import "../special-rows/hui-call-service-row";
-import "../special-rows/hui-divider-row";
-import "../special-rows/hui-section-row";
-import "../special-rows/hui-weblink-row";
-
-import createErrorCardConfig from "./create-error-card-config.js";
-
-const CUSTOM_TYPE_PREFIX = "custom:";
-const SPECIAL_TYPES = new Set([
-  "call-service",
-  "divider",
-  "section",
-  "weblink",
-]);
-const DOMAIN_TO_ELEMENT_TYPE = {
-  automation: "toggle",
-  climate: "climate",
-  cover: "cover",
-  fan: "toggle",
-  group: "group",
-  input_boolean: "toggle",
-  input_number: "input-number",
-  input_select: "input-select",
-  input_text: "input-text",
-  light: "toggle",
-  media_player: "media-player",
-  lock: "lock",
-  scene: "scene",
-  script: "script",
-  timer: "timer",
-  switch: "toggle",
-  vacuum: "toggle",
-};
-const TIMEOUT = 2000;
-
-function _createElement(tag, config) {
-  const element = document.createElement(tag);
-  try {
-    if ("setConfig" in element) element.setConfig(config);
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(tag, err);
-    // eslint-disable-next-line
-    return _createErrorElement(err.message, config);
-  }
-
-  return element;
-}
-
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
-
-function _hideErrorElement(element) {
-  element.style.display = "None";
-  return window.setTimeout(() => {
-    element.style.display = "";
-  }, TIMEOUT);
-}
-
-export default function createRowElement(config) {
-  let tag;
-
-  if (
-    !config ||
-    typeof config !== "object" ||
-    (!config.entity && !config.type)
-  ) {
-    return _createErrorElement("Invalid config given.", config);
-  }
-
-  const type = config.type || "default";
-  if (SPECIAL_TYPES.has(type)) {
-    return _createElement(`hui-${type}-row`, config);
-  }
-
-  if (type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    tag = type.substr(CUSTOM_TYPE_PREFIX.length);
-
-    if (customElements.get(tag)) {
-      return _createElement(tag, config);
-    }
-    const element = _createErrorElement(
-      `Custom element doesn't exist: ${tag}.`,
-      config
-    );
-    const timer = _hideErrorElement(element);
-
-    customElements.whenDefined(tag).then(() => {
-      clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
-    });
-
-    return element;
-  }
-
-  const domain = config.entity.split(".", 1)[0];
-  tag = `hui-${DOMAIN_TO_ELEMENT_TYPE[domain] || "text"}-entity-row`;
-
-  return _createElement(tag, config);
-}
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "../entity-rows/hui-climate-entity-row";
+import "../entity-rows/hui-cover-entity-row";
+import "../entity-rows/hui-group-entity-row";
+import "../entity-rows/hui-input-number-entity-row";
+import "../entity-rows/hui-input-select-entity-row";
+import "../entity-rows/hui-input-text-entity-row";
+import "../entity-rows/hui-lock-entity-row";
+import "../entity-rows/hui-media-player-entity-row";
+import "../entity-rows/hui-scene-entity-row";
+import "../entity-rows/hui-script-entity-row";
+import "../entity-rows/hui-text-entity-row";
+import "../entity-rows/hui-timer-entity-row";
+import "../entity-rows/hui-toggle-entity-row";
+
+import "../special-rows/hui-call-service-row";
+import "../special-rows/hui-divider-row";
+import "../special-rows/hui-section-row";
+import "../special-rows/hui-weblink-row";
+
+import createErrorCardConfig from "./create-error-card-config";
+
+const CUSTOM_TYPE_PREFIX = "custom:";
+const SPECIAL_TYPES = new Set([
+  "call-service",
+  "divider",
+  "section",
+  "weblink",
+]);
+const DOMAIN_TO_ELEMENT_TYPE = {
+  automation: "toggle",
+  climate: "climate",
+  cover: "cover",
+  fan: "toggle",
+  group: "group",
+  input_boolean: "toggle",
+  input_number: "input-number",
+  input_select: "input-select",
+  input_text: "input-text",
+  light: "toggle",
+  media_player: "media-player",
+  lock: "lock",
+  scene: "scene",
+  script: "script",
+  timer: "timer",
+  switch: "toggle",
+  vacuum: "toggle",
+};
+const TIMEOUT = 2000;
+
+function _createElement(tag, config) {
+  const element = document.createElement(tag);
+  try {
+    if ("setConfig" in element) element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement("hui-error-card", createErrorCardConfig(error, config));
+}
+
+function _hideErrorElement(element) {
+  element.style.display = "None";
+  return window.setTimeout(() => {
+    element.style.display = "";
+  }, TIMEOUT);
+}
+
+export default function createRowElement(config) {
+  let tag;
+
+  if (
+    !config ||
+    typeof config !== "object" ||
+    (!config.entity && !config.type)
+  ) {
+    return _createErrorElement("Invalid config given.", config);
+  }
+
+  const type = config.type || "default";
+  if (SPECIAL_TYPES.has(type)) {
+    return _createElement(`hui-${type}-row`, config);
+  }
+
+  if (type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    tag = type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config);
+    }
+    const element = _createErrorElement(
+      `Custom element doesn't exist: ${tag}.`,
+      config
+    );
+    const timer = _hideErrorElement(element);
+
+    customElements.whenDefined(tag).then(() => {
+      clearTimeout(timer);
+      fireEvent(element, "rebuild-view");
+    });
+
+    return element;
+  }
+
+  const domain = config.entity.split(".", 1)[0];
+  tag = `hui-${DOMAIN_TO_ELEMENT_TYPE[domain] || "text"}-entity-row`;
+
+  return _createElement(tag, config);
+}
diff --git a/src/panels/lovelace/common/entity/toggle-entity.js b/src/panels/lovelace/common/entity/toggle-entity.js
index aa57a309d8..21820da7f7 100644
--- a/src/panels/lovelace/common/entity/toggle-entity.js
+++ b/src/panels/lovelace/common/entity/toggle-entity.js
@@ -1,7 +1,7 @@
-import { STATES_OFF } from "../../../../common/const.js";
-import turnOnOffEntity from "./turn-on-off-entity.js";
-
-export default function toggleEntity(hass, entityId) {
-  const turnOn = STATES_OFF.includes(hass.states[entityId].state);
-  turnOnOffEntity(hass, entityId, turnOn);
-}
+import { STATES_OFF } from "../../../../common/const";
+import turnOnOffEntity from "./turn-on-off-entity";
+
+export default function toggleEntity(hass, entityId) {
+  const turnOn = STATES_OFF.includes(hass.states[entityId].state);
+  turnOnOffEntity(hass, entityId, turnOn);
+}
diff --git a/src/panels/lovelace/common/entity/turn-on-off-entities.js b/src/panels/lovelace/common/entity/turn-on-off-entities.js
index caacc03e79..b3a990e74b 100644
--- a/src/panels/lovelace/common/entity/turn-on-off-entities.js
+++ b/src/panels/lovelace/common/entity/turn-on-off-entities.js
@@ -1,34 +1,34 @@
-import { STATES_OFF } from "../../../../common/const.js";
-import computeDomain from "../../../../common/entity/compute_domain.js";
-
-export default function turnOnOffEntities(hass, entityIds, turnOn = true) {
-  const domainsToCall = {};
-  entityIds.forEach((entityId) => {
-    if (STATES_OFF.includes(hass.states[entityId].state) === turnOn) {
-      const stateDomain = computeDomain(entityId);
-      const serviceDomain = ["cover", "lock"].includes(stateDomain)
-        ? stateDomain
-        : "homeassistant";
-
-      if (!(serviceDomain in domainsToCall)) domainsToCall[serviceDomain] = [];
-      domainsToCall[serviceDomain].push(entityId);
-    }
-  });
-
-  Object.keys(domainsToCall).forEach((domain) => {
-    let service;
-    switch (domain) {
-      case "lock":
-        service = turnOn ? "unlock" : "lock";
-        break;
-      case "cover":
-        service = turnOn ? "open_cover" : "close_cover";
-        break;
-      default:
-        service = turnOn ? "turn_on" : "turn_off";
-    }
-
-    const entities = domainsToCall[domain];
-    hass.callService(domain, service, { entity_id: entities });
-  });
-}
+import { STATES_OFF } from "../../../../common/const";
+import computeDomain from "../../../../common/entity/compute_domain";
+
+export default function turnOnOffEntities(hass, entityIds, turnOn = true) {
+  const domainsToCall = {};
+  entityIds.forEach((entityId) => {
+    if (STATES_OFF.includes(hass.states[entityId].state) === turnOn) {
+      const stateDomain = computeDomain(entityId);
+      const serviceDomain = ["cover", "lock"].includes(stateDomain)
+        ? stateDomain
+        : "homeassistant";
+
+      if (!(serviceDomain in domainsToCall)) domainsToCall[serviceDomain] = [];
+      domainsToCall[serviceDomain].push(entityId);
+    }
+  });
+
+  Object.keys(domainsToCall).forEach((domain) => {
+    let service;
+    switch (domain) {
+      case "lock":
+        service = turnOn ? "unlock" : "lock";
+        break;
+      case "cover":
+        service = turnOn ? "open_cover" : "close_cover";
+        break;
+      default:
+        service = turnOn ? "turn_on" : "turn_off";
+    }
+
+    const entities = domainsToCall[domain];
+    hass.callService(domain, service, { entity_id: entities });
+  });
+}
diff --git a/src/panels/lovelace/common/entity/turn-on-off-entity.js b/src/panels/lovelace/common/entity/turn-on-off-entity.js
index f34d04c064..dc7e5d1a4d 100644
--- a/src/panels/lovelace/common/entity/turn-on-off-entity.js
+++ b/src/panels/lovelace/common/entity/turn-on-off-entity.js
@@ -1,20 +1,20 @@
-import computeDomain from "../../../../common/entity/compute_domain.js";
-
-export default function turnOnOffEntity(hass, entityId, turnOn = true) {
-  const stateDomain = computeDomain(entityId);
-  const serviceDomain = stateDomain === "group" ? "homeassistant" : stateDomain;
-
-  let service;
-  switch (stateDomain) {
-    case "lock":
-      service = turnOn ? "unlock" : "lock";
-      break;
-    case "cover":
-      service = turnOn ? "open_cover" : "close_cover";
-      break;
-    default:
-      service = turnOn ? "turn_on" : "turn_off";
-  }
-
-  hass.callService(serviceDomain, service, { entity_id: entityId });
-}
+import computeDomain from "../../../../common/entity/compute_domain";
+
+export default function turnOnOffEntity(hass, entityId, turnOn = true) {
+  const stateDomain = computeDomain(entityId);
+  const serviceDomain = stateDomain === "group" ? "homeassistant" : stateDomain;
+
+  let service;
+  switch (stateDomain) {
+    case "lock":
+      service = turnOn ? "unlock" : "lock";
+      break;
+    case "cover":
+      service = turnOn ? "open_cover" : "close_cover";
+      break;
+    default:
+      service = turnOn ? "turn_on" : "turn_off";
+  }
+
+  hass.callService(serviceDomain, service, { entity_id: entityId });
+}
diff --git a/src/panels/lovelace/common/handle-click.ts b/src/panels/lovelace/common/handle-click.ts
index 4d98cf7ad7..c996bf4bac 100644
--- a/src/panels/lovelace/common/handle-click.ts
+++ b/src/panels/lovelace/common/handle-click.ts
@@ -1,6 +1,6 @@
 import { HomeAssistant } from "../../../types";
 import { LovelaceElementConfig } from "../elements/types";
-import { fireEvent } from "../../../common/dom/fire_event.js";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import toggleEntity from "../../../../src/panels/lovelace/common/entity/toggle-entity";
 
diff --git a/src/panels/lovelace/common/process-config-entities.js b/src/panels/lovelace/common/process-config-entities.js
index 2008ab0502..f8082886b3 100644
--- a/src/panels/lovelace/common/process-config-entities.js
+++ b/src/panels/lovelace/common/process-config-entities.js
@@ -1,38 +1,38 @@
-// Parse array of entity objects from config
-import isValidEntityId from "../../../common/entity/valid_entity_id.js";
-
-export default function processConfigEntities(entities) {
-  if (!entities || !Array.isArray(entities)) {
-    throw new Error("Entities need to be an array");
-  }
-
-  return entities.map((entityConf, index) => {
-    if (
-      typeof entityConf === "object" &&
-      !Array.isArray(entityConf) &&
-      entityConf.type
-    ) {
-      return entityConf;
-    }
-
-    if (typeof entityConf === "string") {
-      entityConf = { entity: entityConf };
-    } else if (typeof entityConf === "object" && !Array.isArray(entityConf)) {
-      if (!entityConf.entity) {
-        throw new Error(
-          `Entity object at position ${index} is missing entity field.`
-        );
-      }
-    } else {
-      throw new Error(`Invalid entity specified at position ${index}.`);
-    }
-
-    if (!isValidEntityId(entityConf.entity)) {
-      throw new Error(
-        `Invalid entity ID at position ${index}: ${entityConf.entity}`
-      );
-    }
-
-    return entityConf;
-  });
-}
+// Parse array of entity objects from config
+import isValidEntityId from "../../../common/entity/valid_entity_id";
+
+export default function processConfigEntities(entities) {
+  if (!entities || !Array.isArray(entities)) {
+    throw new Error("Entities need to be an array");
+  }
+
+  return entities.map((entityConf, index) => {
+    if (
+      typeof entityConf === "object" &&
+      !Array.isArray(entityConf) &&
+      entityConf.type
+    ) {
+      return entityConf;
+    }
+
+    if (typeof entityConf === "string") {
+      entityConf = { entity: entityConf };
+    } else if (typeof entityConf === "object" && !Array.isArray(entityConf)) {
+      if (!entityConf.entity) {
+        throw new Error(
+          `Entity object at position ${index} is missing entity field.`
+        );
+      }
+    } else {
+      throw new Error(`Invalid entity specified at position ${index}.`);
+    }
+
+    if (!isValidEntityId(entityConf.entity)) {
+      throw new Error(
+        `Invalid entity ID at position ${index}: ${entityConf.entity}`
+      );
+    }
+
+    return entityConf;
+  });
+}
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 7b18f8119e..1e7b343c12 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -1,68 +1,68 @@
-import "@polymer/paper-button/paper-button.js";
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event.js";
-import { HomeAssistant } from "../../../types.js";
-
-let registeredDialog = false;
-
-export class HuiCardOptions extends LitElement {
-  public cardId?: string;
-  protected hass?: HomeAssistant;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-    };
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    if (!registeredDialog) {
-      registeredDialog = true;
-      fireEvent(this, "register-dialog", {
-        dialogShowEvent: "show-edit-card",
-        dialogTag: "hui-dialog-edit-card",
-        dialogImport: () => import("../editor/hui-dialog-edit-card"),
-      });
-    }
-  }
-
-  protected render() {
-    return html`
-    <style>
-      div {
-        border-top: 1px solid #e8e8e8;
-        padding: 5px 16px;
-        background: var(--paper-card-background-color, white);
-        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
-        text-align: right;
-      }
-      paper-button {
-        color: var(--primary-color);
-        font-weight: 500;
-      }
-    </style>
-    <slot></slot>
-    <div>
-      <paper-button
-        @click="${this._editCard}"
-      >EDIT</paper-button>
-    </div>
-    `;
-  }
-  private _editCard() {
-    fireEvent(this, "show-edit-card", {
-      hass: this.hass,
-      cardId: this.cardId,
-      reloadLovelace: () => fireEvent(this, "config-refresh"),
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-card-options": HuiCardOptions;
-  }
-}
-
-customElements.define("hui-card-options", HuiCardOptions);
+import "@polymer/paper-button/paper-button";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../types";
+
+let registeredDialog = false;
+
+export class HuiCardOptions extends LitElement {
+  public cardId?: string;
+  protected hass?: HomeAssistant;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+    };
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (!registeredDialog) {
+      registeredDialog = true;
+      fireEvent(this, "register-dialog", {
+        dialogShowEvent: "show-edit-card",
+        dialogTag: "hui-dialog-edit-card",
+        dialogImport: () => import("../editor/hui-dialog-edit-card"),
+      });
+    }
+  }
+
+  protected render() {
+    return html`
+    <style>
+      div {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+        background: var(--paper-card-background-color, white);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+        text-align: right;
+      }
+      paper-button {
+        color: var(--primary-color);
+        font-weight: 500;
+      }
+    </style>
+    <slot></slot>
+    <div>
+      <paper-button
+        @click="${this._editCard}"
+      >EDIT</paper-button>
+    </div>
+    `;
+  }
+  private _editCard() {
+    fireEvent(this, "show-edit-card", {
+      hass: this.hass,
+      cardId: this.cardId,
+      reloadLovelace: () => fireEvent(this, "config-refresh"),
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-options": HuiCardOptions;
+  }
+}
+
+customElements.define("hui-card-options", HuiCardOptions);
diff --git a/src/panels/lovelace/components/hui-entities-toggle.js b/src/panels/lovelace/components/hui-entities-toggle.js
index 6df9e1fb7e..7055c2a962 100644
--- a/src/panels/lovelace/components/hui-entities-toggle.js
+++ b/src/panels/lovelace/components/hui-entities-toggle.js
@@ -1,57 +1,57 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-
-import { DOMAINS_TOGGLE } from "../../../common/const.js";
-import turnOnOffEntities from "../common/entity/turn-on-off-entities.js";
-
-class HuiEntitiesToggle extends PolymerElement {
-  static get template() {
-    return html`
-    <style>
-      :host {
-        width: 38px;
-        display: block;
-      }
-      paper-toggle-button {
-        cursor: pointer;
-        --paper-toggle-button-label-spacing: 0;
-        padding: 13px 5px;
-        margin: -4px -5px;
-      }
-    </style>
-    <template is="dom-if" if="[[_toggleEntities.length]]">
-      <paper-toggle-button checked="[[_computeIsChecked(hass, _toggleEntities)]]" on-change="_callService"></paper-toggle-button>
-    </template>
-`;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      entities: Array,
-      _toggleEntities: {
-        type: Array,
-        computed: "_computeToggleEntities(hass, entities)",
-      },
-    };
-  }
-
-  _computeToggleEntities(hass, entityIds) {
-    return entityIds.filter(
-      (entityId) =>
-        entityId in hass.states && DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
-    );
-  }
-
-  _computeIsChecked(hass, entityIds) {
-    return entityIds.some((entityId) => hass.states[entityId].state === "on");
-  }
-
-  _callService(ev) {
-    const turnOn = ev.target.checked;
-    turnOnOffEntities(this.hass, this._toggleEntities, turnOn);
-  }
-}
-
-customElements.define("hui-entities-toggle", HuiEntitiesToggle);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import turnOnOffEntities from "../common/entity/turn-on-off-entities";
+
+class HuiEntitiesToggle extends PolymerElement {
+  static get template() {
+    return html`
+    <style>
+      :host {
+        width: 38px;
+        display: block;
+      }
+      paper-toggle-button {
+        cursor: pointer;
+        --paper-toggle-button-label-spacing: 0;
+        padding: 13px 5px;
+        margin: -4px -5px;
+      }
+    </style>
+    <template is="dom-if" if="[[_toggleEntities.length]]">
+      <paper-toggle-button checked="[[_computeIsChecked(hass, _toggleEntities)]]" on-change="_callService"></paper-toggle-button>
+    </template>
+`;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      entities: Array,
+      _toggleEntities: {
+        type: Array,
+        computed: "_computeToggleEntities(hass, entities)",
+      },
+    };
+  }
+
+  _computeToggleEntities(hass, entityIds) {
+    return entityIds.filter(
+      (entityId) =>
+        entityId in hass.states && DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
+    );
+  }
+
+  _computeIsChecked(hass, entityIds) {
+    return entityIds.some((entityId) => hass.states[entityId].state === "on");
+  }
+
+  _callService(ev) {
+    const turnOn = ev.target.checked;
+    turnOnOffEntities(this.hass, this._toggleEntities, turnOn);
+  }
+}
+
+customElements.define("hui-entities-toggle", HuiEntitiesToggle);
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.js b/src/panels/lovelace/components/hui-generic-entity-row.js
index 6a14507b70..092a065c22 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.js
+++ b/src/panels/lovelace/components/hui-generic-entity-row.js
@@ -1,137 +1,137 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../components/entity/state-badge.js";
-import "../../../components/ha-relative-time.js";
-import "../../../components/ha-icon.js";
-
-import computeStateName from "../../../common/entity/compute_state_name.js";
-
-class HuiGenericEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <template is="dom-if" if="[[_stateObj]]">
-        ${this.stateBadgeTemplate}
-        <div class="flex">
-          ${this.infoTemplate}
-          <slot></slot>
-        </div>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div class="not-found">
-          Entity not available: [[config.entity]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        .flex {
-          flex: 1;
-          margin-left: 16px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          min-width: 0;
-        }
-        .info {
-          flex: 1 0 60px;
-        }
-        .info,
-        .info > * {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .flex ::slotted(*) {
-          margin-left: 8px;
-          min-width: 0;
-        }
-        .flex ::slotted([slot=secondary]) {
-          margin-left: 0;
-        }
-        .secondary,
-        ha-relative-time {
-          display: block;
-          color: var(--secondary-text-color);
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-        state-badge {
-          flex: 0 0 40px;
-        }
-      </style>
-    `;
-  }
-
-  static get stateBadgeTemplate() {
-    return html`
-      <state-badge
-        state-obj="[[_stateObj]]"
-        override-icon="[[config.icon]]"
-      ></state-badge>
-    `;
-  }
-
-  static get infoTemplate() {
-    return html`
-      <div class="info">
-        [[_computeName(config.name, _stateObj)]]
-        <div class="secondary">
-          <template is="dom-if" if="[[showSecondary]]">
-            <template is="dom-if" if="[[_equals(config.secondary_info, 'entity-id')]]">
-              [[_stateObj.entity_id]]
-            </template>
-            <template is="dom-if" if="[[_equals(config.secondary_info, 'last-changed')]]">
-              <ha-relative-time
-                hass="[[hass]]"
-                datetime="[[_stateObj.last_changed]]"
-              ></ha-relative-time>
-            </template>
-          </template>
-          <template is="dom-if" if="[[!showSecondary]">
-            <slot name="secondary"></slot>
-          </template>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, config.entity)",
-      },
-      showSecondary: {
-        type: Boolean,
-        value: true,
-      },
-    };
-  }
-
-  _equals(a, b) {
-    return a === b;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeName(name, stateObj) {
-    return name || computeStateName(stateObj);
-  }
-}
-customElements.define("hui-generic-entity-row", HuiGenericEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/entity/state-badge";
+import "../../../components/ha-relative-time";
+import "../../../components/ha-icon";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+
+class HuiGenericEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <template is="dom-if" if="[[_stateObj]]">
+        ${this.stateBadgeTemplate}
+        <div class="flex">
+          ${this.infoTemplate}
+          <slot></slot>
+        </div>
+      </template>
+      <template is="dom-if" if="[[!_stateObj]]">
+        <div class="not-found">
+          Entity not available: [[config.entity]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        .flex {
+          flex: 1;
+          margin-left: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          min-width: 0;
+        }
+        .info {
+          flex: 1 0 60px;
+        }
+        .info,
+        .info > * {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .flex ::slotted(*) {
+          margin-left: 8px;
+          min-width: 0;
+        }
+        .flex ::slotted([slot=secondary]) {
+          margin-left: 0;
+        }
+        .secondary,
+        ha-relative-time {
+          display: block;
+          color: var(--secondary-text-color);
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+        state-badge {
+          flex: 0 0 40px;
+        }
+      </style>
+    `;
+  }
+
+  static get stateBadgeTemplate() {
+    return html`
+      <state-badge
+        state-obj="[[_stateObj]]"
+        override-icon="[[config.icon]]"
+      ></state-badge>
+    `;
+  }
+
+  static get infoTemplate() {
+    return html`
+      <div class="info">
+        [[_computeName(config.name, _stateObj)]]
+        <div class="secondary">
+          <template is="dom-if" if="[[showSecondary]]">
+            <template is="dom-if" if="[[_equals(config.secondary_info, 'entity-id')]]">
+              [[_stateObj.entity_id]]
+            </template>
+            <template is="dom-if" if="[[_equals(config.secondary_info, 'last-changed')]]">
+              <ha-relative-time
+                hass="[[hass]]"
+                datetime="[[_stateObj.last_changed]]"
+              ></ha-relative-time>
+            </template>
+          </template>
+          <template is="dom-if" if="[[!showSecondary]">
+            <slot name="secondary"></slot>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, config.entity)",
+      },
+      showSecondary: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeName(name, stateObj) {
+    return name || computeStateName(stateObj);
+  }
+}
+customElements.define("hui-generic-entity-row", HuiGenericEntityRow);
diff --git a/src/panels/lovelace/components/hui-image.js b/src/panels/lovelace/components/hui-image.js
index bbaba4ce91..7164da4c4f 100644
--- a/src/panels/lovelace/components/hui-image.js
+++ b/src/panels/lovelace/components/hui-image.js
@@ -1,198 +1,198 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-toggle-button/paper-toggle-button.js";
-
-import { STATES_OFF } from "../../../common/const.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-import parseAspectRatio from "../../../common/util/parse-aspect-ratio.js";
-
-const UPDATE_INTERVAL = 10000;
-const DEFAULT_FILTER = "grayscale(100%)";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiImage extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <div id="wrapper">
-        <img
-          id="image"
-          src="[[_imageSrc]]"
-          on-error="_onImageError"
-          on-load="_onImageLoad" />
-        <div id="brokenImage"></div>
-      </div>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-
-        img {
-          display: block;
-          height: auto;
-          transition: filter .2s linear;
-          width: 100%;
-        }
-
-        .error {
-          text-align: center;
-        }
-
-        .hidden {
-          display: none;
-        }
-
-        .ratio {
-          position: relative;
-          width: 100%;
-          height: 0
-        }
-
-        .ratio img, .ratio div {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-
-        #brokenImage {
-          background: grey url('/static/images/image-broken.svg') center/36px no-repeat;
-        }
-
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      entity: String,
-      image: String,
-      stateImage: Object,
-      cameraImage: String,
-      aspectRatio: String,
-      filter: String,
-      stateFilter: Object,
-      _imageSrc: String,
-    };
-  }
-
-  static get observers() {
-    return ["_configChanged(image, stateImage, cameraImage, aspectRatio)"];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.cameraImage) {
-      this.timer = setInterval(
-        () => this._updateCameraImageSrc(),
-        UPDATE_INTERVAL
-      );
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.timer);
-  }
-
-  _configChanged(image, stateImage, cameraImage, aspectRatio) {
-    const ratio = parseAspectRatio(aspectRatio);
-
-    if (ratio && ratio.w > 0 && ratio.h > 0) {
-      this.$.wrapper.style.paddingBottom = `${(
-        (100 * ratio.h) /
-        ratio.w
-      ).toFixed(2)}%`;
-      this.$.wrapper.classList.add("ratio");
-    }
-
-    if (cameraImage) {
-      this._updateCameraImageSrc();
-    } else if (image && !stateImage) {
-      this._imageSrc = image;
-    }
-  }
-
-  _onImageError() {
-    this._imageSrc = null;
-    this.$.image.classList.add("hidden");
-    if (!this.$.wrapper.classList.contains("ratio")) {
-      this.$.brokenImage.style.setProperty(
-        "height",
-        `${this._lastImageHeight || "100"}px`
-      );
-    }
-    this.$.brokenImage.classList.remove("hidden");
-  }
-
-  _onImageLoad() {
-    this.$.image.classList.remove("hidden");
-    this.$.brokenImage.classList.add("hidden");
-    if (!this.$.wrapper.classList.contains("ratio")) {
-      this._lastImageHeight = this.$.image.offsetHeight;
-    }
-  }
-
-  _hassChanged(hass) {
-    if (this.cameraImage || !this.entity) {
-      return;
-    }
-
-    const stateObj = hass.states[this.entity];
-    const newState = !stateObj ? "unavailable" : stateObj.state;
-
-    if (newState === this._currentState) return;
-    this._currentState = newState;
-
-    this._updateStateImage();
-    this._updateStateFilter(stateObj);
-  }
-
-  _updateStateImage() {
-    if (!this.stateImage) {
-      this._imageFallback = true;
-      return;
-    }
-    const stateImg = this.stateImage[this._currentState];
-    this._imageSrc = stateImg || this.image;
-    this._imageFallback = !stateImg;
-  }
-
-  _updateStateFilter(stateObj) {
-    let filter;
-    if (!this.stateFilter) {
-      filter = this.filter;
-    } else {
-      filter = this.stateFilter[this._currentState] || this.filter;
-    }
-
-    const isOff = !stateObj || STATES_OFF.includes(stateObj.state);
-    this.$.image.style.filter =
-      filter || (isOff && this._imageFallback && DEFAULT_FILTER) || "";
-  }
-
-  async _updateCameraImageSrc() {
-    try {
-      const { content_type: contentType, content } = await this.hass.callWS({
-        type: "camera_thumbnail",
-        entity_id: this.cameraImage,
-      });
-      this._imageSrc = `data:${contentType};base64, ${content}`;
-      this._onImageLoad();
-    } catch (err) {
-      this._onImageError();
-    }
-  }
-}
-
-customElements.define("hui-image", HuiImage);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { STATES_OFF } from "../../../common/const";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
+
+const UPDATE_INTERVAL = 10000;
+const DEFAULT_FILTER = "grayscale(100%)";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiImage extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <div id="wrapper">
+        <img
+          id="image"
+          src="[[_imageSrc]]"
+          on-error="_onImageError"
+          on-load="_onImageLoad" />
+        <div id="brokenImage"></div>
+      </div>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+
+        img {
+          display: block;
+          height: auto;
+          transition: filter .2s linear;
+          width: 100%;
+        }
+
+        .error {
+          text-align: center;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        .ratio {
+          position: relative;
+          width: 100%;
+          height: 0
+        }
+
+        .ratio img, .ratio div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        #brokenImage {
+          background: grey url('/static/images/image-broken.svg') center/36px no-repeat;
+        }
+
+      </style>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      entity: String,
+      image: String,
+      stateImage: Object,
+      cameraImage: String,
+      aspectRatio: String,
+      filter: String,
+      stateFilter: Object,
+      _imageSrc: String,
+    };
+  }
+
+  static get observers() {
+    return ["_configChanged(image, stateImage, cameraImage, aspectRatio)"];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.cameraImage) {
+      this.timer = setInterval(
+        () => this._updateCameraImageSrc(),
+        UPDATE_INTERVAL
+      );
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this.timer);
+  }
+
+  _configChanged(image, stateImage, cameraImage, aspectRatio) {
+    const ratio = parseAspectRatio(aspectRatio);
+
+    if (ratio && ratio.w > 0 && ratio.h > 0) {
+      this.$.wrapper.style.paddingBottom = `${(
+        (100 * ratio.h) /
+        ratio.w
+      ).toFixed(2)}%`;
+      this.$.wrapper.classList.add("ratio");
+    }
+
+    if (cameraImage) {
+      this._updateCameraImageSrc();
+    } else if (image && !stateImage) {
+      this._imageSrc = image;
+    }
+  }
+
+  _onImageError() {
+    this._imageSrc = null;
+    this.$.image.classList.add("hidden");
+    if (!this.$.wrapper.classList.contains("ratio")) {
+      this.$.brokenImage.style.setProperty(
+        "height",
+        `${this._lastImageHeight || "100"}px`
+      );
+    }
+    this.$.brokenImage.classList.remove("hidden");
+  }
+
+  _onImageLoad() {
+    this.$.image.classList.remove("hidden");
+    this.$.brokenImage.classList.add("hidden");
+    if (!this.$.wrapper.classList.contains("ratio")) {
+      this._lastImageHeight = this.$.image.offsetHeight;
+    }
+  }
+
+  _hassChanged(hass) {
+    if (this.cameraImage || !this.entity) {
+      return;
+    }
+
+    const stateObj = hass.states[this.entity];
+    const newState = !stateObj ? "unavailable" : stateObj.state;
+
+    if (newState === this._currentState) return;
+    this._currentState = newState;
+
+    this._updateStateImage();
+    this._updateStateFilter(stateObj);
+  }
+
+  _updateStateImage() {
+    if (!this.stateImage) {
+      this._imageFallback = true;
+      return;
+    }
+    const stateImg = this.stateImage[this._currentState];
+    this._imageSrc = stateImg || this.image;
+    this._imageFallback = !stateImg;
+  }
+
+  _updateStateFilter(stateObj) {
+    let filter;
+    if (!this.stateFilter) {
+      filter = this.filter;
+    } else {
+      filter = this.stateFilter[this._currentState] || this.filter;
+    }
+
+    const isOff = !stateObj || STATES_OFF.includes(stateObj.state);
+    this.$.image.style.filter =
+      filter || (isOff && this._imageFallback && DEFAULT_FILTER) || "";
+  }
+
+  async _updateCameraImageSrc() {
+    try {
+      const { content_type: contentType, content } = await this.hass.callWS({
+        type: "camera_thumbnail",
+        entity_id: this.cameraImage,
+      });
+      this._imageSrc = `data:${contentType};base64, ${content}`;
+      this._onImageLoad();
+    } catch (err) {
+      this._onImageError();
+    }
+  }
+}
+
+customElements.define("hui-image", HuiImage);
diff --git a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
index 3d6c670f0a..9924c40eb8 100644
--- a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
@@ -1,62 +1,62 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "./hui-notification-item-template.js";
-
-import EventsMixin from "../../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-export class HuiConfiguratorNotificationItem extends EventsMixin(
-  LocalizeMixin(PolymerElement)
-) {
-  static get template() {
-    return html`
-    <hui-notification-item-template>
-      <span slot="header">[[localize('domain.configurator')]]</span>
-      
-      <div>[[_getMessage(notification)]]</div> 
-      
-      <paper-button 
-        slot="actions" 
-        class="primary" 
-        on-click="_handleClick"
-      >[[_localizeState(notification.state)]]</paper-button>
-    </hui-notification-item-template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      notification: Object,
-    };
-  }
-
-  _handleClick() {
-    this.fire("hass-more-info", { entityId: this.notification.entity_id });
-  }
-
-  _localizeState(state) {
-    return this.localize(`state.configurator.${state}`);
-  }
-
-  _getMessage(notification) {
-    const friendlyName = notification.attributes.friendly_name;
-    return this.localize(
-      "ui.notification_drawer.click_to_configure",
-      "entity",
-      friendlyName
-    );
-  }
-}
-customElements.define(
-  "hui-configurator-notification-item",
-  HuiConfiguratorNotificationItem
-);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "./hui-notification-item-template";
+
+import EventsMixin from "../../../../mixins/events-mixin";
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
+ */
+export class HuiConfiguratorNotificationItem extends EventsMixin(
+  LocalizeMixin(PolymerElement)
+) {
+  static get template() {
+    return html`
+    <hui-notification-item-template>
+      <span slot="header">[[localize('domain.configurator')]]</span>
+
+      <div>[[_getMessage(notification)]]</div>
+
+      <paper-button
+        slot="actions"
+        class="primary"
+        on-click="_handleClick"
+      >[[_localizeState(notification.state)]]</paper-button>
+    </hui-notification-item-template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      notification: Object,
+    };
+  }
+
+  _handleClick() {
+    this.fire("hass-more-info", { entityId: this.notification.entity_id });
+  }
+
+  _localizeState(state) {
+    return this.localize(`state.configurator.${state}`);
+  }
+
+  _getMessage(notification) {
+    const friendlyName = notification.attributes.friendly_name;
+    return this.localize(
+      "ui.notification_drawer.click_to_configure",
+      "entity",
+      friendlyName
+    );
+  }
+}
+customElements.define(
+  "hui-configurator-notification-item",
+  HuiConfiguratorNotificationItem
+);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
index c07d3ecbc1..62ce12b5af 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
@@ -1,175 +1,175 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "./hui-notification-item.js";
-
-import EventsMixin from "../../../../mixins/events-mixin.js";
-import LocalizeMixin from "../../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-export class HuiNotificationDrawer extends EventsMixin(
-  LocalizeMixin(PolymerElement)
-) {
-  static get template() {
-    return html`
-    <style include="paper-material-styles">
-      :host {
-        bottom: 0;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
- 
-      .container {
-        align-items: stretch;
-        background: var(--sidebar-background-color, var(--primary-background-color));
-        bottom: 0;
-        box-shadow: var(--paper-material-elevation-1_-_box-shadow);
-        display: flex;
-        flex-direction: column;
-        overflow-y: hidden;
-        position: fixed;
-        top: 0;
-        transition: right .2s ease-in;
-        width: 500px;
-        z-index: 10;
-      }
-
-      :host(:not(narrow)) .container {
-        right: -500px;
-      }
-
-      :host([narrow]) .container {
-        right: -100%;
-        width: 100%;
-      }
-
-      :host(.open) .container,
-      :host(.open[narrow]) .container {
-        right: 0;
-      }
-
-      app-toolbar {
-        color: var(--primary-text-color);
-        border-bottom: 1px solid var(--divider-color);
-        background-color: var(--primary-background-color);
-        min-height: 64px;
-        width: calc(100% - 32px);
-        z-index: 11;
-      }
-
-      .overlay {
-        display: none;
-      }
-
-      :host(.open) .overlay {
-        bottom: 0;
-        display: block;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 5;
-      }
- 
-      .notifications {
-        overflow-y: auto;
-        padding-top: 16px;
-      }
-      
-      .notification {
-        padding: 0 16px 16px;
-      }
-
-      .empty {
-        padding: 16px;
-        text-align: center;
-      }
-    </style>
-    <div class="overlay" on-click="_closeDrawer"></div>
-    <div class="container">
-      <app-toolbar>
-        <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <paper-icon-button icon="hass:chevron-right" on-click="_closeDrawer"></paper-icon-button>
-      </app-toolbar>
-      <div class="notifications">
-        <template is="dom-if" if="[[!_empty(notifications)]]">
-          <dom-repeat items="[[notifications]]">
-            <template>
-              <div class="notification">
-                <hui-notification-item hass="[[hass]]" notification="[[item]]"></hui-notification-item>
-              </div>
-            </template>
-          </dom-repeat>
-        </template>
-        <template is="dom-if" if="[[_empty(notifications)]]">
-          <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
-        </template>
-      </div>
-    </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      narrow: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-      open: {
-        type: Boolean,
-        notify: true,
-        observer: "_openChanged",
-      },
-      hidden: {
-        type: Boolean,
-        value: true,
-        reflectToAttribute: true,
-      },
-      notifications: {
-        type: Array,
-        value: [],
-      },
-    };
-  }
-
-  _closeDrawer(ev) {
-    ev.stopPropagation();
-    this.open = false;
-  }
-
-  _empty(notifications) {
-    return notifications.length === 0;
-  }
-
-  _openChanged(open) {
-    clearTimeout(this._openTimer);
-    if (open) {
-      // Render closed then animate open
-      this.hidden = false;
-      this._openTimer = setTimeout(() => {
-        this.classList.add("open");
-      }, 50);
-    } else {
-      // Animate closed then hide
-      this.classList.remove("open");
-      this._openTimer = setTimeout(() => {
-        this.hidden = true;
-      }, 250);
-    }
-  }
-}
-customElements.define("hui-notification-drawer", HuiNotificationDrawer);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+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 "./hui-notification-item";
+
+import EventsMixin from "../../../../mixins/events-mixin";
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
+ */
+export class HuiNotificationDrawer extends EventsMixin(
+  LocalizeMixin(PolymerElement)
+) {
+  static get template() {
+    return html`
+    <style include="paper-material-styles">
+      :host {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .container {
+        align-items: stretch;
+        background: var(--sidebar-background-color, var(--primary-background-color));
+        bottom: 0;
+        box-shadow: var(--paper-material-elevation-1_-_box-shadow);
+        display: flex;
+        flex-direction: column;
+        overflow-y: hidden;
+        position: fixed;
+        top: 0;
+        transition: right .2s ease-in;
+        width: 500px;
+        z-index: 10;
+      }
+
+      :host(:not(narrow)) .container {
+        right: -500px;
+      }
+
+      :host([narrow]) .container {
+        right: -100%;
+        width: 100%;
+      }
+
+      :host(.open) .container,
+      :host(.open[narrow]) .container {
+        right: 0;
+      }
+
+      app-toolbar {
+        color: var(--primary-text-color);
+        border-bottom: 1px solid var(--divider-color);
+        background-color: var(--primary-background-color);
+        min-height: 64px;
+        width: calc(100% - 32px);
+        z-index: 11;
+      }
+
+      .overlay {
+        display: none;
+      }
+
+      :host(.open) .overlay {
+        bottom: 0;
+        display: block;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 5;
+      }
+
+      .notifications {
+        overflow-y: auto;
+        padding-top: 16px;
+      }
+
+      .notification {
+        padding: 0 16px 16px;
+      }
+
+      .empty {
+        padding: 16px;
+        text-align: center;
+      }
+    </style>
+    <div class="overlay" on-click="_closeDrawer"></div>
+    <div class="container">
+      <app-toolbar>
+        <div main-title>[[localize('ui.notification_drawer.title')]]</div>
+        <paper-icon-button icon="hass:chevron-right" on-click="_closeDrawer"></paper-icon-button>
+      </app-toolbar>
+      <div class="notifications">
+        <template is="dom-if" if="[[!_empty(notifications)]]">
+          <dom-repeat items="[[notifications]]">
+            <template>
+              <div class="notification">
+                <hui-notification-item hass="[[hass]]" notification="[[item]]"></hui-notification-item>
+              </div>
+            </template>
+          </dom-repeat>
+        </template>
+        <template is="dom-if" if="[[_empty(notifications)]]">
+          <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
+        </template>
+      </div>
+    </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      narrow: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+      open: {
+        type: Boolean,
+        notify: true,
+        observer: "_openChanged",
+      },
+      hidden: {
+        type: Boolean,
+        value: true,
+        reflectToAttribute: true,
+      },
+      notifications: {
+        type: Array,
+        value: [],
+      },
+    };
+  }
+
+  _closeDrawer(ev) {
+    ev.stopPropagation();
+    this.open = false;
+  }
+
+  _empty(notifications) {
+    return notifications.length === 0;
+  }
+
+  _openChanged(open) {
+    clearTimeout(this._openTimer);
+    if (open) {
+      // Render closed then animate open
+      this.hidden = false;
+      this._openTimer = setTimeout(() => {
+        this.classList.add("open");
+      }, 50);
+    } else {
+      // Animate closed then hide
+      this.classList.remove("open");
+      this._openTimer = setTimeout(() => {
+        this.hidden = true;
+      }, 250);
+    }
+  }
+}
+customElements.define("hui-notification-drawer", HuiNotificationDrawer);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
index 995b0e4869..de9d8c8085 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
@@ -1,49 +1,49 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../../components/ha-card.js";
-
-export class HuiNotificationItemTemplate extends PolymerElement {
-  static get template() {
-    return html`
-    <style>
-      .contents {
-        padding: 16px;
-      }
-   
-      ha-card .header {
-        @apply --paper-font-headline;
-        color: var(--primary-text-color);
-        padding: 16px 16px 0;
-      }
-
-      .actions {
-        border-top: 1px solid #e8e8e8;
-        padding: 5px 16px;
-      }
-
-      ::slotted(.primary) {
-        color: var(--primary-color);
-      }
-    </style>
-    <ha-card>
-      <div class="header">
-        <slot name="header"></slot>
-      </div>
-      <div class="contents">
-        <slot></slot>
-      </div>
-      <div class="actions">
-        <slot name="actions"></slot>
-      </div>
-    </ha-card>
-    `;
-  }
-}
-customElements.define(
-  "hui-notification-item-template",
-  HuiNotificationItemTemplate
-);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../../components/ha-card";
+
+export class HuiNotificationItemTemplate extends PolymerElement {
+  static get template() {
+    return html`
+    <style>
+      .contents {
+        padding: 16px;
+      }
+
+      ha-card .header {
+        @apply --paper-font-headline;
+        color: var(--primary-text-color);
+        padding: 16px 16px 0;
+      }
+
+      .actions {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
+
+      ::slotted(.primary) {
+        color: var(--primary-color);
+      }
+    </style>
+    <ha-card>
+      <div class="header">
+        <slot name="header"></slot>
+      </div>
+      <div class="contents">
+        <slot></slot>
+      </div>
+      <div class="actions">
+        <slot name="actions"></slot>
+      </div>
+    </ha-card>
+    `;
+  }
+}
+customElements.define(
+  "hui-notification-item-template",
+  HuiNotificationItemTemplate
+);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item.js b/src/panels/lovelace/components/notifications/hui-notification-item.js
index c9ddb15c92..c54664c6ba 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-item.js
@@ -1,35 +1,35 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import computeDomain from "../../../../common/entity/compute_domain.js";
-
-import "./hui-configurator-notification-item.js";
-import "./hui-persistent-notification-item.js";
-
-export class HuiNotificationItem extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-      notification: {
-        type: Object,
-        observer: "_stateChanged",
-      },
-    };
-  }
-
-  _stateChanged(notification) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    if (!notification) return;
-
-    const domain = notification.entity_id
-      ? computeDomain(notification.entity_id)
-      : "persistent_notification";
-    const tag = `hui-${domain}-notification-item`;
-    const el = document.createElement(tag);
-    el.hass = this.hass;
-    el.notification = notification;
-    this.appendChild(el);
-  }
-}
-customElements.define("hui-notification-item", HuiNotificationItem);
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import computeDomain from "../../../../common/entity/compute_domain";
+
+import "./hui-configurator-notification-item";
+import "./hui-persistent-notification-item";
+
+export class HuiNotificationItem extends PolymerElement {
+  static get properties() {
+    return {
+      hass: Object,
+      notification: {
+        type: Object,
+        observer: "_stateChanged",
+      },
+    };
+  }
+
+  _stateChanged(notification) {
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    if (!notification) return;
+
+    const domain = notification.entity_id
+      ? computeDomain(notification.entity_id)
+      : "persistent_notification";
+    const tag = `hui-${domain}-notification-item`;
+    const el = document.createElement(tag);
+    el.hass = this.hass;
+    el.notification = notification;
+    this.appendChild(el);
+  }
+}
+customElements.define("hui-notification-item", HuiNotificationItem);
diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.js b/src/panels/lovelace/components/notifications/hui-notifications-button.js
index ba73b4c88d..5c26714296 100644
--- a/src/panels/lovelace/components/notifications/hui-notifications-button.js
+++ b/src/panels/lovelace/components/notifications/hui-notifications-button.js
@@ -1,62 +1,62 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import EventsMixin from "../../../../mixins/events-mixin.js";
-
-/*
- * @appliesMixin EventsMixin
- */
-export class HuiNotificationsButton extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-    <style>
-      :host {
-        position: relative;
-      }
- 
-      .indicator {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: var(--accent-color);
-        pointer-events: none;
-      }
-
-      .indicator[hidden] {
-        display: none;
-      }
-    </style>
-    <paper-icon-button icon="hass:bell" on-click="_clicked"></paper-icon-button>
-    <span class="indicator" hidden$="[[!_hasNotifications(notifications)]]"></span>
-    `;
-  }
-
-  static get properties() {
-    return {
-      notificationsOpen: {
-        type: Boolean,
-        notify: true,
-      },
-      notifications: {
-        type: Array,
-        value: [],
-      },
-    };
-  }
-
-  _clicked() {
-    this.notificationsOpen = true;
-  }
-
-  _hasNotifications(notifications) {
-    return notifications.length > 0;
-  }
-}
-customElements.define("hui-notifications-button", HuiNotificationsButton);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+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 EventsMixin from "../../../../mixins/events-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+export class HuiNotificationsButton extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+    <style>
+      :host {
+        position: relative;
+      }
+
+      .indicator {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--accent-color);
+        pointer-events: none;
+      }
+
+      .indicator[hidden] {
+        display: none;
+      }
+    </style>
+    <paper-icon-button icon="hass:bell" on-click="_clicked"></paper-icon-button>
+    <span class="indicator" hidden$="[[!_hasNotifications(notifications)]]"></span>
+    `;
+  }
+
+  static get properties() {
+    return {
+      notificationsOpen: {
+        type: Boolean,
+        notify: true,
+      },
+      notifications: {
+        type: Array,
+        value: [],
+      },
+    };
+  }
+
+  _clicked() {
+    this.notificationsOpen = true;
+  }
+
+  _hasNotifications(notifications) {
+    return notifications.length > 0;
+  }
+}
+customElements.define("hui-notifications-button", HuiNotificationsButton);
diff --git a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
index d9dc8a52dd..86bf11d006 100644
--- a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
@@ -1,89 +1,89 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-tooltip/paper-tooltip.js";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../../../components/ha-relative-time.js";
-import "../../../../components/ha-markdown.js";
-import "./hui-notification-item-template.js";
-
-import LocalizeMixin from "../../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-export class HuiPersistentNotificationItem extends LocalizeMixin(
-  PolymerElement
-) {
-  static get template() {
-    return html`
-    <style>
-      .time {
-        display: flex;
-        justify-content: flex-end;
-        margin-top: 6px;
-      }
-      ha-relative-time {
-        color: var(--secondary-text-color);
-      }
-    </style>
-    <hui-notification-item-template>
-      <span slot="header">[[_computeTitle(notification)]]</span>
-      
-      <ha-markdown content="[[notification.message]]"></ha-markdown>
-      
-      <div class="time">
-        <span>
-          <ha-relative-time
-            hass="[[hass]]"
-            datetime="[[notification.created_at]]"
-          ></ha-relative-time>
-          <paper-tooltip>[[_computeTooltip(hass, notification)]]</paper-tooltip>
-        </span>
-      </div>
-
-      <paper-button
-        slot="actions"
-        class="primary"
-        on-click="_handleDismiss"
-      >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button>
-    </hui-notification-item-template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      notification: Object,
-    };
-  }
-
-  _handleDismiss() {
-    this.hass.callService("persistent_notification", "dismiss", {
-      notification_id: this.notification.notification_id,
-    });
-  }
-
-  _computeTitle(notification) {
-    return notification.title || notification.notification_id;
-  }
-
-  _computeTooltip(hass, notification) {
-    if (!hass || !notification) return null;
-
-    const d = new Date(notification.created_at);
-    return d.toLocaleDateString(hass.language, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      minute: "numeric",
-      hour: "numeric",
-    });
-  }
-}
-customElements.define(
-  "hui-persistent_notification-notification-item",
-  HuiPersistentNotificationItem
-);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-tooltip/paper-tooltip";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../../components/ha-relative-time";
+import "../../../../components/ha-markdown";
+import "./hui-notification-item-template";
+
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+export class HuiPersistentNotificationItem extends LocalizeMixin(
+  PolymerElement
+) {
+  static get template() {
+    return html`
+    <style>
+      .time {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 6px;
+      }
+      ha-relative-time {
+        color: var(--secondary-text-color);
+      }
+    </style>
+    <hui-notification-item-template>
+      <span slot="header">[[_computeTitle(notification)]]</span>
+
+      <ha-markdown content="[[notification.message]]"></ha-markdown>
+
+      <div class="time">
+        <span>
+          <ha-relative-time
+            hass="[[hass]]"
+            datetime="[[notification.created_at]]"
+          ></ha-relative-time>
+          <paper-tooltip>[[_computeTooltip(hass, notification)]]</paper-tooltip>
+        </span>
+      </div>
+
+      <paper-button
+        slot="actions"
+        class="primary"
+        on-click="_handleDismiss"
+      >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button>
+    </hui-notification-item-template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      notification: Object,
+    };
+  }
+
+  _handleDismiss() {
+    this.hass.callService("persistent_notification", "dismiss", {
+      notification_id: this.notification.notification_id,
+    });
+  }
+
+  _computeTitle(notification) {
+    return notification.title || notification.notification_id;
+  }
+
+  _computeTooltip(hass, notification) {
+    if (!hass || !notification) return null;
+
+    const d = new Date(notification.created_at);
+    return d.toLocaleDateString(hass.language, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      minute: "numeric",
+      hour: "numeric",
+    });
+  }
+}
+customElements.define(
+  "hui-persistent_notification-notification-item",
+  HuiPersistentNotificationItem
+);
diff --git a/src/panels/lovelace/editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
index adae0b17e8..c674b156c9 100644
--- a/src/panels/lovelace/editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
@@ -1,122 +1,122 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event.js";
-
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-input/paper-textarea.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog.js";
-import { HomeAssistant } from "../../../types";
-import { getCardConfig, updateCardConfig } from "../common/data";
-
-import "./hui-yaml-editor";
-import "./hui-yaml-card-preview";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { HuiYAMLCardPreview } from "./hui-yaml-card-preview";
-
-export class HuiDialogEditCard extends LitElement {
-  protected hass?: HomeAssistant;
-  private _cardId?: string;
-  private _cardConfig?: string;
-  private _reloadLovelace?: () => void;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      cardId: {
-        type: Number,
-      },
-      _cardConfig: {},
-      _dialogClosedCallback: {},
-    };
-  }
-
-  public async showDialog({ hass, cardId, reloadLovelace }) {
-    this.hass = hass;
-    this._cardId = cardId;
-    this._reloadLovelace = reloadLovelace;
-    this._cardConfig = "";
-    this._loadConfig();
-    // Wait till dialog is rendered.
-    await this.updateComplete;
-    this._dialog.open();
-  }
-
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
-  }
-
-  private get _previewEl(): HuiYAMLCardPreview {
-    return this.shadowRoot!.querySelector("hui-yaml-card-preview")!;
-  }
-
-  protected render() {
-    return html`
-      <style>
-        paper-dialog {
-          width: 650px;
-        }
-      </style>
-      <paper-dialog with-backdrop>
-        <h2>Card Configuration</h2>
-        <paper-dialog-scrollable>
-          <hui-yaml-editor
-            .yaml="${this._cardConfig}"
-            @yaml-changed="${this._handleYamlChanged}"
-          ></hui-yaml-editor>
-          <hui-yaml-card-preview
-            .hass="${this.hass}"
-            .yaml="${this._cardConfig}"
-          ></hui-yaml-card-preview>
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          <paper-button @click="${this._closeDialog}">Cancel</paper-button>
-          <paper-button @click="${this._updateConfig}">Save</paper-button>
-        </div>
-      </paper-dialog>
-    `;
-  }
-
-  private _handleYamlChanged(ev) {
-    this._previewEl.yaml = ev.detail.yaml;
-  }
-
-  private _closeDialog() {
-    this._dialog.close();
-  }
-
-  private async _loadConfig() {
-    this._cardConfig = await getCardConfig(this.hass!, this._cardId!);
-    await this.updateComplete;
-    // This will center the dialog with the updated config
-    fireEvent(this._dialog, "iron-resize");
-  }
-
-  private async _updateConfig() {
-    const newCardConfig = this.shadowRoot!.querySelector("hui-yaml-editor")!
-      .yaml;
-
-    if (this._cardConfig === newCardConfig) {
-      this._dialog.close();
-      return;
-    }
-    try {
-      await updateCardConfig(this.hass!, this._cardId!, newCardConfig);
-      this._dialog.close();
-      this._reloadLovelace!();
-    } catch (err) {
-      alert(`Saving failed: ${err.reason}`);
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-dialog-edit-card": HuiDialogEditCard;
-  }
-}
-
-customElements.define("hui-dialog-edit-card", HuiDialogEditCard);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-input/paper-textarea";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HomeAssistant } from "../../../types";
+import { getCardConfig, updateCardConfig } from "../common/data";
+
+import "./hui-yaml-editor";
+import "./hui-yaml-card-preview";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { HuiYAMLCardPreview } from "./hui-yaml-card-preview";
+
+export class HuiDialogEditCard extends LitElement {
+  protected hass?: HomeAssistant;
+  private _cardId?: string;
+  private _cardConfig?: string;
+  private _reloadLovelace?: () => void;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      cardId: {
+        type: Number,
+      },
+      _cardConfig: {},
+      _dialogClosedCallback: {},
+    };
+  }
+
+  public async showDialog({ hass, cardId, reloadLovelace }) {
+    this.hass = hass;
+    this._cardId = cardId;
+    this._reloadLovelace = reloadLovelace;
+    this._cardConfig = "";
+    this._loadConfig();
+    // Wait till dialog is rendered.
+    await this.updateComplete;
+    this._dialog.open();
+  }
+
+  private get _dialog(): PaperDialogElement {
+    return this.shadowRoot!.querySelector("paper-dialog")!;
+  }
+
+  private get _previewEl(): HuiYAMLCardPreview {
+    return this.shadowRoot!.querySelector("hui-yaml-card-preview")!;
+  }
+
+  protected render() {
+    return html`
+      <style>
+        paper-dialog {
+          width: 650px;
+        }
+      </style>
+      <paper-dialog with-backdrop>
+        <h2>Card Configuration</h2>
+        <paper-dialog-scrollable>
+          <hui-yaml-editor
+            .yaml="${this._cardConfig}"
+            @yaml-changed="${this._handleYamlChanged}"
+          ></hui-yaml-editor>
+          <hui-yaml-card-preview
+            .hass="${this.hass}"
+            .yaml="${this._cardConfig}"
+          ></hui-yaml-card-preview>
+        </paper-dialog-scrollable>
+        <div class="paper-dialog-buttons">
+          <paper-button @click="${this._closeDialog}">Cancel</paper-button>
+          <paper-button @click="${this._updateConfig}">Save</paper-button>
+        </div>
+      </paper-dialog>
+    `;
+  }
+
+  private _handleYamlChanged(ev) {
+    this._previewEl.yaml = ev.detail.yaml;
+  }
+
+  private _closeDialog() {
+    this._dialog.close();
+  }
+
+  private async _loadConfig() {
+    this._cardConfig = await getCardConfig(this.hass!, this._cardId!);
+    await this.updateComplete;
+    // This will center the dialog with the updated config
+    fireEvent(this._dialog, "iron-resize");
+  }
+
+  private async _updateConfig() {
+    const newCardConfig = this.shadowRoot!.querySelector("hui-yaml-editor")!
+      .yaml;
+
+    if (this._cardConfig === newCardConfig) {
+      this._dialog.close();
+      return;
+    }
+    try {
+      await updateCardConfig(this.hass!, this._cardId!, newCardConfig);
+      this._dialog.close();
+      this._reloadLovelace!();
+    } catch (err) {
+      alert(`Saving failed: ${err.reason}`);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-edit-card": HuiDialogEditCard;
+  }
+}
+
+customElements.define("hui-dialog-edit-card", HuiDialogEditCard);
diff --git a/src/panels/lovelace/editor/hui-yaml-card-preview.ts b/src/panels/lovelace/editor/hui-yaml-card-preview.ts
index 67ce7f1d6b..9eae71466a 100644
--- a/src/panels/lovelace/editor/hui-yaml-card-preview.ts
+++ b/src/panels/lovelace/editor/hui-yaml-card-preview.ts
@@ -1,52 +1,52 @@
-import yaml from "js-yaml";
-
-import "@polymer/paper-input/paper-textarea.js";
-
-import createCardElement from "../common/create-card-element";
-import createErrorCardConfig from "../common/create-error-card-config";
-import { HomeAssistant } from "../../../types";
-import { LovelaceCard } from "../types";
-
-export class HuiYAMLCardPreview extends HTMLElement {
-  private _hass?: HomeAssistant;
-
-  set hass(value: HomeAssistant) {
-    this._hass = value;
-    if (this.lastChild) {
-      (this.lastChild as LovelaceCard).hass = value;
-    }
-  }
-
-  set yaml(value: string) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    if (value === "") {
-      return;
-    }
-
-    let conf;
-    try {
-      conf = yaml.safeLoad(value);
-    } catch (err) {
-      conf = createErrorCardConfig(`Invalid YAML: ${err.message}`, undefined);
-    }
-
-    const element = createCardElement(conf);
-
-    if (this._hass) {
-      element.hass = this._hass;
-    }
-
-    this.appendChild(element);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-yaml-card-preview": HuiYAMLCardPreview;
-  }
-}
-
-customElements.define("hui-yaml-card-preview", HuiYAMLCardPreview);
+import yaml from "js-yaml";
+
+import "@polymer/paper-input/paper-textarea";
+
+import createCardElement from "../common/create-card-element";
+import createErrorCardConfig from "../common/create-error-card-config";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard } from "../types";
+
+export class HuiYAMLCardPreview extends HTMLElement {
+  private _hass?: HomeAssistant;
+
+  set hass(value: HomeAssistant) {
+    this._hass = value;
+    if (this.lastChild) {
+      (this.lastChild as LovelaceCard).hass = value;
+    }
+  }
+
+  set yaml(value: string) {
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    if (value === "") {
+      return;
+    }
+
+    let conf;
+    try {
+      conf = yaml.safeLoad(value);
+    } catch (err) {
+      conf = createErrorCardConfig(`Invalid YAML: ${err.message}`, undefined);
+    }
+
+    const element = createCardElement(conf);
+
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+
+    this.appendChild(element);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-card-preview": HuiYAMLCardPreview;
+  }
+}
+
+customElements.define("hui-yaml-card-preview", HuiYAMLCardPreview);
diff --git a/src/panels/lovelace/editor/hui-yaml-editor.ts b/src/panels/lovelace/editor/hui-yaml-editor.ts
index 170a08b3cb..f1bdaa58e0 100644
--- a/src/panels/lovelace/editor/hui-yaml-editor.ts
+++ b/src/panels/lovelace/editor/hui-yaml-editor.ts
@@ -1,41 +1,41 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event.js";
-
-import "@polymer/paper-input/paper-textarea.js";
-
-export class HuiYAMLEditor extends LitElement {
-  public yaml?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      yaml: {},
-    };
-  }
-
-  protected render() {
-    return html`
-      <style>
-        paper-textarea {
-          --paper-input-container-shared-input-style_-_font-family: monospace;
-        }
-      </style>
-      <paper-textarea
-        value="${this.yaml}"
-        @value-changed="${this._valueChanged}"
-      ></paper-textarea>
-    `;
-  }
-
-  private _valueChanged(ev) {
-    this.yaml = ev.target.value;
-    fireEvent(this, "yaml-changed", { yaml: ev.target.value });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-yaml-editor": HuiYAMLEditor;
-  }
-}
-
-customElements.define("hui-yaml-editor", HuiYAMLEditor);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "@polymer/paper-input/paper-textarea";
+
+export class HuiYAMLEditor extends LitElement {
+  public yaml?: string;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      yaml: {},
+    };
+  }
+
+  protected render() {
+    return html`
+      <style>
+        paper-textarea {
+          --paper-input-container-shared-input-style_-_font-family: monospace;
+        }
+      </style>
+      <paper-textarea
+        value="${this.yaml}"
+        @value-changed="${this._valueChanged}"
+      ></paper-textarea>
+    `;
+  }
+
+  private _valueChanged(ev) {
+    this.yaml = ev.target.value;
+    fireEvent(this, "yaml-changed", { yaml: ev.target.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-editor": HuiYAMLEditor;
+  }
+}
+
+customElements.define("hui-yaml-editor", HuiYAMLEditor);
diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
index 58c408b8dd..3a3fce32a8 100644
--- a/src/panels/lovelace/elements/hui-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -1,68 +1,68 @@
-import { html, LitElement } from "@polymer/lit-element";
-
-import "../../../components/ha-icon.js";
-
-import { computeTooltip } from "../common/compute-tooltip";
-import { handleClick } from "../common/handle-click";
-import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types.js";
-import { HomeAssistant } from "../../../types.js";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceElementConfig {
-  icon: string;
-}
-
-export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.icon) {
-      throw Error("Invalid Configuration: 'icon' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-icon
-        .icon="${this._config.icon}"
-        .title="${computeTooltip(this.hass!, this._config)}"
-        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
-        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
-        .longPress="${longPress()}"
-      ></ha-icon>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-icon-element": HuiIconElement;
-  }
-}
-
-customElements.define("hui-icon-element", HuiIconElement);
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/ha-icon";
+
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  icon: string;
+}
+
+export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.icon) {
+      throw Error("Invalid Configuration: 'icon' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon
+        .icon="${this._config.icon}"
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      ></ha-icon>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-icon-element": HuiIconElement;
+  }
+}
+
+customElements.define("hui-icon-element", HuiIconElement);
diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts
index 97631063b3..5f5992a9cf 100644
--- a/src/panels/lovelace/elements/hui-image-element.ts
+++ b/src/panels/lovelace/elements/hui-image-element.ts
@@ -1,13 +1,13 @@
 import { html, LitElement } from "@polymer/lit-element";
 
-import "../components/hui-image.js";
+import "../components/hui-image";
 
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types.js";
-import { HomeAssistant } from "../../../types.js";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
 import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceElementConfig {
diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts
index c87e3099de..7a39f19d35 100644
--- a/src/panels/lovelace/elements/hui-service-button-element.ts
+++ b/src/panels/lovelace/elements/hui-service-button-element.ts
@@ -1,10 +1,10 @@
 import { html, LitElement } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
 
-import "../../../components/buttons/ha-call-service-button.js";
+import "../../../components/buttons/ha-call-service-button";
 
-import { LovelaceElement, LovelaceElementConfig } from "./types.js";
-import { HomeAssistant } from "../../../types.js";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
 
 export class HuiServiceButtonElement extends LitElement
   implements LovelaceElement {
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts
index 9a5a461e89..0c27e33f6d 100644
--- a/src/panels/lovelace/elements/hui-state-badge-element.ts
+++ b/src/panels/lovelace/elements/hui-state-badge-element.ts
@@ -1,10 +1,10 @@
 import { html, LitElement } from "@polymer/lit-element";
 
-import "../../../components/entity/ha-state-label-badge.js";
+import "../../../components/entity/ha-state-label-badge";
 
 import computeStateName from "../../../common/entity/compute_state_name";
-import { LovelaceElement, LovelaceElementConfig } from "./types.js";
-import { HomeAssistant } from "../../../types.js";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
 import { TemplateResult } from "lit-html";
 
 export class HuiStateBadgeElement extends LitElement
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index 574d2f620b..5615af8614 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -1,14 +1,14 @@
 import { html, LitElement } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
 
-import "../../../components/entity/state-badge.js";
+import "../../../components/entity/state-badge";
 
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types.js";
-import { HomeAssistant } from "../../../types.js";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
 
 export class HuiStateIconElement extends hassLocalizeLitMixin(LitElement)
   implements LovelaceElement {
diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
index b066d81dae..6ad1a6b93d 100644
--- a/src/panels/lovelace/elements/hui-state-label-element.ts
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -1,78 +1,78 @@
-import { html, LitElement } from "@polymer/lit-element";
-
-import "../../../components/entity/ha-state-label-badge.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-import { computeTooltip } from "../common/compute-tooltip";
-import { handleClick } from "../common/handle-click";
-import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types.js";
-import { HomeAssistant } from "../../../types.js";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceElementConfig {
-  prefix?: string;
-  suffix?: string;
-}
-
-class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.entity) {
-      throw Error("Invalid Configuration: 'entity' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    const state = this.hass!.states[this._config.entity!];
-    return html`
-      ${this.renderStyle()}
-      <div
-        .title="${computeTooltip(this.hass!, this._config)}"
-        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
-        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
-        .longPress="${longPress()}"
-      >
-      ${this._config.prefix}${
-      state ? computeStateDisplay(this.localize, state) : "-"
-    }${this._config.suffix}
-      </div>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-        div {
-          padding: 8px;
-          white-space: nowrap;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-state-label-element": HuiStateLabelElement;
-  }
-}
-
-customElements.define("hui-state-label-element", HuiStateLabelElement);
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  prefix?: string;
+  suffix?: string;
+}
+
+class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <div
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      >
+      ${this._config.prefix}${
+      state ? computeStateDisplay(this.localize, state) : "-"
+    }${this._config.suffix}
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+        div {
+          padding: 8px;
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-label-element": HuiStateLabelElement;
+  }
+}
+
+customElements.define("hui-state-label-element", HuiStateLabelElement);
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
index 074ef40c33..2bc9a156d1 100644
--- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
@@ -1,11 +1,11 @@
 import { html, LitElement } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
 
-import "../../../components/ha-climate-state.js";
-import "../components/hui-generic-entity-row.js";
+import "../../../components/ha-climate-state";
+import "../components/hui-generic-entity-row";
 
-import { HomeAssistant } from "../../../types.js";
-import { EntityRow, EntityConfig } from "./types.js";
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
 
 class HuiClimateEntityRow extends LitElement implements EntityRow {
   public hass?: HomeAssistant;
diff --git a/src/panels/lovelace/entity-rows/hui-cover-entity-row.js b/src/panels/lovelace/entity-rows/hui-cover-entity-row.js
index f0334c9c30..b4c3de6953 100644
--- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-cover-entity-row.js
@@ -1,74 +1,74 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-generic-entity-row.js";
-import "../../../components/ha-cover-controls.js";
-import "../../../components/ha-cover-tilt-controls.js";
-import CoverEntity from "../../../util/cover-model.js";
-
-class HuiCoverEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.coverControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        ha-cover-controls,
-        ha-cover-tilt-controls {
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get coverControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[!_entityObj.isTiltOnly]]">
-        <ha-cover-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-controls>
-      </template>
-      <template is="dom-if" if="[[_entityObj.isTiltOnly]]">
-        <ha-cover-tilt-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-tilt-controls>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _entityObj: {
-        type: Object,
-        computed: "_computeEntityObj(hass, _stateObj)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeEntityObj(hass, stateObj) {
-    return stateObj ? new CoverEntity(hass, stateObj) : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-cover-entity-row", HuiCoverEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/ha-cover-controls";
+import "../../../components/ha-cover-tilt-controls";
+import CoverEntity from "../../../util/cover-model";
+
+class HuiCoverEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.coverControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        ha-cover-controls,
+        ha-cover-tilt-controls {
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get coverControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[!_entityObj.isTiltOnly]]">
+        <ha-cover-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-controls>
+      </template>
+      <template is="dom-if" if="[[_entityObj.isTiltOnly]]">
+        <ha-cover-tilt-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-tilt-controls>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _entityObj: {
+        type: Object,
+        computed: "_computeEntityObj(hass, _stateObj)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeEntityObj(hass, stateObj) {
+    return stateObj ? new CoverEntity(hass, stateObj) : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-cover-entity-row", HuiCoverEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-group-entity-row.js b/src/panels/lovelace/entity-rows/hui-group-entity-row.js
index 8da9c10722..77720fd0bf 100644
--- a/src/panels/lovelace/entity-rows/hui-group-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-group-entity-row.js
@@ -1,78 +1,78 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-generic-entity-row.js";
-import "../../../components/entity/ha-entity-toggle.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-import { DOMAINS_TOGGLE } from "../../../common/const.js";
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiGroupEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.groupControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get groupControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_canToggle]]">
-        <ha-entity-toggle
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_canToggle]]">
-        <div>
-          [[_computeState(_stateObj)]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _canToggle: {
-        type: Boolean,
-        computed: "_computeCanToggle(_stateObj.attributes.entity_id)",
-      },
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeCanToggle(entityIds) {
-    return entityIds.some((entityId) =>
-      DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
-    );
-  }
-
-  _computeState(stateObj) {
-    return computeStateDisplay(this.localize, stateObj);
-  }
-}
-customElements.define("hui-group-entity-row", HuiGroupEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiGroupEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.groupControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get groupControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[_canToggle]]">
+        <ha-entity-toggle
+          hass="[[hass]]"
+          state-obj="[[_stateObj]]"
+        ></ha-entity-toggle>
+      </template>
+      <template is="dom-if" if="[[!_canToggle]]">
+        <div>
+          [[_computeState(_stateObj)]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _canToggle: {
+        type: Boolean,
+        computed: "_computeCanToggle(_stateObj.attributes.entity_id)",
+      },
+    };
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeCanToggle(entityIds) {
+    return entityIds.some((entityId) =>
+      DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
+    );
+  }
+
+  _computeState(stateObj) {
+    return computeStateDisplay(this.localize, stateObj);
+  }
+}
+customElements.define("hui-group-entity-row", HuiGroupEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js
index 6c6e81bc06..33b8272216 100644
--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js
@@ -1,170 +1,170 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-input/paper-input.js";
-import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
-
-import "../components/hui-generic-entity-row.js";
-import "../../../components/ha-slider";
-
-class HuiInputNumberEntityRow extends mixinBehaviors(
-  [IronResizableBehavior],
-  PolymerElement
-) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-        id="input_number_card"
-      >
-        ${this.inputNumberControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        .flex {
-          display: flex;
-          align-items: center;
-        }
-        .state {
-          min-width: 45px;
-          text-align: center;
-        }
-        paper-input {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-
-  static get inputNumberControlTemplate() {
-    return html`
-      <div>
-        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'slider')]]">
-          <div class="flex">
-            <ha-slider
-              min="[[_min]]"
-              max="[[_max]]"
-              value="{{_value}}"
-              step="[[_step]]"
-              pin
-              on-change="_selectedValueChanged"
-              ignore-bar-touch
-            ></ha-slider>
-            <span class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</span>
-          </div>
-        </template>
-        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'box')]]">
-          <paper-input
-            no-label-float
-            auto-validate
-            pattern="[0-9]+([\\.][0-9]+)?"
-            step="[[_step]]"
-            min="[[_min]]"
-            max="[[_max]]"
-            value="{{_value}}"
-            type="number"
-            on-change="_selectedValueChanged"
-          ></paper-input>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-      _min: {
-        type: Number,
-        value: 0,
-      },
-      _max: {
-        type: Number,
-        value: 100,
-      },
-      _step: Number,
-      _value: Number,
-    };
-  }
-
-  ready() {
-    super.ready();
-    if (typeof ResizeObserver === "function") {
-      const ro = new ResizeObserver((entries) => {
-        entries.forEach(() => {
-          this._hiddenState();
-        });
-      });
-      ro.observe(this.$.input_number_card);
-    } else {
-      this.addEventListener("iron-resize", this._hiddenState);
-    }
-  }
-
-  _equals(a, b) {
-    return a === b;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _hiddenState() {
-    if (
-      !this.$ ||
-      !this._stateObj ||
-      this._stateObj.attributes.mode !== "slider"
-    )
-      return;
-    const width = this.$.input_number_card.offsetWidth;
-    const stateEl = this.shadowRoot.querySelector(".state");
-    if (!stateEl) return;
-    stateEl.hidden = width <= 350;
-  }
-
-  _stateObjChanged(stateObj, oldStateObj) {
-    if (!stateObj) return;
-
-    this.setProperties({
-      _min: Number(stateObj.attributes.min),
-      _max: Number(stateObj.attributes.max),
-      _step: Number(stateObj.attributes.step),
-      _value: Number(stateObj.state),
-    });
-    if (
-      oldStateObj &&
-      stateObj.attributes.mode === "slider" &&
-      oldStateObj.attributes.mode !== "slider"
-    ) {
-      this._hiddenState();
-    }
-  }
-
-  _selectedValueChanged() {
-    if (this._value === Number(this._stateObj.state)) return;
-
-    this.hass.callService("input_number", "set_value", {
-      value: this._value,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-}
-customElements.define("hui-input-number-entity-row", HuiInputNumberEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-input/paper-input";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
+import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/ha-slider";
+
+class HuiInputNumberEntityRow extends mixinBehaviors(
+  [IronResizableBehavior],
+  PolymerElement
+) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+        id="input_number_card"
+      >
+        ${this.inputNumberControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        .flex {
+          display: flex;
+          align-items: center;
+        }
+        .state {
+          min-width: 45px;
+          text-align: center;
+        }
+        paper-input {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+
+  static get inputNumberControlTemplate() {
+    return html`
+      <div>
+        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'slider')]]">
+          <div class="flex">
+            <ha-slider
+              min="[[_min]]"
+              max="[[_max]]"
+              value="{{_value}}"
+              step="[[_step]]"
+              pin
+              on-change="_selectedValueChanged"
+              ignore-bar-touch
+            ></ha-slider>
+            <span class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</span>
+          </div>
+        </template>
+        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'box')]]">
+          <paper-input
+            no-label-float
+            auto-validate
+            pattern="[0-9]+([\\.][0-9]+)?"
+            step="[[_step]]"
+            min="[[_min]]"
+            max="[[_max]]"
+            value="{{_value}}"
+            type="number"
+            on-change="_selectedValueChanged"
+          ></paper-input>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+        observer: "_stateObjChanged",
+      },
+      _min: {
+        type: Number,
+        value: 0,
+      },
+      _max: {
+        type: Number,
+        value: 100,
+      },
+      _step: Number,
+      _value: Number,
+    };
+  }
+
+  ready() {
+    super.ready();
+    if (typeof ResizeObserver === "function") {
+      const ro = new ResizeObserver((entries) => {
+        entries.forEach(() => {
+          this._hiddenState();
+        });
+      });
+      ro.observe(this.$.input_number_card);
+    } else {
+      this.addEventListener("iron-resize", this._hiddenState);
+    }
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _hiddenState() {
+    if (
+      !this.$ ||
+      !this._stateObj ||
+      this._stateObj.attributes.mode !== "slider"
+    )
+      return;
+    const width = this.$.input_number_card.offsetWidth;
+    const stateEl = this.shadowRoot.querySelector(".state");
+    if (!stateEl) return;
+    stateEl.hidden = width <= 350;
+  }
+
+  _stateObjChanged(stateObj, oldStateObj) {
+    if (!stateObj) return;
+
+    this.setProperties({
+      _min: Number(stateObj.attributes.min),
+      _max: Number(stateObj.attributes.max),
+      _step: Number(stateObj.attributes.step),
+      _value: Number(stateObj.state),
+    });
+    if (
+      oldStateObj &&
+      stateObj.attributes.mode === "slider" &&
+      oldStateObj.attributes.mode !== "slider"
+    ) {
+      this._hiddenState();
+    }
+  }
+
+  _selectedValueChanged() {
+    if (this._value === Number(this._stateObj.state)) return;
+
+    this.hass.callService("input_number", "set_value", {
+      value: this._value,
+      entity_id: this._stateObj.entity_id,
+    });
+  }
+}
+customElements.define("hui-input-number-entity-row", HuiInputNumberEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js
index 2f5850386b..61ce4317c4 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js
@@ -1,107 +1,107 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-
-import "../../../components/entity/state-badge.js";
-
-import computeStateName from "../../../common/entity/compute_state_name.js";
-
-import EventsMixin from "../../../mixins/events-mixin.js";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <template is="dom-if" if="[[_stateObj]]">
-        <state-badge state-obj="[[_stateObj]]"></state-badge>
-        <paper-dropdown-menu on-click="_stopPropagation" selected-item-label="{{_selected}}" label="[[_computeName(_config.name, _stateObj)]]">
-          <paper-listbox slot="dropdown-content" selected="[[_computeSelected(_stateObj)]]">
-            <template is="dom-repeat" items="[[_stateObj.attributes.options]]">
-              <paper-item>[[item]]</paper-item>
-            </template>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div class="not-found">
-          Entity not available: [[_config.entity]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        paper-dropdown-menu {
-          margin-left: 16px;
-          flex: 1;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _selected: {
-        type: String,
-        observer: "_selectedChanged",
-      },
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeName(name, stateObj) {
-    return name || computeStateName(stateObj);
-  }
-
-  _computeSelected(stateObj) {
-    return stateObj.attributes.options.indexOf(stateObj.state);
-  }
-
-  _selectedChanged(option) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (option === "" || option === this._stateObj.state) {
-      return;
-    }
-    this.hass.callService("input_select", "select_option", {
-      option: option,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-
-  _stopPropagation(ev) {
-    ev.stopPropagation();
-  }
-}
-customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+
+import "../../../components/entity/state-badge";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+
+import EventsMixin from "../../../mixins/events-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <template is="dom-if" if="[[_stateObj]]">
+        <state-badge state-obj="[[_stateObj]]"></state-badge>
+        <paper-dropdown-menu on-click="_stopPropagation" selected-item-label="{{_selected}}" label="[[_computeName(_config.name, _stateObj)]]">
+          <paper-listbox slot="dropdown-content" selected="[[_computeSelected(_stateObj)]]">
+            <template is="dom-repeat" items="[[_stateObj.attributes.options]]">
+              <paper-item>[[item]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </template>
+      <template is="dom-if" if="[[!_stateObj]]">
+        <div class="not-found">
+          Entity not available: [[_config.entity]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        paper-dropdown-menu {
+          margin-left: 16px;
+          flex: 1;
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _selected: {
+        type: String,
+        observer: "_selectedChanged",
+      },
+    };
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeName(name, stateObj) {
+    return name || computeStateName(stateObj);
+  }
+
+  _computeSelected(stateObj) {
+    return stateObj.attributes.options.indexOf(stateObj.state);
+  }
+
+  _selectedChanged(option) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (option === "" || option === this._stateObj.state) {
+      return;
+    }
+    this.hass.callService("input_select", "select_option", {
+      option: option,
+      entity_id: this._stateObj.entity_id,
+    });
+  }
+
+  _stopPropagation(ev) {
+    ev.stopPropagation();
+  }
+}
+customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
index 98efd8e187..dc27bb8315 100644
--- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
@@ -1,73 +1,73 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-input/paper-input.js";
-
-import "../components/hui-generic-entity-row.js";
-
-class HuiInputTextEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.inputTextControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get inputTextControlTemplate() {
-    return html`
-      <paper-input
-        no-label-float
-        minlength="[[_stateObj.attributes.min]]"
-        maxlength="[[_stateObj.attributes.max]]"
-        value="{{_value}}"
-        auto-validate="[[_stateObj.attributes.pattern]]"
-        pattern="[[_stateObj.attributes.pattern]]"
-        type="[[_stateObj.attributes.mode]]"
-        on-change="_selectedValueChanged"
-        placeholder="(empty value)"
-      ></paper-input>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-      _value: String,
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _stateObjChanged(stateObj) {
-    this._value = stateObj && stateObj.state;
-  }
-
-  _selectedValueChanged() {
-    if (this._value === this._stateObj.state) {
-      return;
-    }
-    this.hass.callService("input_text", "set_value", {
-      value: this._value,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-}
-customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-input/paper-input";
+
+import "../components/hui-generic-entity-row";
+
+class HuiInputTextEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.inputTextControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get inputTextControlTemplate() {
+    return html`
+      <paper-input
+        no-label-float
+        minlength="[[_stateObj.attributes.min]]"
+        maxlength="[[_stateObj.attributes.max]]"
+        value="{{_value}}"
+        auto-validate="[[_stateObj.attributes.pattern]]"
+        pattern="[[_stateObj.attributes.pattern]]"
+        type="[[_stateObj.attributes.mode]]"
+        on-change="_selectedValueChanged"
+        placeholder="(empty value)"
+      ></paper-input>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+        observer: "_stateObjChanged",
+      },
+      _value: String,
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _stateObjChanged(stateObj) {
+    this._value = stateObj && stateObj.state;
+  }
+
+  _selectedValueChanged() {
+    if (this._value === this._stateObj.state) {
+      return;
+    }
+    this.hass.callService("input_text", "set_value", {
+      value: this._value,
+      entity_id: this._stateObj.entity_id,
+    });
+  }
+}
+customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.js b/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
index 616316d6a2..f75559d30a 100644
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
@@ -1,83 +1,83 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-
-import "../components/hui-generic-entity-row.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiLockEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.lockControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get lockControlTemplate() {
-    return html`
-      <paper-button on-click="_callService">
-        [[_computeButtonTitle(_stateObj.state)]]
-      </paper-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeButtonTitle(state) {
-    return state === "locked"
-      ? this.localize("ui.card.lock.unlock")
-      : this.localize("ui.card.lock.lock");
-  }
-
-  _callService(ev) {
-    ev.stopPropagation();
-    const stateObj = this._stateObj;
-    this.hass.callService(
-      "lock",
-      stateObj.state === "locked" ? "unlock" : "lock",
-      { entity_id: stateObj.entity_id }
-    );
-  }
-}
-customElements.define("hui-lock-entity-row", HuiLockEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../components/hui-generic-entity-row";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiLockEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.lockControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get lockControlTemplate() {
+    return html`
+      <paper-button on-click="_callService">
+        [[_computeButtonTitle(_stateObj.state)]]
+      </paper-button>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeButtonTitle(state) {
+    return state === "locked"
+      ? this.localize("ui.card.lock.unlock")
+      : this.localize("ui.card.lock.lock");
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    const stateObj = this._stateObj;
+    this.hass.callService(
+      "lock",
+      stateObj.state === "locked" ? "unlock" : "lock",
+      { entity_id: stateObj.entity_id }
+    );
+  }
+}
+customElements.define("hui-lock-entity-row", HuiLockEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js
index 77cbde1b94..b6d90e944f 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js
@@ -1,162 +1,162 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-generic-entity-row.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-const SUPPORT_PAUSE = 1;
-const SUPPORT_NEXT_TRACK = 32;
-const SUPPORTS_PLAY = 16384;
-const OFF_STATES = ["off", "idle"];
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiMediaPlayerEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-        show-secondary="false"
-      >
-        ${this.mediaPlayerControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        .controls {
-          white-space: nowrap;
-        }
-      </style>
-    `;
-  }
-
-  static get mediaPlayerControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[!_isOff(_stateObj.state)]]">
-        <div class="controls">
-          <template is="dom-if" if="[[_computeControlIcon(_stateObj)]]">
-            <paper-icon-button
-              icon="[[_computeControlIcon(_stateObj)]]"
-              on-click="_playPause"
-            ></paper-icon-button>
-          </template>
-          <template is="dom-if" if="[[_supportsNext(_stateObj)]]">
-            <paper-icon-button
-              icon="hass:skip-next"
-              on-click="_nextTrack"
-            ></paper-icon-button>
-          </template>
-        </div>
-      </template>
-      <template is="dom-if" if="[[_isOff(_stateObj.state)]]">
-        <div>[[_computeState(_stateObj.state)]]</div>
-      </template> 
-
-      <div slot="secondary">
-        [[_computeMediaTitle(_stateObj)]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeControlIcon(stateObj) {
-    if (!stateObj) return null;
-
-    if (stateObj.state !== "playing") {
-      return stateObj.attributes.supported_features & SUPPORTS_PLAY
-        ? "hass:play"
-        : "";
-    }
-
-    return stateObj.attributes.supported_features & SUPPORT_PAUSE
-      ? "hass:pause"
-      : "hass:stop";
-  }
-
-  _computeMediaTitle(stateObj) {
-    if (!stateObj || this._isOff(stateObj.state)) return null;
-
-    switch (stateObj.attributes.media_content_type) {
-      case "music":
-        return `${stateObj.attributes.media_artist}: ${
-          stateObj.attributes.media_title
-        }`;
-      case "tvshow":
-        return `${stateObj.attributes.media_series_title}: ${
-          stateObj.attributes.media_title
-        }`;
-      default:
-        return (
-          stateObj.attributes.media_title ||
-          stateObj.attributes.app_name ||
-          stateObj.state
-        );
-    }
-  }
-
-  _computeState(state) {
-    return (
-      this.localize(`state.media_player.${state}`) ||
-      this.localize(`state.default.${state}`) ||
-      state
-    );
-  }
-
-  _callService(service) {
-    this.hass.callService("media_player", service, {
-      entity_id: this._config.entity,
-    });
-  }
-
-  _playPause(event) {
-    event.stopPropagation();
-    this._callService("media_play_pause");
-  }
-
-  _nextTrack(event) {
-    event.stopPropagation();
-    if (this._stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK) {
-      this._callService("media_next_track");
-    }
-  }
-
-  _isOff(state) {
-    return OFF_STATES.includes(state);
-  }
-
-  _supportsNext(stateObj) {
-    return (
-      stateObj && stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK
-    );
-  }
-}
-customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+const SUPPORT_PAUSE = 1;
+const SUPPORT_NEXT_TRACK = 32;
+const SUPPORTS_PLAY = 16384;
+const OFF_STATES = ["off", "idle"];
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiMediaPlayerEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+        show-secondary="false"
+      >
+        ${this.mediaPlayerControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        .controls {
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+
+  static get mediaPlayerControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[!_isOff(_stateObj.state)]]">
+        <div class="controls">
+          <template is="dom-if" if="[[_computeControlIcon(_stateObj)]]">
+            <paper-icon-button
+              icon="[[_computeControlIcon(_stateObj)]]"
+              on-click="_playPause"
+            ></paper-icon-button>
+          </template>
+          <template is="dom-if" if="[[_supportsNext(_stateObj)]]">
+            <paper-icon-button
+              icon="hass:skip-next"
+              on-click="_nextTrack"
+            ></paper-icon-button>
+          </template>
+        </div>
+      </template>
+      <template is="dom-if" if="[[_isOff(_stateObj.state)]]">
+        <div>[[_computeState(_stateObj.state)]]</div>
+      </template>
+
+      <div slot="secondary">
+        [[_computeMediaTitle(_stateObj)]]
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeControlIcon(stateObj) {
+    if (!stateObj) return null;
+
+    if (stateObj.state !== "playing") {
+      return stateObj.attributes.supported_features & SUPPORTS_PLAY
+        ? "hass:play"
+        : "";
+    }
+
+    return stateObj.attributes.supported_features & SUPPORT_PAUSE
+      ? "hass:pause"
+      : "hass:stop";
+  }
+
+  _computeMediaTitle(stateObj) {
+    if (!stateObj || this._isOff(stateObj.state)) return null;
+
+    switch (stateObj.attributes.media_content_type) {
+      case "music":
+        return `${stateObj.attributes.media_artist}: ${
+          stateObj.attributes.media_title
+        }`;
+      case "tvshow":
+        return `${stateObj.attributes.media_series_title}: ${
+          stateObj.attributes.media_title
+        }`;
+      default:
+        return (
+          stateObj.attributes.media_title ||
+          stateObj.attributes.app_name ||
+          stateObj.state
+        );
+    }
+  }
+
+  _computeState(state) {
+    return (
+      this.localize(`state.media_player.${state}`) ||
+      this.localize(`state.default.${state}`) ||
+      state
+    );
+  }
+
+  _callService(service) {
+    this.hass.callService("media_player", service, {
+      entity_id: this._config.entity,
+    });
+  }
+
+  _playPause(event) {
+    event.stopPropagation();
+    this._callService("media_play_pause");
+  }
+
+  _nextTrack(event) {
+    event.stopPropagation();
+    if (this._stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK) {
+      this._callService("media_next_track");
+    }
+  }
+
+  _isOff(state) {
+    return OFF_STATES.includes(state);
+  }
+
+  _supportsNext(stateObj) {
+    return (
+      stateObj && stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK
+    );
+  }
+}
+customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.js b/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
index 5d55e3bb75..f0d1544335 100644
--- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
@@ -1,70 +1,70 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-
-import "../components/hui-generic-entity-row.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiSceneEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.sceneControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get sceneControlTemplate() {
-    return html`
-      <paper-button on-click="_callService">
-        [[localize('ui.card.scene.activate')]]
-      </paper-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _callService(ev) {
-    ev.stopPropagation();
-    this.hass.callService("scene", "turn_on", {
-      entity_id: this._config.entity,
-    });
-  }
-}
-customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../components/hui-generic-entity-row";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiSceneEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.sceneControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get sceneControlTemplate() {
+    return html`
+      <paper-button on-click="_callService">
+        [[localize('ui.card.scene.activate')]]
+      </paper-button>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    this.hass.callService("scene", "turn_on", {
+      entity_id: this._config.entity,
+    });
+  }
+}
+customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.js b/src/panels/lovelace/entity-rows/hui-script-entity-row.js
index f00fa0b744..db5b948160 100644
--- a/src/panels/lovelace/entity-rows/hui-script-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.js
@@ -1,78 +1,78 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-
-import "../components/hui-generic-entity-row.js";
-import "../../../components/entity/ha-entity-toggle.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiScriptEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.scriptControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get scriptControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_stateObj.attributes.can_cancel]]">
-        <ha-entity-toggle state-obj="[[_stateObj]]" hass="[[hass]]"></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_stateObj.attributes.can_cancel]]">
-        <paper-button on-click="_callService">[[localize('ui.card.script.execute')]]</paper-button>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _callService(ev) {
-    ev.stopPropagation();
-    this.hass.callService("script", "turn_on", {
-      entity_id: this._config.entity,
-    });
-  }
-}
-customElements.define("hui-script-entity-row", HuiScriptEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiScriptEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.scriptControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get scriptControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[_stateObj.attributes.can_cancel]]">
+        <ha-entity-toggle state-obj="[[_stateObj]]" hass="[[hass]]"></ha-entity-toggle>
+      </template>
+      <template is="dom-if" if="[[!_stateObj.attributes.can_cancel]]">
+        <paper-button on-click="_callService">[[localize('ui.card.script.execute')]]</paper-button>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    this.hass.callService("script", "turn_on", {
+      entity_id: this._config.entity,
+    });
+  }
+}
+customElements.define("hui-script-entity-row", HuiScriptEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
index 833ed16edb..9c78c3a4e9 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
@@ -1,70 +1,70 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-generic-entity-row.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiTextEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.textControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        div {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-
-  static get textControlTemplate() {
-    return html`
-      <div>
-        [[_computeState(_stateObj)]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeState(stateObj) {
-    return stateObj && computeStateDisplay(this.localize, stateObj);
-  }
-}
-customElements.define("hui-text-entity-row", HuiTextEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiTextEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.textControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        div {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+
+  static get textControlTemplate() {
+    return html`
+      <div>
+        [[_computeState(_stateObj)]]
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeState(stateObj) {
+    return stateObj && computeStateDisplay(this.localize, stateObj);
+  }
+}
+customElements.define("hui-text-entity-row", HuiTextEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.js b/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
index 7bb8362007..ad9d979184 100644
--- a/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
@@ -1,103 +1,103 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-generic-entity-row.js";
-
-import timerTimeRemaining from "../../../common/entity/timer_time_remaining.js";
-import secondsToDuration from "../../../common/datetime/seconds_to_duration.js";
-
-class HuiTimerEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.timerControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get timerControlTemplate() {
-    return html`
-      <div>
-        [[_computeDisplay(_stateObj, _timeRemaining)]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-      _timeRemaining: Number,
-    };
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._clearInterval();
-  }
-
-  _stateObjChanged(stateObj) {
-    if (stateObj) {
-      this._startInterval(stateObj);
-    } else {
-      this._clearInterval();
-    }
-  }
-
-  _clearInterval() {
-    if (this._updateRemaining) {
-      clearInterval(this._updateRemaining);
-      this._updateRemaining = null;
-    }
-  }
-
-  _startInterval(stateObj) {
-    this._clearInterval();
-    this._calculateRemaining(stateObj);
-
-    if (stateObj.state === "active") {
-      this._updateRemaining = setInterval(
-        () => this._calculateRemaining(this._stateObj),
-        1000
-      );
-    }
-  }
-
-  _calculateRemaining(stateObj) {
-    this._timeRemaining = timerTimeRemaining(stateObj);
-  }
-
-  _computeDisplay(stateObj, time) {
-    if (!stateObj) return null;
-
-    if (stateObj.state === "idle" || time === 0) return stateObj.state;
-
-    let display = secondsToDuration(time);
-
-    if (stateObj.state === "paused") {
-      display += " (paused)";
-    }
-
-    return display;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-timer-entity-row", HuiTimerEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+
+import timerTimeRemaining from "../../../common/entity/timer_time_remaining";
+import secondsToDuration from "../../../common/datetime/seconds_to_duration";
+
+class HuiTimerEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.timerControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get timerControlTemplate() {
+    return html`
+      <div>
+        [[_computeDisplay(_stateObj, _timeRemaining)]]
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+        observer: "_stateObjChanged",
+      },
+      _timeRemaining: Number,
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearInterval();
+  }
+
+  _stateObjChanged(stateObj) {
+    if (stateObj) {
+      this._startInterval(stateObj);
+    } else {
+      this._clearInterval();
+    }
+  }
+
+  _clearInterval() {
+    if (this._updateRemaining) {
+      clearInterval(this._updateRemaining);
+      this._updateRemaining = null;
+    }
+  }
+
+  _startInterval(stateObj) {
+    this._clearInterval();
+    this._calculateRemaining(stateObj);
+
+    if (stateObj.state === "active") {
+      this._updateRemaining = setInterval(
+        () => this._calculateRemaining(this._stateObj),
+        1000
+      );
+    }
+  }
+
+  _calculateRemaining(stateObj) {
+    this._timeRemaining = timerTimeRemaining(stateObj);
+  }
+
+  _computeDisplay(stateObj, time) {
+    if (!stateObj) return null;
+
+    if (stateObj.state === "idle" || time === 0) return stateObj.state;
+
+    let display = secondsToDuration(time);
+
+    if (stateObj.state === "paused") {
+      display += " (paused)";
+    }
+
+    return display;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-timer-entity-row", HuiTimerEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js
index 5f9a6f5a47..c75055635f 100644
--- a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js
@@ -1,76 +1,76 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/hui-generic-entity-row.js";
-import "../../../components/entity/ha-entity-toggle.js";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display.js";
-
-import LocalizeMixin from "../../../mixins/localize-mixin.js";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiToggleEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.toggleControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get toggleControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_canToggle]]">
-        <ha-entity-toggle
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_canToggle]]">
-        <div>
-          [[_computeState(_stateObj)]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _canToggle: {
-        type: Boolean,
-        computed: "_computeCanToggle(_stateObj.state)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeCanToggle(state) {
-    return state === "on" || state === "off";
-  }
-
-  _computeState(stateObj) {
-    return stateObj && computeStateDisplay(this.localize, stateObj);
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-toggle-entity-row", HuiToggleEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiToggleEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.toggleControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get toggleControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[_canToggle]]">
+        <ha-entity-toggle
+          hass="[[hass]]"
+          state-obj="[[_stateObj]]"
+        ></ha-entity-toggle>
+      </template>
+      <template is="dom-if" if="[[!_canToggle]]">
+        <div>
+          [[_computeState(_stateObj)]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _canToggle: {
+        type: Boolean,
+        computed: "_computeCanToggle(_stateObj.state)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeCanToggle(state) {
+    return state === "on" || state === "off";
+  }
+
+  _computeState(stateObj) {
+    return stateObj && computeStateDisplay(this.localize, stateObj);
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-toggle-entity-row", HuiToggleEntityRow);
diff --git a/src/panels/lovelace/ha-panel-lovelace.js b/src/panels/lovelace/ha-panel-lovelace.js
index 0f46038180..1d11e2d0f3 100644
--- a/src/panels/lovelace/ha-panel-lovelace.js
+++ b/src/panels/lovelace/ha-panel-lovelace.js
@@ -1,125 +1,125 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import "@polymer/paper-button/paper-button.js";
-
-import "../../layouts/hass-loading-screen.js";
-import "../../layouts/hass-error-screen.js";
-import "./hui-root.js";
-
-class Lovelace extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-        }
-      </style>
-      <template is='dom-if' if='[[_equal(_state, "loaded")]]' restamp>
-        <hui-root
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-          hass='[[hass]]'
-          route="[[route]]"
-          config='[[_config]]'
-          columns='[[_columns]]'
-          on-config-refresh='_fetchConfig'
-        ></hui-root>
-      </template>
-      <template is='dom-if' if='[[_equal(_state, "loading")]]' restamp>
-        <hass-loading-screen
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></hass-loading-screen>
-      </template>
-      <template is='dom-if' if='[[_equal(_state, "error")]]' restamp>
-        <hass-error-screen
-          title='Lovelace'
-          error='[[_errorMsg]]'
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        >
-          <paper-button on-click="_fetchConfig">Reload ui-lovelace.yaml</paper-button>
-        </hass-error-screen>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
-      route: Object,
-
-      _columns: {
-        type: Number,
-        value: 1,
-      },
-
-      _state: {
-        type: String,
-        value: "loading",
-      },
-
-      _errorMsg: String,
-
-      _config: {
-        type: Object,
-        value: null,
-      },
-    };
-  }
-
-  static get observers() {
-    return ["_updateColumns(narrow, showMenu)"];
-  }
-
-  ready() {
-    this._fetchConfig();
-    this._updateColumns = this._updateColumns.bind(this);
-    this.mqls = [300, 600, 900, 1200].map((width) => {
-      const mql = matchMedia(`(min-width: ${width}px)`);
-      mql.addListener(this._updateColumns);
-      return mql;
-    });
-    this._updateColumns();
-    super.ready();
-  }
-
-  _updateColumns() {
-    const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
-    // Do -1 column if the menu is docked and open
-    this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
-  }
-
-  async _fetchConfig() {
-    try {
-      const conf = await this.hass.callWS({ type: "lovelace/config" });
-      this.setProperties({
-        _config: conf,
-        _state: "loaded",
-      });
-    } catch (err) {
-      this.setProperties({
-        _state: "error",
-        _errorMsg: err.message,
-      });
-    }
-  }
-
-  _equal(a, b) {
-    return a === b;
-  }
-}
-
-customElements.define("ha-panel-lovelace", Lovelace);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../../layouts/hass-loading-screen";
+import "../../layouts/hass-error-screen";
+import "./hui-root";
+
+class Lovelace extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+        }
+      </style>
+      <template is='dom-if' if='[[_equal(_state, "loaded")]]' restamp>
+        <hui-root
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+          hass='[[hass]]'
+          route="[[route]]"
+          config='[[_config]]'
+          columns='[[_columns]]'
+          on-config-refresh='_fetchConfig'
+        ></hui-root>
+      </template>
+      <template is='dom-if' if='[[_equal(_state, "loading")]]' restamp>
+        <hass-loading-screen
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        ></hass-loading-screen>
+      </template>
+      <template is='dom-if' if='[[_equal(_state, "error")]]' restamp>
+        <hass-error-screen
+          title='Lovelace'
+          error='[[_errorMsg]]'
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        >
+          <paper-button on-click="_fetchConfig">Reload ui-lovelace.yaml</paper-button>
+        </hass-error-screen>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+
+      narrow: {
+        type: Boolean,
+        value: false,
+      },
+
+      showMenu: {
+        type: Boolean,
+        value: false,
+      },
+
+      route: Object,
+
+      _columns: {
+        type: Number,
+        value: 1,
+      },
+
+      _state: {
+        type: String,
+        value: "loading",
+      },
+
+      _errorMsg: String,
+
+      _config: {
+        type: Object,
+        value: null,
+      },
+    };
+  }
+
+  static get observers() {
+    return ["_updateColumns(narrow, showMenu)"];
+  }
+
+  ready() {
+    this._fetchConfig();
+    this._updateColumns = this._updateColumns.bind(this);
+    this.mqls = [300, 600, 900, 1200].map((width) => {
+      const mql = matchMedia(`(min-width: ${width}px)`);
+      mql.addListener(this._updateColumns);
+      return mql;
+    });
+    this._updateColumns();
+    super.ready();
+  }
+
+  _updateColumns() {
+    const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
+    // Do -1 column if the menu is docked and open
+    this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
+  }
+
+  async _fetchConfig() {
+    try {
+      const conf = await this.hass.callWS({ type: "lovelace/config" });
+      this.setProperties({
+        _config: conf,
+        _state: "loaded",
+      });
+    } catch (err) {
+      this.setProperties({
+        _state: "error",
+        _errorMsg: err.message,
+      });
+    }
+  }
+
+  _equal(a, b) {
+    return a === b;
+  }
+}
+
+customElements.define("ha-panel-lovelace", Lovelace);
diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js
index 716e1bbb17..3e937ca764 100644
--- a/src/panels/lovelace/hui-root.js
+++ b/src/panels/lovelace/hui-root.js
@@ -1,380 +1,380 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-scroll-effects/effects/waterfall.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/app-route/app-route.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-menu-button/paper-menu-button.js";
-import "@polymer/paper-tabs/paper-tab.js";
-import "@polymer/paper-tabs/paper-tabs.js";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import scrollToTarget from "../../common/dom/scroll-to-target.js";
-
-import EventsMixin from "../../mixins/events-mixin.js";
-import NavigateMixin from "../../mixins/navigate-mixin.js";
-
-import "../../layouts/ha-app-layout.js";
-import "../../components/ha-start-voice-button.js";
-import "../../components/ha-icon.js";
-import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource.js";
-import { subscribeNotifications } from "../../data/ws-notifications";
-import "./components/notifications/hui-notification-drawer.js";
-import "./components/notifications/hui-notifications-button.js";
-import "./hui-unused-entities.js";
-import "./hui-view.js";
-import debounce from "../../common/util/debounce.js";
-
-import createCardElement from "./common/create-card-element.js";
-import computeNotifications from "./common/compute-notifications";
-
-// CSS and JS should only be imported once. Modules and HTML are safe.
-const CSS_CACHE = {};
-const JS_CACHE = {};
-
-class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-    <style include='ha-style'>
-      :host {
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-      }
-
-      ha-app-layout {
-        min-height: 100%;
-      }
-      paper-tabs {
-        margin-left: 12px;
-        --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
-        text-transform: uppercase;
-      }
-      app-toolbar a {
-        color: var(--text-primary-color, white);
-      }
-      #view {
-        min-height: calc(100vh - 112px);
-        /**
-         * Since we only set min-height, if child nodes need percentage
-         * heights they must use absolute positioning so we need relative
-         * positioning here.
-         *
-         * https://www.w3.org/TR/CSS2/visudet.html#the-height-property
-         */
-        position: relative;
-      }
-      #view.tabs-hidden {
-        min-height: calc(100vh - 64px);
-      }
-      paper-item {
-        cursor: pointer;
-      }
-    </style>
-    <app-route route="[[route]]" pattern="/:view" data="{{routeData}}"></app-route>
-    <hui-notification-drawer
-      hass="[[hass]]"
-      notifications="[[_notifications]]"
-      open="{{notificationsOpen}}"
-      narrow="[[narrow]]"
-    ></hui-notification-drawer>
-    <ha-app-layout id="layout">
-      <app-header slot="header" effects="waterfall" fixed condenses>
-        <template is='dom-if' if="[[!_editMode]]">
-          <app-toolbar>
-            <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-            <div main-title>[[_computeTitle(config)]]</div>
-            <hui-notifications-button
-              hass="[[hass]]"
-              notifications-open="{{notificationsOpen}}"
-              notifications="[[_notifications]]"
-            ></hui-notifications-button>
-            <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
-            <paper-menu-button
-              no-animations
-              horizontal-align="right"
-              horizontal-offset="-5"
-            >
-              <paper-icon-button icon="hass:dots-vertical" slot="dropdown-trigger"></paper-icon-button>
-              <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
-                <paper-item on-click="_handleRefresh">Refresh</paper-item>
-                <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
-                <paper-item on-click="_editModeEnable">Configure UI</paper-item>
-                <paper-item on-click="_handleHelp">Help</paper-item>
-              </paper-listbox>
-            </paper-menu-button>
-          </app-toolbar>
-        </template>
-        <template is='dom-if' if="[[_editMode]]">
-          <app-toolbar>
-            <paper-icon-button
-              icon='hass:close'
-              on-click='_editModeDisable'
-            ></paper-icon-button>
-            <div main-title>Edit UI</div>
-          </app-toolbar>
-        </template>
-
-        <div sticky hidden$="[[_computeTabsHidden(config.views)]]">
-          <paper-tabs scrollable selected="[[_curView]]" on-iron-activate="_handleViewSelected">
-            <template is="dom-repeat" items="[[config.views]]">
-              <paper-tab>
-                <template is="dom-if" if="[[item.icon]]">
-                  <ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
-                </template>
-                <template is="dom-if" if="[[!item.icon]]">
-                  [[_computeTabTitle(item.title)]]
-                </template>
-              </paper-tab>
-            </template>
-          </paper-tabs>
-        </div>
-      </app-header>
-
-      <div id='view' on-rebuild-view='_debouncedConfigChanged'></div>
-    </app-header-layout>
-    `;
-  }
-
-  static get properties() {
-    return {
-      narrow: Boolean,
-      showMenu: Boolean,
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: {
-        type: Object,
-        observer: "_configChanged",
-      },
-      columns: {
-        type: Number,
-        observer: "_columnsChanged",
-      },
-
-      _curView: {
-        type: Number,
-        value: 0,
-      },
-
-      route: {
-        type: Object,
-        observer: "_routeChanged",
-      },
-
-      notificationsOpen: {
-        type: Boolean,
-        value: false,
-      },
-
-      _persistentNotifications: {
-        type: Array,
-        value: [],
-      },
-
-      _notifications: {
-        type: Array,
-        computed: "_updateNotifications(hass.states, _persistentNotifications)",
-      },
-
-      _editMode: {
-        type: Boolean,
-        value: false,
-        observer: "_editModeChanged",
-      },
-
-      routeData: Object,
-    };
-  }
-
-  constructor() {
-    super();
-    this._debouncedConfigChanged = debounce(
-      () => this._selectView(this._curView),
-      100
-    );
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._unsubNotifications = subscribeNotifications(
-      this.hass.connection,
-      (notifications) => {
-        this._persistentNotifications = notifications;
-      }
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (typeof this._unsubNotifications === "function") {
-      this._unsubNotifications();
-    }
-  }
-
-  _updateNotifications(states, persistent) {
-    if (!states) return persistent;
-
-    const configurator = computeNotifications(states);
-    return persistent.concat(configurator);
-  }
-
-  _routeChanged(route) {
-    const views = this.config && this.config.views;
-    if (route.path === "" && route.prefix === "/lovelace" && views) {
-      this.navigate(`/lovelace/${views[0].id || 0}`, true);
-    } else if (this.routeData.view) {
-      const view = this.routeData.view;
-      let index = 0;
-      for (let i = 0; i < views.length; i++) {
-        if (views[i].id === view || i === parseInt(view)) {
-          index = i;
-          break;
-        }
-      }
-      if (index !== this._curView) this._selectView(index);
-    }
-  }
-
-  _computeViewId(id, index) {
-    return id || index;
-  }
-
-  _computeTitle(config) {
-    return config.title || "Home Assistant";
-  }
-
-  _computeTabsHidden(views) {
-    return views.length < 2;
-  }
-
-  _computeTabTitle(title) {
-    return title || "Unnamed view";
-  }
-
-  _handleRefresh() {
-    this.fire("config-refresh");
-  }
-
-  _handleUnusedEntities() {
-    this._selectView("unused");
-  }
-
-  _deselect(ev) {
-    ev.target.selected = null;
-  }
-
-  _handleHelp() {
-    window.open("https://www.home-assistant.io/lovelace/", "_blank");
-  }
-
-  _editModeEnable() {
-    this._editMode = true;
-  }
-
-  _editModeDisable() {
-    this._editMode = false;
-  }
-
-  _editModeChanged() {
-    this._selectView(this._curView);
-  }
-
-  _handleViewSelected(ev) {
-    const index = ev.detail.selected;
-    if (index !== this._curView) {
-      const id = this.config.views[index].id || index;
-      this.navigate(`/lovelace/${id}`);
-    }
-    scrollToTarget(this, this.$.layout.header.scrollTarget);
-  }
-
-  _selectView(viewIndex) {
-    this._curView = viewIndex;
-
-    // Recreate a new element to clear the applied themes.
-    const root = this.$.view;
-    if (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    let view;
-    let background = this.config.background || "";
-
-    if (viewIndex === "unused") {
-      view = document.createElement("hui-unused-entities");
-      view.config = this.config;
-    } else {
-      const viewConfig = this.config.views[this._curView];
-      if (viewConfig.panel) {
-        view = createCardElement(viewConfig.cards[0]);
-        view.isPanel = true;
-        view.editMode = this._editMode;
-      } else {
-        view = document.createElement("hui-view");
-        view.config = viewConfig;
-        view.columns = this.columns;
-        view.editMode = this._editMode;
-      }
-      if (viewConfig.background) background = viewConfig.background;
-    }
-
-    this.$.view.style.background = background;
-
-    view.hass = this.hass;
-    root.appendChild(view);
-  }
-
-  _hassChanged(hass) {
-    if (!this.$.view.lastChild) return;
-    this.$.view.lastChild.hass = hass;
-  }
-
-  _configChanged(config) {
-    this._loadResources(config.resources || []);
-    // On config change, recreate the view from scratch.
-    this._selectView(this._curView);
-    this.$.view.classList.toggle("tabs-hidden", config.views.length < 2);
-  }
-
-  _columnsChanged(columns) {
-    if (!this.$.view.lastChild) return;
-    this.$.view.lastChild.columns = columns;
-  }
-
-  _loadResources(resources) {
-    resources.forEach((resource) => {
-      switch (resource.type) {
-        case "css":
-          if (resource.url in CSS_CACHE) break;
-          CSS_CACHE[resource.url] = loadCSS(resource.url);
-          break;
-
-        case "js":
-          if (resource.url in JS_CACHE) break;
-          JS_CACHE[resource.url] = loadJS(resource.url);
-          break;
-
-        case "module":
-          loadModule(resource.url);
-          break;
-
-        case "html":
-          import(/* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href.js").then(
-            ({ importHref }) => importHref(resource.url)
-          );
-          break;
-
-        default:
-          // eslint-disable-next-line
-          console.warn("Unknown resource type specified: ${resource.type}");
-      }
-    });
-  }
-}
-customElements.define("hui-root", HUIRoot);
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/app-route/app-route";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-menu-button/paper-menu-button";
+import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import scrollToTarget from "../../common/dom/scroll-to-target";
+
+import EventsMixin from "../../mixins/events-mixin";
+import NavigateMixin from "../../mixins/navigate-mixin";
+
+import "../../layouts/ha-app-layout";
+import "../../components/ha-start-voice-button";
+import "../../components/ha-icon";
+import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
+import { subscribeNotifications } from "../../data/ws-notifications";
+import "./components/notifications/hui-notification-drawer";
+import "./components/notifications/hui-notifications-button";
+import "./hui-unused-entities";
+import "./hui-view";
+import debounce from "../../common/util/debounce";
+
+import createCardElement from "./common/create-card-element";
+import computeNotifications from "./common/compute-notifications";
+
+// CSS and JS should only be imported once. Modules and HTML are safe.
+const CSS_CACHE = {};
+const JS_CACHE = {};
+
+class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+    <style include='ha-style'>
+      :host {
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+      }
+
+      ha-app-layout {
+        min-height: 100%;
+      }
+      paper-tabs {
+        margin-left: 12px;
+        --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
+        text-transform: uppercase;
+      }
+      app-toolbar a {
+        color: var(--text-primary-color, white);
+      }
+      #view {
+        min-height: calc(100vh - 112px);
+        /**
+         * Since we only set min-height, if child nodes need percentage
+         * heights they must use absolute positioning so we need relative
+         * positioning here.
+         *
+         * https://www.w3.org/TR/CSS2/visudet.html#the-height-property
+         */
+        position: relative;
+      }
+      #view.tabs-hidden {
+        min-height: calc(100vh - 64px);
+      }
+      paper-item {
+        cursor: pointer;
+      }
+    </style>
+    <app-route route="[[route]]" pattern="/:view" data="{{routeData}}"></app-route>
+    <hui-notification-drawer
+      hass="[[hass]]"
+      notifications="[[_notifications]]"
+      open="{{notificationsOpen}}"
+      narrow="[[narrow]]"
+    ></hui-notification-drawer>
+    <ha-app-layout id="layout">
+      <app-header slot="header" effects="waterfall" fixed condenses>
+        <template is='dom-if' if="[[!_editMode]]">
+          <app-toolbar>
+            <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+            <div main-title>[[_computeTitle(config)]]</div>
+            <hui-notifications-button
+              hass="[[hass]]"
+              notifications-open="{{notificationsOpen}}"
+              notifications="[[_notifications]]"
+            ></hui-notifications-button>
+            <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+            >
+              <paper-icon-button icon="hass:dots-vertical" slot="dropdown-trigger"></paper-icon-button>
+              <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
+                <paper-item on-click="_handleRefresh">Refresh</paper-item>
+                <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
+                <paper-item on-click="_editModeEnable">Configure UI</paper-item>
+                <paper-item on-click="_handleHelp">Help</paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </app-toolbar>
+        </template>
+        <template is='dom-if' if="[[_editMode]]">
+          <app-toolbar>
+            <paper-icon-button
+              icon='hass:close'
+              on-click='_editModeDisable'
+            ></paper-icon-button>
+            <div main-title>Edit UI</div>
+          </app-toolbar>
+        </template>
+
+        <div sticky hidden$="[[_computeTabsHidden(config.views)]]">
+          <paper-tabs scrollable selected="[[_curView]]" on-iron-activate="_handleViewSelected">
+            <template is="dom-repeat" items="[[config.views]]">
+              <paper-tab>
+                <template is="dom-if" if="[[item.icon]]">
+                  <ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
+                </template>
+                <template is="dom-if" if="[[!item.icon]]">
+                  [[_computeTabTitle(item.title)]]
+                </template>
+              </paper-tab>
+            </template>
+          </paper-tabs>
+        </div>
+      </app-header>
+
+      <div id='view' on-rebuild-view='_debouncedConfigChanged'></div>
+    </app-header-layout>
+    `;
+  }
+
+  static get properties() {
+    return {
+      narrow: Boolean,
+      showMenu: Boolean,
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+      columns: {
+        type: Number,
+        observer: "_columnsChanged",
+      },
+
+      _curView: {
+        type: Number,
+        value: 0,
+      },
+
+      route: {
+        type: Object,
+        observer: "_routeChanged",
+      },
+
+      notificationsOpen: {
+        type: Boolean,
+        value: false,
+      },
+
+      _persistentNotifications: {
+        type: Array,
+        value: [],
+      },
+
+      _notifications: {
+        type: Array,
+        computed: "_updateNotifications(hass.states, _persistentNotifications)",
+      },
+
+      _editMode: {
+        type: Boolean,
+        value: false,
+        observer: "_editModeChanged",
+      },
+
+      routeData: Object,
+    };
+  }
+
+  constructor() {
+    super();
+    this._debouncedConfigChanged = debounce(
+      () => this._selectView(this._curView),
+      100
+    );
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._unsubNotifications = subscribeNotifications(
+      this.hass.connection,
+      (notifications) => {
+        this._persistentNotifications = notifications;
+      }
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (typeof this._unsubNotifications === "function") {
+      this._unsubNotifications();
+    }
+  }
+
+  _updateNotifications(states, persistent) {
+    if (!states) return persistent;
+
+    const configurator = computeNotifications(states);
+    return persistent.concat(configurator);
+  }
+
+  _routeChanged(route) {
+    const views = this.config && this.config.views;
+    if (route.path === "" && route.prefix === "/lovelace" && views) {
+      this.navigate(`/lovelace/${views[0].id || 0}`, true);
+    } else if (this.routeData.view) {
+      const view = this.routeData.view;
+      let index = 0;
+      for (let i = 0; i < views.length; i++) {
+        if (views[i].id === view || i === parseInt(view)) {
+          index = i;
+          break;
+        }
+      }
+      if (index !== this._curView) this._selectView(index);
+    }
+  }
+
+  _computeViewId(id, index) {
+    return id || index;
+  }
+
+  _computeTitle(config) {
+    return config.title || "Home Assistant";
+  }
+
+  _computeTabsHidden(views) {
+    return views.length < 2;
+  }
+
+  _computeTabTitle(title) {
+    return title || "Unnamed view";
+  }
+
+  _handleRefresh() {
+    this.fire("config-refresh");
+  }
+
+  _handleUnusedEntities() {
+    this._selectView("unused");
+  }
+
+  _deselect(ev) {
+    ev.target.selected = null;
+  }
+
+  _handleHelp() {
+    window.open("https://www.home-assistant.io/lovelace/", "_blank");
+  }
+
+  _editModeEnable() {
+    this._editMode = true;
+  }
+
+  _editModeDisable() {
+    this._editMode = false;
+  }
+
+  _editModeChanged() {
+    this._selectView(this._curView);
+  }
+
+  _handleViewSelected(ev) {
+    const index = ev.detail.selected;
+    if (index !== this._curView) {
+      const id = this.config.views[index].id || index;
+      this.navigate(`/lovelace/${id}`);
+    }
+    scrollToTarget(this, this.$.layout.header.scrollTarget);
+  }
+
+  _selectView(viewIndex) {
+    this._curView = viewIndex;
+
+    // Recreate a new element to clear the applied themes.
+    const root = this.$.view;
+    if (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    let view;
+    let background = this.config.background || "";
+
+    if (viewIndex === "unused") {
+      view = document.createElement("hui-unused-entities");
+      view.config = this.config;
+    } else {
+      const viewConfig = this.config.views[this._curView];
+      if (viewConfig.panel) {
+        view = createCardElement(viewConfig.cards[0]);
+        view.isPanel = true;
+        view.editMode = this._editMode;
+      } else {
+        view = document.createElement("hui-view");
+        view.config = viewConfig;
+        view.columns = this.columns;
+        view.editMode = this._editMode;
+      }
+      if (viewConfig.background) background = viewConfig.background;
+    }
+
+    this.$.view.style.background = background;
+
+    view.hass = this.hass;
+    root.appendChild(view);
+  }
+
+  _hassChanged(hass) {
+    if (!this.$.view.lastChild) return;
+    this.$.view.lastChild.hass = hass;
+  }
+
+  _configChanged(config) {
+    this._loadResources(config.resources || []);
+    // On config change, recreate the view from scratch.
+    this._selectView(this._curView);
+    this.$.view.classList.toggle("tabs-hidden", config.views.length < 2);
+  }
+
+  _columnsChanged(columns) {
+    if (!this.$.view.lastChild) return;
+    this.$.view.lastChild.columns = columns;
+  }
+
+  _loadResources(resources) {
+    resources.forEach((resource) => {
+      switch (resource.type) {
+        case "css":
+          if (resource.url in CSS_CACHE) break;
+          CSS_CACHE[resource.url] = loadCSS(resource.url);
+          break;
+
+        case "js":
+          if (resource.url in JS_CACHE) break;
+          JS_CACHE[resource.url] = loadJS(resource.url);
+          break;
+
+        case "module":
+          loadModule(resource.url);
+          break;
+
+        case "html":
+          import(/* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href").then(
+            ({ importHref }) => importHref(resource.url)
+          );
+          break;
+
+        default:
+          // eslint-disable-next-line
+          console.warn("Unknown resource type specified: ${resource.type}");
+      }
+    });
+  }
+}
+customElements.define("hui-root", HUIRoot);
diff --git a/src/panels/lovelace/hui-unused-entities.js b/src/panels/lovelace/hui-unused-entities.js
index 9b9e318954..7b066f9269 100644
--- a/src/panels/lovelace/hui-unused-entities.js
+++ b/src/panels/lovelace/hui-unused-entities.js
@@ -1,61 +1,61 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import computeUnusedEntities from "./common/compute-unused-entities.js";
-import createCardElement from "./common/create-card-element.js";
-
-import "./cards/hui-entities-card.ts";
-
-class HuiUnusedEntities extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        #root {
-          max-width: 600px;
-          margin: 0 auto;
-          padding: 8px 0;
-        }
-      </style>
-      <div id="root"></div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: {
-        type: Object,
-        observer: "_configChanged",
-      },
-    };
-  }
-
-  _configChanged(config) {
-    const root = this.$.root;
-    if (root.lastChild) root.removeChild(root.lastChild);
-
-    const entities = computeUnusedEntities(this.hass, config).map((entity) => ({
-      entity,
-      secondary_info: "entity-id",
-    }));
-    const cardConfig = {
-      type: "entities",
-      title: "Unused entities",
-      entities,
-      show_header_toggle: false,
-    };
-    const element = createCardElement(cardConfig);
-    element.hass = this.hass;
-    root.appendChild(element);
-  }
-
-  _hassChanged(hass) {
-    const root = this.$.root;
-    if (!root.lastChild) return;
-    root.lastChild.hass = hass;
-  }
-}
-customElements.define("hui-unused-entities", HuiUnusedEntities);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import computeUnusedEntities from "./common/compute-unused-entities";
+import createCardElement from "./common/create-card-element";
+
+import "./cards/hui-entities-card.ts";
+
+class HuiUnusedEntities extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+          max-width: 600px;
+          margin: 0 auto;
+          padding: 8px 0;
+        }
+      </style>
+      <div id="root"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+    };
+  }
+
+  _configChanged(config) {
+    const root = this.$.root;
+    if (root.lastChild) root.removeChild(root.lastChild);
+
+    const entities = computeUnusedEntities(this.hass, config).map((entity) => ({
+      entity,
+      secondary_info: "entity-id",
+    }));
+    const cardConfig = {
+      type: "entities",
+      title: "Unused entities",
+      entities,
+      show_header_toggle: false,
+    };
+    const element = createCardElement(cardConfig);
+    element.hass = this.hass;
+    root.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    const root = this.$.root;
+    if (!root.lastChild) return;
+    root.lastChild.hass = hass;
+  }
+}
+customElements.define("hui-unused-entities", HuiUnusedEntities);
diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js
index bc33439018..91931c71ed 100644
--- a/src/panels/lovelace/hui-view.js
+++ b/src/panels/lovelace/hui-view.js
@@ -1,218 +1,218 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../../components/entity/ha-state-label-badge.js";
-import "./components/hui-card-options.ts";
-
-import applyThemesOnElement from "../../common/dom/apply_themes_on_element.js";
-
-import createCardElement from "./common/create-card-element";
-import computeCardSize from "./common/compute-card-size";
-
-class HUIView extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-      :host {
-        display: block;
-        padding: 4px 4px 0;
-        transform: translateZ(0);
-        position: relative;
-      }
-
-      #badges {
-        margin: 8px 16px;
-        font-size: 85%;
-        text-align: center;
-      }
-
-      #columns {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-      }
-
-      .column {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 500px;
-        overflow-x: hidden;
-      }
-
-      .column > * {
-        display: block;
-        margin: 4px 4px 8px;
-      }
-
-      @media (max-width: 500px) {
-        :host {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        .column > * {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-
-      @media (max-width: 599px) {
-        .column {
-          max-width: 600px;
-        }
-      }
-      </style>
-      <div id="badges"></div>
-      <div id="columns"></div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: Object,
-      columns: Number,
-      editMode: Boolean,
-    };
-  }
-
-  static get observers() {
-    return [
-      // Put all properties in 1 observer so we only call configChanged once
-      "_createBadges(config)",
-      "_createCards(config, columns, editMode)",
-    ];
-  }
-
-  constructor() {
-    super();
-    this._cards = [];
-    this._badges = [];
-  }
-
-  _createBadges(config) {
-    const root = this.$.badges;
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    if (!config || !config.badges || !Array.isArray(config.badges)) {
-      root.style.display = "none";
-      this._badges = [];
-      return;
-    }
-
-    const elements = [];
-    for (const entityId of config.badges) {
-      if (!(entityId in this.hass.states)) continue;
-
-      const element = document.createElement("ha-state-label-badge");
-      element.setProperties({
-        hass: this.hass,
-        state: this.hass.states[entityId],
-      });
-      elements.push({ element, entityId });
-      root.appendChild(element);
-    }
-    this._badges = elements;
-    root.style.display = elements.length > 0 ? "block" : "none";
-  }
-
-  _createCards(config) {
-    const root = this.$.columns;
-
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      this._cards = [];
-      return;
-    }
-
-    const elements = [];
-    const elementsToAppend = [];
-    for (const cardConfig of config.cards) {
-      const element = createCardElement(cardConfig);
-      element.hass = this.hass;
-      elements.push(element);
-
-      if (!this.editMode) {
-        elementsToAppend.push(element);
-        continue;
-      }
-
-      const wrapper = document.createElement("hui-card-options");
-      wrapper.hass = this.hass;
-      wrapper.cardId = cardConfig.id;
-      wrapper.editMode = this.editMode;
-      wrapper.appendChild(element);
-      elementsToAppend.push(wrapper);
-    }
-
-    let columns = [];
-    const columnEntityCount = [];
-    for (let i = 0; i < this.columns; i++) {
-      columns.push([]);
-      columnEntityCount.push(0);
-    }
-
-    // Find column with < 5 entities, else column with lowest count
-    function getColumnIndex(size) {
-      let minIndex = 0;
-      for (let i = 0; i < columnEntityCount.length; i++) {
-        if (columnEntityCount[i] < 5) {
-          minIndex = i;
-          break;
-        }
-        if (columnEntityCount[i] < columnEntityCount[minIndex]) {
-          minIndex = i;
-        }
-      }
-
-      columnEntityCount[minIndex] += size;
-
-      return minIndex;
-    }
-
-    elements.forEach((el, index) => {
-      const cardSize = computeCardSize(el);
-      // Element to append might be the wrapped card when we're editing.
-      columns[getColumnIndex(cardSize)].push(elementsToAppend[index]);
-    });
-
-    // Remove empty columns
-    columns = columns.filter((val) => val.length > 0);
-
-    columns.forEach((column) => {
-      const columnEl = document.createElement("div");
-      columnEl.classList.add("column");
-      column.forEach((el) => columnEl.appendChild(el));
-      root.appendChild(columnEl);
-    });
-
-    this._cards = elements;
-
-    if ("theme" in config) {
-      applyThemesOnElement(root, this.hass.themes, config.theme);
-    }
-  }
-
-  _hassChanged(hass) {
-    this._badges.forEach((badge) => {
-      const { element, entityId } = badge;
-      element.setProperties({
-        hass,
-        state: hass.states[entityId],
-      });
-    });
-    this._cards.forEach((element) => {
-      element.hass = hass;
-    });
-  }
-}
-
-customElements.define("hui-view", HUIView);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../components/entity/ha-state-label-badge";
+import "./components/hui-card-options.ts";
+
+import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
+
+import createCardElement from "./common/create-card-element";
+import computeCardSize from "./common/compute-card-size";
+
+class HUIView extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+      :host {
+        display: block;
+        padding: 4px 4px 0;
+        transform: translateZ(0);
+        position: relative;
+      }
+
+      #badges {
+        margin: 8px 16px;
+        font-size: 85%;
+        text-align: center;
+      }
+
+      #columns {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+      }
+
+      .column {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 500px;
+        overflow-x: hidden;
+      }
+
+      .column > * {
+        display: block;
+        margin: 4px 4px 8px;
+      }
+
+      @media (max-width: 500px) {
+        :host {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .column > * {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+
+      @media (max-width: 599px) {
+        .column {
+          max-width: 600px;
+        }
+      }
+      </style>
+      <div id="badges"></div>
+      <div id="columns"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: Object,
+      columns: Number,
+      editMode: Boolean,
+    };
+  }
+
+  static get observers() {
+    return [
+      // Put all properties in 1 observer so we only call configChanged once
+      "_createBadges(config)",
+      "_createCards(config, columns, editMode)",
+    ];
+  }
+
+  constructor() {
+    super();
+    this._cards = [];
+    this._badges = [];
+  }
+
+  _createBadges(config) {
+    const root = this.$.badges;
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.badges || !Array.isArray(config.badges)) {
+      root.style.display = "none";
+      this._badges = [];
+      return;
+    }
+
+    const elements = [];
+    for (const entityId of config.badges) {
+      if (!(entityId in this.hass.states)) continue;
+
+      const element = document.createElement("ha-state-label-badge");
+      element.setProperties({
+        hass: this.hass,
+        state: this.hass.states[entityId],
+      });
+      elements.push({ element, entityId });
+      root.appendChild(element);
+    }
+    this._badges = elements;
+    root.style.display = elements.length > 0 ? "block" : "none";
+  }
+
+  _createCards(config) {
+    const root = this.$.columns;
+
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      this._cards = [];
+      return;
+    }
+
+    const elements = [];
+    const elementsToAppend = [];
+    for (const cardConfig of config.cards) {
+      const element = createCardElement(cardConfig);
+      element.hass = this.hass;
+      elements.push(element);
+
+      if (!this.editMode) {
+        elementsToAppend.push(element);
+        continue;
+      }
+
+      const wrapper = document.createElement("hui-card-options");
+      wrapper.hass = this.hass;
+      wrapper.cardId = cardConfig.id;
+      wrapper.editMode = this.editMode;
+      wrapper.appendChild(element);
+      elementsToAppend.push(wrapper);
+    }
+
+    let columns = [];
+    const columnEntityCount = [];
+    for (let i = 0; i < this.columns; i++) {
+      columns.push([]);
+      columnEntityCount.push(0);
+    }
+
+    // Find column with < 5 entities, else column with lowest count
+    function getColumnIndex(size) {
+      let minIndex = 0;
+      for (let i = 0; i < columnEntityCount.length; i++) {
+        if (columnEntityCount[i] < 5) {
+          minIndex = i;
+          break;
+        }
+        if (columnEntityCount[i] < columnEntityCount[minIndex]) {
+          minIndex = i;
+        }
+      }
+
+      columnEntityCount[minIndex] += size;
+
+      return minIndex;
+    }
+
+    elements.forEach((el, index) => {
+      const cardSize = computeCardSize(el);
+      // Element to append might be the wrapped card when we're editing.
+      columns[getColumnIndex(cardSize)].push(elementsToAppend[index]);
+    });
+
+    // Remove empty columns
+    columns = columns.filter((val) => val.length > 0);
+
+    columns.forEach((column) => {
+      const columnEl = document.createElement("div");
+      columnEl.classList.add("column");
+      column.forEach((el) => columnEl.appendChild(el));
+      root.appendChild(columnEl);
+    });
+
+    this._cards = elements;
+
+    if ("theme" in config) {
+      applyThemesOnElement(root, this.hass.themes, config.theme);
+    }
+  }
+
+  _hassChanged(hass) {
+    this._badges.forEach((badge) => {
+      const { element, entityId } = badge;
+      element.setProperties({
+        hass,
+        state: hass.states[entityId],
+      });
+    });
+    this._cards.forEach((element) => {
+      element.hass = hass;
+    });
+  }
+}
+
+customElements.define("hui-view", HUIView);
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.ts b/src/panels/lovelace/special-rows/hui-call-service-row.ts
index 1a06ad90ab..44c7f2354c 100644
--- a/src/panels/lovelace/special-rows/hui-call-service-row.ts
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.ts
@@ -1,11 +1,11 @@
 import { html, LitElement } from "@polymer/lit-element";
-import "@polymer/paper-button/paper-button.js";
+import "@polymer/paper-button/paper-button";
 
-import "../../../components/ha-icon.js";
+import "../../../components/ha-icon";
 
-import callService from "../common/call-service.js";
-import { EntityRow, CallServiceConfig } from "../entity-rows/types.js";
-import { HomeAssistant } from "../../../types.js";
+import callService from "../common/call-service";
+import { EntityRow, CallServiceConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
 import { TemplateResult } from "lit-html";
 
 class HuiCallServiceRow extends LitElement implements EntityRow {
diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts
index f590c4d96d..9033755203 100644
--- a/src/panels/lovelace/special-rows/hui-section-row.ts
+++ b/src/panels/lovelace/special-rows/hui-section-row.ts
@@ -2,7 +2,7 @@ import { html, LitElement } from "@polymer/lit-element";
 import { EntityRow, SectionConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
 
-import "../../../components/ha-icon.js";
+import "../../../components/ha-icon";
 import { TemplateResult } from "lit-html";
 
 class HuiSectionRow extends LitElement implements EntityRow {
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts
index e49690ece5..a9ff56c400 100644
--- a/src/panels/lovelace/special-rows/hui-weblink-row.ts
+++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts
@@ -2,7 +2,7 @@ import { html, LitElement } from "@polymer/lit-element";
 import { EntityRow, WeblinkConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
 
-import "../../../components/ha-icon.js";
+import "../../../components/ha-icon";
 
 import { TemplateResult } from "lit-html";
 
diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js
index 6e76b9c629..68401578fc 100644
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/mailbox/ha-panel-mailbox.js b/src/panels/mailbox/ha-panel-mailbox.js
index c3909ee192..deb955d892 100644
--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/src/panels/mailbox/ha-panel-mailbox.js
@@ -1,22 +1,22 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-input/paper-textarea.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-tabs/paper-tab.js";
-import "@polymer/paper-tabs/paper-tabs.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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-button/paper-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";
+import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../components/ha-menu-button.js";
-import "../../resources/ha-style.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
 
-import formatDateTime from "../../common/datetime/format_date_time.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
-import EventsMixin from "../../mixins/events-mixin.js";
+import formatDateTime from "../../common/datetime/format_date_time";
+import LocalizeMixin from "../../mixins/localize-mixin";
+import EventsMixin from "../../mixins/events-mixin";
 
 let registeredDialog = false;
 
@@ -161,7 +161,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
       this.fire("register-dialog", {
         dialogShowEvent: "show-audio-message-dialog",
         dialogTag: "ha-dialog-show-audio-message",
-        dialogImport: () => import("./ha-dialog-show-audio-message.js"),
+        dialogImport: () => import("./ha-dialog-show-audio-message"),
       });
     }
     this.hassChanged = this.hassChanged.bind(this);
diff --git a/src/panels/map/ha-entity-marker.js b/src/panels/map/ha-entity-marker.js
index 9101ecd2da..a575f22418 100644
--- a/src/panels/map/ha-entity-marker.js
+++ b/src/panels/map/ha-entity-marker.js
@@ -1,8 +1,8 @@
-import "@polymer/iron-image/iron-image.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-image/iron-image";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index 09410d08ca..bb69bf4416 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@@ -1,17 +1,17 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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 Leaflet from "leaflet";
 
-import "../../components/ha-menu-button.js";
-import "../../components/ha-icon.js";
+import "../../components/ha-menu-button";
+import "../../components/ha-icon";
 
-import "./ha-entity-marker.js";
+import "./ha-entity-marker";
 
-import computeStateDomain from "../../common/entity/compute_state_domain.js";
-import computeStateName from "../../common/entity/compute_state_name.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
-import setupLeafletMap from "../../common/dom/setup-leaflet-map.js";
+import computeStateDomain from "../../common/entity/compute_state_domain";
+import computeStateName from "../../common/entity/compute_state_name";
+import LocalizeMixin from "../../mixins/localize-mixin";
+import setupLeafletMap from "../../common/dom/setup-leaflet-map";
 
 Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
 
diff --git a/src/panels/profile/ha-change-password-card.js b/src/panels/profile/ha-change-password-card.js
index cb4eac115d..8511669f6f 100644
--- a/src/panels/profile/ha-change-password-card.js
+++ b/src/panels/profile/ha-change-password-card.js
@@ -1,13 +1,13 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-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 LocalizeMixin from "../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
-import "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js
index 076a888251..a6843d5e6a 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.js
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.js
@@ -1,14 +1,14 @@
-import "@polymer/paper-button/paper-button.js";
+import "@polymer/paper-button/paper-button";
 
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
-import formatDateTime from "../../common/datetime/format_date_time.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+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 "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
-import "./ha-settings-row.js";
+import "./ha-settings-row";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index 08ea6c9581..c98b02488c 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -1,16 +1,16 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js";
-import "@polymer/paper-dialog/paper-dialog.js";
-import "@polymer/paper-spinner/paper-spinner.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-spinner/paper-spinner";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../components/ha-form.js";
-import "../../components/ha-markdown.js";
-import "../../resources/ha-style.js";
+import "../../components/ha-form";
+import "../../components/ha-markdown";
+import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 let instance = 0;
 
diff --git a/src/panels/profile/ha-mfa-modules-card.js b/src/panels/profile/ha-mfa-modules-card.js
index de8a66f455..9bcd647b04 100644
--- a/src/panels/profile/ha-mfa-modules-card.js
+++ b/src/panels/profile/ha-mfa-modules-card.js
@@ -1,14 +1,14 @@
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-button/paper-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 "../../resources/ha-style.js";
+import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 let registeredDialog = false;
 
@@ -89,7 +89,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
       this.fire("register-dialog", {
         dialogShowEvent: "show-mfa-module-setup-flow",
         dialogTag: "ha-mfa-module-setup-flow",
-        dialogImport: () => import("./ha-mfa-module-setup-flow.js"),
+        dialogImport: () => import("./ha-mfa-module-setup-flow"),
       });
     }
   }
diff --git a/src/panels/profile/ha-panel-profile.js b/src/panels/profile/ha-panel-profile.js
index 524310c61b..b642aa2764 100644
--- a/src/panels/profile/ha-panel-profile.js
+++ b/src/panels/profile/ha-panel-profile.js
@@ -1,27 +1,27 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-button/paper-button.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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 "@polymer/paper-button/paper-button";
+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-menu-button.js";
-import "../../resources/ha-style.js";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
-import "./ha-change-password-card.js";
-import "./ha-mfa-modules-card.js";
-import "./ha-refresh-tokens-card.js";
-import "./ha-long-lived-access-tokens-card.js";
+import "./ha-change-password-card";
+import "./ha-mfa-modules-card";
+import "./ha-refresh-tokens-card";
+import "./ha-long-lived-access-tokens-card";
 
-import "./ha-pick-language-row.js";
-import "./ha-pick-theme-row.js";
-import "./ha-push-notifications-row.js";
+import "./ha-pick-language-row";
+import "./ha-pick-theme-row";
+import "./ha-push-notifications-row";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/profile/ha-pick-language-row.js b/src/panels/profile/ha-pick-language-row.js
index 4bf9cd568d..1b1a1e89de 100644
--- a/src/panels/profile/ha-pick-language-row.js
+++ b/src/panels/profile/ha-pick-language-row.js
@@ -1,14 +1,14 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
-import "./ha-settings-row.js";
+import "./ha-settings-row";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/profile/ha-pick-theme-row.js b/src/panels/profile/ha-pick-theme-row.js
index a2dba3ff31..4d3dc557c6 100644
--- a/src/panels/profile/ha-pick-theme-row.js
+++ b/src/panels/profile/ha-pick-theme-row.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import EventsMixin from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/profile/ha-push-notifications-row.js b/src/panels/profile/ha-push-notifications-row.js
index 37f91bc817..83c31f01ee 100644
--- a/src/panels/profile/ha-push-notifications-row.js
+++ b/src/panels/profile/ha-push-notifications-row.js
@@ -1,15 +1,15 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/iron-label/iron-label.js";
-import "@polymer/paper-card/paper-card.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
 
-import isComponentLoaded from "../../common/config/is_component_loaded.js";
-import { pushSupported } from "../../components/ha-push-notifications-toggle.js";
+import isComponentLoaded from "../../common/config/is_component_loaded";
+import { pushSupported } from "../../components/ha-push-notifications-toggle";
 
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
-import "./ha-settings-row.js";
+import "./ha-settings-row";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/panels/profile/ha-refresh-tokens-card.js b/src/panels/profile/ha-refresh-tokens-card.js
index e204e42e2b..1de26dfb36 100644
--- a/src/panels/profile/ha-refresh-tokens-card.js
+++ b/src/panels/profile/ha-refresh-tokens-card.js
@@ -1,13 +1,13 @@
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-tooltip/paper-tooltip.js";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-tooltip/paper-tooltip";
 
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import EventsMixin from "../../mixins/events-mixin.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
-import formatDateTime from "../../common/datetime/format_date_time.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+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 "./ha-settings-row.js";
+import "./ha-settings-row";
 
 /*
  * @appliesMixin EventsMixin
diff --git a/src/panels/profile/ha-settings-row.js b/src/panels/profile/ha-settings-row.js
index bc7f5f0f2f..7bba46651c 100644
--- a/src/panels/profile/ha-settings-row.js
+++ b/src/panels/profile/ha-settings-row.js
@@ -1,5 +1,5 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 class HaSettingsRow extends PolymerElement {
   static get template() {
diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js
index 84fb4471f5..5c4602a4c5 100644
--- a/src/panels/shopping-list/ha-panel-shopping-list.js
+++ b/src/panels/shopping-list/ha-panel-shopping-list.js
@@ -1,21 +1,21 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout.js";
-import "@polymer/app-layout/app-header/app-header.js";
-import "@polymer/app-layout/app-toolbar/app-toolbar.js";
-import "@polymer/paper-card/paper-card.js";
-import "@polymer/paper-checkbox/paper-checkbox.js";
-import "@polymer/paper-icon-button/paper-icon-button.js";
-import "@polymer/paper-input/paper-input.js";
-import "@polymer/paper-item/paper-icon-item.js";
-import "@polymer/paper-item/paper-item-body.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import "@polymer/paper-menu-button/paper-menu-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+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";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-menu-button/paper-menu-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../../components/ha-menu-button.js";
-import "../../components/ha-start-voice-button.js";
-import LocalizeMixin from "../../mixins/localize-mixin.js";
+import "../../components/ha-menu-button";
+import "../../components/ha-start-voice-button";
+import LocalizeMixin from "../../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/resources/ha-style.js b/src/resources/ha-style.js
index cfd75a93ad..57c1e51a8d 100644
--- a/src/resources/ha-style.js
+++ b/src/resources/ha-style.js
@@ -1,5 +1,5 @@
-import "@polymer/paper-styles/paper-styles.js";
-import "@polymer/polymer/polymer-legacy.js";
+import "@polymer/paper-styles/paper-styles";
+import "@polymer/polymer/polymer-legacy";
 
 const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
diff --git a/src/resources/html-import/import-href.js b/src/resources/html-import/import-href.js
index f74708c2a0..5daf931bf8 100644
--- a/src/resources/html-import/import-href.js
+++ b/src/resources/html-import/import-href.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import "./polyfill.js";
+import "./polyfill";
 /**
 @license
 Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
diff --git a/src/state-summary/state-card-climate.js b/src/state-summary/state-card-climate.js
index f1bb08e70b..a3df097492 100644
--- a/src/state-summary/state-card-climate.js
+++ b/src/state-summary/state-card-climate.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import "../components/ha-climate-state.js";
+import "../components/entity/state-info";
+import "../components/ha-climate-state";
 
 class StateCardClimate extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 5f82618794..e9b49018a0 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
+import "../components/entity/state-info";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index 5068383a45..7a6c12ff66 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -1,24 +1,24 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "./state-card-climate.js";
-import "./state-card-configurator.js";
-import "./state-card-cover.js";
-import "./state-card-display.js";
-import "./state-card-input_number.js";
-import "./state-card-input_select.js";
-import "./state-card-input_text.js";
-import "./state-card-lock.js";
-import "./state-card-media_player.js";
-import "./state-card-scene.js";
-import "./state-card-script.js";
-import "./state-card-timer.js";
-import "./state-card-toggle.js";
-import "./state-card-vacuum.js";
-import "./state-card-water_heater.js";
-import "./state-card-weblink.js";
+import "./state-card-climate";
+import "./state-card-configurator";
+import "./state-card-cover";
+import "./state-card-display";
+import "./state-card-input_number";
+import "./state-card-input_select";
+import "./state-card-input_text";
+import "./state-card-lock";
+import "./state-card-media_player";
+import "./state-card-scene";
+import "./state-card-script";
+import "./state-card-timer";
+import "./state-card-toggle";
+import "./state-card-vacuum";
+import "./state-card-water_heater";
+import "./state-card-weblink";
 
-import stateCardType from "../common/entity/state_card_type.js";
-import dynamicContentUpdater from "../common/dom/dynamic_content_updater.js";
+import stateCardType from "../common/entity/state_card_type";
+import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
 
 class StateCardContent extends PolymerElement {
   static get properties() {
diff --git a/src/state-summary/state-card-cover.js b/src/state-summary/state-card-cover.js
index 8072af0c96..94c275fbb5 100644
--- a/src/state-summary/state-card-cover.js
+++ b/src/state-summary/state-card-cover.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import "../components/ha-cover-controls.js";
-import "../components/ha-cover-tilt-controls.js";
-import CoverEntity from "../util/cover-model.js";
+import "../components/entity/state-info";
+import "../components/ha-cover-controls";
+import "../components/ha-cover-tilt-controls";
+import CoverEntity from "../util/cover-model";
 
 class StateCardCover extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
index f2d6963271..0438fa425f 100644
--- a/src/state-summary/state-card-display.js
+++ b/src/state-summary/state-card-display.js
@@ -1,12 +1,12 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import "../components/entity/state-info";
+import LocalizeMixin from "../mixins/localize-mixin";
 
-import computeStateDisplay from "../common/entity/compute_state_display.js";
-import attributeClassNames from "../common/entity/attribute_class_names.js";
+import computeStateDisplay from "../common/entity/compute_state_display";
+import attributeClassNames from "../common/entity/attribute_class_names";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js
index 8ab377b0aa..8b13308ab9 100644
--- a/src/state-summary/state-card-input_number.js
+++ b/src/state-summary/state-card-input_number.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
-import "@polymer/paper-input/paper-input.js";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
+import "@polymer/paper-input/paper-input";
+import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
+import "../components/entity/state-info";
 import "../components/ha-slider";
 
 class StateCardInputNumber extends mixinBehaviors(
diff --git a/src/state-summary/state-card-input_select.js b/src/state-summary/state-card-input_select.js
index 34b5c6b655..4d881a8014 100644
--- a/src/state-summary/state-card-input_select.js
+++ b/src/state-summary/state-card-input_select.js
@@ -1,12 +1,12 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/paper-item/paper-item.js";
-import "@polymer/paper-listbox/paper-listbox.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-badge.js";
+import "../components/entity/state-badge";
 
-import computeStateName from "../common/entity/compute_state_name.js";
+import computeStateName from "../common/entity/compute_state_name";
 
 class StateCardInputSelect extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-input_text.js b/src/state-summary/state-card-input_text.js
index 55a94c88dc..6f0f2a4158 100644
--- a/src/state-summary/state-card-input_text.js
+++ b/src/state-summary/state-card-input_text.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-input/paper-input.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-input/paper-input";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
+import "../components/entity/state-info";
 
 class StateCardInputText extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-lock.js b/src/state-summary/state-card-lock.js
index bc18e29e47..cb99b3fe33 100644
--- a/src/state-summary/state-card-lock.js
+++ b/src/state-summary/state-card-lock.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
+import "../components/entity/state-info";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index c18dd2dcf3..593c71a800 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -1,10 +1,10 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
-import HassMediaPlayerEntity from "../util/hass-media-player-model.js";
+import "../components/entity/state-info";
+import LocalizeMixin from "../mixins/localize-mixin";
+import HassMediaPlayerEntity from "../util/hass-media-player-model";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index c83668e83c..335ca5554f 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -1,10 +1,10 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import "../components/entity/state-info";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
index 21982456f4..38155b3057 100644
--- a/src/state-summary/state-card-script.js
+++ b/src/state-summary/state-card-script.js
@@ -1,12 +1,12 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import "@polymer/paper-button/paper-button.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-button/paper-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/ha-entity-toggle.js";
-import "../components/entity/state-info.js";
+import "../components/entity/ha-entity-toggle";
+import "../components/entity/state-info";
 
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
diff --git a/src/state-summary/state-card-timer.js b/src/state-summary/state-card-timer.js
index e7f53b8a27..b108a200cd 100644
--- a/src/state-summary/state-card-timer.js
+++ b/src/state-summary/state-card-timer.js
@@ -1,11 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
+import "../components/entity/state-info";
 
-import timerTimeRemaining from "../common/entity/timer_time_remaining.js";
-import secondsToDuration from "../common/datetime/seconds_to_duration.js";
+import timerTimeRemaining from "../common/entity/timer_time_remaining";
+import secondsToDuration from "../common/datetime/seconds_to_duration";
 
 class StateCardTimer extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-toggle.js b/src/state-summary/state-card-toggle.js
index e9c25d214f..ae96ab28ed 100644
--- a/src/state-summary/state-card-toggle.js
+++ b/src/state-summary/state-card-toggle.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/ha-entity-toggle.js";
-import "../components/entity/state-info.js";
+import "../components/entity/ha-entity-toggle";
+import "../components/entity/state-info";
 
 class StateCardToggle extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-vacuum.js b/src/state-summary/state-card-vacuum.js
index ad48c336aa..d976fd5b1c 100644
--- a/src/state-summary/state-card-vacuum.js
+++ b/src/state-summary/state-card-vacuum.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import "../components/ha-vacuum-state.js";
+import "../components/entity/state-info";
+import "../components/ha-vacuum-state";
 
 class StateCardVacuum extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-water_heater.js b/src/state-summary/state-card-water_heater.js
index b9cc41cbb1..c04214edbc 100644
--- a/src/state-summary/state-card-water_heater.js
+++ b/src/state-summary/state-card-water_heater.js
@@ -1,9 +1,9 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-info.js";
-import "../components/ha-water_heater-state.js";
+import "../components/entity/state-info";
+import "../components/ha-water_heater-state";
 
 class StateCardWaterHeater extends PolymerElement {
   static get template() {
diff --git a/src/state-summary/state-card-weblink.js b/src/state-summary/state-card-weblink.js
index f4f12c4206..467f5318b2 100644
--- a/src/state-summary/state-card-weblink.js
+++ b/src/state-summary/state-card-weblink.js
@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import "../components/entity/state-badge.js";
+import "../components/entity/state-badge";
 
-import computeStateName from "../common/entity/compute_state_name.js";
+import computeStateName from "../common/entity/compute_state_name";
 
 class StateCardWeblink extends PolymerElement {
   static get template() {
diff --git a/src/util/app-localstorage-document.js b/src/util/app-localstorage-document.js
index 3f1789dc89..a966f8ee5f 100644
--- a/src/util/app-localstorage-document.js
+++ b/src/util/app-localstorage-document.js
@@ -9,9 +9,9 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
-import { AppStorageBehavior } from "@polymer/app-storage/app-storage-behavior.js";
-import { Polymer } from "@polymer/polymer/lib/legacy/polymer-fn.js";
-import "@polymer/polymer/polymer-legacy.js";
+import { AppStorageBehavior } from "@polymer/app-storage/app-storage-behavior";
+import { Polymer } from "@polymer/polymer/lib/legacy/polymer-fn";
+import "@polymer/polymer/polymer-legacy";
 
 /**
  * app-localstorage-document synchronizes storage between an in-memory
diff --git a/src/util/custom-panel/load-custom-panel.js b/src/util/custom-panel/load-custom-panel.js
index 55fffa39c8..54614810aa 100644
--- a/src/util/custom-panel/load-custom-panel.js
+++ b/src/util/custom-panel/load-custom-panel.js
@@ -1,4 +1,4 @@
-import { loadJS, loadModule } from "../../common/dom/load_resource.js";
+import { loadJS, loadModule } from "../../common/dom/load_resource";
 
 // Make sure we only import every JS-based panel once (HTML import has this built-in)
 const JS_CACHE = {};
@@ -6,12 +6,12 @@ const JS_CACHE = {};
 export default function loadCustomPanel(panelConfig) {
   if (panelConfig.html_url) {
     const toLoad = [
-      import(/* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href.js"),
+      import(/* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href"),
     ];
 
     if (!panelConfig.embed_iframe) {
       toLoad.push(
-        import(/* webpackChunkName: "legacy-support" */ "../legacy-support.js")
+        import(/* webpackChunkName: "legacy-support" */ "../legacy-support")
       );
     }
 
diff --git a/src/util/ha-url-sync.js b/src/util/ha-url-sync.js
index feaa661eaf..471c4ff558 100644
--- a/src/util/ha-url-sync.js
+++ b/src/util/ha-url-sync.js
@@ -1,6 +1,6 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import EventsMixin from "../mixins/events-mixin.js";
+import EventsMixin from "../mixins/events-mixin";
 
 /* eslint-disable no-console */
 const DEBUG = false;
diff --git a/src/util/hass-call-api.js b/src/util/hass-call-api.js
index 7aedeb45f3..dbfde887a0 100644
--- a/src/util/hass-call-api.js
+++ b/src/util/hass-call-api.js
@@ -1,4 +1,4 @@
-import { fetchWithAuth } from "./fetch-with-auth.js";
+import { fetchWithAuth } from "./fetch-with-auth";
 
 /* eslint-disable no-throw-literal */
 
diff --git a/src/util/legacy-support.js b/src/util/legacy-support.js
index e243fd96ff..f45d14fc3a 100644
--- a/src/util/legacy-support.js
+++ b/src/util/legacy-support.js
@@ -2,9 +2,9 @@
  * Provide legacy support to HTML imports by exposing Polymer and
  * Polymer.Element on the window object.
  */
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { Polymer } from "@polymer/polymer/polymer-legacy.js";
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { Polymer } from "@polymer/polymer/polymer-legacy";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
 
 Polymer.Element = PolymerElement;
 Polymer.html = html;
diff --git a/src/util/register-service-worker.js b/src/util/register-service-worker.js
index 38f90d899b..aa49340885 100644
--- a/src/util/register-service-worker.js
+++ b/src/util/register-service-worker.js
@@ -1,5 +1,5 @@
 const serviceWorkerUrl =
-  __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5.js";
+  __BUILD__ === "latest" ? "/service_worker.js" : "/service_worker_es5";
 
 export default () => {
   if (!("serviceWorker" in navigator)) return;
@@ -14,7 +14,7 @@ export default () => {
           !__DEV__
         ) {
           // Notify users here of a new frontend being available.
-          import("./show-new-frontend-toast.js").then((mod) =>
+          import("./show-new-frontend-toast").then((mod) =>
             mod.default(installingWorker)
           );
         }
diff --git a/src/util/show-new-frontend-toast.js b/src/util/show-new-frontend-toast.js
index b228218fbc..11c54cc41c 100644
--- a/src/util/show-new-frontend-toast.js
+++ b/src/util/show-new-frontend-toast.js
@@ -1,5 +1,5 @@
-import "@polymer/paper-button/paper-button.js";
-import "../components/ha-toast.js";
+import "@polymer/paper-button/paper-button";
+import "../components/ha-toast";
 
 export default (installingWorker) => {
   const toast = document.createElement("ha-toast");
diff --git a/test-mocha/common/datetime/duration_to_seconds_test.js b/test-mocha/common/datetime/duration_to_seconds_test.js
index 6fb367c24e..78752a5cdb 100644
--- a/test-mocha/common/datetime/duration_to_seconds_test.js
+++ b/test-mocha/common/datetime/duration_to_seconds_test.js
@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import durationToSeconds from "../../../src/common/datetime/duration_to_seconds.js";
+import durationToSeconds from "../../../src/common/datetime/duration_to_seconds";
 
 describe("durationToSeconds", () => {
   it("works", () => {
diff --git a/test-mocha/common/datetime/seconds_to_duration_test.js b/test-mocha/common/datetime/seconds_to_duration_test.js
index fe064c4355..33f7a9a9a5 100644
--- a/test-mocha/common/datetime/seconds_to_duration_test.js
+++ b/test-mocha/common/datetime/seconds_to_duration_test.js
@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import secondsToDuration from "../../../src/common/datetime/seconds_to_duration.js";
+import secondsToDuration from "../../../src/common/datetime/seconds_to_duration";
 
 describe("secondsToDuration", () => {
   it("works", () => {
diff --git a/test-mocha/common/entity/compute_state_domain.js b/test-mocha/common/entity/compute_state_domain.js
index df2a37c083..f65cb2bac7 100644
--- a/test-mocha/common/entity/compute_state_domain.js
+++ b/test-mocha/common/entity/compute_state_domain.js
@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import computeStateDomain from "../../../src/common/entity/compute_state_domain.js";
+import computeStateDomain from "../../../src/common/entity/compute_state_domain";
 
 describe("computeStateDomain", () => {
   it("Detects sensor domain", () => {
diff --git a/test-mocha/common/entity/extract_views.spec.js b/test-mocha/common/entity/extract_views.spec.js
index 4977b303cf..2feb8879ea 100644
--- a/test-mocha/common/entity/extract_views.spec.js
+++ b/test-mocha/common/entity/extract_views.spec.js
@@ -1,6 +1,6 @@
 import assert from "assert";
 
-import extractViews from "../../../src/common/entity/extract_views.js";
+import extractViews from "../../../src/common/entity/extract_views";
 
 import { createEntities, createView } from "./test_util";
 
diff --git a/test-mocha/common/entity/get_group_entities.spec.js b/test-mocha/common/entity/get_group_entities.spec.js
index 1dc3404bb3..35052dee0a 100644
--- a/test-mocha/common/entity/get_group_entities.spec.js
+++ b/test-mocha/common/entity/get_group_entities.spec.js
@@ -1,6 +1,6 @@
 import assert from "assert";
 
-import getGroupEntities from "../../../src/common/entity/get_group_entities.js";
+import getGroupEntities from "../../../src/common/entity/get_group_entities";
 
 import { createEntities, createGroup, entityMap } from "./test_util";
 
diff --git a/test-mocha/common/entity/get_view_entities.spec.js b/test-mocha/common/entity/get_view_entities.spec.js
index 28947693bc..b95cb573ac 100644
--- a/test-mocha/common/entity/get_view_entities.spec.js
+++ b/test-mocha/common/entity/get_view_entities.spec.js
@@ -1,6 +1,6 @@
 import assert from "assert";
 
-import getViewEntities from "../../../src/common/entity/get_view_entities.js";
+import getViewEntities from "../../../src/common/entity/get_view_entities";
 
 import {
   createEntities,
diff --git a/test-mocha/common/entity/has_location.test.js b/test-mocha/common/entity/has_location.test.js
index 4ea6dd09f6..10389d35be 100644
--- a/test-mocha/common/entity/has_location.test.js
+++ b/test-mocha/common/entity/has_location.test.js
@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import hasLocation from "../../../src/common/entity/has_location.js";
+import hasLocation from "../../../src/common/entity/has_location";
 
 describe("hasLocation", () => {
   it("flags states with location", () => {
diff --git a/test-mocha/common/entity/split_by_groups.spec.js b/test-mocha/common/entity/split_by_groups.spec.js
index 3629fbe8c9..85c31f4715 100644
--- a/test-mocha/common/entity/split_by_groups.spec.js
+++ b/test-mocha/common/entity/split_by_groups.spec.js
@@ -1,6 +1,6 @@
 import assert from "assert";
 
-import splitByGroups from "../../../src/common/entity/split_by_groups.js";
+import splitByGroups from "../../../src/common/entity/split_by_groups";
 
 import { createEntities, createGroup, entityMap } from "./test_util";
 
diff --git a/test-mocha/common/entity/state_card_type_test.js b/test-mocha/common/entity/state_card_type_test.js
index b1569cf3ac..3d9c66edbe 100644
--- a/test-mocha/common/entity/state_card_type_test.js
+++ b/test-mocha/common/entity/state_card_type_test.js
@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import stateCardType from "../../../src/common/entity/state_card_type.js";
+import stateCardType from "../../../src/common/entity/state_card_type";
 
 describe("stateCardType", () => {
   const hass = {
diff --git a/test-mocha/common/entity/state_more_info_type_test.js b/test-mocha/common/entity/state_more_info_type_test.js
index b0738759e6..93a1e8d7cb 100644
--- a/test-mocha/common/entity/state_more_info_type_test.js
+++ b/test-mocha/common/entity/state_more_info_type_test.js
@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import stateMoreInfoType from "../../../src/common/entity/state_more_info_type.js";
+import stateMoreInfoType from "../../../src/common/entity/state_more_info_type";
 
 describe("stateMoreInfoType", () => {
   it("Returns media_player for media_player states", () => {
diff --git a/test-mocha/common/entity/timer_time_remaining_test.js b/test-mocha/common/entity/timer_time_remaining_test.js
index 0904fe2d09..fd77bc92b8 100644
--- a/test-mocha/common/entity/timer_time_remaining_test.js
+++ b/test-mocha/common/entity/timer_time_remaining_test.js
@@ -1,7 +1,7 @@
 import { assert } from "chai";
 import sinon from "sinon";
 
-import timerTimeRemaining from "../../../src/common/entity/timer_time_remaining.js";
+import timerTimeRemaining from "../../../src/common/entity/timer_time_remaining";
 
 describe("timerTimeRemaining", () => {
   it("works with idle timers", () => {
diff --git a/test-mocha/common/util/parse_aspect_ratio_test.js b/test-mocha/common/util/parse_aspect_ratio_test.js
index d355e439e9..477a387a99 100644
--- a/test-mocha/common/util/parse_aspect_ratio_test.js
+++ b/test-mocha/common/util/parse_aspect_ratio_test.js
@@ -1,6 +1,6 @@
 import assert from "assert";
 
-import parseAspectRatio from "../../../src/common/util/parse-aspect-ratio.js";
+import parseAspectRatio from "../../../src/common/util/parse-aspect-ratio";
 
 describe("parseAspectRatio", () => {
   const ratio16by9 = { w: 16, h: 9 };

From 6cc67dc7908f4109abd36f01ea2927defd72cf01 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 2 Nov 2018 06:26:20 -0500
Subject: [PATCH 58/67] New warning row for non-existent entities (#1946)

* New warning row for non-existent entities

* Update src/panels/lovelace/entity-rows/hui-error-entity-row.ts

* Address my own comments
---
 .../entity-rows/hui-error-entity-row.ts       | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/panels/lovelace/entity-rows/hui-error-entity-row.ts

diff --git a/src/panels/lovelace/entity-rows/hui-error-entity-row.ts b/src/panels/lovelace/entity-rows/hui-error-entity-row.ts
new file mode 100644
index 0000000000..dcb68c57d6
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-error-entity-row.ts
@@ -0,0 +1,39 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+class HuiErrorEntityRow extends LitElement {
+  public entity?: string;
+
+  static get properties() {
+    return {
+      entity: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      Entity not available: ${this.entity || ""}
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: block;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-error-entity-row": HuiErrorEntityRow;
+  }
+}
+
+customElements.define("hui-error-entity-row", HuiErrorEntityRow);

From 727cfe92e3c65db05ec2d1881afa78668bf6ac5b Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 2 Nov 2018 15:59:48 +0100
Subject: [PATCH 59/67] Force correct line endings

---
 .gitattributes | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .gitattributes

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..17098d8b73
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,11 @@
+# Ensure Docker script files uses LF to support Docker for Windows.
+# Ensure "git config --global core.autocrlf input" before you clone
+*     text eol=lf
+*.ts  whitespace=error
+*.js  whitespace=error
+
+*.ico binary
+*.jpg binary
+*.png binary
+*.zip binary
+*.mp3 binary

From fbc1a722bd54adf9b614dd108b3435ade68376f1 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 2 Nov 2018 16:00:25 +0100
Subject: [PATCH 60/67] Normalize all line endings

---
 .../media_player_proxy/media_player.walkman   | Bin 16243 -> 16242 bytes
 src/common/util/parse-aspect-ratio.js         |  48 +-
 src/panels/dev-info/ha-loaded-components.js   | 118 +--
 .../lovelace/cards/hui-alarm-panel-card.js    | 516 ++++++------
 .../lovelace/cards/hui-conditional-card.ts    | 166 ++--
 .../lovelace/cards/hui-entities-card.ts       | 374 ++++-----
 .../lovelace/cards/hui-entity-filter-card.js  | 154 ++--
 src/panels/lovelace/cards/hui-gauge-card.ts   | 546 ++++++------
 .../lovelace/cards/hui-history-graph-card.js  | 172 ++--
 .../cards/hui-horizontal-stack-card.ts        | 100 +--
 src/panels/lovelace/cards/hui-iframe-card.ts  | 160 ++--
 .../lovelace/cards/hui-legacy-wrapper-card.js | 114 +--
 src/panels/lovelace/cards/hui-light-card.ts   | 654 +++++++--------
 src/panels/lovelace/cards/hui-map-card.js     | 610 +++++++-------
 .../lovelace/cards/hui-markdown-card.ts       | 186 ++---
 .../lovelace/cards/hui-media-control-card.js  |  22 +-
 src/panels/lovelace/cards/hui-picture-card.js | 134 +--
 .../cards/hui-picture-elements-card.ts        | 222 ++---
 .../lovelace/cards/hui-picture-entity-card.js | 402 ++++-----
 .../lovelace/cards/hui-picture-glance-card.js | 390 ++++-----
 .../lovelace/cards/hui-plant-status-card.js   |  22 +-
 src/panels/lovelace/cards/hui-sensor-card.js  | 584 ++++++-------
 src/panels/lovelace/cards/hui-stack-card.ts   | 132 +--
 .../lovelace/cards/hui-thermostat-card.ts     | 780 +++++++++---------
 .../lovelace/cards/hui-vertical-stack-card.ts | 100 +--
 .../cards/hui-weather-forecast-card.js        |  30 +-
 .../lovelace/common/compute-notifications.js  |  14 +-
 src/panels/lovelace/common/compute-tooltip.ts |  76 +-
 .../lovelace/common/create-card-element.js    | 224 ++---
 .../lovelace/common/create-hui-element.js     | 158 ++--
 .../lovelace/common/create-row-element.js     | 234 +++---
 .../lovelace/common/entity/toggle-entity.js   |  14 +-
 .../common/entity/turn-on-off-entities.js     |  68 +-
 .../common/entity/turn-on-off-entity.js       |  40 +-
 src/panels/lovelace/common/handle-click.ts    |  88 +-
 .../common/process-config-entities.js         |  76 +-
 .../lovelace/components/hui-card-options.ts   | 136 +--
 .../components/hui-entities-toggle.js         | 114 +--
 .../components/hui-generic-entity-row.js      | 274 +++---
 src/panels/lovelace/components/hui-image.js   | 396 ++++-----
 .../hui-configurator-notification-item.js     | 124 +--
 .../notifications/hui-notification-drawer.js  | 350 ++++----
 .../hui-notification-item-template.js         |  98 +--
 .../notifications/hui-notification-item.js    |  70 +-
 .../notifications/hui-notifications-button.js | 124 +--
 .../hui-persistent-notification-item.js       | 178 ++--
 .../lovelace/editor/hui-dialog-edit-card.ts   | 244 +++---
 .../lovelace/editor/hui-yaml-card-preview.ts  | 104 +--
 src/panels/lovelace/editor/hui-yaml-editor.ts |  82 +-
 .../lovelace/elements/hui-icon-element.ts     | 136 +--
 .../lovelace/elements/hui-image-element.ts    | 188 ++---
 .../elements/hui-service-button-element.ts    | 148 ++--
 .../elements/hui-state-badge-element.ts       | 106 +--
 .../elements/hui-state-icon-element.ts        | 154 ++--
 .../elements/hui-state-label-element.ts       | 156 ++--
 .../entity-rows/hui-climate-entity-row.ts     | 130 +--
 .../entity-rows/hui-cover-entity-row.js       | 148 ++--
 .../entity-rows/hui-group-entity-row.js       | 156 ++--
 .../hui-input-number-entity-row.js            | 340 ++++----
 .../hui-input-select-entity-row.js            | 214 ++---
 .../entity-rows/hui-input-text-entity-row.js  | 146 ++--
 .../entity-rows/hui-lock-entity-row.js        | 166 ++--
 .../hui-media-player-entity-row.js            | 324 ++++----
 .../entity-rows/hui-scene-entity-row.js       | 140 ++--
 .../entity-rows/hui-script-entity-row.js      | 156 ++--
 .../entity-rows/hui-text-entity-row.js        | 140 ++--
 .../entity-rows/hui-timer-entity-row.js       | 206 ++---
 .../entity-rows/hui-toggle-entity-row.js      | 152 ++--
 src/panels/lovelace/ha-panel-lovelace.js      | 250 +++---
 src/panels/lovelace/hui-root.js               | 760 ++++++++---------
 src/panels/lovelace/hui-unused-entities.js    | 122 +--
 src/panels/lovelace/hui-view.js               | 436 +++++-----
 .../special-rows/hui-call-service-row.ts      | 186 ++---
 .../lovelace/special-rows/hui-divider-row.ts  | 106 +--
 .../lovelace/special-rows/hui-section-row.ts  | 140 ++--
 .../lovelace/special-rows/hui-weblink-row.ts  | 150 ++--
 .../common/util/parse_aspect_ratio_test.js    | 106 +--
 77 files changed, 7792 insertions(+), 7792 deletions(-)

diff --git a/gallery/public/api/media_player_proxy/media_player.walkman b/gallery/public/api/media_player_proxy/media_player.walkman
index 76c759dd5bafb1db37a10408f4f808e5392a6b88..99ea7e6d3275c9becb6d1705da901461e1e74770 100644
GIT binary patch
delta 12
Ucmexd_o;5f6{gKsndaF505W9;%m4rY

delta 12
UcmexV_qlGv6{gLXndaL705V+$%K!iX

diff --git a/src/common/util/parse-aspect-ratio.js b/src/common/util/parse-aspect-ratio.js
index b5812d8a22..1797e81e3a 100644
--- a/src/common/util/parse-aspect-ratio.js
+++ b/src/common/util/parse-aspect-ratio.js
@@ -1,24 +1,24 @@
-export default function parseAspectRatio(input) {
-  // Handle 16x9, 16:9, 1.78x1, 1.78:1, 1.78
-  // Ignore everything else
-  function parseOrThrow(number) {
-    const parsed = parseFloat(number);
-    if (isNaN(parsed)) throw new Error(`${number} is not a number`);
-    return parsed;
-  }
-  try {
-    if (input) {
-      const arr = input.replace(":", "x").split("x");
-      if (arr.length === 0) {
-        return null;
-      }
-
-      return arr.length === 1
-        ? { w: parseOrThrow(arr[0]), h: 1 }
-        : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) };
-    }
-  } catch (err) {
-    // Ignore the error
-  }
-  return null;
-}
+export default function parseAspectRatio(input) {
+  // Handle 16x9, 16:9, 1.78x1, 1.78:1, 1.78
+  // Ignore everything else
+  function parseOrThrow(number) {
+    const parsed = parseFloat(number);
+    if (isNaN(parsed)) throw new Error(`${number} is not a number`);
+    return parsed;
+  }
+  try {
+    if (input) {
+      const arr = input.replace(":", "x").split("x");
+      if (arr.length === 0) {
+        return null;
+      }
+
+      return arr.length === 1
+        ? { w: parseOrThrow(arr[0]), h: 1 }
+        : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) };
+    }
+  } catch (err) {
+    // Ignore the error
+  }
+  return null;
+}
diff --git a/src/panels/dev-info/ha-loaded-components.js b/src/panels/dev-info/ha-loaded-components.js
index 30ec7f06be..715e2d021b 100644
--- a/src/panels/dev-info/ha-loaded-components.js
+++ b/src/panels/dev-info/ha-loaded-components.js
@@ -1,59 +1,59 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../resources/ha-style";
-
-import EventsMixin from "../../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaLoadedComponents extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-    <style include="ha-style-dialog">
-      paper-dialog {
-        max-width: 500px;
-      }
-    </style>
-    <paper-dialog id="dialog" with-backdrop="" opened="{{_opened}}">
-      <h2>Loaded Components</h2>
-      <paper-dialog-scrollable id="scrollable">
-       <p>The following components are currently loaded:</p>
-       <ul>
-        <template is='dom-repeat' items='[[_components]]'>
-          <li>[[item]]</li>
-        </template>
-       </ul>
-      </paper-dialog-scrollable>
-    </paper-dialog>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _hass: Object,
-      _components: Array,
-
-      _opened: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-  }
-
-  showDialog({ hass }) {
-    this.hass = hass;
-    this._opened = true;
-    this._components = this.hass.config.components.sort();
-    setTimeout(() => this.$.dialog.center(), 0);
-  }
-}
-
-customElements.define("ha-loaded-components", HaLoadedComponents);
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../resources/ha-style";
+
+import EventsMixin from "../../mixins/events-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaLoadedComponents extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+    <style include="ha-style-dialog">
+      paper-dialog {
+        max-width: 500px;
+      }
+    </style>
+    <paper-dialog id="dialog" with-backdrop="" opened="{{_opened}}">
+      <h2>Loaded Components</h2>
+      <paper-dialog-scrollable id="scrollable">
+       <p>The following components are currently loaded:</p>
+       <ul>
+        <template is='dom-repeat' items='[[_components]]'>
+          <li>[[item]]</li>
+        </template>
+       </ul>
+      </paper-dialog-scrollable>
+    </paper-dialog>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _hass: Object,
+      _components: Array,
+
+      _opened: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+  }
+
+  showDialog({ hass }) {
+    this.hass = hass;
+    this._opened = true;
+    this._components = this.hass.config.components.sort();
+    setTimeout(() => this.$.dialog.center(), 0);
+  }
+}
+
+customElements.define("ha-loaded-components", HaLoadedComponents);
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.js b/src/panels/lovelace/cards/hui-alarm-panel-card.js
index 967234d737..49015fbf1a 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.js
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.js
@@ -1,258 +1,258 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-
-import EventsMixin from "../../../mixins/events-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../components/ha-label-badge";
-
-/*
- * @appliesMixin EventsMixin
- */
-
-const Icons = {
-  armed_away: "hass:security-lock",
-  armed_custom_bypass: "hass:security",
-  armed_home: "hass:security-home",
-  armed_night: "hass:security-home",
-  disarmed: "hass:verified",
-  pending: "hass:shield-outline",
-  triggered: "hass:bell-ring",
-};
-
-class HuiAlarmPanelCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-    <style>
-      ha-card {
-        padding-bottom: 16px;
-        position: relative;
-        --alarm-color-disarmed: var(--label-badge-green);
-        --alarm-color-pending: var(--label-badge-yellow);
-        --alarm-color-triggered: var(--label-badge-red);
-        --alarm-color-armed: var(--label-badge-red);
-        --alarm-color-autoarm: rgba(0, 153, 255, .1);
-        --alarm-state-color: var(--alarm-color-armed);
-        --base-unit: 15px;
-        font-size: calc(var(--base-unit));
-      }
-      ha-label-badge {
-        --ha-label-badge-color:  var(--alarm-state-color);
-        --label-badge-text-color: var(--alarm-state-color);
-        color: var(--alarm-state-color);
-        position: absolute;
-        right: 12px;
-        top: 12px;
-      }
-      .disarmed {
-        --alarm-state-color: var(--alarm-color-disarmed);
-      }
-      .triggered {
-        --alarm-state-color: var(--alarm-color-triggered);
-        animation: pulse 1s infinite;
-      }
-      .arming {
-        --alarm-state-color: var(--alarm-color-pending);
-        animation: pulse 1s infinite;
-      }
-      .pending {
-        --alarm-state-color: var(--alarm-color-pending);
-        animation: pulse 1s infinite;
-      }
-      @keyframes pulse {
-        0% {
-          --ha-label-badge-color: var(--alarm-state-color);
-        }
-        100% {
-          --ha-label-badge-color: rgba(255, 153, 0, 0.3);
-        }
-      }
-      paper-input {
-        margin: auto;
-        max-width: 200px;
-        font-size: calc(var(--base-unit));
-      }
-      .state {
-        margin-left: 16px;
-        font-size: calc(var(--base-unit) * 0.9);
-        position: relative;
-        bottom: 16px;
-        color: var(--alarm-state-color);
-        animation: none;
-      }
-      #keypad {
-        display: flex;
-        justify-content: center;
-      }
-      #keypad div {
-        display: flex;
-        flex-direction: column;
-      }
-      #keypad paper-button {
-        margin-bottom: 10%;
-        position: relative;
-        padding: calc(var(--base-unit));
-        font-size: calc(var(--base-unit) * 1.1);
-      }
-      .actions {
-        margin: 0 8px;
-        padding-top: 20px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        font-size: calc(var(--base-unit) * 1);
-      }
-      .actions paper-button {
-        min-width: calc(var(--base-unit) * 9);
-        color: var(--primary-color);
-      }
-      paper-button#disarm {
-        color: var(--google-red-500);
-      }
-      .not-found {
-        flex: 1;
-        background-color: yellow;
-        padding: 8px;
-      }
-    </style>
-    <ha-card
-      header$="[[_computeHeader(localize, _stateObj)]]"
-      class$="[[_computeClassName(_stateObj)]]"
-    >
-      <template is="dom-if" if="[[_stateObj]]">
-        <ha-label-badge
-          class$="[[_stateObj.state]]"
-          icon="[[_computeIcon(_stateObj)]]"
-          label="[[_stateIconLabel(_stateObj.state)]]"
-        ></ha-label-badge>
-        <template is="dom-if" if="[[_showActionToggle(_stateObj.state)]]">
-          <div id="armActions" class="actions">
-            <template is="dom-repeat" items="[[_config.states]]">
-              <paper-button noink raised id="[[item]]" on-click="_handleActionClick">[[_label(localize, item)]]</paper-button>
-            </template>
-          </div>
-        </template>
-        <template is="dom-if" if="[[!_showActionToggle(_stateObj.state)]]">
-          <div id="disarmActions" class="actions">
-            <paper-button noink raised id="disarm" on-click="_handleActionClick">[[_label(localize, "disarm")]]</paper-button>
-          </div>
-        </template>
-        <paper-input label="Alarm Code" type="password" value="[[_value]]"></paper-input>
-        <div id="keypad">
-          <div>
-            <paper-button noink raised value="1" on-click="_handlePadClick">1</paper-button>
-            <paper-button noink raised value="4" on-click="_handlePadClick">4</paper-button>
-            <paper-button noink raised value="7" on-click="_handlePadClick">7</paper-button>
-          </div>
-          <div>
-            <paper-button noink raised value="2" on-click="_handlePadClick">2</paper-button>
-            <paper-button noink raised value="5" on-click="_handlePadClick">5</paper-button>
-            <paper-button noink raised value="8" on-click="_handlePadClick">8</paper-button>
-            <paper-button noink raised value="0" on-click="_handlePadClick">0</paper-button>
-          </div>
-          <div>
-            <paper-button noink raised value="3" on-click="_handlePadClick">3</paper-button>
-            <paper-button noink raised value="6" on-click="_handlePadClick">6</paper-button>
-            <paper-button noink raised value="9" on-click="_handlePadClick">9</paper-button>
-            <paper-button noink raised value="clear" on-click="_handlePadClick">[[_label(localize, "clear_code")]]</paper-button>
-          </div>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div>Entity not available: [[_config.entity]]</div>
-      </template>
-    </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _value: {
-        type: String,
-        value: "",
-      },
-    };
-  }
-
-  getCardSize() {
-    return 4;
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.entity ||
-      config.entity.split(".")[0] !== "alarm_control_panel"
-    ) {
-      throw new Error("Invalid card configuration");
-    }
-
-    const defaults = {
-      states: ["arm_away", "arm_home"],
-    };
-
-    this._config = { ...defaults, ...config };
-    this._icons = Icons;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeHeader(localize, stateObj) {
-    if (!stateObj) return "";
-    return this._config.title
-      ? this._config.title
-      : this._label(localize, stateObj.state);
-  }
-
-  _computeIcon(stateObj) {
-    return this._icons[stateObj.state] || "hass:shield-outline";
-  }
-
-  _label(localize, state) {
-    return (
-      localize(`state.alarm_control_panel.${state}`) ||
-      localize(`ui.card.alarm_control_panel.${state}`)
-    );
-  }
-
-  _stateIconLabel(state) {
-    const stateLabel = state.split("_").pop();
-    return stateLabel === "disarmed" || stateLabel === "triggered"
-      ? ""
-      : stateLabel;
-  }
-
-  _showActionToggle(state) {
-    return state === "disarmed";
-  }
-
-  _computeClassName(stateObj) {
-    if (!stateObj) return "not-found";
-    return "";
-  }
-
-  _handlePadClick(e) {
-    const val = e.target.getAttribute("value");
-    this._value = val === "clear" ? "" : this._value + val;
-  }
-
-  _handleActionClick(e) {
-    this.hass.callService("alarm_control_panel", "alarm_" + e.target.id, {
-      entity_id: this._stateObj.entity_id,
-      code: this._value,
-    });
-    this._value = "";
-  }
-}
-
-customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import "../../../components/ha-label-badge";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+
+const Icons = {
+  armed_away: "hass:security-lock",
+  armed_custom_bypass: "hass:security",
+  armed_home: "hass:security-home",
+  armed_night: "hass:security-home",
+  disarmed: "hass:verified",
+  pending: "hass:shield-outline",
+  triggered: "hass:bell-ring",
+};
+
+class HuiAlarmPanelCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+    <style>
+      ha-card {
+        padding-bottom: 16px;
+        position: relative;
+        --alarm-color-disarmed: var(--label-badge-green);
+        --alarm-color-pending: var(--label-badge-yellow);
+        --alarm-color-triggered: var(--label-badge-red);
+        --alarm-color-armed: var(--label-badge-red);
+        --alarm-color-autoarm: rgba(0, 153, 255, .1);
+        --alarm-state-color: var(--alarm-color-armed);
+        --base-unit: 15px;
+        font-size: calc(var(--base-unit));
+      }
+      ha-label-badge {
+        --ha-label-badge-color:  var(--alarm-state-color);
+        --label-badge-text-color: var(--alarm-state-color);
+        color: var(--alarm-state-color);
+        position: absolute;
+        right: 12px;
+        top: 12px;
+      }
+      .disarmed {
+        --alarm-state-color: var(--alarm-color-disarmed);
+      }
+      .triggered {
+        --alarm-state-color: var(--alarm-color-triggered);
+        animation: pulse 1s infinite;
+      }
+      .arming {
+        --alarm-state-color: var(--alarm-color-pending);
+        animation: pulse 1s infinite;
+      }
+      .pending {
+        --alarm-state-color: var(--alarm-color-pending);
+        animation: pulse 1s infinite;
+      }
+      @keyframes pulse {
+        0% {
+          --ha-label-badge-color: var(--alarm-state-color);
+        }
+        100% {
+          --ha-label-badge-color: rgba(255, 153, 0, 0.3);
+        }
+      }
+      paper-input {
+        margin: auto;
+        max-width: 200px;
+        font-size: calc(var(--base-unit));
+      }
+      .state {
+        margin-left: 16px;
+        font-size: calc(var(--base-unit) * 0.9);
+        position: relative;
+        bottom: 16px;
+        color: var(--alarm-state-color);
+        animation: none;
+      }
+      #keypad {
+        display: flex;
+        justify-content: center;
+      }
+      #keypad div {
+        display: flex;
+        flex-direction: column;
+      }
+      #keypad paper-button {
+        margin-bottom: 10%;
+        position: relative;
+        padding: calc(var(--base-unit));
+        font-size: calc(var(--base-unit) * 1.1);
+      }
+      .actions {
+        margin: 0 8px;
+        padding-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        font-size: calc(var(--base-unit) * 1);
+      }
+      .actions paper-button {
+        min-width: calc(var(--base-unit) * 9);
+        color: var(--primary-color);
+      }
+      paper-button#disarm {
+        color: var(--google-red-500);
+      }
+      .not-found {
+        flex: 1;
+        background-color: yellow;
+        padding: 8px;
+      }
+    </style>
+    <ha-card
+      header$="[[_computeHeader(localize, _stateObj)]]"
+      class$="[[_computeClassName(_stateObj)]]"
+    >
+      <template is="dom-if" if="[[_stateObj]]">
+        <ha-label-badge
+          class$="[[_stateObj.state]]"
+          icon="[[_computeIcon(_stateObj)]]"
+          label="[[_stateIconLabel(_stateObj.state)]]"
+        ></ha-label-badge>
+        <template is="dom-if" if="[[_showActionToggle(_stateObj.state)]]">
+          <div id="armActions" class="actions">
+            <template is="dom-repeat" items="[[_config.states]]">
+              <paper-button noink raised id="[[item]]" on-click="_handleActionClick">[[_label(localize, item)]]</paper-button>
+            </template>
+          </div>
+        </template>
+        <template is="dom-if" if="[[!_showActionToggle(_stateObj.state)]]">
+          <div id="disarmActions" class="actions">
+            <paper-button noink raised id="disarm" on-click="_handleActionClick">[[_label(localize, "disarm")]]</paper-button>
+          </div>
+        </template>
+        <paper-input label="Alarm Code" type="password" value="[[_value]]"></paper-input>
+        <div id="keypad">
+          <div>
+            <paper-button noink raised value="1" on-click="_handlePadClick">1</paper-button>
+            <paper-button noink raised value="4" on-click="_handlePadClick">4</paper-button>
+            <paper-button noink raised value="7" on-click="_handlePadClick">7</paper-button>
+          </div>
+          <div>
+            <paper-button noink raised value="2" on-click="_handlePadClick">2</paper-button>
+            <paper-button noink raised value="5" on-click="_handlePadClick">5</paper-button>
+            <paper-button noink raised value="8" on-click="_handlePadClick">8</paper-button>
+            <paper-button noink raised value="0" on-click="_handlePadClick">0</paper-button>
+          </div>
+          <div>
+            <paper-button noink raised value="3" on-click="_handlePadClick">3</paper-button>
+            <paper-button noink raised value="6" on-click="_handlePadClick">6</paper-button>
+            <paper-button noink raised value="9" on-click="_handlePadClick">9</paper-button>
+            <paper-button noink raised value="clear" on-click="_handlePadClick">[[_label(localize, "clear_code")]]</paper-button>
+          </div>
+      </template>
+      <template is="dom-if" if="[[!_stateObj]]">
+        <div>Entity not available: [[_config.entity]]</div>
+      </template>
+    </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+      },
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _value: {
+        type: String,
+        value: "",
+      },
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  setConfig(config) {
+    if (
+      !config ||
+      !config.entity ||
+      config.entity.split(".")[0] !== "alarm_control_panel"
+    ) {
+      throw new Error("Invalid card configuration");
+    }
+
+    const defaults = {
+      states: ["arm_away", "arm_home"],
+    };
+
+    this._config = { ...defaults, ...config };
+    this._icons = Icons;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeHeader(localize, stateObj) {
+    if (!stateObj) return "";
+    return this._config.title
+      ? this._config.title
+      : this._label(localize, stateObj.state);
+  }
+
+  _computeIcon(stateObj) {
+    return this._icons[stateObj.state] || "hass:shield-outline";
+  }
+
+  _label(localize, state) {
+    return (
+      localize(`state.alarm_control_panel.${state}`) ||
+      localize(`ui.card.alarm_control_panel.${state}`)
+    );
+  }
+
+  _stateIconLabel(state) {
+    const stateLabel = state.split("_").pop();
+    return stateLabel === "disarmed" || stateLabel === "triggered"
+      ? ""
+      : stateLabel;
+  }
+
+  _showActionToggle(state) {
+    return state === "disarmed";
+  }
+
+  _computeClassName(stateObj) {
+    if (!stateObj) return "not-found";
+    return "";
+  }
+
+  _handlePadClick(e) {
+    const val = e.target.getAttribute("value");
+    this._value = val === "clear" ? "" : this._value + val;
+  }
+
+  _handleActionClick(e) {
+    this.hass.callService("alarm_control_panel", "alarm_" + e.target.id, {
+      entity_id: this._stateObj.entity_id,
+      code: this._value,
+    });
+    this._value = "";
+  }
+}
+
+customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);
diff --git a/src/panels/lovelace/cards/hui-conditional-card.ts b/src/panels/lovelace/cards/hui-conditional-card.ts
index 0852483643..3ad239be4f 100644
--- a/src/panels/lovelace/cards/hui-conditional-card.ts
+++ b/src/panels/lovelace/cards/hui-conditional-card.ts
@@ -1,83 +1,83 @@
-import computeCardSize from "../common/compute-card-size";
-import createCardElement from "../common/create-card-element";
-import { HomeAssistant } from "../../../types";
-import { LovelaceCard, LovelaceConfig } from "../types";
-
-interface Condition {
-  entity: string;
-  state?: string;
-  state_not?: string;
-}
-
-interface Config extends LovelaceConfig {
-  card: LovelaceConfig;
-  conditions: Condition[];
-}
-
-class HuiConditionalCard extends HTMLElement implements LovelaceCard {
-  private _hass?: HomeAssistant;
-  private _config?: Config;
-  private _card?: LovelaceCard;
-
-  public setConfig(config) {
-    if (
-      !config.card ||
-      !config.conditions ||
-      !Array.isArray(config.conditions) ||
-      !config.conditions.every((c) => c.entity && (c.state || c.state_not))
-    ) {
-      throw new Error("Error in card configuration.");
-    }
-
-    if (this._card && this._card.parentElement) {
-      this.removeChild(this._card);
-    }
-
-    this._config = config;
-    this._card = createCardElement(config.card);
-    if (this._hass) {
-      this.hass = this._hass;
-    }
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._card) {
-      return;
-    }
-
-    const visible =
-      this._config &&
-      this._config.conditions.every((c) => {
-        if (!(c.entity in hass.states)) {
-          return false;
-        }
-        if (c.state) {
-          return hass.states[c.entity].state === c.state;
-        }
-        return hass.states[c.entity].state !== c.state_not;
-      });
-
-    if (visible) {
-      this._card.hass = hass;
-      if (!this._card.parentElement) {
-        this.appendChild(this._card);
-      }
-    } else if (this._card.parentElement) {
-      this.removeChild(this._card);
-    }
-  }
-
-  public getCardSize() {
-    return computeCardSize(this._card);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-conditional-card": HuiConditionalCard;
-  }
-}
-
-customElements.define("hui-conditional-card", HuiConditionalCard);
+import computeCardSize from "../common/compute-card-size";
+import createCardElement from "../common/create-card-element";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard, LovelaceConfig } from "../types";
+
+interface Condition {
+  entity: string;
+  state?: string;
+  state_not?: string;
+}
+
+interface Config extends LovelaceConfig {
+  card: LovelaceConfig;
+  conditions: Condition[];
+}
+
+class HuiConditionalCard extends HTMLElement implements LovelaceCard {
+  private _hass?: HomeAssistant;
+  private _config?: Config;
+  private _card?: LovelaceCard;
+
+  public setConfig(config) {
+    if (
+      !config.card ||
+      !config.conditions ||
+      !Array.isArray(config.conditions) ||
+      !config.conditions.every((c) => c.entity && (c.state || c.state_not))
+    ) {
+      throw new Error("Error in card configuration.");
+    }
+
+    if (this._card && this._card.parentElement) {
+      this.removeChild(this._card);
+    }
+
+    this._config = config;
+    this._card = createCardElement(config.card);
+    if (this._hass) {
+      this.hass = this._hass;
+    }
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+
+    if (!this._card) {
+      return;
+    }
+
+    const visible =
+      this._config &&
+      this._config.conditions.every((c) => {
+        if (!(c.entity in hass.states)) {
+          return false;
+        }
+        if (c.state) {
+          return hass.states[c.entity].state === c.state;
+        }
+        return hass.states[c.entity].state !== c.state_not;
+      });
+
+    if (visible) {
+      this._card.hass = hass;
+      if (!this._card.parentElement) {
+        this.appendChild(this._card);
+      }
+    } else if (this._card.parentElement) {
+      this.removeChild(this._card);
+    }
+  }
+
+  public getCardSize() {
+    return computeCardSize(this._card);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-conditional-card": HuiConditionalCard;
+  }
+}
+
+customElements.define("hui-conditional-card", HuiConditionalCard);
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 2a27b2923f..066665c541 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -1,187 +1,187 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import "../../../components/ha-card";
-import "../components/hui-entities-toggle";
-
-import { fireEvent } from "../../../common/dom/fire_event";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { HomeAssistant } from "../../../types";
-import { EntityConfig, EntityRow } from "../entity-rows/types";
-import { LovelaceCard, LovelaceConfig } from "../types";
-import processConfigEntities from "../common/process-config-entities";
-import createRowElement from "../common/create-row-element";
-import computeDomain from "../../../common/entity/compute_domain";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
-
-interface ConfigEntity extends EntityConfig {
-  type?: string;
-  secondary_info: "entity-id" | "last-changed";
-  action_name?: string;
-  service?: string;
-  service_data?: object;
-  url?: string;
-}
-
-interface Config extends LovelaceConfig {
-  show_header_toggle?: boolean;
-  title?: string;
-  entities: ConfigEntity[];
-  theme?: string;
-}
-
-class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
-  protected _hass?: HomeAssistant;
-  protected _config?: Config;
-  protected _configEntities?: ConfigEntity[];
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
-      (element: unknown) => {
-        (element as EntityRow).hass = hass;
-      }
-    );
-    const entitiesToggle = this.shadowRoot!.querySelector(
-      "hui-entities-toggle"
-    );
-    if (entitiesToggle) {
-      (entitiesToggle as any).hass = hass;
-    }
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    if (!this._config) {
-      return 0;
-    }
-    // +1 for the header
-    return (this._config.title ? 1 : 0) + this._config.entities.length;
-  }
-
-  public setConfig(config: Config): void {
-    const entities = processConfigEntities(config.entities);
-
-    this._config = { theme: "default", ...config };
-    this._configEntities = entities;
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    if (this._hass && this._config) {
-      applyThemesOnElement(this, this._hass.themes, this._config.theme);
-    }
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config || !this._hass) {
-      return html``;
-    }
-    const { show_header_toggle, title } = this._config;
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card>
-        ${
-          !title && !show_header_toggle
-            ? html``
-            : html`
-            <div class='header'>
-              <div class="name">${title}</div>
-              ${
-                show_header_toggle === false
-                  ? html``
-                  : html`
-                  <hui-entities-toggle
-                    .hass="${this._hass}"
-                    .entities="${this._configEntities!.map(
-                      (conf) => conf.entity
-                    )}"
-                  ></hui-entities-toggle>`
-              }
-            </div>`
-        }
-        <div id="states">
-          ${this._configEntities!.map((entityConf) =>
-            this.renderEntity(entityConf)
-          )}
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          padding: 16px;
-        }
-        #states {
-          margin: -4px 0;
-        }
-        #states > * {
-          margin: 8px 0;
-        }
-        #states > div > * {
-          overflow: hidden;
-        }
-        .header {
-          @apply --paper-font-headline;
-          /* overwriting line-height +8 because entity-toggle can be 40px height,
-            compensating this with reduced padding */
-          line-height: 40px;
-          color: var(--primary-text-color);
-          padding: 4px 0 12px;
-          display: flex;
-          justify-content: space-between;
-        }
-        .header .name {
-          @apply --paper-font-common-nowrap;
-        }
-        .state-card-dialog {
-          cursor: pointer;
-        }
-      </style>
-    `;
-  }
-
-  private renderEntity(entityConf: ConfigEntity): TemplateResult {
-    const element = createRowElement(entityConf);
-    if (this._hass) {
-      element.hass = this._hass;
-    }
-    if (
-      entityConf.entity &&
-      !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
-    ) {
-      element.classList.add("state-card-dialog");
-      element.addEventListener("click", () => this._handleClick(entityConf));
-    }
-
-    return html`<div>${element}</div>`;
-  }
-
-  private _handleClick(entityConf: ConfigEntity): void {
-    const entityId = entityConf.entity;
-    fireEvent(this, "hass-more-info", { entityId });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-entities-card": HuiEntitiesCard;
-  }
-}
-
-customElements.define("hui-entities-card", HuiEntitiesCard);
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-card";
+import "../components/hui-entities-toggle";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { EntityConfig, EntityRow } from "../entity-rows/types";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import processConfigEntities from "../common/process-config-entities";
+import createRowElement from "../common/create-row-element";
+import computeDomain from "../../../common/entity/compute_domain";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+
+interface ConfigEntity extends EntityConfig {
+  type?: string;
+  secondary_info: "entity-id" | "last-changed";
+  action_name?: string;
+  service?: string;
+  service_data?: object;
+  url?: string;
+}
+
+interface Config extends LovelaceConfig {
+  show_header_toggle?: boolean;
+  title?: string;
+  entities: ConfigEntity[];
+  theme?: string;
+}
+
+class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  protected _hass?: HomeAssistant;
+  protected _config?: Config;
+  protected _configEntities?: ConfigEntity[];
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
+      (element: unknown) => {
+        (element as EntityRow).hass = hass;
+      }
+    );
+    const entitiesToggle = this.shadowRoot!.querySelector(
+      "hui-entities-toggle"
+    );
+    if (entitiesToggle) {
+      (entitiesToggle as any).hass = hass;
+    }
+  }
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    if (!this._config) {
+      return 0;
+    }
+    // +1 for the header
+    return (this._config.title ? 1 : 0) + this._config.entities.length;
+  }
+
+  public setConfig(config: Config): void {
+    const entities = processConfigEntities(config.entities);
+
+    this._config = { theme: "default", ...config };
+    this._configEntities = entities;
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (this._hass && this._config) {
+      applyThemesOnElement(this, this._hass.themes, this._config.theme);
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this._hass) {
+      return html``;
+    }
+    const { show_header_toggle, title } = this._config;
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card>
+        ${
+          !title && !show_header_toggle
+            ? html``
+            : html`
+            <div class='header'>
+              <div class="name">${title}</div>
+              ${
+                show_header_toggle === false
+                  ? html``
+                  : html`
+                  <hui-entities-toggle
+                    .hass="${this._hass}"
+                    .entities="${this._configEntities!.map(
+                      (conf) => conf.entity
+                    )}"
+                  ></hui-entities-toggle>`
+              }
+            </div>`
+        }
+        <div id="states">
+          ${this._configEntities!.map((entityConf) =>
+            this.renderEntity(entityConf)
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        #states {
+          margin: -4px 0;
+        }
+        #states > * {
+          margin: 8px 0;
+        }
+        #states > div > * {
+          overflow: hidden;
+        }
+        .header {
+          @apply --paper-font-headline;
+          /* overwriting line-height +8 because entity-toggle can be 40px height,
+            compensating this with reduced padding */
+          line-height: 40px;
+          color: var(--primary-text-color);
+          padding: 4px 0 12px;
+          display: flex;
+          justify-content: space-between;
+        }
+        .header .name {
+          @apply --paper-font-common-nowrap;
+        }
+        .state-card-dialog {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+
+  private renderEntity(entityConf: ConfigEntity): TemplateResult {
+    const element = createRowElement(entityConf);
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+    if (
+      entityConf.entity &&
+      !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
+    ) {
+      element.classList.add("state-card-dialog");
+      element.addEventListener("click", () => this._handleClick(entityConf));
+    }
+
+    return html`<div>${element}</div>`;
+  }
+
+  private _handleClick(entityConf: ConfigEntity): void {
+    const entityId = entityConf.entity;
+    fireEvent(this, "hass-more-info", { entityId });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-entities-card": HuiEntitiesCard;
+  }
+}
+
+customElements.define("hui-entities-card", HuiEntitiesCard);
diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.js b/src/panels/lovelace/cards/hui-entity-filter-card.js
index c76299b00b..25403b9582 100644
--- a/src/panels/lovelace/cards/hui-entity-filter-card.js
+++ b/src/panels/lovelace/cards/hui-entity-filter-card.js
@@ -1,77 +1,77 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import createCardElement from "../common/create-card-element";
-import processConfigEntities from "../common/process-config-entities";
-
-function getEntities(hass, filterState, entities) {
-  return entities.filter((entityConf) => {
-    const stateObj = hass.states[entityConf.entity];
-    return stateObj && filterState.includes(stateObj.state);
-  });
-}
-
-class HuiEntitiesCard extends PolymerElement {
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-    };
-  }
-
-  getCardSize() {
-    return this.lastChild ? this.lastChild.getCardSize() : 1;
-  }
-
-  setConfig(config) {
-    if (!config.state_filter || !Array.isArray(config.state_filter)) {
-      throw new Error("Incorrect filter config.");
-    }
-
-    this._config = config;
-    this._configEntities = processConfigEntities(config.entities);
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-      this._element = null;
-    }
-
-    const card = "card" in config ? { ...config.card } : {};
-    if (!card.type) card.type = "entities";
-    card.entities = [];
-
-    const element = createCardElement(card);
-    element._filterRawConfig = card;
-    this._updateCardConfig(element);
-
-    this._element = element;
-  }
-
-  _hassChanged() {
-    this._updateCardConfig(this._element);
-  }
-
-  _updateCardConfig(element) {
-    if (!element || element.tagName === "HUI-ERROR-CARD" || !this.hass) return;
-    const entitiesList = getEntities(
-      this.hass,
-      this._config.state_filter,
-      this._configEntities
-    );
-
-    if (entitiesList.length === 0 && this._config.show_empty === false) {
-      this.style.display = "none";
-      return;
-    }
-
-    this.style.display = "block";
-    element.setConfig({ ...element._filterRawConfig, entities: entitiesList });
-    element.isPanel = this.isPanel;
-    element.hass = this.hass;
-
-    // Attach element if it has never been attached.
-    if (!this.lastChild) this.appendChild(element);
-  }
-}
-customElements.define("hui-entity-filter-card", HuiEntitiesCard);
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import createCardElement from "../common/create-card-element";
+import processConfigEntities from "../common/process-config-entities";
+
+function getEntities(hass, filterState, entities) {
+  return entities.filter((entityConf) => {
+    const stateObj = hass.states[entityConf.entity];
+    return stateObj && filterState.includes(stateObj.state);
+  });
+}
+
+class HuiEntitiesCard extends PolymerElement {
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+    };
+  }
+
+  getCardSize() {
+    return this.lastChild ? this.lastChild.getCardSize() : 1;
+  }
+
+  setConfig(config) {
+    if (!config.state_filter || !Array.isArray(config.state_filter)) {
+      throw new Error("Incorrect filter config.");
+    }
+
+    this._config = config;
+    this._configEntities = processConfigEntities(config.entities);
+
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+      this._element = null;
+    }
+
+    const card = "card" in config ? { ...config.card } : {};
+    if (!card.type) card.type = "entities";
+    card.entities = [];
+
+    const element = createCardElement(card);
+    element._filterRawConfig = card;
+    this._updateCardConfig(element);
+
+    this._element = element;
+  }
+
+  _hassChanged() {
+    this._updateCardConfig(this._element);
+  }
+
+  _updateCardConfig(element) {
+    if (!element || element.tagName === "HUI-ERROR-CARD" || !this.hass) return;
+    const entitiesList = getEntities(
+      this.hass,
+      this._config.state_filter,
+      this._configEntities
+    );
+
+    if (entitiesList.length === 0 && this._config.show_empty === false) {
+      this.style.display = "none";
+      return;
+    }
+
+    this.style.display = "block";
+    element.setConfig({ ...element._filterRawConfig, entities: entitiesList });
+    element.isPanel = this.isPanel;
+    element.hass = this.hass;
+
+    // Attach element if it has never been attached.
+    if (!this.lastChild) this.appendChild(element);
+  }
+}
+customElements.define("hui-entity-filter-card", HuiEntitiesCard);
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 5061ad26ba..92ddcb9d1e 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -1,273 +1,273 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { HomeAssistant } from "../../../types";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { TemplateResult } from "lit-html";
-import isValidEntityId from "../../../common/entity/valid_entity_id";
-
-import "../../../components/ha-card";
-
-interface Config extends LovelaceConfig {
-  entity: string;
-  title?: string;
-  unit_of_measurement?: string;
-  min?: number;
-  max?: number;
-  severity?: object;
-}
-
-const severityMap = {
-  red: "var(--label-badge-red)",
-  green: "var(--label-badge-green)",
-  yellow: "var(--label-badge-yellow)",
-  normal: "var(--label-badge-blue)",
-};
-
-class HuiGaugeCard extends LitElement implements LovelaceCard {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 2;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config || !config.entity) {
-      throw new Error("Invalid card configuration");
-    }
-    if (!isValidEntityId(config.entity)) {
-      throw new Error("Invalid Entity");
-    }
-    this._config = { min: 0, max: 100, ...config };
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config || !this.hass) {
-      return html``;
-    }
-    const stateObj = this.hass.states[this._config.entity];
-    let error;
-    if (!stateObj) {
-      error = "Entity not available: " + this._config.entity;
-    } else if (isNaN(Number(stateObj.state))) {
-      error = "Entity is non-numeric: " + this._config.entity;
-    }
-
-    return html`
-    ${this.renderStyle()}
-    <ha-card @click="${this._handleClick}">
-    ${
-      error
-        ? html`<div class="not-found">${error}</div>`
-        : html`
-          <div class='container'>
-            <div class='gauge-a'></div>
-            <div class='gauge-b'></div>
-            <div class='gauge-c' id='gauge'></div>
-            <div class='gauge-data'>
-              <div id='percent'>${stateObj.state}
-              ${this._config.unit_of_measurement ||
-                stateObj.attributes.unit_of_measurement ||
-                ""}
-              </div>
-              <div id='title'>${this._config.title}
-
-              </div>
-            </div>
-          </div>
-        `
-    }
-    </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    if (changedProps.get("_config")) {
-      return changedProps.get("_config") !== this._config;
-    }
-    return true;
-  }
-
-  protected updated(): void {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.shadowRoot!.getElementById("gauge")
-    ) {
-      return;
-    }
-    const stateObj = this.hass.states[this._config.entity];
-    if (isNaN(Number(stateObj.state))) {
-      return;
-    }
-
-    const turn = this._translateTurn(Number(stateObj.state), this._config);
-
-    this.shadowRoot!.getElementById(
-      "gauge"
-    )!.style.cssText = `transform: rotate(${turn}turn); background-color: ${this._computeSeverity(
-      stateObj.state,
-      this._config.severity!
-    )}`;
-
-    (this.shadowRoot!.querySelector(
-      "ha-card"
-    )! as HTMLElement).style.setProperty(
-      "--base-unit",
-      this._computeBaseUnit()
-    );
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          --base-unit: 50px;
-          height: calc(var(--base-unit)*3);
-          position: relative;
-          cursor: pointer;
-        }
-        .container{
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          position: absolute;
-          top: calc(var(--base-unit)*1.5);
-          left: 50%;
-          overflow: hidden;
-          text-align: center;
-          transform: translate(-50%, -50%);
-        }
-        .gauge-a{
-          z-index: 1;
-          position: absolute;
-          background-color: var(--primary-background-color);
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          top: 0%;
-          border-radius:calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
-        }
-        .gauge-b{
-          z-index: 3;
-          position: absolute;
-          background-color: var(--paper-card-background-color);
-          width: calc(var(--base-unit) * 2.5);
-          height: calc(var(--base-unit) * 1.25);
-          top: calc(var(--base-unit) * 0.75);
-          margin-left: calc(var(--base-unit) * 0.75);
-          margin-right: auto;
-          border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
-        }
-        .gauge-c{
-          z-index: 2;
-          position: absolute;
-          background-color: var(--label-badge-blue);
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2);
-          top: calc(var(--base-unit) * 2);
-          margin-left: auto;
-          margin-right: auto;
-          border-radius: 0px 0px calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) ;
-          transform-origin: center top;
-          transition: all 1.3s ease-in-out;
-        }
-        .gauge-data{
-          z-index: 4;
-          color: var(--primary-text-color);
-          line-height: calc(var(--base-unit) * 0.3);
-          position: absolute;
-          width: calc(var(--base-unit) * 4);
-          height: calc(var(--base-unit) * 2.1);
-          top: calc(var(--base-unit) * 1.2);
-          margin-left: auto;
-          margin-right: auto;
-          transition: all 1s ease-out;
-        }
-        .gauge-data #percent{
-          font-size: calc(var(--base-unit) * 0.55);
-        }
-        .gauge-data #title{
-          padding-top: calc(var(--base-unit) * 0.15);
-          font-size: calc(var(--base-unit) * 0.30);
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  private _computeSeverity(stateValue: string, sections: object): string {
-    const numberValue = Number(stateValue);
-
-    if (!sections) {
-      return severityMap.normal;
-    }
-
-    const sectionsArray = Object.keys(sections);
-    const sortable = sectionsArray.map((severity) => [
-      severity,
-      sections[severity],
-    ]);
-
-    for (const severity of sortable) {
-      if (severityMap[severity[0]] == null || isNaN(severity[1])) {
-        return severityMap.normal;
-      }
-    }
-    sortable.sort((a, b) => a[1] - b[1]);
-
-    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
-      return severityMap[sortable[0][0]];
-    }
-    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
-      return severityMap[sortable[1][0]];
-    }
-    if (numberValue >= sortable[2][1]) {
-      return severityMap[sortable[2][0]];
-    }
-    return severityMap.normal;
-  }
-
-  private _translateTurn(value: number, config: Config): number {
-    const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
-    return (
-      (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
-    );
-  }
-
-  private _computeBaseUnit(): string {
-    return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
-  }
-
-  private _handleClick(): void {
-    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-gauge-card": HuiGaugeCard;
-  }
-}
-
-customElements.define("hui-gauge-card", HuiGaugeCard);
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { TemplateResult } from "lit-html";
+import isValidEntityId from "../../../common/entity/valid_entity_id";
+
+import "../../../components/ha-card";
+
+interface Config extends LovelaceConfig {
+  entity: string;
+  title?: string;
+  unit_of_measurement?: string;
+  min?: number;
+  max?: number;
+  severity?: object;
+}
+
+const severityMap = {
+  red: "var(--label-badge-red)",
+  green: "var(--label-badge-green)",
+  yellow: "var(--label-badge-yellow)",
+  normal: "var(--label-badge-blue)",
+};
+
+class HuiGaugeCard extends LitElement implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid card configuration");
+    }
+    if (!isValidEntityId(config.entity)) {
+      throw new Error("Invalid Entity");
+    }
+    this._config = { min: 0, max: 100, ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+    const stateObj = this.hass.states[this._config.entity];
+    let error;
+    if (!stateObj) {
+      error = "Entity not available: " + this._config.entity;
+    } else if (isNaN(Number(stateObj.state))) {
+      error = "Entity is non-numeric: " + this._config.entity;
+    }
+
+    return html`
+    ${this.renderStyle()}
+    <ha-card @click="${this._handleClick}">
+    ${
+      error
+        ? html`<div class="not-found">${error}</div>`
+        : html`
+          <div class='container'>
+            <div class='gauge-a'></div>
+            <div class='gauge-b'></div>
+            <div class='gauge-c' id='gauge'></div>
+            <div class='gauge-data'>
+              <div id='percent'>${stateObj.state}
+              ${this._config.unit_of_measurement ||
+                stateObj.attributes.unit_of_measurement ||
+                ""}
+              </div>
+              <div id='title'>${this._config.title}
+
+              </div>
+            </div>
+          </div>
+        `
+    }
+    </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    if (changedProps.get("_config")) {
+      return changedProps.get("_config") !== this._config;
+    }
+    return true;
+  }
+
+  protected updated(): void {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.shadowRoot!.getElementById("gauge")
+    ) {
+      return;
+    }
+    const stateObj = this.hass.states[this._config.entity];
+    if (isNaN(Number(stateObj.state))) {
+      return;
+    }
+
+    const turn = this._translateTurn(Number(stateObj.state), this._config);
+
+    this.shadowRoot!.getElementById(
+      "gauge"
+    )!.style.cssText = `transform: rotate(${turn}turn); background-color: ${this._computeSeverity(
+      stateObj.state,
+      this._config.severity!
+    )}`;
+
+    (this.shadowRoot!.querySelector(
+      "ha-card"
+    )! as HTMLElement).style.setProperty(
+      "--base-unit",
+      this._computeBaseUnit()
+    );
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          --base-unit: 50px;
+          height: calc(var(--base-unit)*3);
+          position: relative;
+          cursor: pointer;
+        }
+        .container{
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          position: absolute;
+          top: calc(var(--base-unit)*1.5);
+          left: 50%;
+          overflow: hidden;
+          text-align: center;
+          transform: translate(-50%, -50%);
+        }
+        .gauge-a{
+          z-index: 1;
+          position: absolute;
+          background-color: var(--primary-background-color);
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          top: 0%;
+          border-radius:calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
+        }
+        .gauge-b{
+          z-index: 3;
+          position: absolute;
+          background-color: var(--paper-card-background-color);
+          width: calc(var(--base-unit) * 2.5);
+          height: calc(var(--base-unit) * 1.25);
+          top: calc(var(--base-unit) * 0.75);
+          margin-left: calc(var(--base-unit) * 0.75);
+          margin-right: auto;
+          border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5) 0px 0px ;
+        }
+        .gauge-c{
+          z-index: 2;
+          position: absolute;
+          background-color: var(--label-badge-blue);
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2);
+          top: calc(var(--base-unit) * 2);
+          margin-left: auto;
+          margin-right: auto;
+          border-radius: 0px 0px calc(var(--base-unit) * 2) calc(var(--base-unit) * 2) ;
+          transform-origin: center top;
+          transition: all 1.3s ease-in-out;
+        }
+        .gauge-data{
+          z-index: 4;
+          color: var(--primary-text-color);
+          line-height: calc(var(--base-unit) * 0.3);
+          position: absolute;
+          width: calc(var(--base-unit) * 4);
+          height: calc(var(--base-unit) * 2.1);
+          top: calc(var(--base-unit) * 1.2);
+          margin-left: auto;
+          margin-right: auto;
+          transition: all 1s ease-out;
+        }
+        .gauge-data #percent{
+          font-size: calc(var(--base-unit) * 0.55);
+        }
+        .gauge-data #title{
+          padding-top: calc(var(--base-unit) * 0.15);
+          font-size: calc(var(--base-unit) * 0.30);
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  private _computeSeverity(stateValue: string, sections: object): string {
+    const numberValue = Number(stateValue);
+
+    if (!sections) {
+      return severityMap.normal;
+    }
+
+    const sectionsArray = Object.keys(sections);
+    const sortable = sectionsArray.map((severity) => [
+      severity,
+      sections[severity],
+    ]);
+
+    for (const severity of sortable) {
+      if (severityMap[severity[0]] == null || isNaN(severity[1])) {
+        return severityMap.normal;
+      }
+    }
+    sortable.sort((a, b) => a[1] - b[1]);
+
+    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
+      return severityMap[sortable[0][0]];
+    }
+    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
+      return severityMap[sortable[1][0]];
+    }
+    if (numberValue >= sortable[2][1]) {
+      return severityMap[sortable[2][0]];
+    }
+    return severityMap.normal;
+  }
+
+  private _translateTurn(value: number, config: Config): number {
+    const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
+    return (
+      (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
+    );
+  }
+
+  private _computeBaseUnit(): string {
+    return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
+  }
+
+  private _handleClick(): void {
+    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-gauge-card": HuiGaugeCard;
+  }
+}
+
+customElements.define("hui-gauge-card", HuiGaugeCard);
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js
index 66e56b326d..7ed24c4d28 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.js
+++ b/src/panels/lovelace/cards/hui-history-graph-card.js
@@ -1,86 +1,86 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-import "../../../components/state-history-charts";
-import "../../../data/ha-state-history-data";
-
-import processConfigEntities from "../common/process-config-entities";
-
-class HuiHistoryGraphCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          padding: 16px;
-        }
-        ha-card[header] {
-          padding-top: 0;
-        }
-      </style>
-
-      <ha-card header$='[[_config.title]]'>
-        <ha-state-history-data
-          hass="[[hass]]"
-          filter-type="recent-entity"
-          entity-id="[[_entities]]"
-          data="{{_stateHistory}}"
-          is-loading="{{_stateHistoryLoading}}"
-          cache-config="[[_cacheConfig]]"
-        ></ha-state-history-data>
-        <state-history-charts
-          hass="[[hass]]"
-          history-data="[[_stateHistory]]"
-          is-loading-data="[[_stateHistoryLoading]]"
-          names="[[_names]]"
-          up-to-now
-          no-single
-        ></state-history-charts>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _names: Object,
-      _entities: Array,
-
-      _stateHistory: Object,
-      _stateHistoryLoading: Boolean,
-      _cacheConfig: Object,
-    };
-  }
-
-  getCardSize() {
-    return 4;
-  }
-
-  setConfig(config) {
-    const entities = processConfigEntities(config.entities);
-
-    this._config = config;
-
-    const _entities = [];
-    const _names = {};
-    for (const entity of entities) {
-      _entities.push(entity.entity);
-      if (entity.name) {
-        _names[entity.entity] = entity.name;
-      }
-    }
-
-    this.setProperties({
-      _cacheConfig: {
-        cacheKey: _entities.sort().join(),
-        hoursToShow: config.hours_to_show || 24,
-        refresh: config.refresh_interval || 0,
-      },
-      _entities,
-      _names,
-    });
-  }
-}
-
-customElements.define("hui-history-graph-card", HuiHistoryGraphCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+import "../../../components/state-history-charts";
+import "../../../data/ha-state-history-data";
+
+import processConfigEntities from "../common/process-config-entities";
+
+class HuiHistoryGraphCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        ha-card[header] {
+          padding-top: 0;
+        }
+      </style>
+
+      <ha-card header$='[[_config.title]]'>
+        <ha-state-history-data
+          hass="[[hass]]"
+          filter-type="recent-entity"
+          entity-id="[[_entities]]"
+          data="{{_stateHistory}}"
+          is-loading="{{_stateHistoryLoading}}"
+          cache-config="[[_cacheConfig]]"
+        ></ha-state-history-data>
+        <state-history-charts
+          hass="[[hass]]"
+          history-data="[[_stateHistory]]"
+          is-loading-data="[[_stateHistoryLoading]]"
+          names="[[_names]]"
+          up-to-now
+          no-single
+        ></state-history-charts>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _names: Object,
+      _entities: Array,
+
+      _stateHistory: Object,
+      _stateHistoryLoading: Boolean,
+      _cacheConfig: Object,
+    };
+  }
+
+  getCardSize() {
+    return 4;
+  }
+
+  setConfig(config) {
+    const entities = processConfigEntities(config.entities);
+
+    this._config = config;
+
+    const _entities = [];
+    const _names = {};
+    for (const entity of entities) {
+      _entities.push(entity.entity);
+      if (entity.name) {
+        _names[entity.entity] = entity.name;
+      }
+    }
+
+    this.setProperties({
+      _cacheConfig: {
+        cacheKey: _entities.sort().join(),
+        hoursToShow: config.hours_to_show || 24,
+        refresh: config.refresh_interval || 0,
+      },
+      _entities,
+      _names,
+    });
+  }
+}
+
+customElements.define("hui-history-graph-card", HuiHistoryGraphCard);
diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index 3559e4cdb1..da193c0fab 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -1,50 +1,50 @@
-import { html } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import computeCardSize from "../common/compute-card-size";
-
-import { HuiStackCard } from "./hui-stack-card";
-
-class HuiHorizontalStackCard extends HuiStackCard {
-  public getCardSize(): number {
-    let totalSize = 0;
-
-    if (this._cards) {
-      for (const element of this._cards) {
-        const elementSize = computeCardSize(element);
-        totalSize = elementSize > totalSize ? elementSize : totalSize;
-      }
-    }
-
-    return totalSize;
-  }
-
-  protected renderStyle(): TemplateResult {
-    return html`
-      <style>
-        #root {
-          display: flex;
-        }
-        #root > * {
-          flex: 1 1 0;
-          margin: 0 4px;
-          min-width: 0;
-        }
-        #root > *:first-child {
-          margin-left: 0;
-        }
-        #root > *:last-child {
-          margin-right: 0;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-horitzontal-stack-card": HuiHorizontalStackCard;
-  }
-}
-
-customElements.define("hui-horizontal-stack-card", HuiHorizontalStackCard);
+import { html } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import computeCardSize from "../common/compute-card-size";
+
+import { HuiStackCard } from "./hui-stack-card";
+
+class HuiHorizontalStackCard extends HuiStackCard {
+  public getCardSize(): number {
+    let totalSize = 0;
+
+    if (this._cards) {
+      for (const element of this._cards) {
+        const elementSize = computeCardSize(element);
+        totalSize = elementSize > totalSize ? elementSize : totalSize;
+      }
+    }
+
+    return totalSize;
+  }
+
+  protected renderStyle(): TemplateResult {
+    return html`
+      <style>
+        #root {
+          display: flex;
+        }
+        #root > * {
+          flex: 1 1 0;
+          margin: 0 4px;
+          min-width: 0;
+        }
+        #root > *:first-child {
+          margin-left: 0;
+        }
+        #root > *:last-child {
+          margin-right: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-horitzontal-stack-card": HuiHorizontalStackCard;
+  }
+}
+
+customElements.define("hui-horizontal-stack-card", HuiHorizontalStackCard);
diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 11c96a22fe..13827cc89e 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -1,80 +1,80 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-
-import "../../../components/ha-card";
-
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceConfig {
-  aspect_ratio?: string;
-  title?: string;
-  url: string;
-}
-
-export class HuiIframeCard extends LitElement implements LovelaceCard {
-  protected _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 1 + this.offsetHeight / 50;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.url) {
-      throw new Error("URL required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card .header="${this._config.title}">
-        <div id="root">
-          <iframe src="${this._config.url}"></iframe>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        #root {
-          width: 100%;
-          position: relative;
-          padding-top: ${this._config!.aspect_ratio || "50%"};
-        }
-        iframe {
-          position: absolute;
-          border: none;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-iframe-card": HuiIframeCard;
-  }
-}
-
-customElements.define("hui-iframe-card", HuiIframeCard);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+
+import "../../../components/ha-card";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceConfig {
+  aspect_ratio?: string;
+  title?: string;
+  url: string;
+}
+
+export class HuiIframeCard extends LitElement implements LovelaceCard {
+  protected _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 1 + this.offsetHeight / 50;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.url) {
+      throw new Error("URL required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this._config.title}">
+        <div id="root">
+          <iframe src="${this._config.url}"></iframe>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        #root {
+          width: 100%;
+          position: relative;
+          padding-top: ${this._config!.aspect_ratio || "50%"};
+        }
+        iframe {
+          position: absolute;
+          border: none;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-iframe-card": HuiIframeCard;
+  }
+}
+
+customElements.define("hui-iframe-card", HuiIframeCard);
diff --git a/src/panels/lovelace/cards/hui-legacy-wrapper-card.js b/src/panels/lovelace/cards/hui-legacy-wrapper-card.js
index b9903dd697..b9957c41bb 100644
--- a/src/panels/lovelace/cards/hui-legacy-wrapper-card.js
+++ b/src/panels/lovelace/cards/hui-legacy-wrapper-card.js
@@ -1,57 +1,57 @@
-import createErrorCardConfig from "../common/create-error-card-config";
-import computeDomain from "../../../common/entity/compute_domain";
-
-export default class LegacyWrapperCard extends HTMLElement {
-  constructor(tag, domain) {
-    super();
-    this._tag = tag.toUpperCase();
-    this._domain = domain;
-    this._element = null;
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!config.entity) {
-      throw new Error("No entity specified");
-    }
-
-    if (computeDomain(config.entity) !== this._domain) {
-      throw new Error(
-        `Specified entity needs to be of domain ${this._domain}.`
-      );
-    }
-
-    this._config = config;
-  }
-
-  set hass(hass) {
-    const entityId = this._config.entity;
-
-    if (entityId in hass.states) {
-      this._ensureElement(this._tag);
-      this.lastChild.hass = hass;
-      this.lastChild.stateObj = hass.states[entityId];
-    } else {
-      this._ensureElement("HUI-ERROR-CARD");
-      this.lastChild.setConfig(
-        createErrorCardConfig(
-          `No state available for ${entityId}`,
-          this._config
-        )
-      );
-    }
-  }
-
-  _ensureElement(tag) {
-    if (this.lastChild && this.lastChild.tagName === tag) return;
-
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    this.appendChild(document.createElement(tag));
-  }
-}
+import createErrorCardConfig from "../common/create-error-card-config";
+import computeDomain from "../../../common/entity/compute_domain";
+
+export default class LegacyWrapperCard extends HTMLElement {
+  constructor(tag, domain) {
+    super();
+    this._tag = tag.toUpperCase();
+    this._domain = domain;
+    this._element = null;
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config.entity) {
+      throw new Error("No entity specified");
+    }
+
+    if (computeDomain(config.entity) !== this._domain) {
+      throw new Error(
+        `Specified entity needs to be of domain ${this._domain}.`
+      );
+    }
+
+    this._config = config;
+  }
+
+  set hass(hass) {
+    const entityId = this._config.entity;
+
+    if (entityId in hass.states) {
+      this._ensureElement(this._tag);
+      this.lastChild.hass = hass;
+      this.lastChild.stateObj = hass.states[entityId];
+    } else {
+      this._ensureElement("HUI-ERROR-CARD");
+      this.lastChild.setConfig(
+        createErrorCardConfig(
+          `No state available for ${entityId}`,
+          this._config
+        )
+      );
+    }
+  }
+
+  _ensureElement(tag) {
+    if (this.lastChild && this.lastChild.tagName === tag) return;
+
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    this.appendChild(document.createElement(tag));
+  }
+}
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 53f8dfdee0..d8f97ca029 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -1,327 +1,327 @@
-import {
-  html,
-  LitElement,
-  PropertyValues,
-  PropertyDeclarations,
-} from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { styleMap } from "lit-html/directives/styleMap";
-import computeStateName from "../../../common/entity/compute_state_name";
-import stateIcon from "../../../common/entity/state_icon";
-import { jQuery } from "../../../resources/jquery";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
-
-import { HomeAssistant, LightEntity } from "../../../types";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { longPress } from "../common/directives/long-press-directive";
-import { TemplateResult } from "lit-html";
-
-const lightConfig = {
-  radius: 80,
-  step: 1,
-  circleShape: "pie",
-  startAngle: 315,
-  width: 5,
-  min: 1,
-  max: 100,
-  sliderType: "min-range",
-  lineCap: "round",
-  handleSize: "+12",
-  showTooltip: false,
-};
-
-interface Config extends LovelaceConfig {
-  entity: string;
-  name?: string;
-}
-
-export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-  private _brightnessTimout?: number;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 2;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.entity || config.entity.split(".")[0] !== "light") {
-      throw new Error("Specify an entity from within the light domain.");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-
-    const stateObj = this.hass.states[this._config!.entity] as LightEntity;
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card>
-        ${
-          !stateObj
-            ? html`
-              <div class="not-found">Entity not available: ${
-                this._config.entity
-              }</div>`
-            : html`
-              <div id="light"></div>
-              <div id="tooltip">
-                <div class="icon-state">
-                  <ha-icon
-                    data-state="${stateObj.state}"
-                    .icon="${stateIcon(stateObj)}"
-                    style="${styleMap({
-                      filter: this._computeBrightness(stateObj),
-                      color: this._computeColor(stateObj),
-                    })}"
-                    @ha-click="${() => this._handleClick(false)}"
-                    @ha-hold="${() => this._handleClick(true)}"
-                    .longPress="${longPress()}"
-                  ></ha-icon>
-                  <div
-                    class="brightness"
-                    @ha-click="${() => this._handleClick(false)}"
-                    @ha-hold="${() => this._handleClick(true)}"
-                    .longPress="${longPress()}"
-                  ></div>
-                  <div class="name">${this._config.name ||
-                    computeStateName(stateObj)}</div>
-                </div>
-              </div>
-            `
-        }
-
-      </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    return (changedProps as unknown) as boolean;
-  }
-
-  protected firstUpdated(): void {
-    const brightness = this.hass!.states[this._config!.entity].attributes
-      .brightness;
-    jQuery("#light", this.shadowRoot).roundSlider({
-      ...lightConfig,
-      change: (value) => this._setBrightness(value),
-      drag: (value) => this._dragEvent(value),
-      start: () => this._showBrightness(),
-      stop: () => this._hideBrightness(),
-    });
-    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
-      (Math.round((brightness / 254) * 100) || 0) + "%";
-  }
-
-  protected updated(): void {
-    const attrs = this.hass!.states[this._config!.entity].attributes;
-
-    jQuery("#light", this.shadowRoot).roundSlider({
-      value: Math.round((attrs.brightness / 254) * 100) || 0,
-    });
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-    ${roundSliderStyle}
-      <style>
-        :host {
-          display: block;
-        }
-        ha-card {
-          position: relative;
-          overflow: hidden;
-          --brightness-font-color: white;
-          --brightness-font-text-shadow:
-            -1px -1px 0 #000,
-            1px -1px 0 #000,
-            -1px 1px 0 #000,
-            1px 1px 0 #000;
-          --name-font-size: 1.2rem;
-          --brightness-font-size: 1.2rem;
-          --rail-border-color: transparent;
-        }
-        #tooltip {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: 100%;
-          text-align: center;
-          z-index: 15;
-        }
-        .icon-state {
-          display: block;
-          margin: auto;
-          width: 100%;
-          height: 100%;
-          transform: translate(0,25%);
-        }
-        #light {
-          margin: 0 auto;
-          padding-top: 16px;
-          padding-bottom: 16px;
-        }
-        #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
-          z-index: 20 !important;
-        }
-        #light .rs-range-color  {
-          background-color: var(--primary-color);
-        }
-        #light .rs-path-color  {
-            background-color: var(--disabled-text-color);
-        }
-        #light .rs-handle  {
-            background-color: var(--paper-card-background-color, white);
-            padding: 7px;
-            border: 2px solid var(--disabled-text-color);
-        }
-        #light .rs-handle.rs-focus  {
-            border-color:var(--primary-color);
-        }
-        #light .rs-handle:after  {
-            border-color: var(--primary-color);
-            background-color: var(--primary-color);
-        }
-        #light .rs-border  {
-          border-color: var(--rail-border-color);
-        }
-        #light .rs-inner.rs-bg-color.rs-border,
-        #light .rs-overlay.rs-transition.rs-bg-color {
-          background-color: var(--paper-card-background-color, white);
-        }
-        ha-icon {
-          margin: auto;
-          width: 76px;
-          height: 76px;
-          color: var(--paper-item-icon-color, #44739e);
-          cursor: pointer;
-        }
-        ha-icon[data-state=on] {
-          color: var(--paper-item-icon-active-color, #FDD835);
-        }
-        ha-icon[data-state=unavailable] {
-          color: var(--state-icon-unavailable-color);
-        }
-        .name {
-          padding-top: 40px;
-          font-size: var(--name-font-size);
-        }
-        .brightness {
-          font-size: var(--brightness-font-size);
-          position: absolute;
-          margin: 0 auto;
-          left: 50%;
-          top: 10%;
-          transform: translate(-50%);
-          opacity: 0;
-          transition: opacity .5s ease-in-out;
-          -moz-transition: opacity .5s ease-in-out;
-          -webkit-transition: opacity .5s ease-in-out;
-          cursor: pointer;
-          color: var(--brightness-font-color);
-          text-shadow: var(--brightness-font-text-shadow)
-        }
-        .show_brightness {
-          opacity: 1;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  private _dragEvent(e: any): void {
-    this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
-  }
-
-  private _showBrightness(): void {
-    clearTimeout(this._brightnessTimout);
-    this.shadowRoot!.querySelector(".brightness")!.classList.add(
-      "show_brightness"
-    );
-  }
-
-  private _hideBrightness(): void {
-    this._brightnessTimout = window.setTimeout(() => {
-      this.shadowRoot!.querySelector(".brightness")!.classList.remove(
-        "show_brightness"
-      );
-    }, 500);
-  }
-
-  private _setBrightness(e: any): void {
-    this.hass!.callService("light", "turn_on", {
-      entity_id: this._config!.entity,
-      brightness_pct: e.value,
-    });
-  }
-
-  private _computeBrightness(stateObj: LightEntity): string {
-    if (!stateObj.attributes.brightness) {
-      return "";
-    }
-    const brightness = stateObj.attributes.brightness;
-    return `brightness(${(brightness + 245) / 5}%)`;
-  }
-
-  private _computeColor(stateObj: LightEntity): string {
-    if (!stateObj.attributes.hs_color) {
-      return "";
-    }
-    const [hue, sat] = stateObj.attributes.hs_color;
-    if (sat <= 10) {
-      return "";
-    }
-    return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
-  }
-
-  private _handleClick(hold: boolean): void {
-    const entityId = this._config!.entity;
-
-    if (hold) {
-      fireEvent(this, "hass-more-info", {
-        entityId,
-      });
-      return;
-    }
-
-    this.hass!.callService("light", "toggle", {
-      entity_id: entityId,
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-light-card": HuiLightCard;
-  }
-}
-
-customElements.define("hui-light-card", HuiLightCard);
+import {
+  html,
+  LitElement,
+  PropertyValues,
+  PropertyDeclarations,
+} from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { styleMap } from "lit-html/directives/styleMap";
+import computeStateName from "../../../common/entity/compute_state_name";
+import stateIcon from "../../../common/entity/state_icon";
+import { jQuery } from "../../../resources/jquery";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import { roundSliderStyle } from "../../../resources/jquery.roundslider";
+
+import { HomeAssistant, LightEntity } from "../../../types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { longPress } from "../common/directives/long-press-directive";
+import { TemplateResult } from "lit-html";
+
+const lightConfig = {
+  radius: 80,
+  step: 1,
+  circleShape: "pie",
+  startAngle: 315,
+  width: 5,
+  min: 1,
+  max: 100,
+  sliderType: "min-range",
+  lineCap: "round",
+  handleSize: "+12",
+  showTooltip: false,
+};
+
+interface Config extends LovelaceConfig {
+  entity: string;
+  name?: string;
+}
+
+export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private _brightnessTimout?: number;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity || config.entity.split(".")[0] !== "light") {
+      throw new Error("Specify an entity from within the light domain.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config!.entity] as LightEntity;
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card>
+        ${
+          !stateObj
+            ? html`
+              <div class="not-found">Entity not available: ${
+                this._config.entity
+              }</div>`
+            : html`
+              <div id="light"></div>
+              <div id="tooltip">
+                <div class="icon-state">
+                  <ha-icon
+                    data-state="${stateObj.state}"
+                    .icon="${stateIcon(stateObj)}"
+                    style="${styleMap({
+                      filter: this._computeBrightness(stateObj),
+                      color: this._computeColor(stateObj),
+                    })}"
+                    @ha-click="${() => this._handleClick(false)}"
+                    @ha-hold="${() => this._handleClick(true)}"
+                    .longPress="${longPress()}"
+                  ></ha-icon>
+                  <div
+                    class="brightness"
+                    @ha-click="${() => this._handleClick(false)}"
+                    @ha-hold="${() => this._handleClick(true)}"
+                    .longPress="${longPress()}"
+                  ></div>
+                  <div class="name">${this._config.name ||
+                    computeStateName(stateObj)}</div>
+                </div>
+              </div>
+            `
+        }
+
+      </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    return (changedProps as unknown) as boolean;
+  }
+
+  protected firstUpdated(): void {
+    const brightness = this.hass!.states[this._config!.entity].attributes
+      .brightness;
+    jQuery("#light", this.shadowRoot).roundSlider({
+      ...lightConfig,
+      change: (value) => this._setBrightness(value),
+      drag: (value) => this._dragEvent(value),
+      start: () => this._showBrightness(),
+      stop: () => this._hideBrightness(),
+    });
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
+      (Math.round((brightness / 254) * 100) || 0) + "%";
+  }
+
+  protected updated(): void {
+    const attrs = this.hass!.states[this._config!.entity].attributes;
+
+    jQuery("#light", this.shadowRoot).roundSlider({
+      value: Math.round((attrs.brightness / 254) * 100) || 0,
+    });
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+    ${roundSliderStyle}
+      <style>
+        :host {
+          display: block;
+        }
+        ha-card {
+          position: relative;
+          overflow: hidden;
+          --brightness-font-color: white;
+          --brightness-font-text-shadow:
+            -1px -1px 0 #000,
+            1px -1px 0 #000,
+            -1px 1px 0 #000,
+            1px 1px 0 #000;
+          --name-font-size: 1.2rem;
+          --brightness-font-size: 1.2rem;
+          --rail-border-color: transparent;
+        }
+        #tooltip {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 100%;
+          text-align: center;
+          z-index: 15;
+        }
+        .icon-state {
+          display: block;
+          margin: auto;
+          width: 100%;
+          height: 100%;
+          transform: translate(0,25%);
+        }
+        #light {
+          margin: 0 auto;
+          padding-top: 16px;
+          padding-bottom: 16px;
+        }
+        #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
+          z-index: 20 !important;
+        }
+        #light .rs-range-color  {
+          background-color: var(--primary-color);
+        }
+        #light .rs-path-color  {
+            background-color: var(--disabled-text-color);
+        }
+        #light .rs-handle  {
+            background-color: var(--paper-card-background-color, white);
+            padding: 7px;
+            border: 2px solid var(--disabled-text-color);
+        }
+        #light .rs-handle.rs-focus  {
+            border-color:var(--primary-color);
+        }
+        #light .rs-handle:after  {
+            border-color: var(--primary-color);
+            background-color: var(--primary-color);
+        }
+        #light .rs-border  {
+          border-color: var(--rail-border-color);
+        }
+        #light .rs-inner.rs-bg-color.rs-border,
+        #light .rs-overlay.rs-transition.rs-bg-color {
+          background-color: var(--paper-card-background-color, white);
+        }
+        ha-icon {
+          margin: auto;
+          width: 76px;
+          height: 76px;
+          color: var(--paper-item-icon-color, #44739e);
+          cursor: pointer;
+        }
+        ha-icon[data-state=on] {
+          color: var(--paper-item-icon-active-color, #FDD835);
+        }
+        ha-icon[data-state=unavailable] {
+          color: var(--state-icon-unavailable-color);
+        }
+        .name {
+          padding-top: 40px;
+          font-size: var(--name-font-size);
+        }
+        .brightness {
+          font-size: var(--brightness-font-size);
+          position: absolute;
+          margin: 0 auto;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%);
+          opacity: 0;
+          transition: opacity .5s ease-in-out;
+          -moz-transition: opacity .5s ease-in-out;
+          -webkit-transition: opacity .5s ease-in-out;
+          cursor: pointer;
+          color: var(--brightness-font-color);
+          text-shadow: var(--brightness-font-text-shadow)
+        }
+        .show_brightness {
+          opacity: 1;
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  private _dragEvent(e: any): void {
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
+  }
+
+  private _showBrightness(): void {
+    clearTimeout(this._brightnessTimout);
+    this.shadowRoot!.querySelector(".brightness")!.classList.add(
+      "show_brightness"
+    );
+  }
+
+  private _hideBrightness(): void {
+    this._brightnessTimout = window.setTimeout(() => {
+      this.shadowRoot!.querySelector(".brightness")!.classList.remove(
+        "show_brightness"
+      );
+    }, 500);
+  }
+
+  private _setBrightness(e: any): void {
+    this.hass!.callService("light", "turn_on", {
+      entity_id: this._config!.entity,
+      brightness_pct: e.value,
+    });
+  }
+
+  private _computeBrightness(stateObj: LightEntity): string {
+    if (!stateObj.attributes.brightness) {
+      return "";
+    }
+    const brightness = stateObj.attributes.brightness;
+    return `brightness(${(brightness + 245) / 5}%)`;
+  }
+
+  private _computeColor(stateObj: LightEntity): string {
+    if (!stateObj.attributes.hs_color) {
+      return "";
+    }
+    const [hue, sat] = stateObj.attributes.hs_color;
+    if (sat <= 10) {
+      return "";
+    }
+    return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
+  }
+
+  private _handleClick(hold: boolean): void {
+    const entityId = this._config!.entity;
+
+    if (hold) {
+      fireEvent(this, "hass-more-info", {
+        entityId,
+      });
+      return;
+    }
+
+    this.hass!.callService("light", "toggle", {
+      entity_id: entityId,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-light-card": HuiLightCard;
+  }
+}
+
+customElements.define("hui-light-card", HuiLightCard);
diff --git a/src/panels/lovelace/cards/hui-map-card.js b/src/panels/lovelace/cards/hui-map-card.js
index 4f213b88a5..814b2ba644 100644
--- a/src/panels/lovelace/cards/hui-map-card.js
+++ b/src/panels/lovelace/cards/hui-map-card.js
@@ -1,305 +1,305 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-icon-button/paper-icon-button";
-import Leaflet from "leaflet";
-
-import "../../map/ha-entity-marker";
-
-import setupLeafletMap from "../../../common/dom/setup-leaflet-map";
-import processConfigEntities from "../common/process-config-entities";
-import computeStateDomain from "../../../common/entity/compute_state_domain";
-import computeStateName from "../../../common/entity/compute_state_name";
-import debounce from "../../../common/util/debounce";
-
-Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
-
-class HuiMapCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host([is-panel]) ha-card {
-          left: 0;
-          top: 0;
-          width: 100%;
-          /**
-           * In panel mode we want a full height map. Since parent #view
-           * only sets min-height, we need absolute positioning here
-           */
-          height: 100%;
-          position: absolute;
-        }
-
-        ha-card {
-          overflow: hidden;
-        }
-
-        #map {
-          z-index: 0;
-          border: none;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-
-        paper-icon-button {
-          position: absolute;
-          top: 75px;
-          left: 7px;
-        }
-
-        #root {
-          position: relative;
-        }
-
-        :host([is-panel]) #root {
-          height: 100%;
-        }
-      </style>
-
-      <ha-card id="card" header="[[_config.title]]">
-        <div id="root">
-          <div id="map"></div>
-          <paper-icon-button
-            on-click="_fitMap"
-            icon="hass:image-filter-center-focus"
-            title="Reset focus"
-          ></paper-icon-button>
-        </div>
-      </ha-card>
-
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_drawEntities",
-      },
-      _config: Object,
-      isPanel: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this._debouncedResizeListener = debounce(this._resetMap.bind(this), 100);
-  }
-
-  ready() {
-    super.ready();
-
-    if (!this._config || this.isPanel) {
-      return;
-    }
-
-    this.$.root.style.paddingTop = this._config.aspect_ratio || "100%";
-  }
-
-  setConfig(config) {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._configEntities = processConfigEntities(config.entities);
-    this._config = config;
-  }
-
-  getCardSize() {
-    let ar = this._config.aspect_ratio || "100%";
-    ar = ar.substr(0, ar.length - 1);
-    return 1 + Math.floor(ar / 25) || 3;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Observe changes to map size and invalidate to prevent broken rendering
-    // Uses ResizeObserver in Chrome, otherwise window resize event
-    if (typeof ResizeObserver === "function") {
-      this._resizeObserver = new ResizeObserver(() =>
-        this._debouncedResizeListener()
-      );
-      this._resizeObserver.observe(this.$.map);
-    } else {
-      window.addEventListener("resize", this._debouncedResizeListener);
-    }
-
-    this._map = setupLeafletMap(this.$.map);
-    this._drawEntities(this.hass);
-
-    setTimeout(() => {
-      this._resetMap();
-      this._fitMap();
-    }, 1);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    if (this._map) {
-      this._map.remove();
-    }
-
-    if (this._resizeObserver) {
-      this._resizeObserver.unobserve(this.$.map);
-    } else {
-      window.removeEventListener("resize", this._debouncedResizeListener);
-    }
-  }
-
-  _resetMap() {
-    if (!this._map) {
-      return;
-    }
-    this._map.invalidateSize();
-  }
-
-  _fitMap() {
-    const zoom = this._config.default_zoom;
-    if (this._mapItems.length === 0) {
-      this._map.setView(
-        new Leaflet.LatLng(
-          this.hass.config.latitude,
-          this.hass.config.longitude
-        ),
-        zoom || 14
-      );
-      return;
-    }
-
-    const bounds = new Leaflet.latLngBounds(
-      this._mapItems.map((item) => item.getLatLng())
-    );
-    this._map.fitBounds(bounds.pad(0.5));
-
-    if (zoom && this._map.getZoom() > zoom) {
-      this._map.setZoom(zoom);
-    }
-  }
-
-  _drawEntities(hass) {
-    const map = this._map;
-    if (!map) {
-      return;
-    }
-
-    if (this._mapItems) {
-      this._mapItems.forEach((marker) => marker.remove());
-    }
-    const mapItems = (this._mapItems = []);
-
-    this._configEntities.forEach((entity) => {
-      const entityId = entity.entity;
-      if (!(entityId in hass.states)) {
-        return;
-      }
-      const stateObj = hass.states[entityId];
-      const title = computeStateName(stateObj);
-      const {
-        latitude,
-        longitude,
-        passive,
-        icon,
-        radius,
-        entity_picture: entityPicture,
-        gps_accuracy: gpsAccuracy,
-      } = stateObj.attributes;
-
-      if (!(latitude && longitude)) {
-        return;
-      }
-
-      let markerIcon;
-      let iconHTML;
-      let el;
-
-      if (computeStateDomain(stateObj) === "zone") {
-        // DRAW ZONE
-        if (passive) return;
-
-        // create icon
-        if (icon) {
-          el = document.createElement("ha-icon");
-          el.setAttribute("icon", icon);
-          iconHTML = el.outerHTML;
-        } else {
-          iconHTML = title;
-        }
-
-        markerIcon = Leaflet.divIcon({
-          html: iconHTML,
-          iconSize: [24, 24],
-          className: "",
-        });
-
-        // create market with the icon
-        mapItems.push(
-          Leaflet.marker([latitude, longitude], {
-            icon: markerIcon,
-            interactive: false,
-            title: title,
-          }).addTo(map)
-        );
-
-        // create circle around it
-        mapItems.push(
-          Leaflet.circle([latitude, longitude], {
-            interactive: false,
-            color: "#FF9800",
-            radius: radius,
-          }).addTo(map)
-        );
-
-        return;
-      }
-
-      // DRAW ENTITY
-      // create icon
-      const entityName = title
-        .split(" ")
-        .map((part) => part[0])
-        .join("")
-        .substr(0, 3);
-
-      el = document.createElement("ha-entity-marker");
-      el.setAttribute("entity-id", entityId);
-      el.setAttribute("entity-name", entityName);
-      el.setAttribute("entity-picture", entityPicture || "");
-
-      /* Leaflet clones this element before adding it to the map. This messes up
-         our Polymer object and we can't pass data through. Thus we hack like this. */
-      markerIcon = Leaflet.divIcon({
-        html: el.outerHTML,
-        iconSize: [48, 48],
-        className: "",
-      });
-
-      // create market with the icon
-      mapItems.push(
-        Leaflet.marker([latitude, longitude], {
-          icon: markerIcon,
-          title: computeStateName(stateObj),
-        }).addTo(map)
-      );
-
-      // create circle around if entity has accuracy
-      if (gpsAccuracy) {
-        mapItems.push(
-          Leaflet.circle([latitude, longitude], {
-            interactive: false,
-            color: "#0288D1",
-            radius: gpsAccuracy,
-          }).addTo(map)
-        );
-      }
-    });
-  }
-}
-
-customElements.define("hui-map-card", HuiMapCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+import Leaflet from "leaflet";
+
+import "../../map/ha-entity-marker";
+
+import setupLeafletMap from "../../../common/dom/setup-leaflet-map";
+import processConfigEntities from "../common/process-config-entities";
+import computeStateDomain from "../../../common/entity/compute_state_domain";
+import computeStateName from "../../../common/entity/compute_state_name";
+import debounce from "../../../common/util/debounce";
+
+Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
+
+class HuiMapCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host([is-panel]) ha-card {
+          left: 0;
+          top: 0;
+          width: 100%;
+          /**
+           * In panel mode we want a full height map. Since parent #view
+           * only sets min-height, we need absolute positioning here
+           */
+          height: 100%;
+          position: absolute;
+        }
+
+        ha-card {
+          overflow: hidden;
+        }
+
+        #map {
+          z-index: 0;
+          border: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        paper-icon-button {
+          position: absolute;
+          top: 75px;
+          left: 7px;
+        }
+
+        #root {
+          position: relative;
+        }
+
+        :host([is-panel]) #root {
+          height: 100%;
+        }
+      </style>
+
+      <ha-card id="card" header="[[_config.title]]">
+        <div id="root">
+          <div id="map"></div>
+          <paper-icon-button
+            on-click="_fitMap"
+            icon="hass:image-filter-center-focus"
+            title="Reset focus"
+          ></paper-icon-button>
+        </div>
+      </ha-card>
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_drawEntities",
+      },
+      _config: Object,
+      isPanel: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this._debouncedResizeListener = debounce(this._resetMap.bind(this), 100);
+  }
+
+  ready() {
+    super.ready();
+
+    if (!this._config || this.isPanel) {
+      return;
+    }
+
+    this.$.root.style.paddingTop = this._config.aspect_ratio || "100%";
+  }
+
+  setConfig(config) {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._configEntities = processConfigEntities(config.entities);
+    this._config = config;
+  }
+
+  getCardSize() {
+    let ar = this._config.aspect_ratio || "100%";
+    ar = ar.substr(0, ar.length - 1);
+    return 1 + Math.floor(ar / 25) || 3;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Observe changes to map size and invalidate to prevent broken rendering
+    // Uses ResizeObserver in Chrome, otherwise window resize event
+    if (typeof ResizeObserver === "function") {
+      this._resizeObserver = new ResizeObserver(() =>
+        this._debouncedResizeListener()
+      );
+      this._resizeObserver.observe(this.$.map);
+    } else {
+      window.addEventListener("resize", this._debouncedResizeListener);
+    }
+
+    this._map = setupLeafletMap(this.$.map);
+    this._drawEntities(this.hass);
+
+    setTimeout(() => {
+      this._resetMap();
+      this._fitMap();
+    }, 1);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this._map) {
+      this._map.remove();
+    }
+
+    if (this._resizeObserver) {
+      this._resizeObserver.unobserve(this.$.map);
+    } else {
+      window.removeEventListener("resize", this._debouncedResizeListener);
+    }
+  }
+
+  _resetMap() {
+    if (!this._map) {
+      return;
+    }
+    this._map.invalidateSize();
+  }
+
+  _fitMap() {
+    const zoom = this._config.default_zoom;
+    if (this._mapItems.length === 0) {
+      this._map.setView(
+        new Leaflet.LatLng(
+          this.hass.config.latitude,
+          this.hass.config.longitude
+        ),
+        zoom || 14
+      );
+      return;
+    }
+
+    const bounds = new Leaflet.latLngBounds(
+      this._mapItems.map((item) => item.getLatLng())
+    );
+    this._map.fitBounds(bounds.pad(0.5));
+
+    if (zoom && this._map.getZoom() > zoom) {
+      this._map.setZoom(zoom);
+    }
+  }
+
+  _drawEntities(hass) {
+    const map = this._map;
+    if (!map) {
+      return;
+    }
+
+    if (this._mapItems) {
+      this._mapItems.forEach((marker) => marker.remove());
+    }
+    const mapItems = (this._mapItems = []);
+
+    this._configEntities.forEach((entity) => {
+      const entityId = entity.entity;
+      if (!(entityId in hass.states)) {
+        return;
+      }
+      const stateObj = hass.states[entityId];
+      const title = computeStateName(stateObj);
+      const {
+        latitude,
+        longitude,
+        passive,
+        icon,
+        radius,
+        entity_picture: entityPicture,
+        gps_accuracy: gpsAccuracy,
+      } = stateObj.attributes;
+
+      if (!(latitude && longitude)) {
+        return;
+      }
+
+      let markerIcon;
+      let iconHTML;
+      let el;
+
+      if (computeStateDomain(stateObj) === "zone") {
+        // DRAW ZONE
+        if (passive) return;
+
+        // create icon
+        if (icon) {
+          el = document.createElement("ha-icon");
+          el.setAttribute("icon", icon);
+          iconHTML = el.outerHTML;
+        } else {
+          iconHTML = title;
+        }
+
+        markerIcon = Leaflet.divIcon({
+          html: iconHTML,
+          iconSize: [24, 24],
+          className: "",
+        });
+
+        // create market with the icon
+        mapItems.push(
+          Leaflet.marker([latitude, longitude], {
+            icon: markerIcon,
+            interactive: false,
+            title: title,
+          }).addTo(map)
+        );
+
+        // create circle around it
+        mapItems.push(
+          Leaflet.circle([latitude, longitude], {
+            interactive: false,
+            color: "#FF9800",
+            radius: radius,
+          }).addTo(map)
+        );
+
+        return;
+      }
+
+      // DRAW ENTITY
+      // create icon
+      const entityName = title
+        .split(" ")
+        .map((part) => part[0])
+        .join("")
+        .substr(0, 3);
+
+      el = document.createElement("ha-entity-marker");
+      el.setAttribute("entity-id", entityId);
+      el.setAttribute("entity-name", entityName);
+      el.setAttribute("entity-picture", entityPicture || "");
+
+      /* Leaflet clones this element before adding it to the map. This messes up
+         our Polymer object and we can't pass data through. Thus we hack like this. */
+      markerIcon = Leaflet.divIcon({
+        html: el.outerHTML,
+        iconSize: [48, 48],
+        className: "",
+      });
+
+      // create market with the icon
+      mapItems.push(
+        Leaflet.marker([latitude, longitude], {
+          icon: markerIcon,
+          title: computeStateName(stateObj),
+        }).addTo(map)
+      );
+
+      // create circle around if entity has accuracy
+      if (gpsAccuracy) {
+        mapItems.push(
+          Leaflet.circle([latitude, longitude], {
+            interactive: false,
+            color: "#0288D1",
+            radius: gpsAccuracy,
+          }).addTo(map)
+        );
+      }
+    });
+  }
+}
+
+customElements.define("hui-map-card", HuiMapCard);
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 6c71fd904a..827133de50 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -1,93 +1,93 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { classMap } from "lit-html/directives/classMap";
-
-import "../../../components/ha-card";
-import "../../../components/ha-markdown";
-
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceConfig {
-  content: string;
-  title?: string;
-}
-
-export class HuiMarkdownCard extends LitElement implements LovelaceCard {
-  private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return this._config!.content.split("\n").length;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.content) {
-      throw new Error("Invalid Configuration: Content Required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card .header="${this._config.title}">
-        <ha-markdown
-          class="markdown ${classMap({
-            "no-header": !this._config.title,
-          })}"
-          .content="${this._config.content}"
-        ></ha-markdown>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          @apply --paper-font-body1;
-        }
-        ha-markdown {
-          display: block;
-          padding: 0 16px 16px;
-          -ms-user-select: initial;
-          -webkit-user-select: initial;
-          -moz-user-select: initial;
-        }
-        .markdown.no-header {
-          padding-top: 16px;
-        }
-        ha-markdown > *:first-child {
-          margin-top: 0;
-        }
-        ha-markdown > *:last-child {
-          margin-bottom: 0;
-        }
-        ha-markdown a {
-          color: var(--primary-color);
-        }
-        ha-markdown img {
-          max-width: 100%;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-markdown-card": HuiMarkdownCard;
-  }
-}
-
-customElements.define("hui-markdown-card", HuiMarkdownCard);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap";
+
+import "../../../components/ha-card";
+import "../../../components/ha-markdown";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceConfig {
+  content: string;
+  title?: string;
+}
+
+export class HuiMarkdownCard extends LitElement implements LovelaceCard {
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return this._config!.content.split("\n").length;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.content) {
+      throw new Error("Invalid Configuration: Content Required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this._config.title}">
+        <ha-markdown
+          class="markdown ${classMap({
+            "no-header": !this._config.title,
+          })}"
+          .content="${this._config.content}"
+        ></ha-markdown>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        .markdown.no-header {
+          padding-top: 16px;
+        }
+        ha-markdown > *:first-child {
+          margin-top: 0;
+        }
+        ha-markdown > *:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-markdown-card": HuiMarkdownCard;
+  }
+}
+
+customElements.define("hui-markdown-card", HuiMarkdownCard);
diff --git a/src/panels/lovelace/cards/hui-media-control-card.js b/src/panels/lovelace/cards/hui-media-control-card.js
index 96ad0e75c6..21dc0f2d02 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.js
+++ b/src/panels/lovelace/cards/hui-media-control-card.js
@@ -1,11 +1,11 @@
-import "../../../cards/ha-media_player-card";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card";
-
-class HuiMediaControlCard extends LegacyWrapperCard {
-  constructor() {
-    super("ha-media_player-card", "media_player");
-  }
-}
-
-customElements.define("hui-media-control-card", HuiMediaControlCard);
+import "../../../cards/ha-media_player-card";
+
+import LegacyWrapperCard from "./hui-legacy-wrapper-card";
+
+class HuiMediaControlCard extends LegacyWrapperCard {
+  constructor() {
+    super("ha-media_player-card", "media_player");
+  }
+}
+
+customElements.define("hui-media-control-card", HuiMediaControlCard);
diff --git a/src/panels/lovelace/cards/hui-picture-card.js b/src/panels/lovelace/cards/hui-picture-card.js
index 881f3a46df..44413027c0 100644
--- a/src/panels/lovelace/cards/hui-picture-card.js
+++ b/src/panels/lovelace/cards/hui-picture-card.js
@@ -1,67 +1,67 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-
-import NavigateMixin from "../../../mixins/navigate-mixin";
-
-/*
- * @appliesMixin NavigateMixin
- */
-class HuiPictureCard extends NavigateMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        ha-card[clickable] {
-          cursor: pointer;
-        }
-        img {
-          display: block;
-          width: 100%;
-        }
-      </style>
-
-      <ha-card on-click="_cardClicked" clickable$='[[_computeClickable(_config)]]'>
-        <img src='[[_config.image]]' />
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!config || !config.image) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._config = config;
-  }
-
-  _computeClickable(config) {
-    return config.navigation_path || config.service;
-  }
-
-  _cardClicked() {
-    if (this._config.navigation_path) {
-      this.navigate(this._config.navigation_path);
-    }
-    if (this._config.service) {
-      const [domain, service] = this._config.service.split(".", 2);
-      this.hass.callService(domain, service, this._config.service_data);
-    }
-  }
-}
-
-customElements.define("hui-picture-card", HuiPictureCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+
+import NavigateMixin from "../../../mixins/navigate-mixin";
+
+/*
+ * @appliesMixin NavigateMixin
+ */
+class HuiPictureCard extends NavigateMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        ha-card[clickable] {
+          cursor: pointer;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      </style>
+
+      <ha-card on-click="_cardClicked" clickable$='[[_computeClickable(_config)]]'>
+        <img src='[[_config.image]]' />
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config || !config.image) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = config;
+  }
+
+  _computeClickable(config) {
+    return config.navigation_path || config.service;
+  }
+
+  _cardClicked() {
+    if (this._config.navigation_path) {
+      this.navigate(this._config.navigation_path);
+    }
+    if (this._config.service) {
+      const [domain, service] = this._config.service.split(".", 2);
+      this.hass.callService(domain, service, this._config.service_data);
+    }
+  }
+}
+
+customElements.define("hui-picture-card", HuiPictureCard);
diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 2251f0bb27..d30a5b2c01 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -1,111 +1,111 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import createHuiElement from "../common/create-hui-element";
-
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { HomeAssistant } from "../../../types";
-import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
-
-interface Config extends LovelaceConfig {
-  title?: string;
-  image: string;
-  elements: LovelaceElementConfig[];
-}
-
-class HuiPictureElementsCard extends LitElement implements LovelaceCard {
-  private _config?: Config;
-  private _hass?: HomeAssistant;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    for (const el of this.shadowRoot!.querySelectorAll("#root > *")) {
-      const element = el as LovelaceElement;
-      element.hass = this._hass;
-    }
-  }
-
-  public getCardSize(): number {
-    return 4;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config) {
-      throw new Error("Invalid Configuration");
-    } else if (!config.image) {
-      throw new Error("Invalid Configuration: image required");
-    } else if (!Array.isArray(config.elements)) {
-      throw new Error("Invalid Configuration: elements required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-card .header="${this._config.title}">
-        <div id="root">
-          <img src="${this._config.image}">
-          ${this._config.elements.map((elementConfig: LovelaceElementConfig) =>
-            this._createHuiElement(elementConfig)
-          )}
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-card {
-          overflow: hidden;
-        }
-        #root {
-          position: relative;
-          overflow: hidden;
-        }
-        #root img {
-          display: block;
-          width: 100%;
-        }
-        .element {
-          position: absolute;
-          transform: translate(-50%, -50%);
-        }
-      </style>
-    `;
-  }
-
-  private _createHuiElement(
-    elementConfig: LovelaceElementConfig
-  ): LovelaceElement {
-    const element = createHuiElement(elementConfig) as LovelaceElement;
-    element.hass = this._hass;
-    element.classList.add("element");
-
-    Object.keys(elementConfig.style).forEach((prop) => {
-      element.style.setProperty(prop, elementConfig.style[prop]);
-    });
-
-    return element;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-picture-elements-card": HuiPictureElementsCard;
-  }
-}
-
-customElements.define("hui-picture-elements-card", HuiPictureElementsCard);
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import createHuiElement from "../common/create-hui-element";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
+
+interface Config extends LovelaceConfig {
+  title?: string;
+  image: string;
+  elements: LovelaceElementConfig[];
+}
+
+class HuiPictureElementsCard extends LitElement implements LovelaceCard {
+  private _config?: Config;
+  private _hass?: HomeAssistant;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    for (const el of this.shadowRoot!.querySelectorAll("#root > *")) {
+      const element = el as LovelaceElement;
+      element.hass = this._hass;
+    }
+  }
+
+  public getCardSize(): number {
+    return 4;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config) {
+      throw new Error("Invalid Configuration");
+    } else if (!config.image) {
+      throw new Error("Invalid Configuration: image required");
+    } else if (!Array.isArray(config.elements)) {
+      throw new Error("Invalid Configuration: elements required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-card .header="${this._config.title}">
+        <div id="root">
+          <img src="${this._config.image}">
+          ${this._config.elements.map((elementConfig: LovelaceElementConfig) =>
+            this._createHuiElement(elementConfig)
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        #root {
+          position: relative;
+          overflow: hidden;
+        }
+        #root img {
+          display: block;
+          width: 100%;
+        }
+        .element {
+          position: absolute;
+          transform: translate(-50%, -50%);
+        }
+      </style>
+    `;
+  }
+
+  private _createHuiElement(
+    elementConfig: LovelaceElementConfig
+  ): LovelaceElement {
+    const element = createHuiElement(elementConfig) as LovelaceElement;
+    element.hass = this._hass;
+    element.classList.add("element");
+
+    Object.keys(elementConfig.style).forEach((prop) => {
+      element.style.setProperty(prop, elementConfig.style[prop]);
+    });
+
+    return element;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-picture-elements-card": HuiPictureElementsCard;
+  }
+}
+
+customElements.define("hui-picture-elements-card", HuiPictureElementsCard);
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.js b/src/panels/lovelace/cards/hui-picture-entity-card.js
index 77898ab8cb..bea66fe1e7 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.js
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.js
@@ -1,201 +1,201 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-import "../components/hui-image";
-
-import computeDomain from "../../../common/entity/compute_domain";
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-import computeStateName from "../../../common/entity/compute_state_name";
-import toggleEntity from "../common/entity/toggle-entity";
-
-import EventsMixin from "../../../mixins/events-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import { longPressBind } from "../common/directives/long-press-directive";
-
-const UNAVAILABLE = "Unavailable";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin EventsMixin
- */
-class HuiPictureEntityCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          min-height: 75px;
-          overflow: hidden;
-          position: relative;
-        }
-        ha-card.canInteract {
-          cursor: pointer;
-        }
-        .footer {
-          @apply --paper-font-common-nowrap;
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(0, 0, 0, 0.3);
-          padding: 16px;
-          font-size: 16px;
-          line-height: 16px;
-          color: white;
-        }
-        .both {
-          display: flex;
-          justify-content: space-between;
-        }
-        .state {
-          text-align: right;
-        }
-      </style>
-
-      <ha-card id='card'>
-        <hui-image
-          hass="[[hass]]"
-          image="[[_config.image]]"
-          state-image="[[_config.state_image]]"
-          camera-image="[[_getCameraImage(_config)]]"
-          entity="[[_config.entity]]"
-          aspect-ratio="[[_config.aspect_ratio]]"
-        ></hui-image>
-        <template is="dom-if" if="[[_showNameAndState(_config)]]">
-          <div class="footer both">
-            <div>[[_name]]</div>
-            <div>[[_state]]</div>
-        </div>
-        </template>
-        <template is="dom-if" if="[[_showName(_config)]]">
-          <div class="footer">
-            [[_name]]
-          </div>
-        </template>
-        <template is="dom-if" if="[[_showState(_config)]]">
-          <div class="footer state">
-            [[_state]]
-          </div>
-        </template>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      _config: Object,
-      _name: String,
-      _state: String,
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._entityDomain = computeDomain(config.entity);
-    if (
-      this._entityDomain !== "camera" &&
-      (!config.image && !config.state_image && !config.camera_image)
-    ) {
-      throw new Error("No image source configured.");
-    }
-
-    this._config = config;
-  }
-
-  ready() {
-    super.ready();
-    const card = this.shadowRoot.querySelector("#card");
-    longPressBind(card);
-    card.addEventListener("ha-click", () => this._cardClicked(false));
-    card.addEventListener("ha-hold", () => this._cardClicked(true));
-  }
-
-  _hassChanged(hass) {
-    const config = this._config;
-    const entityId = config.entity;
-    const stateObj = hass.states[entityId];
-
-    // Nothing changed
-    if (
-      (!stateObj && this._oldState === UNAVAILABLE) ||
-      (stateObj && stateObj.state === this._oldState)
-    ) {
-      return;
-    }
-
-    let name;
-    let state;
-    let stateLabel;
-    let available;
-
-    if (stateObj) {
-      name = config.name || computeStateName(stateObj);
-      state = stateObj.state;
-      stateLabel = computeStateDisplay(this.localize, stateObj);
-      available = true;
-    } else {
-      name = config.name || entityId;
-      state = UNAVAILABLE;
-      stateLabel = this.localize("state.default.unavailable");
-      available = false;
-    }
-
-    this.setProperties({
-      _name: name,
-      _state: stateLabel,
-      _oldState: state,
-    });
-
-    this.$.card.classList.toggle("canInteract", available);
-  }
-
-  _showNameAndState(config) {
-    return config.show_name !== false && config.show_state !== false;
-  }
-
-  _showName(config) {
-    return config.show_name !== false && config.show_state === false;
-  }
-
-  _showState(config) {
-    return config.show_name === false && config.show_state !== false;
-  }
-
-  _cardClicked(hold) {
-    const config = this._config;
-    const entityId = config.entity;
-
-    if (!(entityId in this.hass.states)) return;
-
-    const action = hold ? config.hold_action : config.tap_action || "more-info";
-
-    switch (action) {
-      case "toggle":
-        toggleEntity(this.hass, entityId);
-        break;
-      case "more-info":
-        this.fire("hass-more-info", { entityId });
-        break;
-      default:
-    }
-  }
-
-  _getCameraImage(config) {
-    return this._entityDomain === "camera"
-      ? config.entity
-      : config.camera_image;
-  }
-}
-
-customElements.define("hui-picture-entity-card", HuiPictureEntityCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+import "../components/hui-image";
+
+import computeDomain from "../../../common/entity/compute_domain";
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import computeStateName from "../../../common/entity/compute_state_name";
+import toggleEntity from "../common/entity/toggle-entity";
+
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import { longPressBind } from "../common/directives/long-press-directive";
+
+const UNAVAILABLE = "Unavailable";
+
+/*
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
+ */
+class HuiPictureEntityCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          min-height: 75px;
+          overflow: hidden;
+          position: relative;
+        }
+        ha-card.canInteract {
+          cursor: pointer;
+        }
+        .footer {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 16px;
+          font-size: 16px;
+          line-height: 16px;
+          color: white;
+        }
+        .both {
+          display: flex;
+          justify-content: space-between;
+        }
+        .state {
+          text-align: right;
+        }
+      </style>
+
+      <ha-card id='card'>
+        <hui-image
+          hass="[[hass]]"
+          image="[[_config.image]]"
+          state-image="[[_config.state_image]]"
+          camera-image="[[_getCameraImage(_config)]]"
+          entity="[[_config.entity]]"
+          aspect-ratio="[[_config.aspect_ratio]]"
+        ></hui-image>
+        <template is="dom-if" if="[[_showNameAndState(_config)]]">
+          <div class="footer both">
+            <div>[[_name]]</div>
+            <div>[[_state]]</div>
+        </div>
+        </template>
+        <template is="dom-if" if="[[_showName(_config)]]">
+          <div class="footer">
+            [[_name]]
+          </div>
+        </template>
+        <template is="dom-if" if="[[_showState(_config)]]">
+          <div class="footer state">
+            [[_state]]
+          </div>
+        </template>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      _config: Object,
+      _name: String,
+      _state: String,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._entityDomain = computeDomain(config.entity);
+    if (
+      this._entityDomain !== "camera" &&
+      (!config.image && !config.state_image && !config.camera_image)
+    ) {
+      throw new Error("No image source configured.");
+    }
+
+    this._config = config;
+  }
+
+  ready() {
+    super.ready();
+    const card = this.shadowRoot.querySelector("#card");
+    longPressBind(card);
+    card.addEventListener("ha-click", () => this._cardClicked(false));
+    card.addEventListener("ha-hold", () => this._cardClicked(true));
+  }
+
+  _hassChanged(hass) {
+    const config = this._config;
+    const entityId = config.entity;
+    const stateObj = hass.states[entityId];
+
+    // Nothing changed
+    if (
+      (!stateObj && this._oldState === UNAVAILABLE) ||
+      (stateObj && stateObj.state === this._oldState)
+    ) {
+      return;
+    }
+
+    let name;
+    let state;
+    let stateLabel;
+    let available;
+
+    if (stateObj) {
+      name = config.name || computeStateName(stateObj);
+      state = stateObj.state;
+      stateLabel = computeStateDisplay(this.localize, stateObj);
+      available = true;
+    } else {
+      name = config.name || entityId;
+      state = UNAVAILABLE;
+      stateLabel = this.localize("state.default.unavailable");
+      available = false;
+    }
+
+    this.setProperties({
+      _name: name,
+      _state: stateLabel,
+      _oldState: state,
+    });
+
+    this.$.card.classList.toggle("canInteract", available);
+  }
+
+  _showNameAndState(config) {
+    return config.show_name !== false && config.show_state !== false;
+  }
+
+  _showName(config) {
+    return config.show_name !== false && config.show_state === false;
+  }
+
+  _showState(config) {
+    return config.show_name === false && config.show_state !== false;
+  }
+
+  _cardClicked(hold) {
+    const config = this._config;
+    const entityId = config.entity;
+
+    if (!(entityId in this.hass.states)) return;
+
+    const action = hold ? config.hold_action : config.tap_action || "more-info";
+
+    switch (action) {
+      case "toggle":
+        toggleEntity(this.hass, entityId);
+        break;
+      case "more-info":
+        this.fire("hass-more-info", { entityId });
+        break;
+      default:
+    }
+  }
+
+  _getCameraImage(config) {
+    return this._entityDomain === "camera"
+      ? config.entity
+      : config.camera_image;
+  }
+}
+
+customElements.define("hui-picture-entity-card", HuiPictureEntityCard);
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
index 0b7783a3c8..f9be3f6b5a 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.js
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.js
@@ -1,195 +1,195 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
-import "../components/hui-image";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-import computeStateName from "../../../common/entity/compute_state_name";
-import { DOMAINS_TOGGLE } from "../../../common/const";
-import stateIcon from "../../../common/entity/state_icon";
-import toggleEntity from "../common/entity/toggle-entity";
-import processConfigEntities from "../common/process-config-entities";
-
-import EventsMixin from "../../../mixins/events-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import computeDomain from "../../../common/entity/compute_domain";
-
-const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- * @appliesMixin NavigateMixin
- */
-class HuiPictureGlanceCard extends NavigateMixin(
-  LocalizeMixin(EventsMixin(PolymerElement))
-) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          position: relative;
-          min-height: 48px;
-          overflow: hidden;
-        }
-        hui-image.clickable {
-          cursor: pointer;
-        }
-        .box {
-          @apply --paper-font-common-nowrap;
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(0, 0, 0, 0.3);
-          padding: 4px 8px;
-          font-size: 16px;
-          line-height: 40px;
-          color: white;
-          display: flex;
-          justify-content: space-between;
-        }
-        .box .title {
-          font-weight: 500;
-          margin-left: 8px;
-        }
-        ha-icon {
-          cursor: pointer;
-          padding: 8px;
-          color: #A9A9A9;
-        }
-        ha-icon.state-on {
-          color: white;
-        }
-      </style>
-
-      <ha-card>
-        <hui-image
-          class$='[[_computeImageClass(_config)]]'
-          on-click='_handleImageClick'
-          hass="[[hass]]"
-          image="[[_config.image]]"
-          state-image="[[_config.state_image]]"
-          camera-image="[[_config.camera_image]]"
-          entity="[[_config.entity]]"
-          aspect-ratio="[[_config.aspect_ratio]]"
-        ></hui-image>
-        <div class="box">
-          <template is="dom-if" if="[[_config.title]]">
-            <div class="title">[[_config.title]]</div>
-          </template>
-          <div>
-            <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
-              <ha-icon
-                on-click="_openDialog"
-                class$="[[_computeButtonClass(item.entity, hass.states)]]"
-                icon="[[_computeIcon(item, hass.states)]]"
-                title="[[_computeTooltip(item.entity, hass.states)]]"
-              ></ha-icon>
-            </template>
-          </div>
-          <div>
-            <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
-              <ha-icon
-                on-click="_callService"
-                class$="[[_computeButtonClass(item.entity, hass.states)]]"
-                icon="[[_computeIcon(item, hass.states)]]"
-                title="[[_computeTooltip(item.entity, hass.states)]]"
-              ></ha-icon>
-            </template>
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _entitiesDialog: Array,
-      _entitiesToggle: Array,
-    };
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  setConfig(config) {
-    if (
-      !config ||
-      !config.entities ||
-      !Array.isArray(config.entities) ||
-      !(config.image || config.camera_image || config.state_image) ||
-      (config.state_image && !config.entity)
-    ) {
-      throw new Error("Invalid card configuration");
-    }
-    const entities = processConfigEntities(config.entities);
-    const dialog = [];
-    const toggle = [];
-
-    entities.forEach((item) => {
-      if (
-        config.force_dialog ||
-        !DOMAINS_TOGGLE.has(computeDomain(item.entity))
-      ) {
-        dialog.push(item);
-      } else {
-        toggle.push(item);
-      }
-    });
-    this.setProperties({
-      _config: config,
-      _entitiesDialog: dialog,
-      _entitiesToggle: toggle,
-    });
-  }
-
-  _computeVisible(collection, states) {
-    return collection.filter((el) => el.entity in states);
-  }
-
-  _computeIcon(item, states) {
-    return item.icon || stateIcon(states[item.entity]);
-  }
-
-  _computeButtonClass(entityId, states) {
-    return STATES_OFF.has(states[entityId].state) ? "" : "state-on";
-  }
-
-  _computeTooltip(entityId, states) {
-    return `${computeStateName(states[entityId])}: ${computeStateDisplay(
-      this.localize,
-      states[entityId]
-    )}`;
-  }
-
-  _computeImageClass(config) {
-    return config.navigation_path || config.camera_image ? "clickable" : "";
-  }
-
-  _openDialog(ev) {
-    this.fire("hass-more-info", { entityId: ev.model.item.entity });
-  }
-
-  _callService(ev) {
-    toggleEntity(this.hass, ev.model.item.entity);
-  }
-
-  _handleImageClick() {
-    if (this._config.navigation_path) {
-      this.navigate(this._config.navigation_path);
-      return;
-    }
-
-    if (this._config.camera_image) {
-      this.fire("hass-more-info", { entityId: this._config.camera_image });
-    }
-  }
-}
-customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import "../components/hui-image";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import computeStateName from "../../../common/entity/compute_state_name";
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import stateIcon from "../../../common/entity/state_icon";
+import toggleEntity from "../common/entity/toggle-entity";
+import processConfigEntities from "../common/process-config-entities";
+
+import EventsMixin from "../../../mixins/events-mixin";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+import NavigateMixin from "../../../mixins/navigate-mixin";
+import computeDomain from "../../../common/entity/compute_domain";
+
+const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
+
+/*
+ * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin NavigateMixin
+ */
+class HuiPictureGlanceCard extends NavigateMixin(
+  LocalizeMixin(EventsMixin(PolymerElement))
+) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          position: relative;
+          min-height: 48px;
+          overflow: hidden;
+        }
+        hui-image.clickable {
+          cursor: pointer;
+        }
+        .box {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 4px 8px;
+          font-size: 16px;
+          line-height: 40px;
+          color: white;
+          display: flex;
+          justify-content: space-between;
+        }
+        .box .title {
+          font-weight: 500;
+          margin-left: 8px;
+        }
+        ha-icon {
+          cursor: pointer;
+          padding: 8px;
+          color: #A9A9A9;
+        }
+        ha-icon.state-on {
+          color: white;
+        }
+      </style>
+
+      <ha-card>
+        <hui-image
+          class$='[[_computeImageClass(_config)]]'
+          on-click='_handleImageClick'
+          hass="[[hass]]"
+          image="[[_config.image]]"
+          state-image="[[_config.state_image]]"
+          camera-image="[[_config.camera_image]]"
+          entity="[[_config.entity]]"
+          aspect-ratio="[[_config.aspect_ratio]]"
+        ></hui-image>
+        <div class="box">
+          <template is="dom-if" if="[[_config.title]]">
+            <div class="title">[[_config.title]]</div>
+          </template>
+          <div>
+            <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
+              <ha-icon
+                on-click="_openDialog"
+                class$="[[_computeButtonClass(item.entity, hass.states)]]"
+                icon="[[_computeIcon(item, hass.states)]]"
+                title="[[_computeTooltip(item.entity, hass.states)]]"
+              ></ha-icon>
+            </template>
+          </div>
+          <div>
+            <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
+              <ha-icon
+                on-click="_callService"
+                class$="[[_computeButtonClass(item.entity, hass.states)]]"
+                icon="[[_computeIcon(item, hass.states)]]"
+                title="[[_computeTooltip(item.entity, hass.states)]]"
+              ></ha-icon>
+            </template>
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _entitiesDialog: Array,
+      _entitiesToggle: Array,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (
+      !config ||
+      !config.entities ||
+      !Array.isArray(config.entities) ||
+      !(config.image || config.camera_image || config.state_image) ||
+      (config.state_image && !config.entity)
+    ) {
+      throw new Error("Invalid card configuration");
+    }
+    const entities = processConfigEntities(config.entities);
+    const dialog = [];
+    const toggle = [];
+
+    entities.forEach((item) => {
+      if (
+        config.force_dialog ||
+        !DOMAINS_TOGGLE.has(computeDomain(item.entity))
+      ) {
+        dialog.push(item);
+      } else {
+        toggle.push(item);
+      }
+    });
+    this.setProperties({
+      _config: config,
+      _entitiesDialog: dialog,
+      _entitiesToggle: toggle,
+    });
+  }
+
+  _computeVisible(collection, states) {
+    return collection.filter((el) => el.entity in states);
+  }
+
+  _computeIcon(item, states) {
+    return item.icon || stateIcon(states[item.entity]);
+  }
+
+  _computeButtonClass(entityId, states) {
+    return STATES_OFF.has(states[entityId].state) ? "" : "state-on";
+  }
+
+  _computeTooltip(entityId, states) {
+    return `${computeStateName(states[entityId])}: ${computeStateDisplay(
+      this.localize,
+      states[entityId]
+    )}`;
+  }
+
+  _computeImageClass(config) {
+    return config.navigation_path || config.camera_image ? "clickable" : "";
+  }
+
+  _openDialog(ev) {
+    this.fire("hass-more-info", { entityId: ev.model.item.entity });
+  }
+
+  _callService(ev) {
+    toggleEntity(this.hass, ev.model.item.entity);
+  }
+
+  _handleImageClick() {
+    if (this._config.navigation_path) {
+      this.navigate(this._config.navigation_path);
+      return;
+    }
+
+    if (this._config.camera_image) {
+      this.fire("hass-more-info", { entityId: this._config.camera_image });
+    }
+  }
+}
+customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.js b/src/panels/lovelace/cards/hui-plant-status-card.js
index 500bc61df9..ce88f4e3ac 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.js
+++ b/src/panels/lovelace/cards/hui-plant-status-card.js
@@ -1,11 +1,11 @@
-import "../../../cards/ha-plant-card";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card";
-
-class HuiPlantStatusCard extends LegacyWrapperCard {
-  constructor() {
-    super("ha-plant-card", "plant");
-  }
-}
-
-customElements.define("hui-plant-status-card", HuiPlantStatusCard);
+import "../../../cards/ha-plant-card";
+
+import LegacyWrapperCard from "./hui-legacy-wrapper-card";
+
+class HuiPlantStatusCard extends LegacyWrapperCard {
+  constructor() {
+    super("ha-plant-card", "plant");
+  }
+}
+
+customElements.define("hui-plant-status-card", HuiPlantStatusCard);
diff --git a/src/panels/lovelace/cards/hui-sensor-card.js b/src/panels/lovelace/cards/hui-sensor-card.js
index ea25043f30..f0fc56a771 100644
--- a/src/panels/lovelace/cards/hui-sensor-card.js
+++ b/src/panels/lovelace/cards/hui-sensor-card.js
@@ -1,292 +1,292 @@
-import { LitElement, html, svg } from "@polymer/lit-element";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
-
-import computeStateName from "../../../common/entity/compute_state_name";
-import stateIcon from "../../../common/entity/state_icon";
-
-import EventsMixin from "../../../mixins/events-mixin";
-
-class HuiSensorCard extends EventsMixin(LitElement) {
-  set hass(hass) {
-    this._hass = hass;
-    const entity = hass.states[this._config.entity];
-    if (entity && this._entity !== entity) {
-      this._entity = entity;
-      if (
-        this._config.graph !== "none" &&
-        entity.attributes.unit_of_measurement
-      ) {
-        this._getHistory();
-      }
-    }
-  }
-
-  static get properties() {
-    return {
-      _hass: {},
-      _config: {},
-      _entity: {},
-      _line: String,
-    };
-  }
-
-  setConfig(config) {
-    if (!config.entity || config.entity.split(".")[0] !== "sensor") {
-      throw new Error("Specify an entity from within the sensor domain.");
-    }
-
-    const cardConfig = {
-      icon: false,
-      hours_to_show: 24,
-      accuracy: 10,
-      height: 100,
-      line_width: 5,
-      line_color: "var(--accent-color)",
-      ...config,
-    };
-    cardConfig.hours_to_show = Number(cardConfig.hours_to_show);
-    cardConfig.accuracy = Number(cardConfig.accuracy);
-    cardConfig.height = Number(cardConfig.height);
-    cardConfig.line_width = Number(cardConfig.line_width);
-
-    this._config = cardConfig;
-  }
-
-  shouldUpdate(changedProps) {
-    const change = changedProps.has("_entity") || changedProps.has("_line");
-    return change;
-  }
-
-  render({ _config, _entity, _line } = this) {
-    return html`
-      ${this._style()}
-      <ha-card @click=${this._handleClick}>
-        <div class='flex'>
-          <div class='icon'>
-            <ha-icon .icon=${this._computeIcon(_entity)}></ha-icon>
-          </div>
-          <div class='header'>
-            <span class='name'>${this._computeName(_entity)}</span>
-          </div>
-        </div>
-        <div class='flex info'>
-          <span id='value'>${_entity.state}</span>
-          <span id='measurement'>${this._computeUom(_entity)}</span>
-        </div>
-        <div class='graph'>
-          <div>
-            ${
-              _line
-                ? svg`
-            <svg width='100%' height='100%' viewBox='0 0 500 ${_config.height}'>
-              <path d=${_line} fill='none' stroke=${_config.line_color}
-                stroke-width=${_config.line_width}
-                stroke-linecap='round' stroke-linejoin='round' />
-            </svg>`
-                : ""
-            }
-          </div>
-        </div>
-      </ha-card>`;
-  }
-
-  _handleClick() {
-    this.fire("hass-more-info", { entityId: this._config.entity });
-  }
-
-  _computeIcon(item) {
-    return this._config.icon || stateIcon(item);
-  }
-
-  _computeName(item) {
-    return this._config.name || computeStateName(item);
-  }
-
-  _computeUom(item) {
-    return this._config.unit || item.attributes.unit_of_measurement;
-  }
-
-  _getGraph(items, width, height) {
-    const values = this._getValueArr(items);
-    const coords = this._calcCoordinates(values, width, height);
-    return this._getPath(coords);
-  }
-
-  _getValueArr(items) {
-    return items.map((item) => Number(item.state) || 0);
-  }
-
-  _calcCoordinates(values, width, height) {
-    const margin = this._config.line_width;
-    width -= margin * 2;
-    height -= margin * 2;
-    const min = Math.floor(Math.min.apply(null, values) * 0.95);
-    const max = Math.ceil(Math.max.apply(null, values) * 1.05);
-
-    if (values.length === 1) values.push(values[0]);
-
-    const yRatio = (max - min) / height;
-    const xRatio = width / (values.length - 1);
-
-    return values.map((value, i) => {
-      const y = height - (value - min) / yRatio || 0;
-      const x = xRatio * i + margin;
-      return [x, y];
-    });
-  }
-
-  _getPath(points) {
-    const SPACE = " ";
-    let next;
-    let Z;
-    const X = 0;
-    const Y = 1;
-    let path = "";
-    let point = points[0];
-
-    path += "M" + point[X] + "," + point[Y];
-    const first = point;
-
-    for (let i = 0; i < points.length; i++) {
-      next = points[i];
-      Z = this._midPoint(point[X], point[Y], next[X], next[Y]);
-      path += SPACE + Z[X] + "," + Z[Y];
-      path += "Q" + Math.floor(next[X]) + "," + next[Y];
-      point = next;
-    }
-
-    const second = points[1];
-    Z = this._midPoint(first[X], first[Y], second[X], second[Y]);
-    path += SPACE + Math.floor(next[X]) + "." + points[points.length - 1];
-    return path;
-  }
-
-  _midPoint(Ax, Ay, Bx, By) {
-    const Zx = (Ax - Bx) / 2 + Bx;
-    const Zy = (Ay - By) / 2 + By;
-    return [Zx, Zy];
-  }
-
-  async _getHistory() {
-    const endTime = new Date();
-    const startTime = new Date();
-    startTime.setHours(endTime.getHours() - this._config.hours_to_show);
-    const stateHistory = await this._fetchRecent(
-      this._config.entity,
-      startTime,
-      endTime
-    );
-    const history = stateHistory[0];
-    const valArray = [history[history.length - 1]];
-
-    let pos = history.length - 1;
-    const accuracy = this._config.accuracy <= pos ? this._config.accuracy : pos;
-    let increment = Math.ceil(history.length / accuracy);
-    increment = increment <= 0 ? 1 : increment;
-    for (let i = accuracy; i >= 2; i--) {
-      pos -= increment;
-      valArray.unshift(pos >= 0 ? history[pos] : history[0]);
-    }
-    this._line = this._getGraph(valArray, 500, this._config.height);
-  }
-
-  async _fetchRecent(entityId, startTime, endTime) {
-    let url = "history/period";
-    if (startTime) url += "/" + startTime.toISOString();
-    url += "?filter_entity_id=" + entityId;
-    if (endTime) url += "&end_time=" + endTime.toISOString();
-
-    return await this._hass.callApi("GET", url);
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  _style() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-        }
-        ha-card {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          padding: 16px;
-          position: relative;
-          cursor: pointer;
-        }
-        .flex {
-          display: flex;
-        }
-        .header {
-          align-items: center;
-          display: flex;
-          min-width: 0;
-          opacity: .8;
-          position: relative;
-        }
-        .name {
-          display: block;
-          display: -webkit-box;
-          font-size: 1.2rem;
-          font-weight: 500;
-          max-height: 1.4rem;
-          margin-top: 2px;
-          opacity: .8;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          word-wrap: break-word;
-          word-break: break-all;
-        }
-        .icon {
-          color: var(--paper-item-icon-color, #44739e);
-          display: inline-block;
-          flex: 0 0 40px;
-          line-height: 40px;
-          position: relative;
-          text-align: center;
-          width: 40px;
-        }
-        .info {
-          flex-wrap: wrap;
-          margin: 16px 0 16px 8px;
-        }
-        #value {
-          display: inline-block;
-          font-size: 2rem;
-          font-weight: 400;
-          line-height: 1em;
-          margin-right: 4px;
-        }
-        #measurement {
-          align-self: flex-end;
-          display: inline-block;
-          font-size: 1.3rem;
-          line-height: 1.2em;
-          margin-top: .1em;
-          opacity: .6;
-          vertical-align: bottom;
-        }
-        .graph {
-          align-self: flex-end;
-          margin: auto;
-          margin-bottom: 0px;
-          position: relative;
-          width: 100%;
-        }
-        .graph > div {
-          align-self: flex-end;
-          margin: auto 8px;
-        }
-      </style>`;
-  }
-}
-
-customElements.define("hui-sensor-card", HuiSensorCard);
+import { LitElement, html, svg } from "@polymer/lit-element";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import stateIcon from "../../../common/entity/state_icon";
+
+import EventsMixin from "../../../mixins/events-mixin";
+
+class HuiSensorCard extends EventsMixin(LitElement) {
+  set hass(hass) {
+    this._hass = hass;
+    const entity = hass.states[this._config.entity];
+    if (entity && this._entity !== entity) {
+      this._entity = entity;
+      if (
+        this._config.graph !== "none" &&
+        entity.attributes.unit_of_measurement
+      ) {
+        this._getHistory();
+      }
+    }
+  }
+
+  static get properties() {
+    return {
+      _hass: {},
+      _config: {},
+      _entity: {},
+      _line: String,
+    };
+  }
+
+  setConfig(config) {
+    if (!config.entity || config.entity.split(".")[0] !== "sensor") {
+      throw new Error("Specify an entity from within the sensor domain.");
+    }
+
+    const cardConfig = {
+      icon: false,
+      hours_to_show: 24,
+      accuracy: 10,
+      height: 100,
+      line_width: 5,
+      line_color: "var(--accent-color)",
+      ...config,
+    };
+    cardConfig.hours_to_show = Number(cardConfig.hours_to_show);
+    cardConfig.accuracy = Number(cardConfig.accuracy);
+    cardConfig.height = Number(cardConfig.height);
+    cardConfig.line_width = Number(cardConfig.line_width);
+
+    this._config = cardConfig;
+  }
+
+  shouldUpdate(changedProps) {
+    const change = changedProps.has("_entity") || changedProps.has("_line");
+    return change;
+  }
+
+  render({ _config, _entity, _line } = this) {
+    return html`
+      ${this._style()}
+      <ha-card @click=${this._handleClick}>
+        <div class='flex'>
+          <div class='icon'>
+            <ha-icon .icon=${this._computeIcon(_entity)}></ha-icon>
+          </div>
+          <div class='header'>
+            <span class='name'>${this._computeName(_entity)}</span>
+          </div>
+        </div>
+        <div class='flex info'>
+          <span id='value'>${_entity.state}</span>
+          <span id='measurement'>${this._computeUom(_entity)}</span>
+        </div>
+        <div class='graph'>
+          <div>
+            ${
+              _line
+                ? svg`
+            <svg width='100%' height='100%' viewBox='0 0 500 ${_config.height}'>
+              <path d=${_line} fill='none' stroke=${_config.line_color}
+                stroke-width=${_config.line_width}
+                stroke-linecap='round' stroke-linejoin='round' />
+            </svg>`
+                : ""
+            }
+          </div>
+        </div>
+      </ha-card>`;
+  }
+
+  _handleClick() {
+    this.fire("hass-more-info", { entityId: this._config.entity });
+  }
+
+  _computeIcon(item) {
+    return this._config.icon || stateIcon(item);
+  }
+
+  _computeName(item) {
+    return this._config.name || computeStateName(item);
+  }
+
+  _computeUom(item) {
+    return this._config.unit || item.attributes.unit_of_measurement;
+  }
+
+  _getGraph(items, width, height) {
+    const values = this._getValueArr(items);
+    const coords = this._calcCoordinates(values, width, height);
+    return this._getPath(coords);
+  }
+
+  _getValueArr(items) {
+    return items.map((item) => Number(item.state) || 0);
+  }
+
+  _calcCoordinates(values, width, height) {
+    const margin = this._config.line_width;
+    width -= margin * 2;
+    height -= margin * 2;
+    const min = Math.floor(Math.min.apply(null, values) * 0.95);
+    const max = Math.ceil(Math.max.apply(null, values) * 1.05);
+
+    if (values.length === 1) values.push(values[0]);
+
+    const yRatio = (max - min) / height;
+    const xRatio = width / (values.length - 1);
+
+    return values.map((value, i) => {
+      const y = height - (value - min) / yRatio || 0;
+      const x = xRatio * i + margin;
+      return [x, y];
+    });
+  }
+
+  _getPath(points) {
+    const SPACE = " ";
+    let next;
+    let Z;
+    const X = 0;
+    const Y = 1;
+    let path = "";
+    let point = points[0];
+
+    path += "M" + point[X] + "," + point[Y];
+    const first = point;
+
+    for (let i = 0; i < points.length; i++) {
+      next = points[i];
+      Z = this._midPoint(point[X], point[Y], next[X], next[Y]);
+      path += SPACE + Z[X] + "," + Z[Y];
+      path += "Q" + Math.floor(next[X]) + "," + next[Y];
+      point = next;
+    }
+
+    const second = points[1];
+    Z = this._midPoint(first[X], first[Y], second[X], second[Y]);
+    path += SPACE + Math.floor(next[X]) + "." + points[points.length - 1];
+    return path;
+  }
+
+  _midPoint(Ax, Ay, Bx, By) {
+    const Zx = (Ax - Bx) / 2 + Bx;
+    const Zy = (Ay - By) / 2 + By;
+    return [Zx, Zy];
+  }
+
+  async _getHistory() {
+    const endTime = new Date();
+    const startTime = new Date();
+    startTime.setHours(endTime.getHours() - this._config.hours_to_show);
+    const stateHistory = await this._fetchRecent(
+      this._config.entity,
+      startTime,
+      endTime
+    );
+    const history = stateHistory[0];
+    const valArray = [history[history.length - 1]];
+
+    let pos = history.length - 1;
+    const accuracy = this._config.accuracy <= pos ? this._config.accuracy : pos;
+    let increment = Math.ceil(history.length / accuracy);
+    increment = increment <= 0 ? 1 : increment;
+    for (let i = accuracy; i >= 2; i--) {
+      pos -= increment;
+      valArray.unshift(pos >= 0 ? history[pos] : history[0]);
+    }
+    this._line = this._getGraph(valArray, 500, this._config.height);
+  }
+
+  async _fetchRecent(entityId, startTime, endTime) {
+    let url = "history/period";
+    if (startTime) url += "/" + startTime.toISOString();
+    url += "?filter_entity_id=" + entityId;
+    if (endTime) url += "&end_time=" + endTime.toISOString();
+
+    return await this._hass.callApi("GET", url);
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  _style() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
+        ha-card {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          padding: 16px;
+          position: relative;
+          cursor: pointer;
+        }
+        .flex {
+          display: flex;
+        }
+        .header {
+          align-items: center;
+          display: flex;
+          min-width: 0;
+          opacity: .8;
+          position: relative;
+        }
+        .name {
+          display: block;
+          display: -webkit-box;
+          font-size: 1.2rem;
+          font-weight: 500;
+          max-height: 1.4rem;
+          margin-top: 2px;
+          opacity: .8;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+          word-break: break-all;
+        }
+        .icon {
+          color: var(--paper-item-icon-color, #44739e);
+          display: inline-block;
+          flex: 0 0 40px;
+          line-height: 40px;
+          position: relative;
+          text-align: center;
+          width: 40px;
+        }
+        .info {
+          flex-wrap: wrap;
+          margin: 16px 0 16px 8px;
+        }
+        #value {
+          display: inline-block;
+          font-size: 2rem;
+          font-weight: 400;
+          line-height: 1em;
+          margin-right: 4px;
+        }
+        #measurement {
+          align-self: flex-end;
+          display: inline-block;
+          font-size: 1.3rem;
+          line-height: 1.2em;
+          margin-top: .1em;
+          opacity: .6;
+          vertical-align: bottom;
+        }
+        .graph {
+          align-self: flex-end;
+          margin: auto;
+          margin-bottom: 0px;
+          position: relative;
+          width: 100%;
+        }
+        .graph > div {
+          align-self: flex-end;
+          margin: auto 8px;
+        }
+      </style>`;
+  }
+}
+
+customElements.define("hui-sensor-card", HuiSensorCard);
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 709bf441d2..7193b99792 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -1,66 +1,66 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import createCardElement from "../common/create-card-element";
-
-import { LovelaceCard, LovelaceConfig } from "../types";
-import { HomeAssistant } from "../../../types";
-
-interface Config extends LovelaceConfig {
-  cards: LovelaceConfig[];
-}
-
-export abstract class HuiStackCard extends LitElement implements LovelaceCard {
-  protected _cards?: LovelaceCard[];
-  private _config?: Config;
-  private _hass?: HomeAssistant;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-
-    if (!this._cards) {
-      return;
-    }
-
-    for (const element of this._cards) {
-      element.hass = this._hass;
-    }
-  }
-
-  public abstract getCardSize(): number;
-
-  public setConfig(config: Config): void {
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      throw new Error("Card config incorrect");
-    }
-    this._config = config;
-    this._cards = config.cards.map((card) => {
-      const element = createCardElement(card) as LovelaceCard;
-      if (this._hass) {
-        element.hass = this._hass;
-      }
-      return element;
-    });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <div id="root">
-        ${this._cards}
-      </div>
-    `;
-  }
-
-  protected abstract renderStyle(): TemplateResult;
-}
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import createCardElement from "../common/create-card-element";
+
+import { LovelaceCard, LovelaceConfig } from "../types";
+import { HomeAssistant } from "../../../types";
+
+interface Config extends LovelaceConfig {
+  cards: LovelaceConfig[];
+}
+
+export abstract class HuiStackCard extends LitElement implements LovelaceCard {
+  protected _cards?: LovelaceCard[];
+  private _config?: Config;
+  private _hass?: HomeAssistant;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+
+    if (!this._cards) {
+      return;
+    }
+
+    for (const element of this._cards) {
+      element.hass = this._hass;
+    }
+  }
+
+  public abstract getCardSize(): number;
+
+  public setConfig(config: Config): void {
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      throw new Error("Card config incorrect");
+    }
+    this._config = config;
+    this._cards = config.cards.map((card) => {
+      const element = createCardElement(card) as LovelaceCard;
+      if (this._hass) {
+        element.hass = this._hass;
+      }
+      return element;
+    });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div id="root">
+        ${this._cards}
+      </div>
+    `;
+  }
+
+  protected abstract renderStyle(): TemplateResult;
+}
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 708a7bcb0a..ef5ca1079f 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -1,390 +1,390 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { classMap } from "lit-html/directives/classMap";
-import { jQuery } from "../../../resources/jquery";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
-
-import { HomeAssistant, ClimateEntity } from "../../../types";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard, LovelaceConfig } from "../types";
-import computeStateName from "../../../common/entity/compute_state_name";
-import { TemplateResult } from "lit-html";
-
-const thermostatConfig = {
-  radius: 150,
-  step: 1,
-  circleShape: "pie",
-  startAngle: 315,
-  width: 5,
-  lineCap: "round",
-  handleSize: "+10",
-  showTooltip: false,
-};
-
-const modeIcons = {
-  auto: "hass:autorenew",
-  heat: "hass:fire",
-  cool: "hass:snowflake",
-  off: "hass:power",
-};
-
-interface Config extends LovelaceConfig {
-  entity: string;
-}
-
-function formatTemp(temps: string[]): string {
-  return temps.filter(Boolean).join("-");
-}
-
-export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public getCardSize(): number {
-    return 4;
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.entity || config.entity.split(".")[0] !== "climate") {
-      throw new Error("Specify an entity from within the climate domain.");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
-    const broadCard = this.clientWidth > 390;
-    const mode = modeIcons[stateObj.attributes.operation_mode || ""]
-      ? stateObj.attributes.operation_mode!
-      : "unknown-mode";
-    return html`
-      ${this.renderStyle()}
-      <ha-card
-        class="${classMap({
-          [mode]: true,
-          large: broadCard,
-          small: !broadCard,
-        })}">
-        <div id="root">
-          <div id="thermostat"></div>
-          <div id="tooltip">
-            <div class="title">${computeStateName(stateObj)}</div>
-            <div class="current-temperature">
-              <span class="current-temperature-text">${
-                stateObj.attributes.current_temperature
-              }
-                <span class="uom">${
-                  this.hass.config.unit_system.temperature
-                }</span>
-              </span>
-            </div>
-            <div class="climate-info">
-            <div id="set-temperature"></div>
-            <div class="current-mode">${this.localize(
-              `state.climate.${stateObj.state}`
-            )}</div>
-            <div class="modes">
-              ${(stateObj.attributes.operation_list || []).map((modeItem) =>
-                this._renderIcon(modeItem, mode)
-              )}
-            </div>
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    if (changedProps.has("_config")) {
-      return true;
-    }
-    return true;
-  }
-
-  protected firstUpdated(): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
-
-    const _sliderType =
-      stateObj.attributes.target_temp_low &&
-      stateObj.attributes.target_temp_high
-        ? "range"
-        : "min-range";
-
-    jQuery("#thermostat", this.shadowRoot).roundSlider({
-      ...thermostatConfig,
-      radius: this.clientWidth / 3,
-      min: stateObj.attributes.min_temp,
-      max: stateObj.attributes.max_temp,
-      sliderType: _sliderType,
-      change: (value) => this._setTemperature(value),
-      drag: (value) => this._dragEvent(value),
-    });
-  }
-
-  protected updated(): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
-
-    let sliderValue;
-    let uiValue;
-
-    if (
-      stateObj.attributes.target_temp_low &&
-      stateObj.attributes.target_temp_high
-    ) {
-      sliderValue = `${stateObj.attributes.target_temp_low}, ${
-        stateObj.attributes.target_temp_high
-      }`;
-      uiValue = formatTemp([
-        String(stateObj.attributes.target_temp_low),
-        String(stateObj.attributes.target_temp_high),
-      ]);
-    } else {
-      sliderValue = uiValue = stateObj.attributes.temperature;
-    }
-
-    jQuery("#thermostat", this.shadowRoot).roundSlider({
-      value: sliderValue,
-    });
-    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-    ${roundSliderStyle}
-    <style>
-      :host {
-        display: block;
-      }
-      ha-card {
-        overflow: hidden;
-        --rail-border-color: transparent;
-        --auto-color: green;
-        --cool-color: #2b9af9;
-        --heat-color: #FF8100;
-        --off-color: #8a8a8a;
-        --unknown-color: #bac;
-      }
-      #root {
-        position: relative;
-        overflow: hidden;
-      }
-      .auto {
-        --mode-color: var(--auto-color);
-      }
-      .cool {
-        --mode-color: var(--cool-color);
-      }
-      .heat {
-        --mode-color: var(--heat-color);
-      }
-      .off {
-        --mode-color: var(--off-color);
-      }
-      .unknown-mode {
-        --mode-color: var(--unknown-color);
-      }
-      .no-title {
-        --title-margin-top: 33% !important;
-      }
-      .large {
-        --thermostat-padding-top: 25px;
-        --thermostat-margin-bottom: 25px;
-        --title-font-size: 28px;
-        --title-margin-top: 20%;
-        --climate-info-margin-top: 17%;
-        --modes-margin-top: 2%;
-        --set-temperature-font-size: 25px;
-        --current-temperature-font-size: 71px;
-        --current-temperature-margin-top: 10%;
-        --current-temperature-text-padding-left: 15px;
-        --uom-font-size: 20px;
-        --uom-margin-left: -18px;
-        --current-mode-font-size: 18px;
-        --set-temperature-padding-bottom: 5px;
-      }
-      .small {
-        --thermostat-padding-top: 15px;
-        --thermostat-margin-bottom: 15px;
-        --title-font-size: 18px;
-        --title-margin-top: 20%;
-        --climate-info-margin-top: 7.5%;
-        --modes-margin-top: 1%;
-        --set-temperature-font-size: 16px;
-        --current-temperature-font-size: 25px;
-        --current-temperature-margin-top: 5%;
-        --current-temperature-text-padding-left: 7px;
-        --uom-font-size: 12px;
-        --uom-margin-left: -5px;
-        --current-mode-font-size: 14px;
-        --set-temperature-padding-bottom: 0px;
-      }
-      #thermostat {
-        margin: 0 auto var(--thermostat-margin-bottom);
-        padding-top: var(--thermostat-padding-top);
-      }
-      #thermostat .rs-range-color  {
-        background-color: var(--mode-color, var(--disabled-text-color));
-      }
-      #thermostat .rs-path-color  {
-          background-color: var(--disabled-text-color);
-      }
-      #thermostat .rs-handle  {
-          background-color: var(--paper-card-background-color, white);
-          padding: 7px;
-          border: 2px solid var(--disabled-text-color);
-      }
-      #thermostat .rs-handle.rs-focus  {
-          border-color: var(--mode-color, var(--disabled-text-color));
-      }
-      #thermostat .rs-handle:after  {
-          border-color: var(--mode-color, var(--disabled-text-color));
-          background-color: var(--mode-color, var(--disabled-text-color));
-      }
-      #thermostat .rs-border  {
-        border-color: var(--rail-border-color);
-      }
-      #thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
-        z-index: 20 !important;
-      }
-      #thermostat .rs-inner.rs-bg-color.rs-border,
-      #thermostat .rs-overlay.rs-transition.rs-bg-color {
-        background-color: var(--paper-card-background-color, white);
-      }
-      #tooltip {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 100%;
-        text-align: center;
-        z-index: 15;
-        color: var(--primary-text-color);
-      }
-      #set-temperature {
-        font-size: var(--set-temperature-font-size);
-        padding-bottom: var(--set-temperature-padding-bottom);
-      }
-      .title {
-        font-size: var(--title-font-size);
-        margin-top: var(--title-margin-top);
-      }
-      .climate-info {
-        margin-top: var(--climate-info-margin-top);
-      }
-      .current-mode {
-        font-size: var(--current-mode-font-size);
-        color: var(--secondary-text-color);
-      }
-      .modes {
-        margin-top: var(--modes-margin-top);
-      }
-      .modes ha-icon {
-        color: var(--disabled-text-color);
-        cursor: pointer;
-        display: inline-block;
-        margin: 0 10px;
-      }
-      .modes ha-icon.selected-icon {
-        color: var(--mode-color);
-      }
-      .current-temperature {
-        margin-top: var(--current-temperature-margin-top);
-        font-size: var(--current-temperature-font-size);
-      }
-      .current-temperature-text {
-        padding-left: var(--current-temperature-text-padding-left);
-      }
-      .uom {
-        font-size: var(--uom-font-size);
-        vertical-align: top;
-        margin-left: var(--uom-margin-left);
-      }
-    </style>
-    `;
-  }
-
-  private _dragEvent(e): void {
-    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
-      String(e.value).split(",")
-    );
-  }
-
-  private _setTemperature(e): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
-    if (
-      stateObj.attributes.target_temp_low &&
-      stateObj.attributes.target_temp_high
-    ) {
-      if (e.handle.index === 1) {
-        this.hass!.callService("climate", "set_temperature", {
-          entity_id: this._config!.entity,
-          target_temp_low: e.handle.value,
-          target_temp_high: stateObj.attributes.target_temp_high,
-        });
-      } else {
-        this.hass!.callService("climate", "set_temperature", {
-          entity_id: this._config!.entity,
-          target_temp_low: stateObj.attributes.target_temp_low,
-          target_temp_high: e.handle.value,
-        });
-      }
-    } else {
-      this.hass!.callService("climate", "set_temperature", {
-        entity_id: this._config!.entity,
-        temperature: e.value,
-      });
-    }
-  }
-
-  private _renderIcon(mode: string, currentMode: string): TemplateResult {
-    if (!modeIcons[mode]) {
-      return html``;
-    }
-    return html`<ha-icon
-      class="${classMap({ "selected-icon": currentMode === mode })}"
-      .mode="${mode}"
-      .icon="${modeIcons[mode]}"
-      @click="${this._handleModeClick}"
-    ></ha-icon>`;
-  }
-
-  private _handleModeClick(e: MouseEvent): void {
-    this.hass!.callService("climate", "set_operation_mode", {
-      entity_id: this._config!.entity,
-      operation_mode: (e.currentTarget as any).mode,
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-thermostat-card": HuiThermostatCard;
-  }
-}
-
-customElements.define("hui-thermostat-card", HuiThermostatCard);
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap";
+import { jQuery } from "../../../resources/jquery";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import { roundSliderStyle } from "../../../resources/jquery.roundslider";
+
+import { HomeAssistant, ClimateEntity } from "../../../types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard, LovelaceConfig } from "../types";
+import computeStateName from "../../../common/entity/compute_state_name";
+import { TemplateResult } from "lit-html";
+
+const thermostatConfig = {
+  radius: 150,
+  step: 1,
+  circleShape: "pie",
+  startAngle: 315,
+  width: 5,
+  lineCap: "round",
+  handleSize: "+10",
+  showTooltip: false,
+};
+
+const modeIcons = {
+  auto: "hass:autorenew",
+  heat: "hass:fire",
+  cool: "hass:snowflake",
+  off: "hass:power",
+};
+
+interface Config extends LovelaceConfig {
+  entity: string;
+}
+
+function formatTemp(temps: string[]): string {
+  return temps.filter(Boolean).join("-");
+}
+
+export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public getCardSize(): number {
+    return 4;
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity || config.entity.split(".")[0] !== "climate") {
+      throw new Error("Specify an entity from within the climate domain.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
+    const broadCard = this.clientWidth > 390;
+    const mode = modeIcons[stateObj.attributes.operation_mode || ""]
+      ? stateObj.attributes.operation_mode!
+      : "unknown-mode";
+    return html`
+      ${this.renderStyle()}
+      <ha-card
+        class="${classMap({
+          [mode]: true,
+          large: broadCard,
+          small: !broadCard,
+        })}">
+        <div id="root">
+          <div id="thermostat"></div>
+          <div id="tooltip">
+            <div class="title">${computeStateName(stateObj)}</div>
+            <div class="current-temperature">
+              <span class="current-temperature-text">${
+                stateObj.attributes.current_temperature
+              }
+                <span class="uom">${
+                  this.hass.config.unit_system.temperature
+                }</span>
+              </span>
+            </div>
+            <div class="climate-info">
+            <div id="set-temperature"></div>
+            <div class="current-mode">${this.localize(
+              `state.climate.${stateObj.state}`
+            )}</div>
+            <div class="modes">
+              ${(stateObj.attributes.operation_list || []).map((modeItem) =>
+                this._renderIcon(modeItem, mode)
+              )}
+            </div>
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.get("hass")) {
+      return (
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
+      );
+    }
+    if (changedProps.has("_config")) {
+      return true;
+    }
+    return true;
+  }
+
+  protected firstUpdated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+
+    const _sliderType =
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+        ? "range"
+        : "min-range";
+
+    jQuery("#thermostat", this.shadowRoot).roundSlider({
+      ...thermostatConfig,
+      radius: this.clientWidth / 3,
+      min: stateObj.attributes.min_temp,
+      max: stateObj.attributes.max_temp,
+      sliderType: _sliderType,
+      change: (value) => this._setTemperature(value),
+      drag: (value) => this._dragEvent(value),
+    });
+  }
+
+  protected updated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+
+    let sliderValue;
+    let uiValue;
+
+    if (
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+    ) {
+      sliderValue = `${stateObj.attributes.target_temp_low}, ${
+        stateObj.attributes.target_temp_high
+      }`;
+      uiValue = formatTemp([
+        String(stateObj.attributes.target_temp_low),
+        String(stateObj.attributes.target_temp_high),
+      ]);
+    } else {
+      sliderValue = uiValue = stateObj.attributes.temperature;
+    }
+
+    jQuery("#thermostat", this.shadowRoot).roundSlider({
+      value: sliderValue,
+    });
+    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+    ${roundSliderStyle}
+    <style>
+      :host {
+        display: block;
+      }
+      ha-card {
+        overflow: hidden;
+        --rail-border-color: transparent;
+        --auto-color: green;
+        --cool-color: #2b9af9;
+        --heat-color: #FF8100;
+        --off-color: #8a8a8a;
+        --unknown-color: #bac;
+      }
+      #root {
+        position: relative;
+        overflow: hidden;
+      }
+      .auto {
+        --mode-color: var(--auto-color);
+      }
+      .cool {
+        --mode-color: var(--cool-color);
+      }
+      .heat {
+        --mode-color: var(--heat-color);
+      }
+      .off {
+        --mode-color: var(--off-color);
+      }
+      .unknown-mode {
+        --mode-color: var(--unknown-color);
+      }
+      .no-title {
+        --title-margin-top: 33% !important;
+      }
+      .large {
+        --thermostat-padding-top: 25px;
+        --thermostat-margin-bottom: 25px;
+        --title-font-size: 28px;
+        --title-margin-top: 20%;
+        --climate-info-margin-top: 17%;
+        --modes-margin-top: 2%;
+        --set-temperature-font-size: 25px;
+        --current-temperature-font-size: 71px;
+        --current-temperature-margin-top: 10%;
+        --current-temperature-text-padding-left: 15px;
+        --uom-font-size: 20px;
+        --uom-margin-left: -18px;
+        --current-mode-font-size: 18px;
+        --set-temperature-padding-bottom: 5px;
+      }
+      .small {
+        --thermostat-padding-top: 15px;
+        --thermostat-margin-bottom: 15px;
+        --title-font-size: 18px;
+        --title-margin-top: 20%;
+        --climate-info-margin-top: 7.5%;
+        --modes-margin-top: 1%;
+        --set-temperature-font-size: 16px;
+        --current-temperature-font-size: 25px;
+        --current-temperature-margin-top: 5%;
+        --current-temperature-text-padding-left: 7px;
+        --uom-font-size: 12px;
+        --uom-margin-left: -5px;
+        --current-mode-font-size: 14px;
+        --set-temperature-padding-bottom: 0px;
+      }
+      #thermostat {
+        margin: 0 auto var(--thermostat-margin-bottom);
+        padding-top: var(--thermostat-padding-top);
+      }
+      #thermostat .rs-range-color  {
+        background-color: var(--mode-color, var(--disabled-text-color));
+      }
+      #thermostat .rs-path-color  {
+          background-color: var(--disabled-text-color);
+      }
+      #thermostat .rs-handle  {
+          background-color: var(--paper-card-background-color, white);
+          padding: 7px;
+          border: 2px solid var(--disabled-text-color);
+      }
+      #thermostat .rs-handle.rs-focus  {
+          border-color: var(--mode-color, var(--disabled-text-color));
+      }
+      #thermostat .rs-handle:after  {
+          border-color: var(--mode-color, var(--disabled-text-color));
+          background-color: var(--mode-color, var(--disabled-text-color));
+      }
+      #thermostat .rs-border  {
+        border-color: var(--rail-border-color);
+      }
+      #thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
+        z-index: 20 !important;
+      }
+      #thermostat .rs-inner.rs-bg-color.rs-border,
+      #thermostat .rs-overlay.rs-transition.rs-bg-color {
+        background-color: var(--paper-card-background-color, white);
+      }
+      #tooltip {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        text-align: center;
+        z-index: 15;
+        color: var(--primary-text-color);
+      }
+      #set-temperature {
+        font-size: var(--set-temperature-font-size);
+        padding-bottom: var(--set-temperature-padding-bottom);
+      }
+      .title {
+        font-size: var(--title-font-size);
+        margin-top: var(--title-margin-top);
+      }
+      .climate-info {
+        margin-top: var(--climate-info-margin-top);
+      }
+      .current-mode {
+        font-size: var(--current-mode-font-size);
+        color: var(--secondary-text-color);
+      }
+      .modes {
+        margin-top: var(--modes-margin-top);
+      }
+      .modes ha-icon {
+        color: var(--disabled-text-color);
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+      }
+      .modes ha-icon.selected-icon {
+        color: var(--mode-color);
+      }
+      .current-temperature {
+        margin-top: var(--current-temperature-margin-top);
+        font-size: var(--current-temperature-font-size);
+      }
+      .current-temperature-text {
+        padding-left: var(--current-temperature-text-padding-left);
+      }
+      .uom {
+        font-size: var(--uom-font-size);
+        vertical-align: top;
+        margin-left: var(--uom-margin-left);
+      }
+    </style>
+    `;
+  }
+
+  private _dragEvent(e): void {
+    this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
+      String(e.value).split(",")
+    );
+  }
+
+  private _setTemperature(e): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+    if (
+      stateObj.attributes.target_temp_low &&
+      stateObj.attributes.target_temp_high
+    ) {
+      if (e.handle.index === 1) {
+        this.hass!.callService("climate", "set_temperature", {
+          entity_id: this._config!.entity,
+          target_temp_low: e.handle.value,
+          target_temp_high: stateObj.attributes.target_temp_high,
+        });
+      } else {
+        this.hass!.callService("climate", "set_temperature", {
+          entity_id: this._config!.entity,
+          target_temp_low: stateObj.attributes.target_temp_low,
+          target_temp_high: e.handle.value,
+        });
+      }
+    } else {
+      this.hass!.callService("climate", "set_temperature", {
+        entity_id: this._config!.entity,
+        temperature: e.value,
+      });
+    }
+  }
+
+  private _renderIcon(mode: string, currentMode: string): TemplateResult {
+    if (!modeIcons[mode]) {
+      return html``;
+    }
+    return html`<ha-icon
+      class="${classMap({ "selected-icon": currentMode === mode })}"
+      .mode="${mode}"
+      .icon="${modeIcons[mode]}"
+      @click="${this._handleModeClick}"
+    ></ha-icon>`;
+  }
+
+  private _handleModeClick(e: MouseEvent): void {
+    this.hass!.callService("climate", "set_operation_mode", {
+      entity_id: this._config!.entity,
+      operation_mode: (e.currentTarget as any).mode,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-thermostat-card": HuiThermostatCard;
+  }
+}
+
+customElements.define("hui-thermostat-card", HuiThermostatCard);
diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
index 3d13d2827c..740671179d 100644
--- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
@@ -1,50 +1,50 @@
-import { html } from "@polymer/lit-element";
-
-import computeCardSize from "../common/compute-card-size";
-
-import { HuiStackCard } from "./hui-stack-card";
-import { TemplateResult } from "lit-html";
-
-class HuiVerticalStackCard extends HuiStackCard {
-  public getCardSize() {
-    let totalSize = 0;
-
-    if (!this._cards) {
-      return totalSize;
-    }
-
-    for (const element of this._cards) {
-      totalSize += computeCardSize(element);
-    }
-
-    return totalSize;
-  }
-
-  protected renderStyle(): TemplateResult {
-    return html`
-      <style>
-        #root {
-          display: flex;
-          flex-direction: column;
-        }
-        #root > * {
-          margin: 4px 0 4px 0;
-        }
-        #root > *:first-child {
-          margin-top: 0;
-        }
-        #root > *:last-child {
-          margin-bottom: 0;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-vertical-stack-card": HuiVerticalStackCard;
-  }
-}
-
-customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);
+import { html } from "@polymer/lit-element";
+
+import computeCardSize from "../common/compute-card-size";
+
+import { HuiStackCard } from "./hui-stack-card";
+import { TemplateResult } from "lit-html";
+
+class HuiVerticalStackCard extends HuiStackCard {
+  public getCardSize() {
+    let totalSize = 0;
+
+    if (!this._cards) {
+      return totalSize;
+    }
+
+    for (const element of this._cards) {
+      totalSize += computeCardSize(element);
+    }
+
+    return totalSize;
+  }
+
+  protected renderStyle(): TemplateResult {
+    return html`
+      <style>
+        #root {
+          display: flex;
+          flex-direction: column;
+        }
+        #root > * {
+          margin: 4px 0 4px 0;
+        }
+        #root > *:first-child {
+          margin-top: 0;
+        }
+        #root > *:last-child {
+          margin-bottom: 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-vertical-stack-card": HuiVerticalStackCard;
+  }
+}
+
+customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js
index 9ad4374231..96c8470b07 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.js
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.js
@@ -1,15 +1,15 @@
-import "../../../cards/ha-camera-card";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card";
-
-class HuiWeatherForecastCard extends LegacyWrapperCard {
-  constructor() {
-    super("ha-weather-card", "weather");
-  }
-
-  getCardSize() {
-    return 4;
-  }
-}
-
-customElements.define("hui-weather-forecast-card", HuiWeatherForecastCard);
+import "../../../cards/ha-camera-card";
+
+import LegacyWrapperCard from "./hui-legacy-wrapper-card";
+
+class HuiWeatherForecastCard extends LegacyWrapperCard {
+  constructor() {
+    super("ha-weather-card", "weather");
+  }
+
+  getCardSize() {
+    return 4;
+  }
+}
+
+customElements.define("hui-weather-forecast-card", HuiWeatherForecastCard);
diff --git a/src/panels/lovelace/common/compute-notifications.js b/src/panels/lovelace/common/compute-notifications.js
index 0e9f57316f..691b2138f5 100644
--- a/src/panels/lovelace/common/compute-notifications.js
+++ b/src/panels/lovelace/common/compute-notifications.js
@@ -1,7 +1,7 @@
-import computeDomain from "../../../common/entity/compute_domain";
-
-export default function computeNotifications(states) {
-  return Object.keys(states)
-    .filter((entityId) => computeDomain(entityId) === "configurator")
-    .map((entityId) => states[entityId]);
-}
+import computeDomain from "../../../common/entity/compute_domain";
+
+export default function computeNotifications(states) {
+  return Object.keys(states)
+    .filter((entityId) => computeDomain(entityId) === "configurator")
+    .map((entityId) => states[entityId]);
+}
diff --git a/src/panels/lovelace/common/compute-tooltip.ts b/src/panels/lovelace/common/compute-tooltip.ts
index d4441a9278..59920ec8e1 100644
--- a/src/panels/lovelace/common/compute-tooltip.ts
+++ b/src/panels/lovelace/common/compute-tooltip.ts
@@ -1,38 +1,38 @@
-import computeStateName from "../../../common/entity/compute_state_name";
-import { HomeAssistant } from "../../../types";
-import { LovelaceElementConfig } from "../elements/types";
-
-export const computeTooltip = (
-  hass: HomeAssistant,
-  config: LovelaceElementConfig
-): string => {
-  if (config.title) {
-    return config.title;
-  }
-
-  let stateName = "";
-  let tooltip: string;
-
-  if (config.entity) {
-    stateName =
-      config.entity in hass.states
-        ? computeStateName(hass.states[config.entity])
-        : config.entity;
-  }
-
-  switch (config.tap_action) {
-    case "navigate":
-      tooltip = `Navigate to ${config.navigation_path}`;
-      break;
-    case "toggle":
-      tooltip = `Toggle ${stateName}`;
-      break;
-    case "call-service":
-      tooltip = `Call service ${config.service}`;
-      break;
-    default:
-      tooltip = `Show more-info: ${stateName}`;
-  }
-
-  return tooltip;
-};
+import computeStateName from "../../../common/entity/compute_state_name";
+import { HomeAssistant } from "../../../types";
+import { LovelaceElementConfig } from "../elements/types";
+
+export const computeTooltip = (
+  hass: HomeAssistant,
+  config: LovelaceElementConfig
+): string => {
+  if (config.title) {
+    return config.title;
+  }
+
+  let stateName = "";
+  let tooltip: string;
+
+  if (config.entity) {
+    stateName =
+      config.entity in hass.states
+        ? computeStateName(hass.states[config.entity])
+        : config.entity;
+  }
+
+  switch (config.tap_action) {
+    case "navigate":
+      tooltip = `Navigate to ${config.navigation_path}`;
+      break;
+    case "toggle":
+      tooltip = `Toggle ${stateName}`;
+      break;
+    case "call-service":
+      tooltip = `Call service ${config.service}`;
+      break;
+    default:
+      tooltip = `Show more-info: ${stateName}`;
+  }
+
+  return tooltip;
+};
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index 9417fa8989..f7cc0db4a3 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/src/panels/lovelace/common/create-card-element.js
@@ -1,112 +1,112 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-
-import "../cards/hui-alarm-panel-card";
-import "../cards/hui-conditional-card.ts";
-import "../cards/hui-entities-card.ts";
-import "../cards/hui-entity-button-card.ts";
-import "../cards/hui-entity-filter-card";
-import "../cards/hui-error-card.ts";
-import "../cards/hui-glance-card.ts";
-import "../cards/hui-history-graph-card";
-import "../cards/hui-horizontal-stack-card.ts";
-import "../cards/hui-iframe-card.ts";
-import "../cards/hui-light-card";
-import "../cards/hui-map-card";
-import "../cards/hui-markdown-card.ts";
-import "../cards/hui-media-control-card";
-import "../cards/hui-picture-card";
-import "../cards/hui-picture-elements-card";
-import "../cards/hui-picture-entity-card";
-import "../cards/hui-picture-glance-card";
-import "../cards/hui-plant-status-card";
-import "../cards/hui-sensor-card";
-import "../cards/hui-vertical-stack-card.ts";
-import "../cards/hui-thermostat-card.ts";
-import "../cards/hui-weather-forecast-card";
-import "../cards/hui-gauge-card";
-
-import createErrorCardConfig from "./create-error-card-config";
-
-const CARD_TYPES = new Set([
-  "alarm-panel",
-  "conditional",
-  "entities",
-  "entity-button",
-  "entity-filter",
-  "error",
-  "gauge",
-  "glance",
-  "history-graph",
-  "horizontal-stack",
-  "iframe",
-  "light",
-  "map",
-  "markdown",
-  "media-control",
-  "picture",
-  "picture-elements",
-  "picture-entity",
-  "picture-glance",
-  "plant-status",
-  "sensor",
-  "thermostat",
-  "vertical-stack",
-  "weather-forecast",
-]);
-const CUSTOM_TYPE_PREFIX = "custom:";
-const TIMEOUT = 2000;
-
-function _createElement(tag, config) {
-  const element = document.createElement(tag);
-  try {
-    element.setConfig(config);
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(tag, err);
-    // eslint-disable-next-line
-    return _createErrorElement(err.message, config);
-  }
-  return element;
-}
-
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
-
-export default function createCardElement(config) {
-  if (!config || typeof config !== "object" || !config.type) {
-    return _createErrorElement("No card type configured.", config);
-  }
-
-  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
-
-    if (customElements.get(tag)) {
-      return _createElement(tag, config);
-    }
-    const element = _createErrorElement(
-      `Custom element doesn't exist: ${tag}.`,
-      config
-    );
-    element.style.display = "None";
-    const timer = window.setTimeout(() => {
-      element.style.display = "";
-    }, TIMEOUT);
-
-    customElements.whenDefined(tag).then(() => {
-      clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
-    });
-
-    return element;
-  }
-
-  if (!CARD_TYPES.has(config.type)) {
-    return _createErrorElement(
-      `Unknown card type encountered: ${config.type}.`,
-      config
-    );
-  }
-
-  return _createElement(`hui-${config.type}-card`, config);
-}
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "../cards/hui-alarm-panel-card";
+import "../cards/hui-conditional-card.ts";
+import "../cards/hui-entities-card.ts";
+import "../cards/hui-entity-button-card.ts";
+import "../cards/hui-entity-filter-card";
+import "../cards/hui-error-card.ts";
+import "../cards/hui-glance-card.ts";
+import "../cards/hui-history-graph-card";
+import "../cards/hui-horizontal-stack-card.ts";
+import "../cards/hui-iframe-card.ts";
+import "../cards/hui-light-card";
+import "../cards/hui-map-card";
+import "../cards/hui-markdown-card.ts";
+import "../cards/hui-media-control-card";
+import "../cards/hui-picture-card";
+import "../cards/hui-picture-elements-card";
+import "../cards/hui-picture-entity-card";
+import "../cards/hui-picture-glance-card";
+import "../cards/hui-plant-status-card";
+import "../cards/hui-sensor-card";
+import "../cards/hui-vertical-stack-card.ts";
+import "../cards/hui-thermostat-card.ts";
+import "../cards/hui-weather-forecast-card";
+import "../cards/hui-gauge-card";
+
+import createErrorCardConfig from "./create-error-card-config";
+
+const CARD_TYPES = new Set([
+  "alarm-panel",
+  "conditional",
+  "entities",
+  "entity-button",
+  "entity-filter",
+  "error",
+  "gauge",
+  "glance",
+  "history-graph",
+  "horizontal-stack",
+  "iframe",
+  "light",
+  "map",
+  "markdown",
+  "media-control",
+  "picture",
+  "picture-elements",
+  "picture-entity",
+  "picture-glance",
+  "plant-status",
+  "sensor",
+  "thermostat",
+  "vertical-stack",
+  "weather-forecast",
+]);
+const CUSTOM_TYPE_PREFIX = "custom:";
+const TIMEOUT = 2000;
+
+function _createElement(tag, config) {
+  const element = document.createElement(tag);
+  try {
+    element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement("hui-error-card", createErrorCardConfig(error, config));
+}
+
+export default function createCardElement(config) {
+  if (!config || typeof config !== "object" || !config.type) {
+    return _createErrorElement("No card type configured.", config);
+  }
+
+  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config);
+    }
+    const element = _createErrorElement(
+      `Custom element doesn't exist: ${tag}.`,
+      config
+    );
+    element.style.display = "None";
+    const timer = window.setTimeout(() => {
+      element.style.display = "";
+    }, TIMEOUT);
+
+    customElements.whenDefined(tag).then(() => {
+      clearTimeout(timer);
+      fireEvent(element, "rebuild-view");
+    });
+
+    return element;
+  }
+
+  if (!CARD_TYPES.has(config.type)) {
+    return _createErrorElement(
+      `Unknown card type encountered: ${config.type}.`,
+      config
+    );
+  }
+
+  return _createElement(`hui-${config.type}-card`, config);
+}
diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index b02b86dbcf..c9d10924db 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,79 +1,79 @@
-import "../elements/hui-icon-element";
-import "../elements/hui-image-element";
-import "../elements/hui-service-button-element";
-import "../elements/hui-state-badge-element";
-import "../elements/hui-state-icon-element";
-import "../elements/hui-state-label-element";
-
-import { fireEvent } from "../../../common/dom/fire_event";
-import createErrorCardConfig from "./create-error-card-config";
-
-const CUSTOM_TYPE_PREFIX = "custom:";
-const ELEMENT_TYPES = new Set([
-  "icon",
-  "image",
-  "service-button",
-  "state-badge",
-  "state-icon",
-  "state-label",
-]);
-const TIMEOUT = 2000;
-
-function _createElement(tag, config) {
-  const element = document.createElement(tag);
-  try {
-    element.setConfig(config);
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(tag, err);
-    // eslint-disable-next-line
-    return _createErrorElement(err.message, config);
-  }
-  return element;
-}
-
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
-
-function _hideErrorElement(element) {
-  element.style.display = "None";
-  return window.setTimeout(() => {
-    element.style.display = "";
-  }, TIMEOUT);
-}
-
-export default function createHuiElement(config) {
-  if (!config || typeof config !== "object" || !config.type) {
-    return _createErrorElement("No element type configured.", config);
-  }
-
-  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
-
-    if (customElements.get(tag)) {
-      return _createElement(tag, config);
-    }
-    const element = _createErrorElement(
-      `Custom element doesn't exist: ${tag}.`,
-      config
-    );
-    const timer = _hideErrorElement(element);
-
-    customElements.whenDefined(tag).then(() => {
-      clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
-    });
-
-    return element;
-  }
-
-  if (!ELEMENT_TYPES.has(config.type)) {
-    return _createErrorElement(
-      `Unknown element type encountered: ${config.type}.`,
-      config
-    );
-  }
-
-  return _createElement(`hui-${config.type}-element`, config);
-}
+import "../elements/hui-icon-element";
+import "../elements/hui-image-element";
+import "../elements/hui-service-button-element";
+import "../elements/hui-state-badge-element";
+import "../elements/hui-state-icon-element";
+import "../elements/hui-state-label-element";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import createErrorCardConfig from "./create-error-card-config";
+
+const CUSTOM_TYPE_PREFIX = "custom:";
+const ELEMENT_TYPES = new Set([
+  "icon",
+  "image",
+  "service-button",
+  "state-badge",
+  "state-icon",
+  "state-label",
+]);
+const TIMEOUT = 2000;
+
+function _createElement(tag, config) {
+  const element = document.createElement(tag);
+  try {
+    element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement("hui-error-card", createErrorCardConfig(error, config));
+}
+
+function _hideErrorElement(element) {
+  element.style.display = "None";
+  return window.setTimeout(() => {
+    element.style.display = "";
+  }, TIMEOUT);
+}
+
+export default function createHuiElement(config) {
+  if (!config || typeof config !== "object" || !config.type) {
+    return _createErrorElement("No element type configured.", config);
+  }
+
+  if (config.type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    const tag = config.type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config);
+    }
+    const element = _createErrorElement(
+      `Custom element doesn't exist: ${tag}.`,
+      config
+    );
+    const timer = _hideErrorElement(element);
+
+    customElements.whenDefined(tag).then(() => {
+      clearTimeout(timer);
+      fireEvent(element, "rebuild-view");
+    });
+
+    return element;
+  }
+
+  if (!ELEMENT_TYPES.has(config.type)) {
+    return _createErrorElement(
+      `Unknown element type encountered: ${config.type}.`,
+      config
+    );
+  }
+
+  return _createElement(`hui-${config.type}-element`, config);
+}
diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index f973db948d..2d775def52 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -1,117 +1,117 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-
-import "../entity-rows/hui-climate-entity-row";
-import "../entity-rows/hui-cover-entity-row";
-import "../entity-rows/hui-group-entity-row";
-import "../entity-rows/hui-input-number-entity-row";
-import "../entity-rows/hui-input-select-entity-row";
-import "../entity-rows/hui-input-text-entity-row";
-import "../entity-rows/hui-lock-entity-row";
-import "../entity-rows/hui-media-player-entity-row";
-import "../entity-rows/hui-scene-entity-row";
-import "../entity-rows/hui-script-entity-row";
-import "../entity-rows/hui-text-entity-row";
-import "../entity-rows/hui-timer-entity-row";
-import "../entity-rows/hui-toggle-entity-row";
-
-import "../special-rows/hui-call-service-row";
-import "../special-rows/hui-divider-row";
-import "../special-rows/hui-section-row";
-import "../special-rows/hui-weblink-row";
-
-import createErrorCardConfig from "./create-error-card-config";
-
-const CUSTOM_TYPE_PREFIX = "custom:";
-const SPECIAL_TYPES = new Set([
-  "call-service",
-  "divider",
-  "section",
-  "weblink",
-]);
-const DOMAIN_TO_ELEMENT_TYPE = {
-  automation: "toggle",
-  climate: "climate",
-  cover: "cover",
-  fan: "toggle",
-  group: "group",
-  input_boolean: "toggle",
-  input_number: "input-number",
-  input_select: "input-select",
-  input_text: "input-text",
-  light: "toggle",
-  media_player: "media-player",
-  lock: "lock",
-  scene: "scene",
-  script: "script",
-  timer: "timer",
-  switch: "toggle",
-  vacuum: "toggle",
-};
-const TIMEOUT = 2000;
-
-function _createElement(tag, config) {
-  const element = document.createElement(tag);
-  try {
-    if ("setConfig" in element) element.setConfig(config);
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(tag, err);
-    // eslint-disable-next-line
-    return _createErrorElement(err.message, config);
-  }
-
-  return element;
-}
-
-function _createErrorElement(error, config) {
-  return _createElement("hui-error-card", createErrorCardConfig(error, config));
-}
-
-function _hideErrorElement(element) {
-  element.style.display = "None";
-  return window.setTimeout(() => {
-    element.style.display = "";
-  }, TIMEOUT);
-}
-
-export default function createRowElement(config) {
-  let tag;
-
-  if (
-    !config ||
-    typeof config !== "object" ||
-    (!config.entity && !config.type)
-  ) {
-    return _createErrorElement("Invalid config given.", config);
-  }
-
-  const type = config.type || "default";
-  if (SPECIAL_TYPES.has(type)) {
-    return _createElement(`hui-${type}-row`, config);
-  }
-
-  if (type.startsWith(CUSTOM_TYPE_PREFIX)) {
-    tag = type.substr(CUSTOM_TYPE_PREFIX.length);
-
-    if (customElements.get(tag)) {
-      return _createElement(tag, config);
-    }
-    const element = _createErrorElement(
-      `Custom element doesn't exist: ${tag}.`,
-      config
-    );
-    const timer = _hideErrorElement(element);
-
-    customElements.whenDefined(tag).then(() => {
-      clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
-    });
-
-    return element;
-  }
-
-  const domain = config.entity.split(".", 1)[0];
-  tag = `hui-${DOMAIN_TO_ELEMENT_TYPE[domain] || "text"}-entity-row`;
-
-  return _createElement(tag, config);
-}
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "../entity-rows/hui-climate-entity-row";
+import "../entity-rows/hui-cover-entity-row";
+import "../entity-rows/hui-group-entity-row";
+import "../entity-rows/hui-input-number-entity-row";
+import "../entity-rows/hui-input-select-entity-row";
+import "../entity-rows/hui-input-text-entity-row";
+import "../entity-rows/hui-lock-entity-row";
+import "../entity-rows/hui-media-player-entity-row";
+import "../entity-rows/hui-scene-entity-row";
+import "../entity-rows/hui-script-entity-row";
+import "../entity-rows/hui-text-entity-row";
+import "../entity-rows/hui-timer-entity-row";
+import "../entity-rows/hui-toggle-entity-row";
+
+import "../special-rows/hui-call-service-row";
+import "../special-rows/hui-divider-row";
+import "../special-rows/hui-section-row";
+import "../special-rows/hui-weblink-row";
+
+import createErrorCardConfig from "./create-error-card-config";
+
+const CUSTOM_TYPE_PREFIX = "custom:";
+const SPECIAL_TYPES = new Set([
+  "call-service",
+  "divider",
+  "section",
+  "weblink",
+]);
+const DOMAIN_TO_ELEMENT_TYPE = {
+  automation: "toggle",
+  climate: "climate",
+  cover: "cover",
+  fan: "toggle",
+  group: "group",
+  input_boolean: "toggle",
+  input_number: "input-number",
+  input_select: "input-select",
+  input_text: "input-text",
+  light: "toggle",
+  media_player: "media-player",
+  lock: "lock",
+  scene: "scene",
+  script: "script",
+  timer: "timer",
+  switch: "toggle",
+  vacuum: "toggle",
+};
+const TIMEOUT = 2000;
+
+function _createElement(tag, config) {
+  const element = document.createElement(tag);
+  try {
+    if ("setConfig" in element) element.setConfig(config);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(tag, err);
+    // eslint-disable-next-line
+    return _createErrorElement(err.message, config);
+  }
+
+  return element;
+}
+
+function _createErrorElement(error, config) {
+  return _createElement("hui-error-card", createErrorCardConfig(error, config));
+}
+
+function _hideErrorElement(element) {
+  element.style.display = "None";
+  return window.setTimeout(() => {
+    element.style.display = "";
+  }, TIMEOUT);
+}
+
+export default function createRowElement(config) {
+  let tag;
+
+  if (
+    !config ||
+    typeof config !== "object" ||
+    (!config.entity && !config.type)
+  ) {
+    return _createErrorElement("Invalid config given.", config);
+  }
+
+  const type = config.type || "default";
+  if (SPECIAL_TYPES.has(type)) {
+    return _createElement(`hui-${type}-row`, config);
+  }
+
+  if (type.startsWith(CUSTOM_TYPE_PREFIX)) {
+    tag = type.substr(CUSTOM_TYPE_PREFIX.length);
+
+    if (customElements.get(tag)) {
+      return _createElement(tag, config);
+    }
+    const element = _createErrorElement(
+      `Custom element doesn't exist: ${tag}.`,
+      config
+    );
+    const timer = _hideErrorElement(element);
+
+    customElements.whenDefined(tag).then(() => {
+      clearTimeout(timer);
+      fireEvent(element, "rebuild-view");
+    });
+
+    return element;
+  }
+
+  const domain = config.entity.split(".", 1)[0];
+  tag = `hui-${DOMAIN_TO_ELEMENT_TYPE[domain] || "text"}-entity-row`;
+
+  return _createElement(tag, config);
+}
diff --git a/src/panels/lovelace/common/entity/toggle-entity.js b/src/panels/lovelace/common/entity/toggle-entity.js
index 21820da7f7..91deadcd7b 100644
--- a/src/panels/lovelace/common/entity/toggle-entity.js
+++ b/src/panels/lovelace/common/entity/toggle-entity.js
@@ -1,7 +1,7 @@
-import { STATES_OFF } from "../../../../common/const";
-import turnOnOffEntity from "./turn-on-off-entity";
-
-export default function toggleEntity(hass, entityId) {
-  const turnOn = STATES_OFF.includes(hass.states[entityId].state);
-  turnOnOffEntity(hass, entityId, turnOn);
-}
+import { STATES_OFF } from "../../../../common/const";
+import turnOnOffEntity from "./turn-on-off-entity";
+
+export default function toggleEntity(hass, entityId) {
+  const turnOn = STATES_OFF.includes(hass.states[entityId].state);
+  turnOnOffEntity(hass, entityId, turnOn);
+}
diff --git a/src/panels/lovelace/common/entity/turn-on-off-entities.js b/src/panels/lovelace/common/entity/turn-on-off-entities.js
index b3a990e74b..7f46f4414b 100644
--- a/src/panels/lovelace/common/entity/turn-on-off-entities.js
+++ b/src/panels/lovelace/common/entity/turn-on-off-entities.js
@@ -1,34 +1,34 @@
-import { STATES_OFF } from "../../../../common/const";
-import computeDomain from "../../../../common/entity/compute_domain";
-
-export default function turnOnOffEntities(hass, entityIds, turnOn = true) {
-  const domainsToCall = {};
-  entityIds.forEach((entityId) => {
-    if (STATES_OFF.includes(hass.states[entityId].state) === turnOn) {
-      const stateDomain = computeDomain(entityId);
-      const serviceDomain = ["cover", "lock"].includes(stateDomain)
-        ? stateDomain
-        : "homeassistant";
-
-      if (!(serviceDomain in domainsToCall)) domainsToCall[serviceDomain] = [];
-      domainsToCall[serviceDomain].push(entityId);
-    }
-  });
-
-  Object.keys(domainsToCall).forEach((domain) => {
-    let service;
-    switch (domain) {
-      case "lock":
-        service = turnOn ? "unlock" : "lock";
-        break;
-      case "cover":
-        service = turnOn ? "open_cover" : "close_cover";
-        break;
-      default:
-        service = turnOn ? "turn_on" : "turn_off";
-    }
-
-    const entities = domainsToCall[domain];
-    hass.callService(domain, service, { entity_id: entities });
-  });
-}
+import { STATES_OFF } from "../../../../common/const";
+import computeDomain from "../../../../common/entity/compute_domain";
+
+export default function turnOnOffEntities(hass, entityIds, turnOn = true) {
+  const domainsToCall = {};
+  entityIds.forEach((entityId) => {
+    if (STATES_OFF.includes(hass.states[entityId].state) === turnOn) {
+      const stateDomain = computeDomain(entityId);
+      const serviceDomain = ["cover", "lock"].includes(stateDomain)
+        ? stateDomain
+        : "homeassistant";
+
+      if (!(serviceDomain in domainsToCall)) domainsToCall[serviceDomain] = [];
+      domainsToCall[serviceDomain].push(entityId);
+    }
+  });
+
+  Object.keys(domainsToCall).forEach((domain) => {
+    let service;
+    switch (domain) {
+      case "lock":
+        service = turnOn ? "unlock" : "lock";
+        break;
+      case "cover":
+        service = turnOn ? "open_cover" : "close_cover";
+        break;
+      default:
+        service = turnOn ? "turn_on" : "turn_off";
+    }
+
+    const entities = domainsToCall[domain];
+    hass.callService(domain, service, { entity_id: entities });
+  });
+}
diff --git a/src/panels/lovelace/common/entity/turn-on-off-entity.js b/src/panels/lovelace/common/entity/turn-on-off-entity.js
index dc7e5d1a4d..6a19f0ad74 100644
--- a/src/panels/lovelace/common/entity/turn-on-off-entity.js
+++ b/src/panels/lovelace/common/entity/turn-on-off-entity.js
@@ -1,20 +1,20 @@
-import computeDomain from "../../../../common/entity/compute_domain";
-
-export default function turnOnOffEntity(hass, entityId, turnOn = true) {
-  const stateDomain = computeDomain(entityId);
-  const serviceDomain = stateDomain === "group" ? "homeassistant" : stateDomain;
-
-  let service;
-  switch (stateDomain) {
-    case "lock":
-      service = turnOn ? "unlock" : "lock";
-      break;
-    case "cover":
-      service = turnOn ? "open_cover" : "close_cover";
-      break;
-    default:
-      service = turnOn ? "turn_on" : "turn_off";
-  }
-
-  hass.callService(serviceDomain, service, { entity_id: entityId });
-}
+import computeDomain from "../../../../common/entity/compute_domain";
+
+export default function turnOnOffEntity(hass, entityId, turnOn = true) {
+  const stateDomain = computeDomain(entityId);
+  const serviceDomain = stateDomain === "group" ? "homeassistant" : stateDomain;
+
+  let service;
+  switch (stateDomain) {
+    case "lock":
+      service = turnOn ? "unlock" : "lock";
+      break;
+    case "cover":
+      service = turnOn ? "open_cover" : "close_cover";
+      break;
+    default:
+      service = turnOn ? "turn_on" : "turn_off";
+  }
+
+  hass.callService(serviceDomain, service, { entity_id: entityId });
+}
diff --git a/src/panels/lovelace/common/handle-click.ts b/src/panels/lovelace/common/handle-click.ts
index c996bf4bac..c7d1321228 100644
--- a/src/panels/lovelace/common/handle-click.ts
+++ b/src/panels/lovelace/common/handle-click.ts
@@ -1,44 +1,44 @@
-import { HomeAssistant } from "../../../types";
-import { LovelaceElementConfig } from "../elements/types";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
-import toggleEntity from "../../../../src/panels/lovelace/common/entity/toggle-entity";
-
-export const handleClick = (
-  node: HTMLElement,
-  hass: HomeAssistant,
-  config: LovelaceElementConfig,
-  hold: boolean
-): void => {
-  let action = config.tap_action || "more-info";
-
-  if (hold && config.hold_action) {
-    action = config.hold_action;
-  }
-
-  if (action === "none") {
-    return;
-  }
-
-  switch (action) {
-    case "more-info":
-      fireEvent(node, "hass-more-info", { entityId: config.entity });
-      break;
-    case "navigate":
-      navigate(node, config.navigation_path ? config.navigation_path : "");
-      break;
-    case "toggle":
-      toggleEntity(hass, config.entity);
-      break;
-    case "call-service": {
-      if (config.service) {
-        const [domain, service] = config.service.split(".", 2);
-        const serviceData = {
-          entity_id: config.entity,
-          ...config.service_data,
-        };
-        hass.callService(domain, service, serviceData);
-      }
-    }
-  }
-};
+import { HomeAssistant } from "../../../types";
+import { LovelaceElementConfig } from "../elements/types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { navigate } from "../../../common/navigate";
+import toggleEntity from "../../../../src/panels/lovelace/common/entity/toggle-entity";
+
+export const handleClick = (
+  node: HTMLElement,
+  hass: HomeAssistant,
+  config: LovelaceElementConfig,
+  hold: boolean
+): void => {
+  let action = config.tap_action || "more-info";
+
+  if (hold && config.hold_action) {
+    action = config.hold_action;
+  }
+
+  if (action === "none") {
+    return;
+  }
+
+  switch (action) {
+    case "more-info":
+      fireEvent(node, "hass-more-info", { entityId: config.entity });
+      break;
+    case "navigate":
+      navigate(node, config.navigation_path ? config.navigation_path : "");
+      break;
+    case "toggle":
+      toggleEntity(hass, config.entity);
+      break;
+    case "call-service": {
+      if (config.service) {
+        const [domain, service] = config.service.split(".", 2);
+        const serviceData = {
+          entity_id: config.entity,
+          ...config.service_data,
+        };
+        hass.callService(domain, service, serviceData);
+      }
+    }
+  }
+};
diff --git a/src/panels/lovelace/common/process-config-entities.js b/src/panels/lovelace/common/process-config-entities.js
index f8082886b3..68e6e248c2 100644
--- a/src/panels/lovelace/common/process-config-entities.js
+++ b/src/panels/lovelace/common/process-config-entities.js
@@ -1,38 +1,38 @@
-// Parse array of entity objects from config
-import isValidEntityId from "../../../common/entity/valid_entity_id";
-
-export default function processConfigEntities(entities) {
-  if (!entities || !Array.isArray(entities)) {
-    throw new Error("Entities need to be an array");
-  }
-
-  return entities.map((entityConf, index) => {
-    if (
-      typeof entityConf === "object" &&
-      !Array.isArray(entityConf) &&
-      entityConf.type
-    ) {
-      return entityConf;
-    }
-
-    if (typeof entityConf === "string") {
-      entityConf = { entity: entityConf };
-    } else if (typeof entityConf === "object" && !Array.isArray(entityConf)) {
-      if (!entityConf.entity) {
-        throw new Error(
-          `Entity object at position ${index} is missing entity field.`
-        );
-      }
-    } else {
-      throw new Error(`Invalid entity specified at position ${index}.`);
-    }
-
-    if (!isValidEntityId(entityConf.entity)) {
-      throw new Error(
-        `Invalid entity ID at position ${index}: ${entityConf.entity}`
-      );
-    }
-
-    return entityConf;
-  });
-}
+// Parse array of entity objects from config
+import isValidEntityId from "../../../common/entity/valid_entity_id";
+
+export default function processConfigEntities(entities) {
+  if (!entities || !Array.isArray(entities)) {
+    throw new Error("Entities need to be an array");
+  }
+
+  return entities.map((entityConf, index) => {
+    if (
+      typeof entityConf === "object" &&
+      !Array.isArray(entityConf) &&
+      entityConf.type
+    ) {
+      return entityConf;
+    }
+
+    if (typeof entityConf === "string") {
+      entityConf = { entity: entityConf };
+    } else if (typeof entityConf === "object" && !Array.isArray(entityConf)) {
+      if (!entityConf.entity) {
+        throw new Error(
+          `Entity object at position ${index} is missing entity field.`
+        );
+      }
+    } else {
+      throw new Error(`Invalid entity specified at position ${index}.`);
+    }
+
+    if (!isValidEntityId(entityConf.entity)) {
+      throw new Error(
+        `Invalid entity ID at position ${index}: ${entityConf.entity}`
+      );
+    }
+
+    return entityConf;
+  });
+}
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 1e7b343c12..2392223ed5 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -1,68 +1,68 @@
-import "@polymer/paper-button/paper-button";
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { HomeAssistant } from "../../../types";
-
-let registeredDialog = false;
-
-export class HuiCardOptions extends LitElement {
-  public cardId?: string;
-  protected hass?: HomeAssistant;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-    };
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    if (!registeredDialog) {
-      registeredDialog = true;
-      fireEvent(this, "register-dialog", {
-        dialogShowEvent: "show-edit-card",
-        dialogTag: "hui-dialog-edit-card",
-        dialogImport: () => import("../editor/hui-dialog-edit-card"),
-      });
-    }
-  }
-
-  protected render() {
-    return html`
-    <style>
-      div {
-        border-top: 1px solid #e8e8e8;
-        padding: 5px 16px;
-        background: var(--paper-card-background-color, white);
-        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
-        text-align: right;
-      }
-      paper-button {
-        color: var(--primary-color);
-        font-weight: 500;
-      }
-    </style>
-    <slot></slot>
-    <div>
-      <paper-button
-        @click="${this._editCard}"
-      >EDIT</paper-button>
-    </div>
-    `;
-  }
-  private _editCard() {
-    fireEvent(this, "show-edit-card", {
-      hass: this.hass,
-      cardId: this.cardId,
-      reloadLovelace: () => fireEvent(this, "config-refresh"),
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-card-options": HuiCardOptions;
-  }
-}
-
-customElements.define("hui-card-options", HuiCardOptions);
+import "@polymer/paper-button/paper-button";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../types";
+
+let registeredDialog = false;
+
+export class HuiCardOptions extends LitElement {
+  public cardId?: string;
+  protected hass?: HomeAssistant;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+    };
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (!registeredDialog) {
+      registeredDialog = true;
+      fireEvent(this, "register-dialog", {
+        dialogShowEvent: "show-edit-card",
+        dialogTag: "hui-dialog-edit-card",
+        dialogImport: () => import("../editor/hui-dialog-edit-card"),
+      });
+    }
+  }
+
+  protected render() {
+    return html`
+    <style>
+      div {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+        background: var(--paper-card-background-color, white);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+        text-align: right;
+      }
+      paper-button {
+        color: var(--primary-color);
+        font-weight: 500;
+      }
+    </style>
+    <slot></slot>
+    <div>
+      <paper-button
+        @click="${this._editCard}"
+      >EDIT</paper-button>
+    </div>
+    `;
+  }
+  private _editCard() {
+    fireEvent(this, "show-edit-card", {
+      hass: this.hass,
+      cardId: this.cardId,
+      reloadLovelace: () => fireEvent(this, "config-refresh"),
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-options": HuiCardOptions;
+  }
+}
+
+customElements.define("hui-card-options", HuiCardOptions);
diff --git a/src/panels/lovelace/components/hui-entities-toggle.js b/src/panels/lovelace/components/hui-entities-toggle.js
index 7055c2a962..5d5264c12f 100644
--- a/src/panels/lovelace/components/hui-entities-toggle.js
+++ b/src/panels/lovelace/components/hui-entities-toggle.js
@@ -1,57 +1,57 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-toggle-button/paper-toggle-button";
-
-import { DOMAINS_TOGGLE } from "../../../common/const";
-import turnOnOffEntities from "../common/entity/turn-on-off-entities";
-
-class HuiEntitiesToggle extends PolymerElement {
-  static get template() {
-    return html`
-    <style>
-      :host {
-        width: 38px;
-        display: block;
-      }
-      paper-toggle-button {
-        cursor: pointer;
-        --paper-toggle-button-label-spacing: 0;
-        padding: 13px 5px;
-        margin: -4px -5px;
-      }
-    </style>
-    <template is="dom-if" if="[[_toggleEntities.length]]">
-      <paper-toggle-button checked="[[_computeIsChecked(hass, _toggleEntities)]]" on-change="_callService"></paper-toggle-button>
-    </template>
-`;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      entities: Array,
-      _toggleEntities: {
-        type: Array,
-        computed: "_computeToggleEntities(hass, entities)",
-      },
-    };
-  }
-
-  _computeToggleEntities(hass, entityIds) {
-    return entityIds.filter(
-      (entityId) =>
-        entityId in hass.states && DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
-    );
-  }
-
-  _computeIsChecked(hass, entityIds) {
-    return entityIds.some((entityId) => hass.states[entityId].state === "on");
-  }
-
-  _callService(ev) {
-    const turnOn = ev.target.checked;
-    turnOnOffEntities(this.hass, this._toggleEntities, turnOn);
-  }
-}
-
-customElements.define("hui-entities-toggle", HuiEntitiesToggle);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import turnOnOffEntities from "../common/entity/turn-on-off-entities";
+
+class HuiEntitiesToggle extends PolymerElement {
+  static get template() {
+    return html`
+    <style>
+      :host {
+        width: 38px;
+        display: block;
+      }
+      paper-toggle-button {
+        cursor: pointer;
+        --paper-toggle-button-label-spacing: 0;
+        padding: 13px 5px;
+        margin: -4px -5px;
+      }
+    </style>
+    <template is="dom-if" if="[[_toggleEntities.length]]">
+      <paper-toggle-button checked="[[_computeIsChecked(hass, _toggleEntities)]]" on-change="_callService"></paper-toggle-button>
+    </template>
+`;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      entities: Array,
+      _toggleEntities: {
+        type: Array,
+        computed: "_computeToggleEntities(hass, entities)",
+      },
+    };
+  }
+
+  _computeToggleEntities(hass, entityIds) {
+    return entityIds.filter(
+      (entityId) =>
+        entityId in hass.states && DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
+    );
+  }
+
+  _computeIsChecked(hass, entityIds) {
+    return entityIds.some((entityId) => hass.states[entityId].state === "on");
+  }
+
+  _callService(ev) {
+    const turnOn = ev.target.checked;
+    turnOnOffEntities(this.hass, this._toggleEntities, turnOn);
+  }
+}
+
+customElements.define("hui-entities-toggle", HuiEntitiesToggle);
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.js b/src/panels/lovelace/components/hui-generic-entity-row.js
index 092a065c22..161b21c4f3 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.js
+++ b/src/panels/lovelace/components/hui-generic-entity-row.js
@@ -1,137 +1,137 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/entity/state-badge";
-import "../../../components/ha-relative-time";
-import "../../../components/ha-icon";
-
-import computeStateName from "../../../common/entity/compute_state_name";
-
-class HuiGenericEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <template is="dom-if" if="[[_stateObj]]">
-        ${this.stateBadgeTemplate}
-        <div class="flex">
-          ${this.infoTemplate}
-          <slot></slot>
-        </div>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div class="not-found">
-          Entity not available: [[config.entity]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        .flex {
-          flex: 1;
-          margin-left: 16px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          min-width: 0;
-        }
-        .info {
-          flex: 1 0 60px;
-        }
-        .info,
-        .info > * {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .flex ::slotted(*) {
-          margin-left: 8px;
-          min-width: 0;
-        }
-        .flex ::slotted([slot=secondary]) {
-          margin-left: 0;
-        }
-        .secondary,
-        ha-relative-time {
-          display: block;
-          color: var(--secondary-text-color);
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-        state-badge {
-          flex: 0 0 40px;
-        }
-      </style>
-    `;
-  }
-
-  static get stateBadgeTemplate() {
-    return html`
-      <state-badge
-        state-obj="[[_stateObj]]"
-        override-icon="[[config.icon]]"
-      ></state-badge>
-    `;
-  }
-
-  static get infoTemplate() {
-    return html`
-      <div class="info">
-        [[_computeName(config.name, _stateObj)]]
-        <div class="secondary">
-          <template is="dom-if" if="[[showSecondary]]">
-            <template is="dom-if" if="[[_equals(config.secondary_info, 'entity-id')]]">
-              [[_stateObj.entity_id]]
-            </template>
-            <template is="dom-if" if="[[_equals(config.secondary_info, 'last-changed')]]">
-              <ha-relative-time
-                hass="[[hass]]"
-                datetime="[[_stateObj.last_changed]]"
-              ></ha-relative-time>
-            </template>
-          </template>
-          <template is="dom-if" if="[[!showSecondary]">
-            <slot name="secondary"></slot>
-          </template>
-        </div>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, config.entity)",
-      },
-      showSecondary: {
-        type: Boolean,
-        value: true,
-      },
-    };
-  }
-
-  _equals(a, b) {
-    return a === b;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeName(name, stateObj) {
-    return name || computeStateName(stateObj);
-  }
-}
-customElements.define("hui-generic-entity-row", HuiGenericEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../components/entity/state-badge";
+import "../../../components/ha-relative-time";
+import "../../../components/ha-icon";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+
+class HuiGenericEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <template is="dom-if" if="[[_stateObj]]">
+        ${this.stateBadgeTemplate}
+        <div class="flex">
+          ${this.infoTemplate}
+          <slot></slot>
+        </div>
+      </template>
+      <template is="dom-if" if="[[!_stateObj]]">
+        <div class="not-found">
+          Entity not available: [[config.entity]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        .flex {
+          flex: 1;
+          margin-left: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          min-width: 0;
+        }
+        .info {
+          flex: 1 0 60px;
+        }
+        .info,
+        .info > * {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .flex ::slotted(*) {
+          margin-left: 8px;
+          min-width: 0;
+        }
+        .flex ::slotted([slot=secondary]) {
+          margin-left: 0;
+        }
+        .secondary,
+        ha-relative-time {
+          display: block;
+          color: var(--secondary-text-color);
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+        state-badge {
+          flex: 0 0 40px;
+        }
+      </style>
+    `;
+  }
+
+  static get stateBadgeTemplate() {
+    return html`
+      <state-badge
+        state-obj="[[_stateObj]]"
+        override-icon="[[config.icon]]"
+      ></state-badge>
+    `;
+  }
+
+  static get infoTemplate() {
+    return html`
+      <div class="info">
+        [[_computeName(config.name, _stateObj)]]
+        <div class="secondary">
+          <template is="dom-if" if="[[showSecondary]]">
+            <template is="dom-if" if="[[_equals(config.secondary_info, 'entity-id')]]">
+              [[_stateObj.entity_id]]
+            </template>
+            <template is="dom-if" if="[[_equals(config.secondary_info, 'last-changed')]]">
+              <ha-relative-time
+                hass="[[hass]]"
+                datetime="[[_stateObj.last_changed]]"
+              ></ha-relative-time>
+            </template>
+          </template>
+          <template is="dom-if" if="[[!showSecondary]">
+            <slot name="secondary"></slot>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, config.entity)",
+      },
+      showSecondary: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeName(name, stateObj) {
+    return name || computeStateName(stateObj);
+  }
+}
+customElements.define("hui-generic-entity-row", HuiGenericEntityRow);
diff --git a/src/panels/lovelace/components/hui-image.js b/src/panels/lovelace/components/hui-image.js
index 7164da4c4f..8836f65fc1 100644
--- a/src/panels/lovelace/components/hui-image.js
+++ b/src/panels/lovelace/components/hui-image.js
@@ -1,198 +1,198 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-toggle-button/paper-toggle-button";
-
-import { STATES_OFF } from "../../../common/const";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
-
-const UPDATE_INTERVAL = 10000;
-const DEFAULT_FILTER = "grayscale(100%)";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiImage extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <div id="wrapper">
-        <img
-          id="image"
-          src="[[_imageSrc]]"
-          on-error="_onImageError"
-          on-load="_onImageLoad" />
-        <div id="brokenImage"></div>
-      </div>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-
-        img {
-          display: block;
-          height: auto;
-          transition: filter .2s linear;
-          width: 100%;
-        }
-
-        .error {
-          text-align: center;
-        }
-
-        .hidden {
-          display: none;
-        }
-
-        .ratio {
-          position: relative;
-          width: 100%;
-          height: 0
-        }
-
-        .ratio img, .ratio div {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-
-        #brokenImage {
-          background: grey url('/static/images/image-broken.svg') center/36px no-repeat;
-        }
-
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      entity: String,
-      image: String,
-      stateImage: Object,
-      cameraImage: String,
-      aspectRatio: String,
-      filter: String,
-      stateFilter: Object,
-      _imageSrc: String,
-    };
-  }
-
-  static get observers() {
-    return ["_configChanged(image, stateImage, cameraImage, aspectRatio)"];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.cameraImage) {
-      this.timer = setInterval(
-        () => this._updateCameraImageSrc(),
-        UPDATE_INTERVAL
-      );
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.timer);
-  }
-
-  _configChanged(image, stateImage, cameraImage, aspectRatio) {
-    const ratio = parseAspectRatio(aspectRatio);
-
-    if (ratio && ratio.w > 0 && ratio.h > 0) {
-      this.$.wrapper.style.paddingBottom = `${(
-        (100 * ratio.h) /
-        ratio.w
-      ).toFixed(2)}%`;
-      this.$.wrapper.classList.add("ratio");
-    }
-
-    if (cameraImage) {
-      this._updateCameraImageSrc();
-    } else if (image && !stateImage) {
-      this._imageSrc = image;
-    }
-  }
-
-  _onImageError() {
-    this._imageSrc = null;
-    this.$.image.classList.add("hidden");
-    if (!this.$.wrapper.classList.contains("ratio")) {
-      this.$.brokenImage.style.setProperty(
-        "height",
-        `${this._lastImageHeight || "100"}px`
-      );
-    }
-    this.$.brokenImage.classList.remove("hidden");
-  }
-
-  _onImageLoad() {
-    this.$.image.classList.remove("hidden");
-    this.$.brokenImage.classList.add("hidden");
-    if (!this.$.wrapper.classList.contains("ratio")) {
-      this._lastImageHeight = this.$.image.offsetHeight;
-    }
-  }
-
-  _hassChanged(hass) {
-    if (this.cameraImage || !this.entity) {
-      return;
-    }
-
-    const stateObj = hass.states[this.entity];
-    const newState = !stateObj ? "unavailable" : stateObj.state;
-
-    if (newState === this._currentState) return;
-    this._currentState = newState;
-
-    this._updateStateImage();
-    this._updateStateFilter(stateObj);
-  }
-
-  _updateStateImage() {
-    if (!this.stateImage) {
-      this._imageFallback = true;
-      return;
-    }
-    const stateImg = this.stateImage[this._currentState];
-    this._imageSrc = stateImg || this.image;
-    this._imageFallback = !stateImg;
-  }
-
-  _updateStateFilter(stateObj) {
-    let filter;
-    if (!this.stateFilter) {
-      filter = this.filter;
-    } else {
-      filter = this.stateFilter[this._currentState] || this.filter;
-    }
-
-    const isOff = !stateObj || STATES_OFF.includes(stateObj.state);
-    this.$.image.style.filter =
-      filter || (isOff && this._imageFallback && DEFAULT_FILTER) || "";
-  }
-
-  async _updateCameraImageSrc() {
-    try {
-      const { content_type: contentType, content } = await this.hass.callWS({
-        type: "camera_thumbnail",
-        entity_id: this.cameraImage,
-      });
-      this._imageSrc = `data:${contentType};base64, ${content}`;
-      this._onImageLoad();
-    } catch (err) {
-      this._onImageError();
-    }
-  }
-}
-
-customElements.define("hui-image", HuiImage);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { STATES_OFF } from "../../../common/const";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
+
+const UPDATE_INTERVAL = 10000;
+const DEFAULT_FILTER = "grayscale(100%)";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiImage extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <div id="wrapper">
+        <img
+          id="image"
+          src="[[_imageSrc]]"
+          on-error="_onImageError"
+          on-load="_onImageLoad" />
+        <div id="brokenImage"></div>
+      </div>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+
+        img {
+          display: block;
+          height: auto;
+          transition: filter .2s linear;
+          width: 100%;
+        }
+
+        .error {
+          text-align: center;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        .ratio {
+          position: relative;
+          width: 100%;
+          height: 0
+        }
+
+        .ratio img, .ratio div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        #brokenImage {
+          background: grey url('/static/images/image-broken.svg') center/36px no-repeat;
+        }
+
+      </style>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      entity: String,
+      image: String,
+      stateImage: Object,
+      cameraImage: String,
+      aspectRatio: String,
+      filter: String,
+      stateFilter: Object,
+      _imageSrc: String,
+    };
+  }
+
+  static get observers() {
+    return ["_configChanged(image, stateImage, cameraImage, aspectRatio)"];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.cameraImage) {
+      this.timer = setInterval(
+        () => this._updateCameraImageSrc(),
+        UPDATE_INTERVAL
+      );
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this.timer);
+  }
+
+  _configChanged(image, stateImage, cameraImage, aspectRatio) {
+    const ratio = parseAspectRatio(aspectRatio);
+
+    if (ratio && ratio.w > 0 && ratio.h > 0) {
+      this.$.wrapper.style.paddingBottom = `${(
+        (100 * ratio.h) /
+        ratio.w
+      ).toFixed(2)}%`;
+      this.$.wrapper.classList.add("ratio");
+    }
+
+    if (cameraImage) {
+      this._updateCameraImageSrc();
+    } else if (image && !stateImage) {
+      this._imageSrc = image;
+    }
+  }
+
+  _onImageError() {
+    this._imageSrc = null;
+    this.$.image.classList.add("hidden");
+    if (!this.$.wrapper.classList.contains("ratio")) {
+      this.$.brokenImage.style.setProperty(
+        "height",
+        `${this._lastImageHeight || "100"}px`
+      );
+    }
+    this.$.brokenImage.classList.remove("hidden");
+  }
+
+  _onImageLoad() {
+    this.$.image.classList.remove("hidden");
+    this.$.brokenImage.classList.add("hidden");
+    if (!this.$.wrapper.classList.contains("ratio")) {
+      this._lastImageHeight = this.$.image.offsetHeight;
+    }
+  }
+
+  _hassChanged(hass) {
+    if (this.cameraImage || !this.entity) {
+      return;
+    }
+
+    const stateObj = hass.states[this.entity];
+    const newState = !stateObj ? "unavailable" : stateObj.state;
+
+    if (newState === this._currentState) return;
+    this._currentState = newState;
+
+    this._updateStateImage();
+    this._updateStateFilter(stateObj);
+  }
+
+  _updateStateImage() {
+    if (!this.stateImage) {
+      this._imageFallback = true;
+      return;
+    }
+    const stateImg = this.stateImage[this._currentState];
+    this._imageSrc = stateImg || this.image;
+    this._imageFallback = !stateImg;
+  }
+
+  _updateStateFilter(stateObj) {
+    let filter;
+    if (!this.stateFilter) {
+      filter = this.filter;
+    } else {
+      filter = this.stateFilter[this._currentState] || this.filter;
+    }
+
+    const isOff = !stateObj || STATES_OFF.includes(stateObj.state);
+    this.$.image.style.filter =
+      filter || (isOff && this._imageFallback && DEFAULT_FILTER) || "";
+  }
+
+  async _updateCameraImageSrc() {
+    try {
+      const { content_type: contentType, content } = await this.hass.callWS({
+        type: "camera_thumbnail",
+        entity_id: this.cameraImage,
+      });
+      this._imageSrc = `data:${contentType};base64, ${content}`;
+      this._onImageLoad();
+    } catch (err) {
+      this._onImageError();
+    }
+  }
+}
+
+customElements.define("hui-image", HuiImage);
diff --git a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
index 9924c40eb8..c613239afc 100644
--- a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
@@ -1,62 +1,62 @@
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "./hui-notification-item-template";
-
-import EventsMixin from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-export class HuiConfiguratorNotificationItem extends EventsMixin(
-  LocalizeMixin(PolymerElement)
-) {
-  static get template() {
-    return html`
-    <hui-notification-item-template>
-      <span slot="header">[[localize('domain.configurator')]]</span>
-
-      <div>[[_getMessage(notification)]]</div>
-
-      <paper-button
-        slot="actions"
-        class="primary"
-        on-click="_handleClick"
-      >[[_localizeState(notification.state)]]</paper-button>
-    </hui-notification-item-template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      notification: Object,
-    };
-  }
-
-  _handleClick() {
-    this.fire("hass-more-info", { entityId: this.notification.entity_id });
-  }
-
-  _localizeState(state) {
-    return this.localize(`state.configurator.${state}`);
-  }
-
-  _getMessage(notification) {
-    const friendlyName = notification.attributes.friendly_name;
-    return this.localize(
-      "ui.notification_drawer.click_to_configure",
-      "entity",
-      friendlyName
-    );
-  }
-}
-customElements.define(
-  "hui-configurator-notification-item",
-  HuiConfiguratorNotificationItem
-);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "./hui-notification-item-template";
+
+import EventsMixin from "../../../../mixins/events-mixin";
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
+ */
+export class HuiConfiguratorNotificationItem extends EventsMixin(
+  LocalizeMixin(PolymerElement)
+) {
+  static get template() {
+    return html`
+    <hui-notification-item-template>
+      <span slot="header">[[localize('domain.configurator')]]</span>
+
+      <div>[[_getMessage(notification)]]</div>
+
+      <paper-button
+        slot="actions"
+        class="primary"
+        on-click="_handleClick"
+      >[[_localizeState(notification.state)]]</paper-button>
+    </hui-notification-item-template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      notification: Object,
+    };
+  }
+
+  _handleClick() {
+    this.fire("hass-more-info", { entityId: this.notification.entity_id });
+  }
+
+  _localizeState(state) {
+    return this.localize(`state.configurator.${state}`);
+  }
+
+  _getMessage(notification) {
+    const friendlyName = notification.attributes.friendly_name;
+    return this.localize(
+      "ui.notification_drawer.click_to_configure",
+      "entity",
+      friendlyName
+    );
+  }
+}
+customElements.define(
+  "hui-configurator-notification-item",
+  HuiConfiguratorNotificationItem
+);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
index 62ce12b5af..f1e051ccb2 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
@@ -1,175 +1,175 @@
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-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 "./hui-notification-item";
-
-import EventsMixin from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-export class HuiNotificationDrawer extends EventsMixin(
-  LocalizeMixin(PolymerElement)
-) {
-  static get template() {
-    return html`
-    <style include="paper-material-styles">
-      :host {
-        bottom: 0;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
-
-      .container {
-        align-items: stretch;
-        background: var(--sidebar-background-color, var(--primary-background-color));
-        bottom: 0;
-        box-shadow: var(--paper-material-elevation-1_-_box-shadow);
-        display: flex;
-        flex-direction: column;
-        overflow-y: hidden;
-        position: fixed;
-        top: 0;
-        transition: right .2s ease-in;
-        width: 500px;
-        z-index: 10;
-      }
-
-      :host(:not(narrow)) .container {
-        right: -500px;
-      }
-
-      :host([narrow]) .container {
-        right: -100%;
-        width: 100%;
-      }
-
-      :host(.open) .container,
-      :host(.open[narrow]) .container {
-        right: 0;
-      }
-
-      app-toolbar {
-        color: var(--primary-text-color);
-        border-bottom: 1px solid var(--divider-color);
-        background-color: var(--primary-background-color);
-        min-height: 64px;
-        width: calc(100% - 32px);
-        z-index: 11;
-      }
-
-      .overlay {
-        display: none;
-      }
-
-      :host(.open) .overlay {
-        bottom: 0;
-        display: block;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 5;
-      }
-
-      .notifications {
-        overflow-y: auto;
-        padding-top: 16px;
-      }
-
-      .notification {
-        padding: 0 16px 16px;
-      }
-
-      .empty {
-        padding: 16px;
-        text-align: center;
-      }
-    </style>
-    <div class="overlay" on-click="_closeDrawer"></div>
-    <div class="container">
-      <app-toolbar>
-        <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <paper-icon-button icon="hass:chevron-right" on-click="_closeDrawer"></paper-icon-button>
-      </app-toolbar>
-      <div class="notifications">
-        <template is="dom-if" if="[[!_empty(notifications)]]">
-          <dom-repeat items="[[notifications]]">
-            <template>
-              <div class="notification">
-                <hui-notification-item hass="[[hass]]" notification="[[item]]"></hui-notification-item>
-              </div>
-            </template>
-          </dom-repeat>
-        </template>
-        <template is="dom-if" if="[[_empty(notifications)]]">
-          <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
-        </template>
-      </div>
-    </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      narrow: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-      open: {
-        type: Boolean,
-        notify: true,
-        observer: "_openChanged",
-      },
-      hidden: {
-        type: Boolean,
-        value: true,
-        reflectToAttribute: true,
-      },
-      notifications: {
-        type: Array,
-        value: [],
-      },
-    };
-  }
-
-  _closeDrawer(ev) {
-    ev.stopPropagation();
-    this.open = false;
-  }
-
-  _empty(notifications) {
-    return notifications.length === 0;
-  }
-
-  _openChanged(open) {
-    clearTimeout(this._openTimer);
-    if (open) {
-      // Render closed then animate open
-      this.hidden = false;
-      this._openTimer = setTimeout(() => {
-        this.classList.add("open");
-      }, 50);
-    } else {
-      // Animate closed then hide
-      this.classList.remove("open");
-      this._openTimer = setTimeout(() => {
-        this.hidden = true;
-      }, 250);
-    }
-  }
-}
-customElements.define("hui-notification-drawer", HuiNotificationDrawer);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+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 "./hui-notification-item";
+
+import EventsMixin from "../../../../mixins/events-mixin";
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
+ */
+export class HuiNotificationDrawer extends EventsMixin(
+  LocalizeMixin(PolymerElement)
+) {
+  static get template() {
+    return html`
+    <style include="paper-material-styles">
+      :host {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .container {
+        align-items: stretch;
+        background: var(--sidebar-background-color, var(--primary-background-color));
+        bottom: 0;
+        box-shadow: var(--paper-material-elevation-1_-_box-shadow);
+        display: flex;
+        flex-direction: column;
+        overflow-y: hidden;
+        position: fixed;
+        top: 0;
+        transition: right .2s ease-in;
+        width: 500px;
+        z-index: 10;
+      }
+
+      :host(:not(narrow)) .container {
+        right: -500px;
+      }
+
+      :host([narrow]) .container {
+        right: -100%;
+        width: 100%;
+      }
+
+      :host(.open) .container,
+      :host(.open[narrow]) .container {
+        right: 0;
+      }
+
+      app-toolbar {
+        color: var(--primary-text-color);
+        border-bottom: 1px solid var(--divider-color);
+        background-color: var(--primary-background-color);
+        min-height: 64px;
+        width: calc(100% - 32px);
+        z-index: 11;
+      }
+
+      .overlay {
+        display: none;
+      }
+
+      :host(.open) .overlay {
+        bottom: 0;
+        display: block;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 5;
+      }
+
+      .notifications {
+        overflow-y: auto;
+        padding-top: 16px;
+      }
+
+      .notification {
+        padding: 0 16px 16px;
+      }
+
+      .empty {
+        padding: 16px;
+        text-align: center;
+      }
+    </style>
+    <div class="overlay" on-click="_closeDrawer"></div>
+    <div class="container">
+      <app-toolbar>
+        <div main-title>[[localize('ui.notification_drawer.title')]]</div>
+        <paper-icon-button icon="hass:chevron-right" on-click="_closeDrawer"></paper-icon-button>
+      </app-toolbar>
+      <div class="notifications">
+        <template is="dom-if" if="[[!_empty(notifications)]]">
+          <dom-repeat items="[[notifications]]">
+            <template>
+              <div class="notification">
+                <hui-notification-item hass="[[hass]]" notification="[[item]]"></hui-notification-item>
+              </div>
+            </template>
+          </dom-repeat>
+        </template>
+        <template is="dom-if" if="[[_empty(notifications)]]">
+          <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
+        </template>
+      </div>
+    </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      narrow: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+      open: {
+        type: Boolean,
+        notify: true,
+        observer: "_openChanged",
+      },
+      hidden: {
+        type: Boolean,
+        value: true,
+        reflectToAttribute: true,
+      },
+      notifications: {
+        type: Array,
+        value: [],
+      },
+    };
+  }
+
+  _closeDrawer(ev) {
+    ev.stopPropagation();
+    this.open = false;
+  }
+
+  _empty(notifications) {
+    return notifications.length === 0;
+  }
+
+  _openChanged(open) {
+    clearTimeout(this._openTimer);
+    if (open) {
+      // Render closed then animate open
+      this.hidden = false;
+      this._openTimer = setTimeout(() => {
+        this.classList.add("open");
+      }, 50);
+    } else {
+      // Animate closed then hide
+      this.classList.remove("open");
+      this._openTimer = setTimeout(() => {
+        this.hidden = true;
+      }, 250);
+    }
+  }
+}
+customElements.define("hui-notification-drawer", HuiNotificationDrawer);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
index de9d8c8085..099831ae7a 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
@@ -1,49 +1,49 @@
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../../components/ha-card";
-
-export class HuiNotificationItemTemplate extends PolymerElement {
-  static get template() {
-    return html`
-    <style>
-      .contents {
-        padding: 16px;
-      }
-
-      ha-card .header {
-        @apply --paper-font-headline;
-        color: var(--primary-text-color);
-        padding: 16px 16px 0;
-      }
-
-      .actions {
-        border-top: 1px solid #e8e8e8;
-        padding: 5px 16px;
-      }
-
-      ::slotted(.primary) {
-        color: var(--primary-color);
-      }
-    </style>
-    <ha-card>
-      <div class="header">
-        <slot name="header"></slot>
-      </div>
-      <div class="contents">
-        <slot></slot>
-      </div>
-      <div class="actions">
-        <slot name="actions"></slot>
-      </div>
-    </ha-card>
-    `;
-  }
-}
-customElements.define(
-  "hui-notification-item-template",
-  HuiNotificationItemTemplate
-);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../../components/ha-card";
+
+export class HuiNotificationItemTemplate extends PolymerElement {
+  static get template() {
+    return html`
+    <style>
+      .contents {
+        padding: 16px;
+      }
+
+      ha-card .header {
+        @apply --paper-font-headline;
+        color: var(--primary-text-color);
+        padding: 16px 16px 0;
+      }
+
+      .actions {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
+
+      ::slotted(.primary) {
+        color: var(--primary-color);
+      }
+    </style>
+    <ha-card>
+      <div class="header">
+        <slot name="header"></slot>
+      </div>
+      <div class="contents">
+        <slot></slot>
+      </div>
+      <div class="actions">
+        <slot name="actions"></slot>
+      </div>
+    </ha-card>
+    `;
+  }
+}
+customElements.define(
+  "hui-notification-item-template",
+  HuiNotificationItemTemplate
+);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item.js b/src/panels/lovelace/components/notifications/hui-notification-item.js
index c54664c6ba..66ed2f2a2a 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-item.js
@@ -1,35 +1,35 @@
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import computeDomain from "../../../../common/entity/compute_domain";
-
-import "./hui-configurator-notification-item";
-import "./hui-persistent-notification-item";
-
-export class HuiNotificationItem extends PolymerElement {
-  static get properties() {
-    return {
-      hass: Object,
-      notification: {
-        type: Object,
-        observer: "_stateChanged",
-      },
-    };
-  }
-
-  _stateChanged(notification) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    if (!notification) return;
-
-    const domain = notification.entity_id
-      ? computeDomain(notification.entity_id)
-      : "persistent_notification";
-    const tag = `hui-${domain}-notification-item`;
-    const el = document.createElement(tag);
-    el.hass = this.hass;
-    el.notification = notification;
-    this.appendChild(el);
-  }
-}
-customElements.define("hui-notification-item", HuiNotificationItem);
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import computeDomain from "../../../../common/entity/compute_domain";
+
+import "./hui-configurator-notification-item";
+import "./hui-persistent-notification-item";
+
+export class HuiNotificationItem extends PolymerElement {
+  static get properties() {
+    return {
+      hass: Object,
+      notification: {
+        type: Object,
+        observer: "_stateChanged",
+      },
+    };
+  }
+
+  _stateChanged(notification) {
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    if (!notification) return;
+
+    const domain = notification.entity_id
+      ? computeDomain(notification.entity_id)
+      : "persistent_notification";
+    const tag = `hui-${domain}-notification-item`;
+    const el = document.createElement(tag);
+    el.hass = this.hass;
+    el.notification = notification;
+    this.appendChild(el);
+  }
+}
+customElements.define("hui-notification-item", HuiNotificationItem);
diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.js b/src/panels/lovelace/components/notifications/hui-notifications-button.js
index 5c26714296..ad352b9b75 100644
--- a/src/panels/lovelace/components/notifications/hui-notifications-button.js
+++ b/src/panels/lovelace/components/notifications/hui-notifications-button.js
@@ -1,62 +1,62 @@
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-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 EventsMixin from "../../../../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-export class HuiNotificationsButton extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-    <style>
-      :host {
-        position: relative;
-      }
-
-      .indicator {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: var(--accent-color);
-        pointer-events: none;
-      }
-
-      .indicator[hidden] {
-        display: none;
-      }
-    </style>
-    <paper-icon-button icon="hass:bell" on-click="_clicked"></paper-icon-button>
-    <span class="indicator" hidden$="[[!_hasNotifications(notifications)]]"></span>
-    `;
-  }
-
-  static get properties() {
-    return {
-      notificationsOpen: {
-        type: Boolean,
-        notify: true,
-      },
-      notifications: {
-        type: Array,
-        value: [],
-      },
-    };
-  }
-
-  _clicked() {
-    this.notificationsOpen = true;
-  }
-
-  _hasNotifications(notifications) {
-    return notifications.length > 0;
-  }
-}
-customElements.define("hui-notifications-button", HuiNotificationsButton);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+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 EventsMixin from "../../../../mixins/events-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+export class HuiNotificationsButton extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+    <style>
+      :host {
+        position: relative;
+      }
+
+      .indicator {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--accent-color);
+        pointer-events: none;
+      }
+
+      .indicator[hidden] {
+        display: none;
+      }
+    </style>
+    <paper-icon-button icon="hass:bell" on-click="_clicked"></paper-icon-button>
+    <span class="indicator" hidden$="[[!_hasNotifications(notifications)]]"></span>
+    `;
+  }
+
+  static get properties() {
+    return {
+      notificationsOpen: {
+        type: Boolean,
+        notify: true,
+      },
+      notifications: {
+        type: Array,
+        value: [],
+      },
+    };
+  }
+
+  _clicked() {
+    this.notificationsOpen = true;
+  }
+
+  _hasNotifications(notifications) {
+    return notifications.length > 0;
+  }
+}
+customElements.define("hui-notifications-button", HuiNotificationsButton);
diff --git a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
index 86bf11d006..24a55b930f 100644
--- a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
@@ -1,89 +1,89 @@
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-tooltip/paper-tooltip";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../../components/ha-relative-time";
-import "../../../../components/ha-markdown";
-import "./hui-notification-item-template";
-
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-export class HuiPersistentNotificationItem extends LocalizeMixin(
-  PolymerElement
-) {
-  static get template() {
-    return html`
-    <style>
-      .time {
-        display: flex;
-        justify-content: flex-end;
-        margin-top: 6px;
-      }
-      ha-relative-time {
-        color: var(--secondary-text-color);
-      }
-    </style>
-    <hui-notification-item-template>
-      <span slot="header">[[_computeTitle(notification)]]</span>
-
-      <ha-markdown content="[[notification.message]]"></ha-markdown>
-
-      <div class="time">
-        <span>
-          <ha-relative-time
-            hass="[[hass]]"
-            datetime="[[notification.created_at]]"
-          ></ha-relative-time>
-          <paper-tooltip>[[_computeTooltip(hass, notification)]]</paper-tooltip>
-        </span>
-      </div>
-
-      <paper-button
-        slot="actions"
-        class="primary"
-        on-click="_handleDismiss"
-      >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button>
-    </hui-notification-item-template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      notification: Object,
-    };
-  }
-
-  _handleDismiss() {
-    this.hass.callService("persistent_notification", "dismiss", {
-      notification_id: this.notification.notification_id,
-    });
-  }
-
-  _computeTitle(notification) {
-    return notification.title || notification.notification_id;
-  }
-
-  _computeTooltip(hass, notification) {
-    if (!hass || !notification) return null;
-
-    const d = new Date(notification.created_at);
-    return d.toLocaleDateString(hass.language, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      minute: "numeric",
-      hour: "numeric",
-    });
-  }
-}
-customElements.define(
-  "hui-persistent_notification-notification-item",
-  HuiPersistentNotificationItem
-);
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-tooltip/paper-tooltip";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../../components/ha-relative-time";
+import "../../../../components/ha-markdown";
+import "./hui-notification-item-template";
+
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+export class HuiPersistentNotificationItem extends LocalizeMixin(
+  PolymerElement
+) {
+  static get template() {
+    return html`
+    <style>
+      .time {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 6px;
+      }
+      ha-relative-time {
+        color: var(--secondary-text-color);
+      }
+    </style>
+    <hui-notification-item-template>
+      <span slot="header">[[_computeTitle(notification)]]</span>
+
+      <ha-markdown content="[[notification.message]]"></ha-markdown>
+
+      <div class="time">
+        <span>
+          <ha-relative-time
+            hass="[[hass]]"
+            datetime="[[notification.created_at]]"
+          ></ha-relative-time>
+          <paper-tooltip>[[_computeTooltip(hass, notification)]]</paper-tooltip>
+        </span>
+      </div>
+
+      <paper-button
+        slot="actions"
+        class="primary"
+        on-click="_handleDismiss"
+      >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button>
+    </hui-notification-item-template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      notification: Object,
+    };
+  }
+
+  _handleDismiss() {
+    this.hass.callService("persistent_notification", "dismiss", {
+      notification_id: this.notification.notification_id,
+    });
+  }
+
+  _computeTitle(notification) {
+    return notification.title || notification.notification_id;
+  }
+
+  _computeTooltip(hass, notification) {
+    if (!hass || !notification) return null;
+
+    const d = new Date(notification.created_at);
+    return d.toLocaleDateString(hass.language, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      minute: "numeric",
+      hour: "numeric",
+    });
+  }
+}
+customElements.define(
+  "hui-persistent_notification-notification-item",
+  HuiPersistentNotificationItem
+);
diff --git a/src/panels/lovelace/editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
index c674b156c9..bc4b2eea0c 100644
--- a/src/panels/lovelace/editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
@@ -1,122 +1,122 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-input/paper-textarea";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import { HomeAssistant } from "../../../types";
-import { getCardConfig, updateCardConfig } from "../common/data";
-
-import "./hui-yaml-editor";
-import "./hui-yaml-card-preview";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { HuiYAMLCardPreview } from "./hui-yaml-card-preview";
-
-export class HuiDialogEditCard extends LitElement {
-  protected hass?: HomeAssistant;
-  private _cardId?: string;
-  private _cardConfig?: string;
-  private _reloadLovelace?: () => void;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      cardId: {
-        type: Number,
-      },
-      _cardConfig: {},
-      _dialogClosedCallback: {},
-    };
-  }
-
-  public async showDialog({ hass, cardId, reloadLovelace }) {
-    this.hass = hass;
-    this._cardId = cardId;
-    this._reloadLovelace = reloadLovelace;
-    this._cardConfig = "";
-    this._loadConfig();
-    // Wait till dialog is rendered.
-    await this.updateComplete;
-    this._dialog.open();
-  }
-
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
-  }
-
-  private get _previewEl(): HuiYAMLCardPreview {
-    return this.shadowRoot!.querySelector("hui-yaml-card-preview")!;
-  }
-
-  protected render() {
-    return html`
-      <style>
-        paper-dialog {
-          width: 650px;
-        }
-      </style>
-      <paper-dialog with-backdrop>
-        <h2>Card Configuration</h2>
-        <paper-dialog-scrollable>
-          <hui-yaml-editor
-            .yaml="${this._cardConfig}"
-            @yaml-changed="${this._handleYamlChanged}"
-          ></hui-yaml-editor>
-          <hui-yaml-card-preview
-            .hass="${this.hass}"
-            .yaml="${this._cardConfig}"
-          ></hui-yaml-card-preview>
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          <paper-button @click="${this._closeDialog}">Cancel</paper-button>
-          <paper-button @click="${this._updateConfig}">Save</paper-button>
-        </div>
-      </paper-dialog>
-    `;
-  }
-
-  private _handleYamlChanged(ev) {
-    this._previewEl.yaml = ev.detail.yaml;
-  }
-
-  private _closeDialog() {
-    this._dialog.close();
-  }
-
-  private async _loadConfig() {
-    this._cardConfig = await getCardConfig(this.hass!, this._cardId!);
-    await this.updateComplete;
-    // This will center the dialog with the updated config
-    fireEvent(this._dialog, "iron-resize");
-  }
-
-  private async _updateConfig() {
-    const newCardConfig = this.shadowRoot!.querySelector("hui-yaml-editor")!
-      .yaml;
-
-    if (this._cardConfig === newCardConfig) {
-      this._dialog.close();
-      return;
-    }
-    try {
-      await updateCardConfig(this.hass!, this._cardId!, newCardConfig);
-      this._dialog.close();
-      this._reloadLovelace!();
-    } catch (err) {
-      alert(`Saving failed: ${err.reason}`);
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-dialog-edit-card": HuiDialogEditCard;
-  }
-}
-
-customElements.define("hui-dialog-edit-card", HuiDialogEditCard);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-input/paper-textarea";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "@polymer/paper-dialog/paper-dialog";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HomeAssistant } from "../../../types";
+import { getCardConfig, updateCardConfig } from "../common/data";
+
+import "./hui-yaml-editor";
+import "./hui-yaml-card-preview";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { HuiYAMLCardPreview } from "./hui-yaml-card-preview";
+
+export class HuiDialogEditCard extends LitElement {
+  protected hass?: HomeAssistant;
+  private _cardId?: string;
+  private _cardConfig?: string;
+  private _reloadLovelace?: () => void;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      cardId: {
+        type: Number,
+      },
+      _cardConfig: {},
+      _dialogClosedCallback: {},
+    };
+  }
+
+  public async showDialog({ hass, cardId, reloadLovelace }) {
+    this.hass = hass;
+    this._cardId = cardId;
+    this._reloadLovelace = reloadLovelace;
+    this._cardConfig = "";
+    this._loadConfig();
+    // Wait till dialog is rendered.
+    await this.updateComplete;
+    this._dialog.open();
+  }
+
+  private get _dialog(): PaperDialogElement {
+    return this.shadowRoot!.querySelector("paper-dialog")!;
+  }
+
+  private get _previewEl(): HuiYAMLCardPreview {
+    return this.shadowRoot!.querySelector("hui-yaml-card-preview")!;
+  }
+
+  protected render() {
+    return html`
+      <style>
+        paper-dialog {
+          width: 650px;
+        }
+      </style>
+      <paper-dialog with-backdrop>
+        <h2>Card Configuration</h2>
+        <paper-dialog-scrollable>
+          <hui-yaml-editor
+            .yaml="${this._cardConfig}"
+            @yaml-changed="${this._handleYamlChanged}"
+          ></hui-yaml-editor>
+          <hui-yaml-card-preview
+            .hass="${this.hass}"
+            .yaml="${this._cardConfig}"
+          ></hui-yaml-card-preview>
+        </paper-dialog-scrollable>
+        <div class="paper-dialog-buttons">
+          <paper-button @click="${this._closeDialog}">Cancel</paper-button>
+          <paper-button @click="${this._updateConfig}">Save</paper-button>
+        </div>
+      </paper-dialog>
+    `;
+  }
+
+  private _handleYamlChanged(ev) {
+    this._previewEl.yaml = ev.detail.yaml;
+  }
+
+  private _closeDialog() {
+    this._dialog.close();
+  }
+
+  private async _loadConfig() {
+    this._cardConfig = await getCardConfig(this.hass!, this._cardId!);
+    await this.updateComplete;
+    // This will center the dialog with the updated config
+    fireEvent(this._dialog, "iron-resize");
+  }
+
+  private async _updateConfig() {
+    const newCardConfig = this.shadowRoot!.querySelector("hui-yaml-editor")!
+      .yaml;
+
+    if (this._cardConfig === newCardConfig) {
+      this._dialog.close();
+      return;
+    }
+    try {
+      await updateCardConfig(this.hass!, this._cardId!, newCardConfig);
+      this._dialog.close();
+      this._reloadLovelace!();
+    } catch (err) {
+      alert(`Saving failed: ${err.reason}`);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-edit-card": HuiDialogEditCard;
+  }
+}
+
+customElements.define("hui-dialog-edit-card", HuiDialogEditCard);
diff --git a/src/panels/lovelace/editor/hui-yaml-card-preview.ts b/src/panels/lovelace/editor/hui-yaml-card-preview.ts
index 9eae71466a..3ca81c2c5f 100644
--- a/src/panels/lovelace/editor/hui-yaml-card-preview.ts
+++ b/src/panels/lovelace/editor/hui-yaml-card-preview.ts
@@ -1,52 +1,52 @@
-import yaml from "js-yaml";
-
-import "@polymer/paper-input/paper-textarea";
-
-import createCardElement from "../common/create-card-element";
-import createErrorCardConfig from "../common/create-error-card-config";
-import { HomeAssistant } from "../../../types";
-import { LovelaceCard } from "../types";
-
-export class HuiYAMLCardPreview extends HTMLElement {
-  private _hass?: HomeAssistant;
-
-  set hass(value: HomeAssistant) {
-    this._hass = value;
-    if (this.lastChild) {
-      (this.lastChild as LovelaceCard).hass = value;
-    }
-  }
-
-  set yaml(value: string) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
-
-    if (value === "") {
-      return;
-    }
-
-    let conf;
-    try {
-      conf = yaml.safeLoad(value);
-    } catch (err) {
-      conf = createErrorCardConfig(`Invalid YAML: ${err.message}`, undefined);
-    }
-
-    const element = createCardElement(conf);
-
-    if (this._hass) {
-      element.hass = this._hass;
-    }
-
-    this.appendChild(element);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-yaml-card-preview": HuiYAMLCardPreview;
-  }
-}
-
-customElements.define("hui-yaml-card-preview", HuiYAMLCardPreview);
+import yaml from "js-yaml";
+
+import "@polymer/paper-input/paper-textarea";
+
+import createCardElement from "../common/create-card-element";
+import createErrorCardConfig from "../common/create-error-card-config";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard } from "../types";
+
+export class HuiYAMLCardPreview extends HTMLElement {
+  private _hass?: HomeAssistant;
+
+  set hass(value: HomeAssistant) {
+    this._hass = value;
+    if (this.lastChild) {
+      (this.lastChild as LovelaceCard).hass = value;
+    }
+  }
+
+  set yaml(value: string) {
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+
+    if (value === "") {
+      return;
+    }
+
+    let conf;
+    try {
+      conf = yaml.safeLoad(value);
+    } catch (err) {
+      conf = createErrorCardConfig(`Invalid YAML: ${err.message}`, undefined);
+    }
+
+    const element = createCardElement(conf);
+
+    if (this._hass) {
+      element.hass = this._hass;
+    }
+
+    this.appendChild(element);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-card-preview": HuiYAMLCardPreview;
+  }
+}
+
+customElements.define("hui-yaml-card-preview", HuiYAMLCardPreview);
diff --git a/src/panels/lovelace/editor/hui-yaml-editor.ts b/src/panels/lovelace/editor/hui-yaml-editor.ts
index f1bdaa58e0..e1977849c7 100644
--- a/src/panels/lovelace/editor/hui-yaml-editor.ts
+++ b/src/panels/lovelace/editor/hui-yaml-editor.ts
@@ -1,41 +1,41 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-
-import "@polymer/paper-input/paper-textarea";
-
-export class HuiYAMLEditor extends LitElement {
-  public yaml?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      yaml: {},
-    };
-  }
-
-  protected render() {
-    return html`
-      <style>
-        paper-textarea {
-          --paper-input-container-shared-input-style_-_font-family: monospace;
-        }
-      </style>
-      <paper-textarea
-        value="${this.yaml}"
-        @value-changed="${this._valueChanged}"
-      ></paper-textarea>
-    `;
-  }
-
-  private _valueChanged(ev) {
-    this.yaml = ev.target.value;
-    fireEvent(this, "yaml-changed", { yaml: ev.target.value });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-yaml-editor": HuiYAMLEditor;
-  }
-}
-
-customElements.define("hui-yaml-editor", HuiYAMLEditor);
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+import "@polymer/paper-input/paper-textarea";
+
+export class HuiYAMLEditor extends LitElement {
+  public yaml?: string;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      yaml: {},
+    };
+  }
+
+  protected render() {
+    return html`
+      <style>
+        paper-textarea {
+          --paper-input-container-shared-input-style_-_font-family: monospace;
+        }
+      </style>
+      <paper-textarea
+        value="${this.yaml}"
+        @value-changed="${this._valueChanged}"
+      ></paper-textarea>
+    `;
+  }
+
+  private _valueChanged(ev) {
+    this.yaml = ev.target.value;
+    fireEvent(this, "yaml-changed", { yaml: ev.target.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-editor": HuiYAMLEditor;
+  }
+}
+
+customElements.define("hui-yaml-editor", HuiYAMLEditor);
diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
index 3a3fce32a8..ea45b16ba0 100644
--- a/src/panels/lovelace/elements/hui-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -1,68 +1,68 @@
-import { html, LitElement } from "@polymer/lit-element";
-
-import "../../../components/ha-icon";
-
-import { computeTooltip } from "../common/compute-tooltip";
-import { handleClick } from "../common/handle-click";
-import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceElementConfig {
-  icon: string;
-}
-
-export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.icon) {
-      throw Error("Invalid Configuration: 'icon' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-icon
-        .icon="${this._config.icon}"
-        .title="${computeTooltip(this.hass!, this._config)}"
-        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
-        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
-        .longPress="${longPress()}"
-      ></ha-icon>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-icon-element": HuiIconElement;
-  }
-}
-
-customElements.define("hui-icon-element", HuiIconElement);
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/ha-icon";
+
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  icon: string;
+}
+
+export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.icon) {
+      throw Error("Invalid Configuration: 'icon' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon
+        .icon="${this._config.icon}"
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      ></ha-icon>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-icon-element": HuiIconElement;
+  }
+}
+
+customElements.define("hui-icon-element", HuiIconElement);
diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts
index 5f5992a9cf..2c1af807f5 100644
--- a/src/panels/lovelace/elements/hui-image-element.ts
+++ b/src/panels/lovelace/elements/hui-image-element.ts
@@ -1,94 +1,94 @@
-import { html, LitElement } from "@polymer/lit-element";
-
-import "../components/hui-image";
-
-import { computeTooltip } from "../common/compute-tooltip";
-import { handleClick } from "../common/handle-click";
-import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceElementConfig {
-  image?: string;
-  state_image?: string;
-  camera_image?: string;
-  filter?: string;
-  state_filter?: string;
-  aspect_ratio?: string;
-}
-
-export class HuiImageElement extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: Config): void {
-    if (!config) {
-      throw Error("Error in element configuration");
-    }
-
-    this.classList.toggle("clickable", config.tap_action !== "none");
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <hui-image
-        .hass=${this.hass}
-        .entity="${this._config.entity}"
-        .image="${this._config.image}"
-        .stateImage=${this._config.state_image}
-        .cameraImage=${this._config.camera_image}
-        .filter=${this._config.filter}
-        .stateFilter=${this._config.state_filter}
-        .title="${computeTooltip(this.hass!, this._config)}"
-        .aspectRatio="${this._config.aspect_ratio}"
-        @ha-click="${this._handleClick}"
-        @ha-hold="${this._handleHold}"
-        .longPress="${longPress()}"
-      ></hui-image>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host(.clickable) {
-          cursor: pointer;
-          overflow: hidden;
-          -webkit-touch-callout: none !important;
-        }
-        hui-image {
-          -webkit-user-select: none !important;
-        }
-      </style>
-    `;
-  }
-
-  private _handleClick() {
-    handleClick(this, this.hass!, this._config!, false);
-  }
-
-  private _handleHold() {
-    handleClick(this, this.hass!, this._config!, true);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-image-element": HuiImageElement;
-  }
-}
-
-customElements.define("hui-image-element", HuiImageElement);
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../components/hui-image";
+
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  image?: string;
+  state_image?: string;
+  camera_image?: string;
+  filter?: string;
+  state_filter?: string;
+  aspect_ratio?: string;
+}
+
+export class HuiImageElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config) {
+      throw Error("Error in element configuration");
+    }
+
+    this.classList.toggle("clickable", config.tap_action !== "none");
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-image
+        .hass=${this.hass}
+        .entity="${this._config.entity}"
+        .image="${this._config.image}"
+        .stateImage=${this._config.state_image}
+        .cameraImage=${this._config.camera_image}
+        .filter=${this._config.filter}
+        .stateFilter=${this._config.state_filter}
+        .title="${computeTooltip(this.hass!, this._config)}"
+        .aspectRatio="${this._config.aspect_ratio}"
+        @ha-click="${this._handleClick}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+      ></hui-image>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host(.clickable) {
+          cursor: pointer;
+          overflow: hidden;
+          -webkit-touch-callout: none !important;
+        }
+        hui-image {
+          -webkit-user-select: none !important;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-image-element": HuiImageElement;
+  }
+}
+
+customElements.define("hui-image-element", HuiImageElement);
diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts
index 7a39f19d35..157dfae9ba 100644
--- a/src/panels/lovelace/elements/hui-service-button-element.ts
+++ b/src/panels/lovelace/elements/hui-service-button-element.ts
@@ -1,74 +1,74 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import "../../../components/buttons/ha-call-service-button";
-
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-
-export class HuiServiceButtonElement extends LitElement
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
-  private _domain?: string;
-  private _service?: string;
-
-  static get properties() {
-    return { _config: {} };
-  }
-
-  public setConfig(config: LovelaceElementConfig): void {
-    if (!config || !config.service) {
-      throw Error("Invalid Configuration: 'service' required");
-    }
-
-    [this._domain, this._service] = config.service.split(".", 2);
-
-    if (!this._domain) {
-      throw Error("Invalid Configuration: 'service' does not have a domain");
-    }
-
-    if (!this._service) {
-      throw Error(
-        "Invalid Configuration: 'service' does not have a service name"
-      );
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-call-service-button
-        .hass="${this.hass}"
-        .domain="${this._domain}"
-        .service="${this._service}"
-        .service-data="${this._config.service_data}"
-      >${this._config.title}</ha-call-service-button>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-call-service-button {
-          color: var(--primary-color);
-          white-space: nowrap;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-service-button-element": HuiServiceButtonElement;
-  }
-}
-
-customElements.define("hui-service-button-element", HuiServiceButtonElement);
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/buttons/ha-call-service-button";
+
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+
+export class HuiServiceButtonElement extends LitElement
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+  private _domain?: string;
+  private _service?: string;
+
+  static get properties() {
+    return { _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config || !config.service) {
+      throw Error("Invalid Configuration: 'service' required");
+    }
+
+    [this._domain, this._service] = config.service.split(".", 2);
+
+    if (!this._domain) {
+      throw Error("Invalid Configuration: 'service' does not have a domain");
+    }
+
+    if (!this._service) {
+      throw Error(
+        "Invalid Configuration: 'service' does not have a service name"
+      );
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-call-service-button
+        .hass="${this.hass}"
+        .domain="${this._domain}"
+        .service="${this._service}"
+        .service-data="${this._config.service_data}"
+      >${this._config.title}</ha-call-service-button>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-call-service-button {
+          color: var(--primary-color);
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-service-button-element": HuiServiceButtonElement;
+  }
+}
+
+customElements.define("hui-service-button-element", HuiServiceButtonElement);
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts
index 0c27e33f6d..f3189c990f 100644
--- a/src/panels/lovelace/elements/hui-state-badge-element.ts
+++ b/src/panels/lovelace/elements/hui-state-badge-element.ts
@@ -1,53 +1,53 @@
-import { html, LitElement } from "@polymer/lit-element";
-
-import "../../../components/entity/ha-state-label-badge";
-
-import computeStateName from "../../../common/entity/compute_state_name";
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-import { TemplateResult } from "lit-html";
-
-export class HuiStateBadgeElement extends LitElement
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: LovelaceElementConfig): void {
-    if (!config.entity) {
-      throw Error("Invalid Configuration: 'entity' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.hass.states[this._config.entity!]
-    ) {
-      return html``;
-    }
-
-    const state = this.hass.states[this._config.entity!];
-    return html`
-      <ha-state-label-badge
-        .hass=${this.hass}
-        .state=${state}
-        .title="${computeStateName(state)}"
-      ></ha-state-label-badge>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-state-badge-element": HuiStateBadgeElement;
-  }
-}
-
-customElements.define("hui-state-badge-element", HuiStateBadgeElement);
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+export class HuiStateBadgeElement extends LitElement
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.hass.states[this._config.entity!]
+    ) {
+      return html``;
+    }
+
+    const state = this.hass.states[this._config.entity!];
+    return html`
+      <ha-state-label-badge
+        .hass=${this.hass}
+        .state=${state}
+        .title="${computeStateName(state)}"
+      ></ha-state-label-badge>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-badge-element": HuiStateBadgeElement;
+  }
+}
+
+customElements.define("hui-state-badge-element", HuiStateBadgeElement);
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index 5615af8614..812ea10555 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -1,77 +1,77 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import "../../../components/entity/state-badge";
-
-import { computeTooltip } from "../common/compute-tooltip";
-import { handleClick } from "../common/handle-click";
-import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-
-export class HuiStateIconElement extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: LovelaceElementConfig): void {
-    if (!config.entity) {
-      throw Error("Invalid Configuration: 'entity' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.hass.states[this._config.entity!]
-    ) {
-      return html``;
-    }
-
-    const state = this.hass!.states[this._config.entity!];
-    return html`
-      ${this.renderStyle()}
-      <state-badge
-        .stateObj=${state}
-        .title="${computeTooltip(this.hass!, this._config)}"
-        @ha-click="${this._handleClick}"
-        @ha-hold="${this._handleHold}"
-        .longPress="${longPress()}"
-      ></state-badge>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-      </style>
-    `;
-  }
-
-  private _handleClick() {
-    handleClick(this, this.hass!, this._config!, false);
-  }
-
-  private _handleHold() {
-    handleClick(this, this.hass!, this._config!, true);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-state-icon-element": HuiStateIconElement;
-  }
-}
-
-customElements.define("hui-state-icon-element", HuiStateIconElement);
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/entity/state-badge";
+
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+
+export class HuiStateIconElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: LovelaceElementConfig;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.hass.states[this._config.entity!]
+    ) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <state-badge
+        .stateObj=${state}
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${this._handleClick}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+      ></state-badge>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+      </style>
+    `;
+  }
+
+  private _handleClick() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-icon-element": HuiStateIconElement;
+  }
+}
+
+customElements.define("hui-state-icon-element", HuiStateIconElement);
diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
index 6ad1a6b93d..20b8c3287d 100644
--- a/src/panels/lovelace/elements/hui-state-label-element.ts
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -1,78 +1,78 @@
-import { html, LitElement } from "@polymer/lit-element";
-
-import "../../../components/entity/ha-state-label-badge";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-import { computeTooltip } from "../common/compute-tooltip";
-import { handleClick } from "../common/handle-click";
-import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-import { TemplateResult } from "lit-html";
-
-interface Config extends LovelaceElementConfig {
-  prefix?: string;
-  suffix?: string;
-}
-
-class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: Config): void {
-    if (!config.entity) {
-      throw Error("Invalid Configuration: 'entity' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    const state = this.hass!.states[this._config.entity!];
-    return html`
-      ${this.renderStyle()}
-      <div
-        .title="${computeTooltip(this.hass!, this._config)}"
-        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
-        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
-        .longPress="${longPress()}"
-      >
-      ${this._config.prefix}${
-      state ? computeStateDisplay(this.localize, state) : "-"
-    }${this._config.suffix}
-      </div>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
-        div {
-          padding: 8px;
-          white-space: nowrap;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-state-label-element": HuiStateLabelElement;
-  }
-}
-
-customElements.define("hui-state-label-element", HuiStateLabelElement);
+import { html, LitElement } from "@polymer/lit-element";
+
+import "../../../components/entity/ha-state-label-badge";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import { computeTooltip } from "../common/compute-tooltip";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+interface Config extends LovelaceElementConfig {
+  prefix?: string;
+  suffix?: string;
+}
+
+class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceElement {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  public setConfig(config: Config): void {
+    if (!config.entity) {
+      throw Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const state = this.hass!.states[this._config.entity!];
+    return html`
+      ${this.renderStyle()}
+      <div
+        .title="${computeTooltip(this.hass!, this._config)}"
+        @ha-click="${() => handleClick(this, this.hass!, this._config!, false)}"
+        @ha-hold="${() => handleClick(this, this.hass!, this._config!, true)}"
+        .longPress="${longPress()}"
+      >
+      ${this._config.prefix}${
+      state ? computeStateDisplay(this.localize, state) : "-"
+    }${this._config.suffix}
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+        div {
+          padding: 8px;
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-label-element": HuiStateLabelElement;
+  }
+}
+
+customElements.define("hui-state-label-element", HuiStateLabelElement);
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
index 2bc9a156d1..32dd257b2a 100644
--- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
@@ -1,65 +1,65 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import "../../../components/ha-climate-state";
-import "../components/hui-generic-entity-row";
-
-import { HomeAssistant } from "../../../types";
-import { EntityRow, EntityConfig } from "./types";
-
-class HuiClimateEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
-  private _config?: EntityConfig;
-
-  static get properties() {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public setConfig(config: EntityConfig): void {
-    if (!config || !config.entity) {
-      throw new Error("Invalid Configuration: 'entity' required");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <hui-generic-entity-row
-        .hass=${this.hass}
-        .config=${this._config}
-      >
-        <ha-climate-state
-          .hass=${this.hass}
-          .stateObj=${this.hass.states[this._config.entity]}
-        ></ha-climate-state>
-      </hui-generic-entity-row>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-climate-state {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-climate-entity-row": HuiClimateEntityRow;
-  }
-}
-
-customElements.define("hui-climate-entity-row", HuiClimateEntityRow);
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-climate-state";
+import "../components/hui-generic-entity-row";
+
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+
+class HuiClimateEntityRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: EntityConfig;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: EntityConfig): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+      >
+        <ha-climate-state
+          .hass=${this.hass}
+          .stateObj=${this.hass.states[this._config.entity]}
+        ></ha-climate-state>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-climate-state {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-climate-entity-row": HuiClimateEntityRow;
+  }
+}
+
+customElements.define("hui-climate-entity-row", HuiClimateEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-cover-entity-row.js b/src/panels/lovelace/entity-rows/hui-cover-entity-row.js
index b4c3de6953..4cdc254166 100644
--- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-cover-entity-row.js
@@ -1,74 +1,74 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/ha-cover-controls";
-import "../../../components/ha-cover-tilt-controls";
-import CoverEntity from "../../../util/cover-model";
-
-class HuiCoverEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.coverControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        ha-cover-controls,
-        ha-cover-tilt-controls {
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get coverControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[!_entityObj.isTiltOnly]]">
-        <ha-cover-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-controls>
-      </template>
-      <template is="dom-if" if="[[_entityObj.isTiltOnly]]">
-        <ha-cover-tilt-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-tilt-controls>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _entityObj: {
-        type: Object,
-        computed: "_computeEntityObj(hass, _stateObj)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeEntityObj(hass, stateObj) {
-    return stateObj ? new CoverEntity(hass, stateObj) : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-cover-entity-row", HuiCoverEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/ha-cover-controls";
+import "../../../components/ha-cover-tilt-controls";
+import CoverEntity from "../../../util/cover-model";
+
+class HuiCoverEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.coverControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        ha-cover-controls,
+        ha-cover-tilt-controls {
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get coverControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[!_entityObj.isTiltOnly]]">
+        <ha-cover-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-controls>
+      </template>
+      <template is="dom-if" if="[[_entityObj.isTiltOnly]]">
+        <ha-cover-tilt-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-tilt-controls>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _entityObj: {
+        type: Object,
+        computed: "_computeEntityObj(hass, _stateObj)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeEntityObj(hass, stateObj) {
+    return stateObj ? new CoverEntity(hass, stateObj) : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-cover-entity-row", HuiCoverEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-group-entity-row.js b/src/panels/lovelace/entity-rows/hui-group-entity-row.js
index 77720fd0bf..890b1946a0 100644
--- a/src/panels/lovelace/entity-rows/hui-group-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-group-entity-row.js
@@ -1,78 +1,78 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/entity/ha-entity-toggle";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-import { DOMAINS_TOGGLE } from "../../../common/const";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiGroupEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.groupControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get groupControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_canToggle]]">
-        <ha-entity-toggle
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_canToggle]]">
-        <div>
-          [[_computeState(_stateObj)]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _canToggle: {
-        type: Boolean,
-        computed: "_computeCanToggle(_stateObj.attributes.entity_id)",
-      },
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeCanToggle(entityIds) {
-    return entityIds.some((entityId) =>
-      DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
-    );
-  }
-
-  _computeState(stateObj) {
-    return computeStateDisplay(this.localize, stateObj);
-  }
-}
-customElements.define("hui-group-entity-row", HuiGroupEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+import { DOMAINS_TOGGLE } from "../../../common/const";
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiGroupEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.groupControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get groupControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[_canToggle]]">
+        <ha-entity-toggle
+          hass="[[hass]]"
+          state-obj="[[_stateObj]]"
+        ></ha-entity-toggle>
+      </template>
+      <template is="dom-if" if="[[!_canToggle]]">
+        <div>
+          [[_computeState(_stateObj)]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _canToggle: {
+        type: Boolean,
+        computed: "_computeCanToggle(_stateObj.attributes.entity_id)",
+      },
+    };
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeCanToggle(entityIds) {
+    return entityIds.some((entityId) =>
+      DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
+    );
+  }
+
+  _computeState(stateObj) {
+    return computeStateDisplay(this.localize, stateObj);
+  }
+}
+customElements.define("hui-group-entity-row", HuiGroupEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js
index 33b8272216..51435e6f18 100644
--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.js
@@ -1,170 +1,170 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-input/paper-input";
-import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/ha-slider";
-
-class HuiInputNumberEntityRow extends mixinBehaviors(
-  [IronResizableBehavior],
-  PolymerElement
-) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-        id="input_number_card"
-      >
-        ${this.inputNumberControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        .flex {
-          display: flex;
-          align-items: center;
-        }
-        .state {
-          min-width: 45px;
-          text-align: center;
-        }
-        paper-input {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-
-  static get inputNumberControlTemplate() {
-    return html`
-      <div>
-        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'slider')]]">
-          <div class="flex">
-            <ha-slider
-              min="[[_min]]"
-              max="[[_max]]"
-              value="{{_value}}"
-              step="[[_step]]"
-              pin
-              on-change="_selectedValueChanged"
-              ignore-bar-touch
-            ></ha-slider>
-            <span class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</span>
-          </div>
-        </template>
-        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'box')]]">
-          <paper-input
-            no-label-float
-            auto-validate
-            pattern="[0-9]+([\\.][0-9]+)?"
-            step="[[_step]]"
-            min="[[_min]]"
-            max="[[_max]]"
-            value="{{_value}}"
-            type="number"
-            on-change="_selectedValueChanged"
-          ></paper-input>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-      _min: {
-        type: Number,
-        value: 0,
-      },
-      _max: {
-        type: Number,
-        value: 100,
-      },
-      _step: Number,
-      _value: Number,
-    };
-  }
-
-  ready() {
-    super.ready();
-    if (typeof ResizeObserver === "function") {
-      const ro = new ResizeObserver((entries) => {
-        entries.forEach(() => {
-          this._hiddenState();
-        });
-      });
-      ro.observe(this.$.input_number_card);
-    } else {
-      this.addEventListener("iron-resize", this._hiddenState);
-    }
-  }
-
-  _equals(a, b) {
-    return a === b;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _hiddenState() {
-    if (
-      !this.$ ||
-      !this._stateObj ||
-      this._stateObj.attributes.mode !== "slider"
-    )
-      return;
-    const width = this.$.input_number_card.offsetWidth;
-    const stateEl = this.shadowRoot.querySelector(".state");
-    if (!stateEl) return;
-    stateEl.hidden = width <= 350;
-  }
-
-  _stateObjChanged(stateObj, oldStateObj) {
-    if (!stateObj) return;
-
-    this.setProperties({
-      _min: Number(stateObj.attributes.min),
-      _max: Number(stateObj.attributes.max),
-      _step: Number(stateObj.attributes.step),
-      _value: Number(stateObj.state),
-    });
-    if (
-      oldStateObj &&
-      stateObj.attributes.mode === "slider" &&
-      oldStateObj.attributes.mode !== "slider"
-    ) {
-      this._hiddenState();
-    }
-  }
-
-  _selectedValueChanged() {
-    if (this._value === Number(this._stateObj.state)) return;
-
-    this.hass.callService("input_number", "set_value", {
-      value: this._value,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-}
-customElements.define("hui-input-number-entity-row", HuiInputNumberEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-input/paper-input";
+import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
+import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/ha-slider";
+
+class HuiInputNumberEntityRow extends mixinBehaviors(
+  [IronResizableBehavior],
+  PolymerElement
+) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+        id="input_number_card"
+      >
+        ${this.inputNumberControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        .flex {
+          display: flex;
+          align-items: center;
+        }
+        .state {
+          min-width: 45px;
+          text-align: center;
+        }
+        paper-input {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+
+  static get inputNumberControlTemplate() {
+    return html`
+      <div>
+        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'slider')]]">
+          <div class="flex">
+            <ha-slider
+              min="[[_min]]"
+              max="[[_max]]"
+              value="{{_value}}"
+              step="[[_step]]"
+              pin
+              on-change="_selectedValueChanged"
+              ignore-bar-touch
+            ></ha-slider>
+            <span class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</span>
+          </div>
+        </template>
+        <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'box')]]">
+          <paper-input
+            no-label-float
+            auto-validate
+            pattern="[0-9]+([\\.][0-9]+)?"
+            step="[[_step]]"
+            min="[[_min]]"
+            max="[[_max]]"
+            value="{{_value}}"
+            type="number"
+            on-change="_selectedValueChanged"
+          ></paper-input>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+        observer: "_stateObjChanged",
+      },
+      _min: {
+        type: Number,
+        value: 0,
+      },
+      _max: {
+        type: Number,
+        value: 100,
+      },
+      _step: Number,
+      _value: Number,
+    };
+  }
+
+  ready() {
+    super.ready();
+    if (typeof ResizeObserver === "function") {
+      const ro = new ResizeObserver((entries) => {
+        entries.forEach(() => {
+          this._hiddenState();
+        });
+      });
+      ro.observe(this.$.input_number_card);
+    } else {
+      this.addEventListener("iron-resize", this._hiddenState);
+    }
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _hiddenState() {
+    if (
+      !this.$ ||
+      !this._stateObj ||
+      this._stateObj.attributes.mode !== "slider"
+    )
+      return;
+    const width = this.$.input_number_card.offsetWidth;
+    const stateEl = this.shadowRoot.querySelector(".state");
+    if (!stateEl) return;
+    stateEl.hidden = width <= 350;
+  }
+
+  _stateObjChanged(stateObj, oldStateObj) {
+    if (!stateObj) return;
+
+    this.setProperties({
+      _min: Number(stateObj.attributes.min),
+      _max: Number(stateObj.attributes.max),
+      _step: Number(stateObj.attributes.step),
+      _value: Number(stateObj.state),
+    });
+    if (
+      oldStateObj &&
+      stateObj.attributes.mode === "slider" &&
+      oldStateObj.attributes.mode !== "slider"
+    ) {
+      this._hiddenState();
+    }
+  }
+
+  _selectedValueChanged() {
+    if (this._value === Number(this._stateObj.state)) return;
+
+    this.hass.callService("input_number", "set_value", {
+      value: this._value,
+      entity_id: this._stateObj.entity_id,
+    });
+  }
+}
+customElements.define("hui-input-number-entity-row", HuiInputNumberEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js
index 61ce4317c4..a1f6815cff 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js
@@ -1,107 +1,107 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-
-import "../../../components/entity/state-badge";
-
-import computeStateName from "../../../common/entity/compute_state_name";
-
-import EventsMixin from "../../../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <template is="dom-if" if="[[_stateObj]]">
-        <state-badge state-obj="[[_stateObj]]"></state-badge>
-        <paper-dropdown-menu on-click="_stopPropagation" selected-item-label="{{_selected}}" label="[[_computeName(_config.name, _stateObj)]]">
-          <paper-listbox slot="dropdown-content" selected="[[_computeSelected(_stateObj)]]">
-            <template is="dom-repeat" items="[[_stateObj.attributes.options]]">
-              <paper-item>[[item]]</paper-item>
-            </template>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div class="not-found">
-          Entity not available: [[_config.entity]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        paper-dropdown-menu {
-          margin-left: 16px;
-          flex: 1;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _selected: {
-        type: String,
-        observer: "_selectedChanged",
-      },
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeName(name, stateObj) {
-    return name || computeStateName(stateObj);
-  }
-
-  _computeSelected(stateObj) {
-    return stateObj.attributes.options.indexOf(stateObj.state);
-  }
-
-  _selectedChanged(option) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (option === "" || option === this._stateObj.state) {
-      return;
-    }
-    this.hass.callService("input_select", "select_option", {
-      option: option,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-
-  _stopPropagation(ev) {
-    ev.stopPropagation();
-  }
-}
-customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+
+import "../../../components/entity/state-badge";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+
+import EventsMixin from "../../../mixins/events-mixin";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <template is="dom-if" if="[[_stateObj]]">
+        <state-badge state-obj="[[_stateObj]]"></state-badge>
+        <paper-dropdown-menu on-click="_stopPropagation" selected-item-label="{{_selected}}" label="[[_computeName(_config.name, _stateObj)]]">
+          <paper-listbox slot="dropdown-content" selected="[[_computeSelected(_stateObj)]]">
+            <template is="dom-repeat" items="[[_stateObj.attributes.options]]">
+              <paper-item>[[item]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </template>
+      <template is="dom-if" if="[[!_stateObj]]">
+        <div class="not-found">
+          Entity not available: [[_config.entity]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        paper-dropdown-menu {
+          margin-left: 16px;
+          flex: 1;
+        }
+        .not-found {
+          flex: 1;
+          background-color: yellow;
+          padding: 8px;
+        }
+      </style>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _selected: {
+        type: String,
+        observer: "_selectedChanged",
+      },
+    };
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeName(name, stateObj) {
+    return name || computeStateName(stateObj);
+  }
+
+  _computeSelected(stateObj) {
+    return stateObj.attributes.options.indexOf(stateObj.state);
+  }
+
+  _selectedChanged(option) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (option === "" || option === this._stateObj.state) {
+      return;
+    }
+    this.hass.callService("input_select", "select_option", {
+      option: option,
+      entity_id: this._stateObj.entity_id,
+    });
+  }
+
+  _stopPropagation(ev) {
+    ev.stopPropagation();
+  }
+}
+customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
index dc27bb8315..e6e00de53d 100644
--- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js
@@ -1,73 +1,73 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-input/paper-input";
-
-import "../components/hui-generic-entity-row";
-
-class HuiInputTextEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.inputTextControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get inputTextControlTemplate() {
-    return html`
-      <paper-input
-        no-label-float
-        minlength="[[_stateObj.attributes.min]]"
-        maxlength="[[_stateObj.attributes.max]]"
-        value="{{_value}}"
-        auto-validate="[[_stateObj.attributes.pattern]]"
-        pattern="[[_stateObj.attributes.pattern]]"
-        type="[[_stateObj.attributes.mode]]"
-        on-change="_selectedValueChanged"
-        placeholder="(empty value)"
-      ></paper-input>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-      _value: String,
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _stateObjChanged(stateObj) {
-    this._value = stateObj && stateObj.state;
-  }
-
-  _selectedValueChanged() {
-    if (this._value === this._stateObj.state) {
-      return;
-    }
-    this.hass.callService("input_text", "set_value", {
-      value: this._value,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-}
-customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-input/paper-input";
+
+import "../components/hui-generic-entity-row";
+
+class HuiInputTextEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.inputTextControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get inputTextControlTemplate() {
+    return html`
+      <paper-input
+        no-label-float
+        minlength="[[_stateObj.attributes.min]]"
+        maxlength="[[_stateObj.attributes.max]]"
+        value="{{_value}}"
+        auto-validate="[[_stateObj.attributes.pattern]]"
+        pattern="[[_stateObj.attributes.pattern]]"
+        type="[[_stateObj.attributes.mode]]"
+        on-change="_selectedValueChanged"
+        placeholder="(empty value)"
+      ></paper-input>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+        observer: "_stateObjChanged",
+      },
+      _value: String,
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _stateObjChanged(stateObj) {
+    this._value = stateObj && stateObj.state;
+  }
+
+  _selectedValueChanged() {
+    if (this._value === this._stateObj.state) {
+      return;
+    }
+    this.hass.callService("input_text", "set_value", {
+      value: this._value,
+      entity_id: this._stateObj.entity_id,
+    });
+  }
+}
+customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.js b/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
index f75559d30a..57a6835813 100644
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
@@ -1,83 +1,83 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
-
-import "../components/hui-generic-entity-row";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiLockEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.lockControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get lockControlTemplate() {
-    return html`
-      <paper-button on-click="_callService">
-        [[_computeButtonTitle(_stateObj.state)]]
-      </paper-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeButtonTitle(state) {
-    return state === "locked"
-      ? this.localize("ui.card.lock.unlock")
-      : this.localize("ui.card.lock.lock");
-  }
-
-  _callService(ev) {
-    ev.stopPropagation();
-    const stateObj = this._stateObj;
-    this.hass.callService(
-      "lock",
-      stateObj.state === "locked" ? "unlock" : "lock",
-      { entity_id: stateObj.entity_id }
-    );
-  }
-}
-customElements.define("hui-lock-entity-row", HuiLockEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../components/hui-generic-entity-row";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiLockEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.lockControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get lockControlTemplate() {
+    return html`
+      <paper-button on-click="_callService">
+        [[_computeButtonTitle(_stateObj.state)]]
+      </paper-button>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeButtonTitle(state) {
+    return state === "locked"
+      ? this.localize("ui.card.lock.unlock")
+      : this.localize("ui.card.lock.lock");
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    const stateObj = this._stateObj;
+    this.hass.callService(
+      "lock",
+      stateObj.state === "locked" ? "unlock" : "lock",
+      { entity_id: stateObj.entity_id }
+    );
+  }
+}
+customElements.define("hui-lock-entity-row", HuiLockEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js
index b6d90e944f..44f5bad81c 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.js
@@ -1,162 +1,162 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-const SUPPORT_PAUSE = 1;
-const SUPPORT_NEXT_TRACK = 32;
-const SUPPORTS_PLAY = 16384;
-const OFF_STATES = ["off", "idle"];
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiMediaPlayerEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-        show-secondary="false"
-      >
-        ${this.mediaPlayerControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        .controls {
-          white-space: nowrap;
-        }
-      </style>
-    `;
-  }
-
-  static get mediaPlayerControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[!_isOff(_stateObj.state)]]">
-        <div class="controls">
-          <template is="dom-if" if="[[_computeControlIcon(_stateObj)]]">
-            <paper-icon-button
-              icon="[[_computeControlIcon(_stateObj)]]"
-              on-click="_playPause"
-            ></paper-icon-button>
-          </template>
-          <template is="dom-if" if="[[_supportsNext(_stateObj)]]">
-            <paper-icon-button
-              icon="hass:skip-next"
-              on-click="_nextTrack"
-            ></paper-icon-button>
-          </template>
-        </div>
-      </template>
-      <template is="dom-if" if="[[_isOff(_stateObj.state)]]">
-        <div>[[_computeState(_stateObj.state)]]</div>
-      </template>
-
-      <div slot="secondary">
-        [[_computeMediaTitle(_stateObj)]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeControlIcon(stateObj) {
-    if (!stateObj) return null;
-
-    if (stateObj.state !== "playing") {
-      return stateObj.attributes.supported_features & SUPPORTS_PLAY
-        ? "hass:play"
-        : "";
-    }
-
-    return stateObj.attributes.supported_features & SUPPORT_PAUSE
-      ? "hass:pause"
-      : "hass:stop";
-  }
-
-  _computeMediaTitle(stateObj) {
-    if (!stateObj || this._isOff(stateObj.state)) return null;
-
-    switch (stateObj.attributes.media_content_type) {
-      case "music":
-        return `${stateObj.attributes.media_artist}: ${
-          stateObj.attributes.media_title
-        }`;
-      case "tvshow":
-        return `${stateObj.attributes.media_series_title}: ${
-          stateObj.attributes.media_title
-        }`;
-      default:
-        return (
-          stateObj.attributes.media_title ||
-          stateObj.attributes.app_name ||
-          stateObj.state
-        );
-    }
-  }
-
-  _computeState(state) {
-    return (
-      this.localize(`state.media_player.${state}`) ||
-      this.localize(`state.default.${state}`) ||
-      state
-    );
-  }
-
-  _callService(service) {
-    this.hass.callService("media_player", service, {
-      entity_id: this._config.entity,
-    });
-  }
-
-  _playPause(event) {
-    event.stopPropagation();
-    this._callService("media_play_pause");
-  }
-
-  _nextTrack(event) {
-    event.stopPropagation();
-    if (this._stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK) {
-      this._callService("media_next_track");
-    }
-  }
-
-  _isOff(state) {
-    return OFF_STATES.includes(state);
-  }
-
-  _supportsNext(stateObj) {
-    return (
-      stateObj && stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK
-    );
-  }
-}
-customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);
+import "@polymer/paper-icon-button/paper-icon-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+const SUPPORT_PAUSE = 1;
+const SUPPORT_NEXT_TRACK = 32;
+const SUPPORTS_PLAY = 16384;
+const OFF_STATES = ["off", "idle"];
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiMediaPlayerEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+        show-secondary="false"
+      >
+        ${this.mediaPlayerControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        .controls {
+          white-space: nowrap;
+        }
+      </style>
+    `;
+  }
+
+  static get mediaPlayerControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[!_isOff(_stateObj.state)]]">
+        <div class="controls">
+          <template is="dom-if" if="[[_computeControlIcon(_stateObj)]]">
+            <paper-icon-button
+              icon="[[_computeControlIcon(_stateObj)]]"
+              on-click="_playPause"
+            ></paper-icon-button>
+          </template>
+          <template is="dom-if" if="[[_supportsNext(_stateObj)]]">
+            <paper-icon-button
+              icon="hass:skip-next"
+              on-click="_nextTrack"
+            ></paper-icon-button>
+          </template>
+        </div>
+      </template>
+      <template is="dom-if" if="[[_isOff(_stateObj.state)]]">
+        <div>[[_computeState(_stateObj.state)]]</div>
+      </template>
+
+      <div slot="secondary">
+        [[_computeMediaTitle(_stateObj)]]
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeControlIcon(stateObj) {
+    if (!stateObj) return null;
+
+    if (stateObj.state !== "playing") {
+      return stateObj.attributes.supported_features & SUPPORTS_PLAY
+        ? "hass:play"
+        : "";
+    }
+
+    return stateObj.attributes.supported_features & SUPPORT_PAUSE
+      ? "hass:pause"
+      : "hass:stop";
+  }
+
+  _computeMediaTitle(stateObj) {
+    if (!stateObj || this._isOff(stateObj.state)) return null;
+
+    switch (stateObj.attributes.media_content_type) {
+      case "music":
+        return `${stateObj.attributes.media_artist}: ${
+          stateObj.attributes.media_title
+        }`;
+      case "tvshow":
+        return `${stateObj.attributes.media_series_title}: ${
+          stateObj.attributes.media_title
+        }`;
+      default:
+        return (
+          stateObj.attributes.media_title ||
+          stateObj.attributes.app_name ||
+          stateObj.state
+        );
+    }
+  }
+
+  _computeState(state) {
+    return (
+      this.localize(`state.media_player.${state}`) ||
+      this.localize(`state.default.${state}`) ||
+      state
+    );
+  }
+
+  _callService(service) {
+    this.hass.callService("media_player", service, {
+      entity_id: this._config.entity,
+    });
+  }
+
+  _playPause(event) {
+    event.stopPropagation();
+    this._callService("media_play_pause");
+  }
+
+  _nextTrack(event) {
+    event.stopPropagation();
+    if (this._stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK) {
+      this._callService("media_next_track");
+    }
+  }
+
+  _isOff(state) {
+    return OFF_STATES.includes(state);
+  }
+
+  _supportsNext(stateObj) {
+    return (
+      stateObj && stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK
+    );
+  }
+}
+customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.js b/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
index f0d1544335..62cf454c74 100644
--- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
@@ -1,70 +1,70 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
-
-import "../components/hui-generic-entity-row";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiSceneEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.sceneControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get sceneControlTemplate() {
-    return html`
-      <paper-button on-click="_callService">
-        [[localize('ui.card.scene.activate')]]
-      </paper-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _callService(ev) {
-    ev.stopPropagation();
-    this.hass.callService("scene", "turn_on", {
-      entity_id: this._config.entity,
-    });
-  }
-}
-customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../components/hui-generic-entity-row";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiSceneEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.sceneControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get sceneControlTemplate() {
+    return html`
+      <paper-button on-click="_callService">
+        [[localize('ui.card.scene.activate')]]
+      </paper-button>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    this.hass.callService("scene", "turn_on", {
+      entity_id: this._config.entity,
+    });
+  }
+}
+customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.js b/src/panels/lovelace/entity-rows/hui-script-entity-row.js
index db5b948160..baf27f55f5 100644
--- a/src/panels/lovelace/entity-rows/hui-script-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.js
@@ -1,78 +1,78 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/entity/ha-entity-toggle";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiScriptEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.scriptControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get scriptControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_stateObj.attributes.can_cancel]]">
-        <ha-entity-toggle state-obj="[[_stateObj]]" hass="[[hass]]"></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_stateObj.attributes.can_cancel]]">
-        <paper-button on-click="_callService">[[localize('ui.card.script.execute')]]</paper-button>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _callService(ev) {
-    ev.stopPropagation();
-    this.hass.callService("script", "turn_on", {
-      entity_id: this._config.entity,
-    });
-  }
-}
-customElements.define("hui-script-entity-row", HuiScriptEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiScriptEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.scriptControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  static get scriptControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[_stateObj.attributes.can_cancel]]">
+        <ha-entity-toggle state-obj="[[_stateObj]]" hass="[[hass]]"></ha-entity-toggle>
+      </template>
+      <template is="dom-if" if="[[!_stateObj.attributes.can_cancel]]">
+        <paper-button on-click="_callService">[[localize('ui.card.script.execute')]]</paper-button>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    this.hass.callService("script", "turn_on", {
+      entity_id: this._config.entity,
+    });
+  }
+}
+customElements.define("hui-script-entity-row", HuiScriptEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
index 9c78c3a4e9..74548b7062 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
@@ -1,70 +1,70 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiTextEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.textControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        div {
-          text-align: right;
-        }
-      </style>
-    `;
-  }
-
-  static get textControlTemplate() {
-    return html`
-      <div>
-        [[_computeState(_stateObj)]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeState(stateObj) {
-    return stateObj && computeStateDisplay(this.localize, stateObj);
-  }
-}
-customElements.define("hui-text-entity-row", HuiTextEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiTextEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.textControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        div {
+          text-align: right;
+        }
+      </style>
+    `;
+  }
+
+  static get textControlTemplate() {
+    return html`
+      <div>
+        [[_computeState(_stateObj)]]
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+
+  _computeState(stateObj) {
+    return stateObj && computeStateDisplay(this.localize, stateObj);
+  }
+}
+customElements.define("hui-text-entity-row", HuiTextEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.js b/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
index ad9d979184..8454f37ba4 100644
--- a/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
@@ -1,103 +1,103 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-
-import timerTimeRemaining from "../../../common/entity/timer_time_remaining";
-import secondsToDuration from "../../../common/datetime/seconds_to_duration";
-
-class HuiTimerEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.timerControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get timerControlTemplate() {
-    return html`
-      <div>
-        [[_computeDisplay(_stateObj, _timeRemaining)]]
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-        observer: "_stateObjChanged",
-      },
-      _timeRemaining: Number,
-    };
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._clearInterval();
-  }
-
-  _stateObjChanged(stateObj) {
-    if (stateObj) {
-      this._startInterval(stateObj);
-    } else {
-      this._clearInterval();
-    }
-  }
-
-  _clearInterval() {
-    if (this._updateRemaining) {
-      clearInterval(this._updateRemaining);
-      this._updateRemaining = null;
-    }
-  }
-
-  _startInterval(stateObj) {
-    this._clearInterval();
-    this._calculateRemaining(stateObj);
-
-    if (stateObj.state === "active") {
-      this._updateRemaining = setInterval(
-        () => this._calculateRemaining(this._stateObj),
-        1000
-      );
-    }
-  }
-
-  _calculateRemaining(stateObj) {
-    this._timeRemaining = timerTimeRemaining(stateObj);
-  }
-
-  _computeDisplay(stateObj, time) {
-    if (!stateObj) return null;
-
-    if (stateObj.state === "idle" || time === 0) return stateObj.state;
-
-    let display = secondsToDuration(time);
-
-    if (stateObj.state === "paused") {
-      display += " (paused)";
-    }
-
-    return display;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-timer-entity-row", HuiTimerEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+
+import timerTimeRemaining from "../../../common/entity/timer_time_remaining";
+import secondsToDuration from "../../../common/datetime/seconds_to_duration";
+
+class HuiTimerEntityRow extends PolymerElement {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.timerControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get timerControlTemplate() {
+    return html`
+      <div>
+        [[_computeDisplay(_stateObj, _timeRemaining)]]
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+        observer: "_stateObjChanged",
+      },
+      _timeRemaining: Number,
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearInterval();
+  }
+
+  _stateObjChanged(stateObj) {
+    if (stateObj) {
+      this._startInterval(stateObj);
+    } else {
+      this._clearInterval();
+    }
+  }
+
+  _clearInterval() {
+    if (this._updateRemaining) {
+      clearInterval(this._updateRemaining);
+      this._updateRemaining = null;
+    }
+  }
+
+  _startInterval(stateObj) {
+    this._clearInterval();
+    this._calculateRemaining(stateObj);
+
+    if (stateObj.state === "active") {
+      this._updateRemaining = setInterval(
+        () => this._calculateRemaining(this._stateObj),
+        1000
+      );
+    }
+  }
+
+  _calculateRemaining(stateObj) {
+    this._timeRemaining = timerTimeRemaining(stateObj);
+  }
+
+  _computeDisplay(stateObj, time) {
+    if (!stateObj) return null;
+
+    if (stateObj.state === "idle" || time === 0) return stateObj.state;
+
+    let display = secondsToDuration(time);
+
+    if (stateObj.state === "paused") {
+      display += " (paused)";
+    }
+
+    return display;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-timer-entity-row", HuiTimerEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js
index c75055635f..531462ff3b 100644
--- a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.js
@@ -1,76 +1,76 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/entity/ha-entity-toggle";
-
-import computeStateDisplay from "../../../common/entity/compute_state_display";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiToggleEntityRow extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.toggleControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get toggleControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[_canToggle]]">
-        <ha-entity-toggle
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></ha-entity-toggle>
-      </template>
-      <template is="dom-if" if="[[!_canToggle]]">
-        <div>
-          [[_computeState(_stateObj)]]
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _canToggle: {
-        type: Boolean,
-        computed: "_computeCanToggle(_stateObj.state)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeCanToggle(state) {
-    return state === "on" || state === "off";
-  }
-
-  _computeState(stateObj) {
-    return stateObj && computeStateDisplay(this.localize, stateObj);
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-toggle-entity-row", HuiToggleEntityRow);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+
+import computeStateDisplay from "../../../common/entity/compute_state_display";
+
+import LocalizeMixin from "../../../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiToggleEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        ${this.toggleControlTemplate}
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get toggleControlTemplate() {
+    return html`
+      <template is="dom-if" if="[[_canToggle]]">
+        <ha-entity-toggle
+          hass="[[hass]]"
+          state-obj="[[_stateObj]]"
+        ></ha-entity-toggle>
+      </template>
+      <template is="dom-if" if="[[!_canToggle]]">
+        <div>
+          [[_computeState(_stateObj)]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: "_computeStateObj(hass.states, _config.entity)",
+      },
+      _canToggle: {
+        type: Boolean,
+        computed: "_computeCanToggle(_stateObj.state)",
+      },
+    };
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeCanToggle(state) {
+    return state === "on" || state === "off";
+  }
+
+  _computeState(stateObj) {
+    return stateObj && computeStateDisplay(this.localize, stateObj);
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error("Entity not configured.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-toggle-entity-row", HuiToggleEntityRow);
diff --git a/src/panels/lovelace/ha-panel-lovelace.js b/src/panels/lovelace/ha-panel-lovelace.js
index 1d11e2d0f3..b0a2476f6c 100644
--- a/src/panels/lovelace/ha-panel-lovelace.js
+++ b/src/panels/lovelace/ha-panel-lovelace.js
@@ -1,125 +1,125 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
-
-import "../../layouts/hass-loading-screen";
-import "../../layouts/hass-error-screen";
-import "./hui-root";
-
-class Lovelace extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-        }
-      </style>
-      <template is='dom-if' if='[[_equal(_state, "loaded")]]' restamp>
-        <hui-root
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-          hass='[[hass]]'
-          route="[[route]]"
-          config='[[_config]]'
-          columns='[[_columns]]'
-          on-config-refresh='_fetchConfig'
-        ></hui-root>
-      </template>
-      <template is='dom-if' if='[[_equal(_state, "loading")]]' restamp>
-        <hass-loading-screen
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></hass-loading-screen>
-      </template>
-      <template is='dom-if' if='[[_equal(_state, "error")]]' restamp>
-        <hass-error-screen
-          title='Lovelace'
-          error='[[_errorMsg]]'
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        >
-          <paper-button on-click="_fetchConfig">Reload ui-lovelace.yaml</paper-button>
-        </hass-error-screen>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
-      route: Object,
-
-      _columns: {
-        type: Number,
-        value: 1,
-      },
-
-      _state: {
-        type: String,
-        value: "loading",
-      },
-
-      _errorMsg: String,
-
-      _config: {
-        type: Object,
-        value: null,
-      },
-    };
-  }
-
-  static get observers() {
-    return ["_updateColumns(narrow, showMenu)"];
-  }
-
-  ready() {
-    this._fetchConfig();
-    this._updateColumns = this._updateColumns.bind(this);
-    this.mqls = [300, 600, 900, 1200].map((width) => {
-      const mql = matchMedia(`(min-width: ${width}px)`);
-      mql.addListener(this._updateColumns);
-      return mql;
-    });
-    this._updateColumns();
-    super.ready();
-  }
-
-  _updateColumns() {
-    const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
-    // Do -1 column if the menu is docked and open
-    this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
-  }
-
-  async _fetchConfig() {
-    try {
-      const conf = await this.hass.callWS({ type: "lovelace/config" });
-      this.setProperties({
-        _config: conf,
-        _state: "loaded",
-      });
-    } catch (err) {
-      this.setProperties({
-        _state: "error",
-        _errorMsg: err.message,
-      });
-    }
-  }
-
-  _equal(a, b) {
-    return a === b;
-  }
-}
-
-customElements.define("ha-panel-lovelace", Lovelace);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@polymer/paper-button/paper-button";
+
+import "../../layouts/hass-loading-screen";
+import "../../layouts/hass-error-screen";
+import "./hui-root";
+
+class Lovelace extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+        }
+      </style>
+      <template is='dom-if' if='[[_equal(_state, "loaded")]]' restamp>
+        <hui-root
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+          hass='[[hass]]'
+          route="[[route]]"
+          config='[[_config]]'
+          columns='[[_columns]]'
+          on-config-refresh='_fetchConfig'
+        ></hui-root>
+      </template>
+      <template is='dom-if' if='[[_equal(_state, "loading")]]' restamp>
+        <hass-loading-screen
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        ></hass-loading-screen>
+      </template>
+      <template is='dom-if' if='[[_equal(_state, "error")]]' restamp>
+        <hass-error-screen
+          title='Lovelace'
+          error='[[_errorMsg]]'
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        >
+          <paper-button on-click="_fetchConfig">Reload ui-lovelace.yaml</paper-button>
+        </hass-error-screen>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+
+      narrow: {
+        type: Boolean,
+        value: false,
+      },
+
+      showMenu: {
+        type: Boolean,
+        value: false,
+      },
+
+      route: Object,
+
+      _columns: {
+        type: Number,
+        value: 1,
+      },
+
+      _state: {
+        type: String,
+        value: "loading",
+      },
+
+      _errorMsg: String,
+
+      _config: {
+        type: Object,
+        value: null,
+      },
+    };
+  }
+
+  static get observers() {
+    return ["_updateColumns(narrow, showMenu)"];
+  }
+
+  ready() {
+    this._fetchConfig();
+    this._updateColumns = this._updateColumns.bind(this);
+    this.mqls = [300, 600, 900, 1200].map((width) => {
+      const mql = matchMedia(`(min-width: ${width}px)`);
+      mql.addListener(this._updateColumns);
+      return mql;
+    });
+    this._updateColumns();
+    super.ready();
+  }
+
+  _updateColumns() {
+    const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
+    // Do -1 column if the menu is docked and open
+    this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
+  }
+
+  async _fetchConfig() {
+    try {
+      const conf = await this.hass.callWS({ type: "lovelace/config" });
+      this.setProperties({
+        _config: conf,
+        _state: "loaded",
+      });
+    } catch (err) {
+      this.setProperties({
+        _state: "error",
+        _errorMsg: err.message,
+      });
+    }
+  }
+
+  _equal(a, b) {
+    return a === b;
+  }
+}
+
+customElements.define("ha-panel-lovelace", Lovelace);
diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js
index 3e937ca764..24f7fe6167 100644
--- a/src/panels/lovelace/hui-root.js
+++ b/src/panels/lovelace/hui-root.js
@@ -1,380 +1,380 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/app-route/app-route";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-menu-button/paper-menu-button";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import scrollToTarget from "../../common/dom/scroll-to-target";
-
-import EventsMixin from "../../mixins/events-mixin";
-import NavigateMixin from "../../mixins/navigate-mixin";
-
-import "../../layouts/ha-app-layout";
-import "../../components/ha-start-voice-button";
-import "../../components/ha-icon";
-import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
-import { subscribeNotifications } from "../../data/ws-notifications";
-import "./components/notifications/hui-notification-drawer";
-import "./components/notifications/hui-notifications-button";
-import "./hui-unused-entities";
-import "./hui-view";
-import debounce from "../../common/util/debounce";
-
-import createCardElement from "./common/create-card-element";
-import computeNotifications from "./common/compute-notifications";
-
-// CSS and JS should only be imported once. Modules and HTML are safe.
-const CSS_CACHE = {};
-const JS_CACHE = {};
-
-class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-    <style include='ha-style'>
-      :host {
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-      }
-
-      ha-app-layout {
-        min-height: 100%;
-      }
-      paper-tabs {
-        margin-left: 12px;
-        --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
-        text-transform: uppercase;
-      }
-      app-toolbar a {
-        color: var(--text-primary-color, white);
-      }
-      #view {
-        min-height: calc(100vh - 112px);
-        /**
-         * Since we only set min-height, if child nodes need percentage
-         * heights they must use absolute positioning so we need relative
-         * positioning here.
-         *
-         * https://www.w3.org/TR/CSS2/visudet.html#the-height-property
-         */
-        position: relative;
-      }
-      #view.tabs-hidden {
-        min-height: calc(100vh - 64px);
-      }
-      paper-item {
-        cursor: pointer;
-      }
-    </style>
-    <app-route route="[[route]]" pattern="/:view" data="{{routeData}}"></app-route>
-    <hui-notification-drawer
-      hass="[[hass]]"
-      notifications="[[_notifications]]"
-      open="{{notificationsOpen}}"
-      narrow="[[narrow]]"
-    ></hui-notification-drawer>
-    <ha-app-layout id="layout">
-      <app-header slot="header" effects="waterfall" fixed condenses>
-        <template is='dom-if' if="[[!_editMode]]">
-          <app-toolbar>
-            <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-            <div main-title>[[_computeTitle(config)]]</div>
-            <hui-notifications-button
-              hass="[[hass]]"
-              notifications-open="{{notificationsOpen}}"
-              notifications="[[_notifications]]"
-            ></hui-notifications-button>
-            <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
-            <paper-menu-button
-              no-animations
-              horizontal-align="right"
-              horizontal-offset="-5"
-            >
-              <paper-icon-button icon="hass:dots-vertical" slot="dropdown-trigger"></paper-icon-button>
-              <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
-                <paper-item on-click="_handleRefresh">Refresh</paper-item>
-                <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
-                <paper-item on-click="_editModeEnable">Configure UI</paper-item>
-                <paper-item on-click="_handleHelp">Help</paper-item>
-              </paper-listbox>
-            </paper-menu-button>
-          </app-toolbar>
-        </template>
-        <template is='dom-if' if="[[_editMode]]">
-          <app-toolbar>
-            <paper-icon-button
-              icon='hass:close'
-              on-click='_editModeDisable'
-            ></paper-icon-button>
-            <div main-title>Edit UI</div>
-          </app-toolbar>
-        </template>
-
-        <div sticky hidden$="[[_computeTabsHidden(config.views)]]">
-          <paper-tabs scrollable selected="[[_curView]]" on-iron-activate="_handleViewSelected">
-            <template is="dom-repeat" items="[[config.views]]">
-              <paper-tab>
-                <template is="dom-if" if="[[item.icon]]">
-                  <ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
-                </template>
-                <template is="dom-if" if="[[!item.icon]]">
-                  [[_computeTabTitle(item.title)]]
-                </template>
-              </paper-tab>
-            </template>
-          </paper-tabs>
-        </div>
-      </app-header>
-
-      <div id='view' on-rebuild-view='_debouncedConfigChanged'></div>
-    </app-header-layout>
-    `;
-  }
-
-  static get properties() {
-    return {
-      narrow: Boolean,
-      showMenu: Boolean,
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: {
-        type: Object,
-        observer: "_configChanged",
-      },
-      columns: {
-        type: Number,
-        observer: "_columnsChanged",
-      },
-
-      _curView: {
-        type: Number,
-        value: 0,
-      },
-
-      route: {
-        type: Object,
-        observer: "_routeChanged",
-      },
-
-      notificationsOpen: {
-        type: Boolean,
-        value: false,
-      },
-
-      _persistentNotifications: {
-        type: Array,
-        value: [],
-      },
-
-      _notifications: {
-        type: Array,
-        computed: "_updateNotifications(hass.states, _persistentNotifications)",
-      },
-
-      _editMode: {
-        type: Boolean,
-        value: false,
-        observer: "_editModeChanged",
-      },
-
-      routeData: Object,
-    };
-  }
-
-  constructor() {
-    super();
-    this._debouncedConfigChanged = debounce(
-      () => this._selectView(this._curView),
-      100
-    );
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._unsubNotifications = subscribeNotifications(
-      this.hass.connection,
-      (notifications) => {
-        this._persistentNotifications = notifications;
-      }
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (typeof this._unsubNotifications === "function") {
-      this._unsubNotifications();
-    }
-  }
-
-  _updateNotifications(states, persistent) {
-    if (!states) return persistent;
-
-    const configurator = computeNotifications(states);
-    return persistent.concat(configurator);
-  }
-
-  _routeChanged(route) {
-    const views = this.config && this.config.views;
-    if (route.path === "" && route.prefix === "/lovelace" && views) {
-      this.navigate(`/lovelace/${views[0].id || 0}`, true);
-    } else if (this.routeData.view) {
-      const view = this.routeData.view;
-      let index = 0;
-      for (let i = 0; i < views.length; i++) {
-        if (views[i].id === view || i === parseInt(view)) {
-          index = i;
-          break;
-        }
-      }
-      if (index !== this._curView) this._selectView(index);
-    }
-  }
-
-  _computeViewId(id, index) {
-    return id || index;
-  }
-
-  _computeTitle(config) {
-    return config.title || "Home Assistant";
-  }
-
-  _computeTabsHidden(views) {
-    return views.length < 2;
-  }
-
-  _computeTabTitle(title) {
-    return title || "Unnamed view";
-  }
-
-  _handleRefresh() {
-    this.fire("config-refresh");
-  }
-
-  _handleUnusedEntities() {
-    this._selectView("unused");
-  }
-
-  _deselect(ev) {
-    ev.target.selected = null;
-  }
-
-  _handleHelp() {
-    window.open("https://www.home-assistant.io/lovelace/", "_blank");
-  }
-
-  _editModeEnable() {
-    this._editMode = true;
-  }
-
-  _editModeDisable() {
-    this._editMode = false;
-  }
-
-  _editModeChanged() {
-    this._selectView(this._curView);
-  }
-
-  _handleViewSelected(ev) {
-    const index = ev.detail.selected;
-    if (index !== this._curView) {
-      const id = this.config.views[index].id || index;
-      this.navigate(`/lovelace/${id}`);
-    }
-    scrollToTarget(this, this.$.layout.header.scrollTarget);
-  }
-
-  _selectView(viewIndex) {
-    this._curView = viewIndex;
-
-    // Recreate a new element to clear the applied themes.
-    const root = this.$.view;
-    if (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    let view;
-    let background = this.config.background || "";
-
-    if (viewIndex === "unused") {
-      view = document.createElement("hui-unused-entities");
-      view.config = this.config;
-    } else {
-      const viewConfig = this.config.views[this._curView];
-      if (viewConfig.panel) {
-        view = createCardElement(viewConfig.cards[0]);
-        view.isPanel = true;
-        view.editMode = this._editMode;
-      } else {
-        view = document.createElement("hui-view");
-        view.config = viewConfig;
-        view.columns = this.columns;
-        view.editMode = this._editMode;
-      }
-      if (viewConfig.background) background = viewConfig.background;
-    }
-
-    this.$.view.style.background = background;
-
-    view.hass = this.hass;
-    root.appendChild(view);
-  }
-
-  _hassChanged(hass) {
-    if (!this.$.view.lastChild) return;
-    this.$.view.lastChild.hass = hass;
-  }
-
-  _configChanged(config) {
-    this._loadResources(config.resources || []);
-    // On config change, recreate the view from scratch.
-    this._selectView(this._curView);
-    this.$.view.classList.toggle("tabs-hidden", config.views.length < 2);
-  }
-
-  _columnsChanged(columns) {
-    if (!this.$.view.lastChild) return;
-    this.$.view.lastChild.columns = columns;
-  }
-
-  _loadResources(resources) {
-    resources.forEach((resource) => {
-      switch (resource.type) {
-        case "css":
-          if (resource.url in CSS_CACHE) break;
-          CSS_CACHE[resource.url] = loadCSS(resource.url);
-          break;
-
-        case "js":
-          if (resource.url in JS_CACHE) break;
-          JS_CACHE[resource.url] = loadJS(resource.url);
-          break;
-
-        case "module":
-          loadModule(resource.url);
-          break;
-
-        case "html":
-          import(/* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href").then(
-            ({ importHref }) => importHref(resource.url)
-          );
-          break;
-
-        default:
-          // eslint-disable-next-line
-          console.warn("Unknown resource type specified: ${resource.type}");
-      }
-    });
-  }
-}
-customElements.define("hui-root", HUIRoot);
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/app-route/app-route";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-menu-button/paper-menu-button";
+import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
+
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import scrollToTarget from "../../common/dom/scroll-to-target";
+
+import EventsMixin from "../../mixins/events-mixin";
+import NavigateMixin from "../../mixins/navigate-mixin";
+
+import "../../layouts/ha-app-layout";
+import "../../components/ha-start-voice-button";
+import "../../components/ha-icon";
+import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
+import { subscribeNotifications } from "../../data/ws-notifications";
+import "./components/notifications/hui-notification-drawer";
+import "./components/notifications/hui-notifications-button";
+import "./hui-unused-entities";
+import "./hui-view";
+import debounce from "../../common/util/debounce";
+
+import createCardElement from "./common/create-card-element";
+import computeNotifications from "./common/compute-notifications";
+
+// CSS and JS should only be imported once. Modules and HTML are safe.
+const CSS_CACHE = {};
+const JS_CACHE = {};
+
+class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+    <style include='ha-style'>
+      :host {
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+      }
+
+      ha-app-layout {
+        min-height: 100%;
+      }
+      paper-tabs {
+        margin-left: 12px;
+        --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
+        text-transform: uppercase;
+      }
+      app-toolbar a {
+        color: var(--text-primary-color, white);
+      }
+      #view {
+        min-height: calc(100vh - 112px);
+        /**
+         * Since we only set min-height, if child nodes need percentage
+         * heights they must use absolute positioning so we need relative
+         * positioning here.
+         *
+         * https://www.w3.org/TR/CSS2/visudet.html#the-height-property
+         */
+        position: relative;
+      }
+      #view.tabs-hidden {
+        min-height: calc(100vh - 64px);
+      }
+      paper-item {
+        cursor: pointer;
+      }
+    </style>
+    <app-route route="[[route]]" pattern="/:view" data="{{routeData}}"></app-route>
+    <hui-notification-drawer
+      hass="[[hass]]"
+      notifications="[[_notifications]]"
+      open="{{notificationsOpen}}"
+      narrow="[[narrow]]"
+    ></hui-notification-drawer>
+    <ha-app-layout id="layout">
+      <app-header slot="header" effects="waterfall" fixed condenses>
+        <template is='dom-if' if="[[!_editMode]]">
+          <app-toolbar>
+            <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+            <div main-title>[[_computeTitle(config)]]</div>
+            <hui-notifications-button
+              hass="[[hass]]"
+              notifications-open="{{notificationsOpen}}"
+              notifications="[[_notifications]]"
+            ></hui-notifications-button>
+            <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+            >
+              <paper-icon-button icon="hass:dots-vertical" slot="dropdown-trigger"></paper-icon-button>
+              <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
+                <paper-item on-click="_handleRefresh">Refresh</paper-item>
+                <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
+                <paper-item on-click="_editModeEnable">Configure UI</paper-item>
+                <paper-item on-click="_handleHelp">Help</paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </app-toolbar>
+        </template>
+        <template is='dom-if' if="[[_editMode]]">
+          <app-toolbar>
+            <paper-icon-button
+              icon='hass:close'
+              on-click='_editModeDisable'
+            ></paper-icon-button>
+            <div main-title>Edit UI</div>
+          </app-toolbar>
+        </template>
+
+        <div sticky hidden$="[[_computeTabsHidden(config.views)]]">
+          <paper-tabs scrollable selected="[[_curView]]" on-iron-activate="_handleViewSelected">
+            <template is="dom-repeat" items="[[config.views]]">
+              <paper-tab>
+                <template is="dom-if" if="[[item.icon]]">
+                  <ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
+                </template>
+                <template is="dom-if" if="[[!item.icon]]">
+                  [[_computeTabTitle(item.title)]]
+                </template>
+              </paper-tab>
+            </template>
+          </paper-tabs>
+        </div>
+      </app-header>
+
+      <div id='view' on-rebuild-view='_debouncedConfigChanged'></div>
+    </app-header-layout>
+    `;
+  }
+
+  static get properties() {
+    return {
+      narrow: Boolean,
+      showMenu: Boolean,
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+      columns: {
+        type: Number,
+        observer: "_columnsChanged",
+      },
+
+      _curView: {
+        type: Number,
+        value: 0,
+      },
+
+      route: {
+        type: Object,
+        observer: "_routeChanged",
+      },
+
+      notificationsOpen: {
+        type: Boolean,
+        value: false,
+      },
+
+      _persistentNotifications: {
+        type: Array,
+        value: [],
+      },
+
+      _notifications: {
+        type: Array,
+        computed: "_updateNotifications(hass.states, _persistentNotifications)",
+      },
+
+      _editMode: {
+        type: Boolean,
+        value: false,
+        observer: "_editModeChanged",
+      },
+
+      routeData: Object,
+    };
+  }
+
+  constructor() {
+    super();
+    this._debouncedConfigChanged = debounce(
+      () => this._selectView(this._curView),
+      100
+    );
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._unsubNotifications = subscribeNotifications(
+      this.hass.connection,
+      (notifications) => {
+        this._persistentNotifications = notifications;
+      }
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (typeof this._unsubNotifications === "function") {
+      this._unsubNotifications();
+    }
+  }
+
+  _updateNotifications(states, persistent) {
+    if (!states) return persistent;
+
+    const configurator = computeNotifications(states);
+    return persistent.concat(configurator);
+  }
+
+  _routeChanged(route) {
+    const views = this.config && this.config.views;
+    if (route.path === "" && route.prefix === "/lovelace" && views) {
+      this.navigate(`/lovelace/${views[0].id || 0}`, true);
+    } else if (this.routeData.view) {
+      const view = this.routeData.view;
+      let index = 0;
+      for (let i = 0; i < views.length; i++) {
+        if (views[i].id === view || i === parseInt(view)) {
+          index = i;
+          break;
+        }
+      }
+      if (index !== this._curView) this._selectView(index);
+    }
+  }
+
+  _computeViewId(id, index) {
+    return id || index;
+  }
+
+  _computeTitle(config) {
+    return config.title || "Home Assistant";
+  }
+
+  _computeTabsHidden(views) {
+    return views.length < 2;
+  }
+
+  _computeTabTitle(title) {
+    return title || "Unnamed view";
+  }
+
+  _handleRefresh() {
+    this.fire("config-refresh");
+  }
+
+  _handleUnusedEntities() {
+    this._selectView("unused");
+  }
+
+  _deselect(ev) {
+    ev.target.selected = null;
+  }
+
+  _handleHelp() {
+    window.open("https://www.home-assistant.io/lovelace/", "_blank");
+  }
+
+  _editModeEnable() {
+    this._editMode = true;
+  }
+
+  _editModeDisable() {
+    this._editMode = false;
+  }
+
+  _editModeChanged() {
+    this._selectView(this._curView);
+  }
+
+  _handleViewSelected(ev) {
+    const index = ev.detail.selected;
+    if (index !== this._curView) {
+      const id = this.config.views[index].id || index;
+      this.navigate(`/lovelace/${id}`);
+    }
+    scrollToTarget(this, this.$.layout.header.scrollTarget);
+  }
+
+  _selectView(viewIndex) {
+    this._curView = viewIndex;
+
+    // Recreate a new element to clear the applied themes.
+    const root = this.$.view;
+    if (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    let view;
+    let background = this.config.background || "";
+
+    if (viewIndex === "unused") {
+      view = document.createElement("hui-unused-entities");
+      view.config = this.config;
+    } else {
+      const viewConfig = this.config.views[this._curView];
+      if (viewConfig.panel) {
+        view = createCardElement(viewConfig.cards[0]);
+        view.isPanel = true;
+        view.editMode = this._editMode;
+      } else {
+        view = document.createElement("hui-view");
+        view.config = viewConfig;
+        view.columns = this.columns;
+        view.editMode = this._editMode;
+      }
+      if (viewConfig.background) background = viewConfig.background;
+    }
+
+    this.$.view.style.background = background;
+
+    view.hass = this.hass;
+    root.appendChild(view);
+  }
+
+  _hassChanged(hass) {
+    if (!this.$.view.lastChild) return;
+    this.$.view.lastChild.hass = hass;
+  }
+
+  _configChanged(config) {
+    this._loadResources(config.resources || []);
+    // On config change, recreate the view from scratch.
+    this._selectView(this._curView);
+    this.$.view.classList.toggle("tabs-hidden", config.views.length < 2);
+  }
+
+  _columnsChanged(columns) {
+    if (!this.$.view.lastChild) return;
+    this.$.view.lastChild.columns = columns;
+  }
+
+  _loadResources(resources) {
+    resources.forEach((resource) => {
+      switch (resource.type) {
+        case "css":
+          if (resource.url in CSS_CACHE) break;
+          CSS_CACHE[resource.url] = loadCSS(resource.url);
+          break;
+
+        case "js":
+          if (resource.url in JS_CACHE) break;
+          JS_CACHE[resource.url] = loadJS(resource.url);
+          break;
+
+        case "module":
+          loadModule(resource.url);
+          break;
+
+        case "html":
+          import(/* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href").then(
+            ({ importHref }) => importHref(resource.url)
+          );
+          break;
+
+        default:
+          // eslint-disable-next-line
+          console.warn("Unknown resource type specified: ${resource.type}");
+      }
+    });
+  }
+}
+customElements.define("hui-root", HUIRoot);
diff --git a/src/panels/lovelace/hui-unused-entities.js b/src/panels/lovelace/hui-unused-entities.js
index 7b066f9269..d2b84f59d1 100644
--- a/src/panels/lovelace/hui-unused-entities.js
+++ b/src/panels/lovelace/hui-unused-entities.js
@@ -1,61 +1,61 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import computeUnusedEntities from "./common/compute-unused-entities";
-import createCardElement from "./common/create-card-element";
-
-import "./cards/hui-entities-card.ts";
-
-class HuiUnusedEntities extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        #root {
-          max-width: 600px;
-          margin: 0 auto;
-          padding: 8px 0;
-        }
-      </style>
-      <div id="root"></div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: {
-        type: Object,
-        observer: "_configChanged",
-      },
-    };
-  }
-
-  _configChanged(config) {
-    const root = this.$.root;
-    if (root.lastChild) root.removeChild(root.lastChild);
-
-    const entities = computeUnusedEntities(this.hass, config).map((entity) => ({
-      entity,
-      secondary_info: "entity-id",
-    }));
-    const cardConfig = {
-      type: "entities",
-      title: "Unused entities",
-      entities,
-      show_header_toggle: false,
-    };
-    const element = createCardElement(cardConfig);
-    element.hass = this.hass;
-    root.appendChild(element);
-  }
-
-  _hassChanged(hass) {
-    const root = this.$.root;
-    if (!root.lastChild) return;
-    root.lastChild.hass = hass;
-  }
-}
-customElements.define("hui-unused-entities", HuiUnusedEntities);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import computeUnusedEntities from "./common/compute-unused-entities";
+import createCardElement from "./common/create-card-element";
+
+import "./cards/hui-entities-card.ts";
+
+class HuiUnusedEntities extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+          max-width: 600px;
+          margin: 0 auto;
+          padding: 8px 0;
+        }
+      </style>
+      <div id="root"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+    };
+  }
+
+  _configChanged(config) {
+    const root = this.$.root;
+    if (root.lastChild) root.removeChild(root.lastChild);
+
+    const entities = computeUnusedEntities(this.hass, config).map((entity) => ({
+      entity,
+      secondary_info: "entity-id",
+    }));
+    const cardConfig = {
+      type: "entities",
+      title: "Unused entities",
+      entities,
+      show_header_toggle: false,
+    };
+    const element = createCardElement(cardConfig);
+    element.hass = this.hass;
+    root.appendChild(element);
+  }
+
+  _hassChanged(hass) {
+    const root = this.$.root;
+    if (!root.lastChild) return;
+    root.lastChild.hass = hass;
+  }
+}
+customElements.define("hui-unused-entities", HuiUnusedEntities);
diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js
index 91931c71ed..770fdf878b 100644
--- a/src/panels/lovelace/hui-view.js
+++ b/src/panels/lovelace/hui-view.js
@@ -1,218 +1,218 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../components/entity/ha-state-label-badge";
-import "./components/hui-card-options.ts";
-
-import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
-
-import createCardElement from "./common/create-card-element";
-import computeCardSize from "./common/compute-card-size";
-
-class HUIView extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-      :host {
-        display: block;
-        padding: 4px 4px 0;
-        transform: translateZ(0);
-        position: relative;
-      }
-
-      #badges {
-        margin: 8px 16px;
-        font-size: 85%;
-        text-align: center;
-      }
-
-      #columns {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-      }
-
-      .column {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 500px;
-        overflow-x: hidden;
-      }
-
-      .column > * {
-        display: block;
-        margin: 4px 4px 8px;
-      }
-
-      @media (max-width: 500px) {
-        :host {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        .column > * {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-
-      @media (max-width: 599px) {
-        .column {
-          max-width: 600px;
-        }
-      }
-      </style>
-      <div id="badges"></div>
-      <div id="columns"></div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: Object,
-      columns: Number,
-      editMode: Boolean,
-    };
-  }
-
-  static get observers() {
-    return [
-      // Put all properties in 1 observer so we only call configChanged once
-      "_createBadges(config)",
-      "_createCards(config, columns, editMode)",
-    ];
-  }
-
-  constructor() {
-    super();
-    this._cards = [];
-    this._badges = [];
-  }
-
-  _createBadges(config) {
-    const root = this.$.badges;
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    if (!config || !config.badges || !Array.isArray(config.badges)) {
-      root.style.display = "none";
-      this._badges = [];
-      return;
-    }
-
-    const elements = [];
-    for (const entityId of config.badges) {
-      if (!(entityId in this.hass.states)) continue;
-
-      const element = document.createElement("ha-state-label-badge");
-      element.setProperties({
-        hass: this.hass,
-        state: this.hass.states[entityId],
-      });
-      elements.push({ element, entityId });
-      root.appendChild(element);
-    }
-    this._badges = elements;
-    root.style.display = elements.length > 0 ? "block" : "none";
-  }
-
-  _createCards(config) {
-    const root = this.$.columns;
-
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    if (!config || !config.cards || !Array.isArray(config.cards)) {
-      this._cards = [];
-      return;
-    }
-
-    const elements = [];
-    const elementsToAppend = [];
-    for (const cardConfig of config.cards) {
-      const element = createCardElement(cardConfig);
-      element.hass = this.hass;
-      elements.push(element);
-
-      if (!this.editMode) {
-        elementsToAppend.push(element);
-        continue;
-      }
-
-      const wrapper = document.createElement("hui-card-options");
-      wrapper.hass = this.hass;
-      wrapper.cardId = cardConfig.id;
-      wrapper.editMode = this.editMode;
-      wrapper.appendChild(element);
-      elementsToAppend.push(wrapper);
-    }
-
-    let columns = [];
-    const columnEntityCount = [];
-    for (let i = 0; i < this.columns; i++) {
-      columns.push([]);
-      columnEntityCount.push(0);
-    }
-
-    // Find column with < 5 entities, else column with lowest count
-    function getColumnIndex(size) {
-      let minIndex = 0;
-      for (let i = 0; i < columnEntityCount.length; i++) {
-        if (columnEntityCount[i] < 5) {
-          minIndex = i;
-          break;
-        }
-        if (columnEntityCount[i] < columnEntityCount[minIndex]) {
-          minIndex = i;
-        }
-      }
-
-      columnEntityCount[minIndex] += size;
-
-      return minIndex;
-    }
-
-    elements.forEach((el, index) => {
-      const cardSize = computeCardSize(el);
-      // Element to append might be the wrapped card when we're editing.
-      columns[getColumnIndex(cardSize)].push(elementsToAppend[index]);
-    });
-
-    // Remove empty columns
-    columns = columns.filter((val) => val.length > 0);
-
-    columns.forEach((column) => {
-      const columnEl = document.createElement("div");
-      columnEl.classList.add("column");
-      column.forEach((el) => columnEl.appendChild(el));
-      root.appendChild(columnEl);
-    });
-
-    this._cards = elements;
-
-    if ("theme" in config) {
-      applyThemesOnElement(root, this.hass.themes, config.theme);
-    }
-  }
-
-  _hassChanged(hass) {
-    this._badges.forEach((badge) => {
-      const { element, entityId } = badge;
-      element.setProperties({
-        hass,
-        state: hass.states[entityId],
-      });
-    });
-    this._cards.forEach((element) => {
-      element.hass = hass;
-    });
-  }
-}
-
-customElements.define("hui-view", HUIView);
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../components/entity/ha-state-label-badge";
+import "./components/hui-card-options.ts";
+
+import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
+
+import createCardElement from "./common/create-card-element";
+import computeCardSize from "./common/compute-card-size";
+
+class HUIView extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+      :host {
+        display: block;
+        padding: 4px 4px 0;
+        transform: translateZ(0);
+        position: relative;
+      }
+
+      #badges {
+        margin: 8px 16px;
+        font-size: 85%;
+        text-align: center;
+      }
+
+      #columns {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+      }
+
+      .column {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 500px;
+        overflow-x: hidden;
+      }
+
+      .column > * {
+        display: block;
+        margin: 4px 4px 8px;
+      }
+
+      @media (max-width: 500px) {
+        :host {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .column > * {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+
+      @media (max-width: 599px) {
+        .column {
+          max-width: 600px;
+        }
+      }
+      </style>
+      <div id="badges"></div>
+      <div id="columns"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: Object,
+      columns: Number,
+      editMode: Boolean,
+    };
+  }
+
+  static get observers() {
+    return [
+      // Put all properties in 1 observer so we only call configChanged once
+      "_createBadges(config)",
+      "_createCards(config, columns, editMode)",
+    ];
+  }
+
+  constructor() {
+    super();
+    this._cards = [];
+    this._badges = [];
+  }
+
+  _createBadges(config) {
+    const root = this.$.badges;
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.badges || !Array.isArray(config.badges)) {
+      root.style.display = "none";
+      this._badges = [];
+      return;
+    }
+
+    const elements = [];
+    for (const entityId of config.badges) {
+      if (!(entityId in this.hass.states)) continue;
+
+      const element = document.createElement("ha-state-label-badge");
+      element.setProperties({
+        hass: this.hass,
+        state: this.hass.states[entityId],
+      });
+      elements.push({ element, entityId });
+      root.appendChild(element);
+    }
+    this._badges = elements;
+    root.style.display = elements.length > 0 ? "block" : "none";
+  }
+
+  _createCards(config) {
+    const root = this.$.columns;
+
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      this._cards = [];
+      return;
+    }
+
+    const elements = [];
+    const elementsToAppend = [];
+    for (const cardConfig of config.cards) {
+      const element = createCardElement(cardConfig);
+      element.hass = this.hass;
+      elements.push(element);
+
+      if (!this.editMode) {
+        elementsToAppend.push(element);
+        continue;
+      }
+
+      const wrapper = document.createElement("hui-card-options");
+      wrapper.hass = this.hass;
+      wrapper.cardId = cardConfig.id;
+      wrapper.editMode = this.editMode;
+      wrapper.appendChild(element);
+      elementsToAppend.push(wrapper);
+    }
+
+    let columns = [];
+    const columnEntityCount = [];
+    for (let i = 0; i < this.columns; i++) {
+      columns.push([]);
+      columnEntityCount.push(0);
+    }
+
+    // Find column with < 5 entities, else column with lowest count
+    function getColumnIndex(size) {
+      let minIndex = 0;
+      for (let i = 0; i < columnEntityCount.length; i++) {
+        if (columnEntityCount[i] < 5) {
+          minIndex = i;
+          break;
+        }
+        if (columnEntityCount[i] < columnEntityCount[minIndex]) {
+          minIndex = i;
+        }
+      }
+
+      columnEntityCount[minIndex] += size;
+
+      return minIndex;
+    }
+
+    elements.forEach((el, index) => {
+      const cardSize = computeCardSize(el);
+      // Element to append might be the wrapped card when we're editing.
+      columns[getColumnIndex(cardSize)].push(elementsToAppend[index]);
+    });
+
+    // Remove empty columns
+    columns = columns.filter((val) => val.length > 0);
+
+    columns.forEach((column) => {
+      const columnEl = document.createElement("div");
+      columnEl.classList.add("column");
+      column.forEach((el) => columnEl.appendChild(el));
+      root.appendChild(columnEl);
+    });
+
+    this._cards = elements;
+
+    if ("theme" in config) {
+      applyThemesOnElement(root, this.hass.themes, config.theme);
+    }
+  }
+
+  _hassChanged(hass) {
+    this._badges.forEach((badge) => {
+      const { element, entityId } = badge;
+      element.setProperties({
+        hass,
+        state: hass.states[entityId],
+      });
+    });
+    this._cards.forEach((element) => {
+      element.hass = hass;
+    });
+  }
+}
+
+customElements.define("hui-view", HUIView);
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.ts b/src/panels/lovelace/special-rows/hui-call-service-row.ts
index 44c7f2354c..4ac0d03ff4 100644
--- a/src/panels/lovelace/special-rows/hui-call-service-row.ts
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.ts
@@ -1,93 +1,93 @@
-import { html, LitElement } from "@polymer/lit-element";
-import "@polymer/paper-button/paper-button";
-
-import "../../../components/ha-icon";
-
-import callService from "../common/call-service";
-import { EntityRow, CallServiceConfig } from "../entity-rows/types";
-import { HomeAssistant } from "../../../types";
-import { TemplateResult } from "lit-html";
-
-class HuiCallServiceRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
-  private _config?: CallServiceConfig;
-
-  static get properties() {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  public setConfig(config: CallServiceConfig): void {
-    if (!config || !config.name || !config.service) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._config = { icon: "hass:remote", action_name: "Run", ...config };
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-icon .icon="${this._config.icon}"></ha-icon>
-      <div class="flex">
-        <div>
-          ${this._config.name}
-        </div>
-        <paper-button
-          @click="${this._callService}"
-        >${this._config.action_name}</paper-button>
-      </div>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
-        .flex {
-          flex: 1;
-          overflow: hidden;
-          margin-left: 16px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .flex div {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  private _callService() {
-    callService(this._config, this.hass);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-call-service-row": HuiCallServiceRow;
-  }
-}
-
-customElements.define("hui-call-service-row", HuiCallServiceRow);
+import { html, LitElement } from "@polymer/lit-element";
+import "@polymer/paper-button/paper-button";
+
+import "../../../components/ha-icon";
+
+import callService from "../common/call-service";
+import { EntityRow, CallServiceConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+class HuiCallServiceRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: CallServiceConfig;
+
+  static get properties() {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: CallServiceConfig): void {
+    if (!config || !config.name || !config.service) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = { icon: "hass:remote", action_name: "Run", ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <ha-icon .icon="${this._config.icon}"></ha-icon>
+      <div class="flex">
+        <div>
+          ${this._config.name}
+        </div>
+        <paper-button
+          @click="${this._callService}"
+        >${this._config.action_name}</paper-button>
+      </div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        .flex {
+          flex: 1;
+          overflow: hidden;
+          margin-left: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .flex div {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+
+  private _callService() {
+    callService(this._config, this.hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-call-service-row": HuiCallServiceRow;
+  }
+}
+
+customElements.define("hui-call-service-row", HuiCallServiceRow);
diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts
index 1720063db7..f1feced482 100644
--- a/src/panels/lovelace/special-rows/hui-divider-row.ts
+++ b/src/panels/lovelace/special-rows/hui-divider-row.ts
@@ -1,53 +1,53 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { EntityRow, DividerConfig } from "../entity-rows/types";
-import { HomeAssistant } from "../../../types";
-import { TemplateResult } from "lit-html";
-
-class HuiDividerRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
-  private _config?: DividerConfig;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  public setConfig(config): void {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._config = {
-      style: {
-        height: "1px",
-        "background-color": "var(--secondary-text-color)",
-      },
-      ...config,
-    };
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    const el = document.createElement("div");
-
-    Object.keys(this._config.style).forEach((prop) => {
-      el.style.setProperty(prop, this._config!.style[prop]);
-    });
-
-    return html`
-      ${el}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-divider-row": HuiDividerRow;
-  }
-}
-
-customElements.define("hui-divider-row", HuiDividerRow);
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, DividerConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+import { TemplateResult } from "lit-html";
+
+class HuiDividerRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: DividerConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = {
+      style: {
+        height: "1px",
+        "background-color": "var(--secondary-text-color)",
+      },
+      ...config,
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const el = document.createElement("div");
+
+    Object.keys(this._config.style).forEach((prop) => {
+      el.style.setProperty(prop, this._config!.style[prop]);
+    });
+
+    return html`
+      ${el}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-divider-row": HuiDividerRow;
+  }
+}
+
+customElements.define("hui-divider-row", HuiDividerRow);
diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts
index 9033755203..a698e493ec 100644
--- a/src/panels/lovelace/special-rows/hui-section-row.ts
+++ b/src/panels/lovelace/special-rows/hui-section-row.ts
@@ -1,70 +1,70 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { EntityRow, SectionConfig } from "../entity-rows/types";
-import { HomeAssistant } from "../../../types";
-
-import "../../../components/ha-icon";
-import { TemplateResult } from "lit-html";
-
-class HuiSectionRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
-  private _config?: SectionConfig;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  public setConfig(config: SectionConfig): void {
-    if (!config) {
-      throw new Error("Error in card configuration.");
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <div class=divider></div>
-      ${
-        this._config.label
-          ? html`<div class="label">${this._config.label}</div>`
-          : html``
-      }
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        .label {
-          color: var(--primary-color);
-          margin-left: 8px;
-          margin-bottom: 16px;
-          margin-top: 16px;
-        }
-        .divider {
-          height: 1px;
-          background-color: var(--secondary-text-color);
-          opacity: 0.25;
-          margin-left: -16px;
-          margin-right: -16px;
-          margin-top: 8px;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-section-row": HuiSectionRow;
-  }
-}
-
-customElements.define("hui-section-row", HuiSectionRow);
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, SectionConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-icon";
+import { TemplateResult } from "lit-html";
+
+class HuiSectionRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: SectionConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config: SectionConfig): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div class=divider></div>
+      ${
+        this._config.label
+          ? html`<div class="label">${this._config.label}</div>`
+          : html``
+      }
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        .label {
+          color: var(--primary-color);
+          margin-left: 8px;
+          margin-bottom: 16px;
+          margin-top: 16px;
+        }
+        .divider {
+          height: 1px;
+          background-color: var(--secondary-text-color);
+          opacity: 0.25;
+          margin-left: -16px;
+          margin-right: -16px;
+          margin-top: 8px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-section-row": HuiSectionRow;
+  }
+}
+
+customElements.define("hui-section-row", HuiSectionRow);
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts
index a9ff56c400..2b42031240 100644
--- a/src/panels/lovelace/special-rows/hui-weblink-row.ts
+++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts
@@ -1,75 +1,75 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { EntityRow, WeblinkConfig } from "../entity-rows/types";
-import { HomeAssistant } from "../../../types";
-
-import "../../../components/ha-icon";
-
-import { TemplateResult } from "lit-html";
-
-class HuiWeblinkRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
-  private _config?: WeblinkConfig;
-
-  static get properties() {
-    return {
-      _config: {},
-    };
-  }
-
-  public setConfig(config: WeblinkConfig): void {
-    if (!config || !config.url) {
-      throw new Error("Invalid Configuration: 'url' required");
-    }
-
-    this._config = {
-      icon: "hass:link",
-      name: config.url,
-      ...config,
-    };
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <a href="${this._config.url}">
-        <ha-icon .icon="${this._config.icon}"></ha-icon>
-        <div>${this._config.name}</div>
-      </a>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        a {
-          display: flex;
-          align-items: center;
-          color: var(--primary-color);
-        }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
-        div {
-          flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-left: 16px;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-weblink-row": HuiWeblinkRow;
-  }
-}
-
-customElements.define("hui-weblink-row", HuiWeblinkRow);
+import { html, LitElement } from "@polymer/lit-element";
+import { EntityRow, WeblinkConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/ha-icon";
+
+import { TemplateResult } from "lit-html";
+
+class HuiWeblinkRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: WeblinkConfig;
+
+  static get properties() {
+    return {
+      _config: {},
+    };
+  }
+
+  public setConfig(config: WeblinkConfig): void {
+    if (!config || !config.url) {
+      throw new Error("Invalid Configuration: 'url' required");
+    }
+
+    this._config = {
+      icon: "hass:link",
+      name: config.url,
+      ...config,
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <a href="${this._config.url}">
+        <ha-icon .icon="${this._config.icon}"></ha-icon>
+        <div>${this._config.name}</div>
+      </a>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        a {
+          display: flex;
+          align-items: center;
+          color: var(--primary-color);
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        div {
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-left: 16px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-weblink-row": HuiWeblinkRow;
+  }
+}
+
+customElements.define("hui-weblink-row", HuiWeblinkRow);
diff --git a/test-mocha/common/util/parse_aspect_ratio_test.js b/test-mocha/common/util/parse_aspect_ratio_test.js
index 477a387a99..dd6af4f3cc 100644
--- a/test-mocha/common/util/parse_aspect_ratio_test.js
+++ b/test-mocha/common/util/parse_aspect_ratio_test.js
@@ -1,53 +1,53 @@
-import assert from "assert";
-
-import parseAspectRatio from "../../../src/common/util/parse-aspect-ratio";
-
-describe("parseAspectRatio", () => {
-  const ratio16by9 = { w: 16, h: 9 };
-  const ratio178 = { w: 1.78, h: 1 };
-
-  it("Parses 16x9", () => {
-    const r = parseAspectRatio("16x9");
-    assert.deepEqual(r, ratio16by9);
-  });
-
-  it("Parses 16:9", () => {
-    const r = parseAspectRatio("16:9");
-    assert.deepEqual(r, ratio16by9);
-  });
-
-  it("Parses 1.78x1", () => {
-    const r = parseAspectRatio("1.78x1");
-    assert.deepEqual(r, ratio178);
-  });
-
-  it("Parses 1.78:1", () => {
-    const r = parseAspectRatio("1.78:1");
-    assert.deepEqual(r, ratio178);
-  });
-
-  it("Parses 1.78", () => {
-    const r = parseAspectRatio("1.78");
-    assert.deepEqual(r, ratio178);
-  });
-
-  it("Skips null states", () => {
-    const r = parseAspectRatio(null);
-    assert.equal(r, null);
-  });
-
-  it("Skips empty states", () => {
-    const r = parseAspectRatio("   ");
-    assert.equal(r, null);
-  });
-
-  it("Skips invalid input", () => {
-    const r = parseAspectRatio("mary had a little lamb");
-    assert.equal(r, null);
-  });
-
-  it("Skips invalid, but close input", () => {
-    const r = parseAspectRatio("mary:lamb");
-    assert.equal(r, null);
-  });
-});
+import assert from "assert";
+
+import parseAspectRatio from "../../../src/common/util/parse-aspect-ratio";
+
+describe("parseAspectRatio", () => {
+  const ratio16by9 = { w: 16, h: 9 };
+  const ratio178 = { w: 1.78, h: 1 };
+
+  it("Parses 16x9", () => {
+    const r = parseAspectRatio("16x9");
+    assert.deepEqual(r, ratio16by9);
+  });
+
+  it("Parses 16:9", () => {
+    const r = parseAspectRatio("16:9");
+    assert.deepEqual(r, ratio16by9);
+  });
+
+  it("Parses 1.78x1", () => {
+    const r = parseAspectRatio("1.78x1");
+    assert.deepEqual(r, ratio178);
+  });
+
+  it("Parses 1.78:1", () => {
+    const r = parseAspectRatio("1.78:1");
+    assert.deepEqual(r, ratio178);
+  });
+
+  it("Parses 1.78", () => {
+    const r = parseAspectRatio("1.78");
+    assert.deepEqual(r, ratio178);
+  });
+
+  it("Skips null states", () => {
+    const r = parseAspectRatio(null);
+    assert.equal(r, null);
+  });
+
+  it("Skips empty states", () => {
+    const r = parseAspectRatio("   ");
+    assert.equal(r, null);
+  });
+
+  it("Skips invalid input", () => {
+    const r = parseAspectRatio("mary had a little lamb");
+    assert.equal(r, null);
+  });
+
+  it("Skips invalid, but close input", () => {
+    const r = parseAspectRatio("mary:lamb");
+    assert.equal(r, null);
+  });
+});

From 38b8e5e7b759d0f7094f6e8fa7515e1ef7f89694 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 2 Nov 2018 20:07:06 +0100
Subject: [PATCH 61/67] Update translations

---
 translations/it.json | 10 +++++-----
 translations/nn.json |  2 +-
 translations/no.json |  4 ++--
 translations/pt.json | 44 ++++++++++++++++++++++----------------------
 translations/tr.json |  4 ++--
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/translations/it.json b/translations/it.json
index 445f0c0df8..1277ee024f 100644
--- a/translations/it.json
+++ b/translations/it.json
@@ -530,13 +530,13 @@
                 "cloud": {
                     "caption": "Home Assistant Cloud",
                     "description_login": "Connesso come {email}",
-                    "description_not_login": "Accesso non effettuato"
+                    "description_not_login": "Non loggato"
                 },
                 "integrations": {
                     "caption": "integrazioni",
                     "description": "Gestisci dispositivi e servizi connessi",
                     "discovered": "Scoperto",
-                    "configured": "Configura",
+                    "configured": "Configurato",
                     "new": "Configura una nuova integrazione",
                     "configure": "Configura",
                     "none": "Non hai ancora configurato niente",
@@ -574,9 +574,9 @@
                     "dropdown_label": "Tema"
                 },
                 "refresh_tokens": {
-                    "header": "Aggiorna i token",
+                    "header": "Token di aggiornamento",
                     "description": "Ogni token di aggiornamento rappresenta una sessione di accesso. I token di aggiornamento verranno rimossi automaticamente quando si fa clic su Disconnetti. I seguenti token di aggiornamento sono attualmente attivi per il tuo account.",
-                    "token_title": "Aggiorna token per {clientId}",
+                    "token_title": "Token di aggiornamento per {clientId}",
                     "created_at": "Creato il {date}",
                     "confirm_delete": "Sei sicuro di voler eliminare il token di aggiornamento per {name} ?",
                     "delete_failed": "Impossibile eliminare il token di aggiornamento.",
@@ -862,7 +862,7 @@
             },
             "history_charts": {
                 "loading_history": "Caricamento storico",
-                "no_history_found": "Nesuno storico trovato"
+                "no_history_found": "Nessuno storico trovato"
             }
         },
         "notification_toast": {
diff --git a/translations/nn.json b/translations/nn.json
index 281453d147..38dd122172 100644
--- a/translations/nn.json
+++ b/translations/nn.json
@@ -334,7 +334,7 @@
                             },
                             "server_management": {
                                 "heading": "Serveradministrasjon",
-                                "introduction": "Kontroller Home Assistant serveren din... frå Home Assistant.",
+                                "introduction": "Kontroller Home Assistant-serveren din... frå Home Assistant.",
                                 "restart": "Omstart",
                                 "stop": "Stopp"
                             }
diff --git a/translations/no.json b/translations/no.json
index e6608f0212..e4691028e1 100644
--- a/translations/no.json
+++ b/translations/no.json
@@ -245,10 +245,10 @@
             "fog": "Tåke",
             "hail": "Hagl",
             "lightning": "Lyn",
-            "lightning-rainy": "Lyn, regnfull",
+            "lightning-rainy": "Lyn, regn",
             "partlycloudy": "Delvis skyet",
             "pouring": "Kraftig nedbør",
-            "rainy": "Regnfull",
+            "rainy": "Regn",
             "snowy": "Snø",
             "snowy-rainy": "Sludd",
             "sunny": "Solfylt",
diff --git a/translations/pt.json b/translations/pt.json
index e5f88cdc8d..ffe5be5f76 100644
--- a/translations/pt.json
+++ b/translations/pt.json
@@ -360,7 +360,7 @@
                         "introduction": "Crie automatizações para tornar a sua casa viva",
                         "default_name": "Nova Automação",
                         "save": "Guardar",
-                        "unsaved_confirm": "Você tem alterações não guardas. Tem a certeza de que quer sair?",
+                        "unsaved_confirm": "Existem alterações não guardas. Tem a certeza de que quer sair?",
                         "alias": "Nome",
                         "triggers": {
                             "header": "Gatilhos",
@@ -528,7 +528,7 @@
                     }
                 },
                 "cloud": {
-                    "caption": "",
+                    "caption": "Home Assistant Cloud",
                     "description_login": "Ligado como {email}",
                     "description_not_login": "Não está ligado"
                 },
@@ -545,9 +545,9 @@
                         "no_device": "Entidades sem dispositivos",
                         "delete_confirm": "Tem a certeza que pretende apagar esta integração?",
                         "restart_confirm": "Reinicie o Home Assistant para concluir a remoção desta integração",
-                        "manuf": "por {fabricante]",
+                        "manuf": "por {manufacturer}",
                         "hub": "Ligado via",
-                        "firmware": "",
+                        "firmware": "Firmware: {version}",
                         "device_unavailable": "Dispositivo indisponível",
                         "entity_unavailable": "Entidade indisponível"
                     }
@@ -619,14 +619,14 @@
                 "mfa_setup": {
                     "title_aborted": "Abortado",
                     "title_success": "Sucesso!",
-                    "step_done": "Configuração concluida para {step}",
+                    "step_done": "Configuração concluída para {step}",
                     "close": "Fechar",
                     "submit": "Enviar"
                 }
             },
             "page-authorize": {
                 "initializing": "A inicializar",
-                "authorizing_client": "Você está prestes a dar acesso a {clientId} à sua instância do Home Assistant.",
+                "authorizing_client": "Está prestes a dar acesso a {clientId} à sua instância do Home Assistant.",
                 "logging_in_with": "Iniciar a sessão com **{authProviderName}**.",
                 "pick_auth_provider": "Ou faça login com",
                 "abort_intro": "Login abortado",
@@ -756,22 +756,22 @@
                     "wind_speed": "Vel. do vento"
                 },
                 "cardinal_direction": {
-                    "e": "",
-                    "ene": "",
-                    "ese": "",
-                    "n": "",
-                    "ne": "",
-                    "nne": "",
-                    "nw": "",
-                    "nnw": "",
-                    "s": "",
-                    "se": "",
-                    "sse": "",
-                    "ssw": "",
-                    "sw": "",
-                    "w": "",
-                    "wnw": "",
-                    "wsw": ""
+                    "e": "E",
+                    "ene": "ENE",
+                    "ese": "ESE",
+                    "n": "N",
+                    "ne": "NE",
+                    "nne": "NNE",
+                    "nw": "NW",
+                    "nnw": "NNW",
+                    "s": "S",
+                    "se": "SE",
+                    "sse": "SSE",
+                    "ssw": "SSW",
+                    "sw": "SW",
+                    "w": "W",
+                    "wnw": "WNW",
+                    "wsw": "WSW"
                 },
                 "forecast": "Previsão"
             },
diff --git a/translations/tr.json b/translations/tr.json
index 7ae37230bc..79bcdf1f22 100644
--- a/translations/tr.json
+++ b/translations/tr.json
@@ -204,7 +204,7 @@
             "on": "Açık"
         },
         "scene": {
-            "scening": "sahneler"
+            "scening": "senaryolar"
         },
         "script": {
             "off": "Kapalı",
@@ -516,7 +516,7 @@
         "plant": "Bitki",
         "proximity": "Yakınlık",
         "remote": "Uzaktan Kumanda",
-        "scene": "Sahne",
+        "scene": "Senaryo",
         "script": "Senaryo",
         "sensor": "Sensör",
         "sun": "Güneş",

From 2ecb6e0f9e1e65364f6095d088b4bac1e1839584 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 2 Nov 2018 20:07:32 +0100
Subject: [PATCH 62/67] pic

---
 .../media_player_proxy/media_player.walkman   | Bin 16242 -> 16241 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/gallery/public/api/media_player_proxy/media_player.walkman b/gallery/public/api/media_player_proxy/media_player.walkman
index 99ea7e6d3275c9becb6d1705da901461e1e74770..760af09ebf8156ab51b3f686da37bb3127fe6592 100644
GIT binary patch
delta 12
UcmexV_pxrnWv0znnC96405U`d$N&HU

delta 14
WcmexZ_o;5fWhO@6&6k<x*#H1LT?W+v


From 372cfdecf459d8e6b083051b2b99d101b17e0f78 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Fri, 2 Nov 2018 15:59:14 -0400
Subject: [PATCH 63/67] Light, Thermostat, and Gauge - Theme Addition (#1947)

* Update to have theme options

* Make ShouldUpdate into a help function

* Adding types to changed function
---
 src/panels/lovelace/cards/hui-gauge-card.ts   | 27 +++++++------
 src/panels/lovelace/cards/hui-light-card.ts   | 39 ++++++++++--------
 .../lovelace/cards/hui-thermostat-card.ts     | 40 ++++++++++---------
 src/panels/lovelace/common/has-changed.ts     | 22 ++++++++++
 4 files changed, 81 insertions(+), 47 deletions(-)
 create mode 100644 src/panels/lovelace/common/has-changed.ts

diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 92ddcb9d1e..5a6ebddf26 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -4,11 +4,15 @@ import {
   PropertyDeclarations,
   PropertyValues,
 } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
 import { LovelaceCard, LovelaceConfig } from "../types";
 import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { TemplateResult } from "lit-html";
+
 import isValidEntityId from "../../../common/entity/valid_entity_id";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 import "../../../components/ha-card";
 
@@ -19,6 +23,7 @@ interface Config extends LovelaceConfig {
   min?: number;
   max?: number;
   severity?: object;
+  theme?: string;
 }
 
 const severityMap = {
@@ -50,7 +55,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     if (!isValidEntityId(config.entity)) {
       throw new Error("Invalid Entity");
     }
-    this._config = { min: 0, max: 100, ...config };
+    this._config = { min: 0, max: 100, theme: "default", ...config };
   }
 
   protected render(): TemplateResult {
@@ -94,19 +99,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    if (changedProps.get("_config")) {
-      return changedProps.get("_config") !== this._config;
-    }
-    return true;
+    return hasConfigOrEntityChanged(this, changedProps);
   }
 
-  protected updated(): void {
+  protected updated(changedProps: PropertyValues): void {
     if (
       !this._config ||
       !this.hass ||
@@ -134,6 +130,11 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       "--base-unit",
       this._computeBaseUnit()
     );
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.themes !== this.hass.themes) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
   }
 
   private renderStyle(): TemplateResult {
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index d8f97ca029..21de8ab87c 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -4,21 +4,24 @@ import {
   PropertyValues,
   PropertyDeclarations,
 } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { styleMap } from "lit-html/directives/styleMap";
-import computeStateName from "../../../common/entity/compute_state_name";
-import stateIcon from "../../../common/entity/state_icon";
 import { jQuery } from "../../../resources/jquery";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
 import { roundSliderStyle } from "../../../resources/jquery.roundslider";
-
 import { HomeAssistant, LightEntity } from "../../../types";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types";
 import { longPress } from "../common/directives/long-press-directive";
-import { TemplateResult } from "lit-html";
+
+import stateIcon from "../../../common/entity/state_icon";
+import computeStateName from "../../../common/entity/compute_state_name";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
 
 const lightConfig = {
   radius: 80,
@@ -37,6 +40,7 @@ const lightConfig = {
 interface Config extends LovelaceConfig {
   entity: string;
   name?: string;
+  theme?: string;
 }
 
 export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
@@ -61,7 +65,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
       throw new Error("Specify an entity from within the light domain.");
     }
 
-    this._config = config;
+    this._config = { theme: "default", ...config };
   }
 
   protected render(): TemplateResult {
@@ -113,13 +117,7 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    return (changedProps as unknown) as boolean;
+    return hasConfigOrEntityChanged(this, changedProps);
   }
 
   protected firstUpdated(): void {
@@ -136,12 +134,21 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
       (Math.round((brightness / 254) * 100) || 0) + "%";
   }
 
-  protected updated(): void {
+  protected updated(changedProps: PropertyValues): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
     const attrs = this.hass!.states[this._config!.entity].attributes;
 
     jQuery("#light", this.shadowRoot).roundSlider({
       value: Math.round((attrs.brightness / 254) * 100) || 0,
     });
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.themes !== this.hass.themes) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
   }
 
   private renderStyle(): TemplateResult {
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index ef5ca1079f..b072ef5561 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -5,17 +5,20 @@ import {
   PropertyValues,
 } from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap";
+import { TemplateResult } from "lit-html";
 import { jQuery } from "../../../resources/jquery";
 
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
-import { roundSliderStyle } from "../../../resources/jquery.roundslider";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import computeStateName from "../../../common/entity/compute_state_name";
 
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { roundSliderStyle } from "../../../resources/jquery.roundslider";
 import { HomeAssistant, ClimateEntity } from "../../../types";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types";
-import computeStateName from "../../../common/entity/compute_state_name";
-import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
 
 const thermostatConfig = {
   radius: 150,
@@ -37,6 +40,7 @@ const modeIcons = {
 
 interface Config extends LovelaceConfig {
   entity: string;
+  theme?: string;
 }
 
 function formatTemp(temps: string[]): string {
@@ -64,7 +68,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       throw new Error("Specify an entity from within the climate domain.");
     }
 
-    this._config = config;
+    this._config = { theme: "default", ...config };
   }
 
   protected render(): TemplateResult {
@@ -114,16 +118,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.get("hass")) {
-      return (
-        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    if (changedProps.has("_config")) {
-      return true;
-    }
-    return true;
+    return hasConfigOrEntityChanged(this, changedProps);
   }
 
   protected firstUpdated(): void {
@@ -146,8 +141,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     });
   }
 
-  protected updated(): void {
-    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
+  protected updated(changedProps: PropertyValues): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
 
     let sliderValue;
     let uiValue;
@@ -171,6 +170,11 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       value: sliderValue,
     });
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.themes !== this.hass.themes) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
   }
 
   private renderStyle(): TemplateResult {
diff --git a/src/panels/lovelace/common/has-changed.ts b/src/panels/lovelace/common/has-changed.ts
new file mode 100644
index 0000000000..d246bebc49
--- /dev/null
+++ b/src/panels/lovelace/common/has-changed.ts
@@ -0,0 +1,22 @@
+import { HomeAssistant } from "../../../types";
+import { PropertyValues } from "@polymer/lit-element";
+
+// Check if config or Entity changed
+export function hasConfigOrEntityChanged(
+  element: any,
+  changedProps: PropertyValues
+): boolean {
+  if (changedProps.has("_config")) {
+    return true;
+  }
+
+  const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+  if (oldHass) {
+    return (
+      oldHass.states[element._config!.entity] !==
+      element.hass!.states[element._config!.entity]
+    );
+  }
+
+  return true;
+}

From c68604d1fe249d7b19c7419e527e301d91a4949f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Sat, 3 Nov 2018 13:19:44 +0100
Subject: [PATCH 64/67] Mark edit as alpha (#1973)

---
 src/panels/lovelace/hui-root.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js
index 24f7fe6167..b1f3a8af20 100644
--- a/src/panels/lovelace/hui-root.js
+++ b/src/panels/lovelace/hui-root.js
@@ -103,7 +103,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
               <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
                 <paper-item on-click="_handleRefresh">Refresh</paper-item>
                 <paper-item on-click="_handleUnusedEntities">Unused entities</paper-item>
-                <paper-item on-click="_editModeEnable">Configure UI</paper-item>
+                <paper-item on-click="_editModeEnable">Configure UI (alpha)</paper-item>
                 <paper-item on-click="_handleHelp">Help</paper-item>
               </paper-listbox>
             </paper-menu-button>

From 092231413445b9155b986a7039a644a6e688008c Mon Sep 17 00:00:00 2001
From: Ronen Hayun <ronen.hayun@gmail.com>
Date: Sat, 3 Nov 2018 14:21:58 +0200
Subject: [PATCH 65/67] POC for RTL support (#1966)

* POC for RTL support

* POC for RTL support

* POC for RTL support
---
 src/layouts/home-assistant-main.js        |  17 +-
 src/translations/translationMetadata.json | 295 +++++++++++-----------
 src/types.ts                              |   1 +
 3 files changed, 165 insertions(+), 148 deletions(-)

diff --git a/src/layouts/home-assistant-main.js b/src/layouts/home-assistant-main.js
index aed68ad85c..2dff9ed87b 100644
--- a/src/layouts/home-assistant-main.js
+++ b/src/layouts/home-assistant-main.js
@@ -27,6 +27,9 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
       /* remove the grey tap highlights in iOS on the fullscreen touch targets */
       -webkit-tap-highlight-color: rgba(0,0,0,0);
     }
+    :host([rtl]) {
+      direction: rtl;
+    }
     iron-pages, ha-sidebar {
       /* allow a light tap highlight on the actual interface elements  */
       -webkit-tap-highlight-color: rgba(0,0,0,0.1);
@@ -42,7 +45,7 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
   </iron-media-query>
 
   <app-drawer-layout fullbleed="" force-narrow="[[computeForceNarrow(narrow, dockedSidebar)]]" responsive-width="0">
-    <app-drawer id="drawer" slot="drawer" disable-swipe="[[_computeDisableSwipe(hass)]]" swipe-open="[[!_computeDisableSwipe(hass)]]" persistent="[[dockedSidebar]]">
+    <app-drawer align="start" id="drawer" slot="drawer" disable-swipe="[[_computeDisableSwipe(hass)]]" swipe-open="[[!_computeDisableSwipe(hass)]]" persistent="[[dockedSidebar]]">
       <ha-sidebar narrow="[[narrow]]" hass="[[hass]]" default-page="[[_defaultPage]]"></ha-sidebar>
     </app-drawer>
 
@@ -69,6 +72,11 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
         type: Boolean,
         computed: "computeDockedSidebar(hass)",
       },
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "computeRTL(hass)",
+      },
     };
   }
 
@@ -123,6 +131,13 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
     return hass.dockedSidebar;
   }
 
+  computeRTL(hass) {
+    return (
+      hass.translationMetadata.translations[hass.selectedLanguage].isRTL ||
+      false
+    );
+  }
+
   _computeDisableSwipe(hass) {
     return NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
   }
diff --git a/src/translations/translationMetadata.json b/src/translations/translationMetadata.json
index aeb5f81a0f..3a31673c25 100644
--- a/src/translations/translationMetadata.json
+++ b/src/translations/translationMetadata.json
@@ -1,149 +1,150 @@
 {
-	"ar": {
-		"nativeName": "العربية"
-	},
-	"bg": {
-		"nativeName": "Български"
-	},
-	"bs": {
-		"nativeName": "Bosanski"
-	},
-	"ca": {
-		"nativeName": "Català"
-	},
-	"cs": {
-		"nativeName": "Čeština"
-	},
-	"cy": {
-		"nativeName": "Cymraeg"
-	},
-	"da": {
-		"nativeName": "Dansk"
-	},
-	"de": {
-		"nativeName": "Deutsch"
-	},
-	"el": {
-		"nativeName": "Ελληνικά"
-	},
-	"en": {
-		"nativeName": "English"
-	},
-	"es": {
-		"nativeName": "Español"
-	},
-	"es-419": {
-		"nativeName": "Español (Latin America)"
-	},
-	"et": {
-		"nativeName": "Eesti"
-	},
-	"fa": {
-		"nativeName": "فارسی"
-	},
-	"fi": {
-		"nativeName": "Suomi"
-	},
-	"fr": {
-		"nativeName": "Français"
-	},
-	"gsw": {
-		"nativeName": "Schwiizerdütsch"
-	},
-	"he": {
-		"nativeName": "עברית"
-	},
-	"hi": {
-		"nativeName": "हिन्दी"
-	},
-	"hr": {
-		"nativeName": "Hrvatski"
-	},
-	"hu": {
-		"nativeName": "Magyar"
-	},
-	"id": {
-		"nativeName": "Indonesia"
-	},
-	"it": {
-		"nativeName": "Italiano"
-	},
-	"ja": {
-		"nativeName": "日本語"
-	},
-	"ko": {
-		"nativeName": "한국어"
-	},
-	"lb": {
-		"nativeName": "Lëtzebuergesch"
-	},
-	"lt": {
-		"nativeName": "Lietuvių"
-	},
-	"lv": {
-		"nativeName": "Latviešu"
-	},
-	"nl": {
-		"nativeName": "Nederlands"
-	},
-	"nn": {
-		"nativeName": "Norsk Nynorsk"
-	},
-	"no": {
-		"nativeName": "Norsk"
-	},
-	"pl": {
-		"nativeName": "Polski"
-	},
-	"pt": {
-		"nativeName": "Português"
-	},
-	"pt-BR": {
-		"nativeName": "Português (BR)"
-	},
-	"ro": {
-		"nativeName": "Română"
-	},
-	"ru": {
-		"nativeName": "Русский"
-	},
-	"sk": {
-		"nativeName": "Slovenčina"
-	},
-	"sl": {
-		"nativeName": "Slovenščina"
-	},
-	"sr": {
-		"nativeName": "Српски"
-	},
-	"sr-Latn": {
-		"nativeName": "Srpski"
-	},
-	"sv": {
-		"nativeName": "Svenska"
-	},
-	"ta": {
-		"nativeName": "தமிழ்"
-	},
-	"te": {
-		"nativeName": "తెలుగు"
-	},
-	"th": {
-		"nativeName": "ภาษาไทย"
-	},
-	"tr": {
-		"nativeName": "Türkçe"
-	},
-	"uk": {
-		"nativeName": "Українська"
-	},
-	"vi": {
-		"nativeName": "Tiếng Việt"
-	},
-	"zh-Hans": {
-		"nativeName": "简体中文"
-	},
-	"zh-Hant": {
-		"nativeName": "繁體中文"
-	}
+  "ar": {
+    "nativeName": "العربية"
+  },
+  "bg": {
+    "nativeName": "Български"
+  },
+  "bs": {
+    "nativeName": "Bosanski"
+  },
+  "ca": {
+    "nativeName": "Català"
+  },
+  "cs": {
+    "nativeName": "Čeština"
+  },
+  "cy": {
+    "nativeName": "Cymraeg"
+  },
+  "da": {
+    "nativeName": "Dansk"
+  },
+  "de": {
+    "nativeName": "Deutsch"
+  },
+  "el": {
+    "nativeName": "Ελληνικά"
+  },
+  "en": {
+    "nativeName": "English"
+  },
+  "es": {
+    "nativeName": "Español"
+  },
+  "es-419": {
+    "nativeName": "Español (Latin America)"
+  },
+  "et": {
+    "nativeName": "Eesti"
+  },
+  "fa": {
+    "nativeName": "فارسی"
+  },
+  "fi": {
+    "nativeName": "Suomi"
+  },
+  "fr": {
+    "nativeName": "Français"
+  },
+  "gsw": {
+    "nativeName": "Schwiizerdütsch"
+  },
+  "he": {
+    "nativeName": "עברית",
+    "isRTL": true
+  },
+  "hi": {
+    "nativeName": "हिन्दी"
+  },
+  "hr": {
+    "nativeName": "Hrvatski"
+  },
+  "hu": {
+    "nativeName": "Magyar"
+  },
+  "id": {
+    "nativeName": "Indonesia"
+  },
+  "it": {
+    "nativeName": "Italiano"
+  },
+  "ja": {
+    "nativeName": "日本語"
+  },
+  "ko": {
+    "nativeName": "한국어"
+  },
+  "lb": {
+    "nativeName": "Lëtzebuergesch"
+  },
+  "lt": {
+    "nativeName": "Lietuvių"
+  },
+  "lv": {
+    "nativeName": "Latviešu"
+  },
+  "nl": {
+    "nativeName": "Nederlands"
+  },
+  "nn": {
+    "nativeName": "Norsk Nynorsk"
+  },
+  "no": {
+    "nativeName": "Norsk"
+  },
+  "pl": {
+    "nativeName": "Polski"
+  },
+  "pt": {
+    "nativeName": "Português"
+  },
+  "pt-BR": {
+    "nativeName": "Português (BR)"
+  },
+  "ro": {
+    "nativeName": "Română"
+  },
+  "ru": {
+    "nativeName": "Русский"
+  },
+  "sk": {
+    "nativeName": "Slovenčina"
+  },
+  "sl": {
+    "nativeName": "Slovenščina"
+  },
+  "sr": {
+    "nativeName": "Српски"
+  },
+  "sr-Latn": {
+    "nativeName": "Srpski"
+  },
+  "sv": {
+    "nativeName": "Svenska"
+  },
+  "ta": {
+    "nativeName": "தமிழ்"
+  },
+  "te": {
+    "nativeName": "తెలుగు"
+  },
+  "th": {
+    "nativeName": "ภาษาไทย"
+  },
+  "tr": {
+    "nativeName": "Türkçe"
+  },
+  "uk": {
+    "nativeName": "Українська"
+  },
+  "vi": {
+    "nativeName": "Tiếng Việt"
+  },
+  "zh-Hans": {
+    "nativeName": "简体中文"
+  },
+  "zh-Hant": {
+    "nativeName": "繁體中文"
+  }
 }
diff --git a/src/types.ts b/src/types.ts
index 6cc016d2ee..0699af1e67 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -44,6 +44,7 @@ export interface Panel {
 
 export interface Translation {
   nativeName: string;
+  isRTL: boolean;
   fingerprints: { [fragment: string]: string };
 }
 

From 89677577ef826199c2edec8f57f4f9f7ad1f82a0 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Sat, 3 Nov 2018 13:24:20 +0100
Subject: [PATCH 66/67] Update translations

---
 translations/hu.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/translations/hu.json b/translations/hu.json
index 80d7f15191..9afd5b3dbe 100644
--- a/translations/hu.json
+++ b/translations/hu.json
@@ -594,7 +594,7 @@
                     "create": "Token Létrehozása",
                     "create_failed": "Nem sikerült létrehozni a hozzáférési tokent.",
                     "prompt_name": "Név?",
-                    "prompt_copy_token": "Másold a hozzáférési tokened. Nem fog újra megjelenni.",
+                    "prompt_copy_token": "Most másold ki a hozzáférési tokened! Erre később nem lesz lehetőséged.",
                     "empty_state": "Még nincsenek hosszú életű hozzáférési tokenjeid.",
                     "last_used": "Utolsó használat ideje: {date}, helye: {location}",
                     "not_used": "Sosem használt"

From dc0f0237540823985bee5ebac5ca3cb49972d891 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Sat, 3 Nov 2018 13:24:36 +0100
Subject: [PATCH 67/67] Version bump to 20181103.0

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index 8a3ea1f347..be0ad87a31 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20181030.0",
+    version="20181103.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",