Merge branch 'dev'

20181207.0

.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

.gitignore

@@ -22,7 +22,8 @@ bin
 dist
 
 # vscode
-.vscode
+.vscode/*
+!.vscode/extensions.json
 
 # Secrets
 .lokalise_token

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "eg2.tslint",
+        "esbenp.prettier-vscode"
+    ]
+}

gallery/src/components/demo-card.js

@@ -1,12 +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 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 HomeAssistant from "../data/hass";
+import { demoConfig } from "../data/demo_config";
+import { demoServices } from "../data/demo_services";
+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() {
@@ -37,9 +38,9 @@ class DemoCard extends PolymerElement {
         }
       </style>
       <h2>[[config.heading]]</h2>
-      <div class='root'>
+      <div class="root">
         <div id="card"></div>
-        <template is='dom-if' if='[[showConfig]]'>
+        <template is="dom-if" if="[[showConfig]]">
           <pre>[[_trim(config.config)]]</pre>
         </template>
       </div>
@@ -73,6 +74,7 @@ class DemoCard extends PolymerElement {
     } else {
       const hass = new HomeAssistant(demoStates);
       hass.config = demoConfig;
+      hass.services = demoServices;
       hass.resources = demoResources;
       hass.language = "en";
       hass.states = demoStates;

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() {
@@ -25,18 +25,18 @@ class DemoCards extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <div class='filters'>
-          <paper-toggle-button
-            checked='{{_showConfig}}'
-          >Show config</paper-toggle-button>
+        <div class="filters">
+          <paper-toggle-button checked="{{_showConfig}}"
+            >Show config</paper-toggle-button
+          >
         </div>
       </app-toolbar>
-      <div class='cards'>
-        <template is='dom-repeat' items='[[configs]]'>
+      <div class="cards">
+        <template is="dom-repeat" items="[[configs]]">
           <demo-card
-            config='[[item]]'
-            show-config='[[_showConfig]]'
-            hass='[[hass]]'
+            config="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
           ></demo-card>
         </template>
       </div>

gallery/src/components/demo-more-info.js

@@ -1,63 +1,63 @@
-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() {
     return html`
-        <style>
+      <style>
+        :host {
+          display: flex;
+          align-items: start;
+        }
+
+        ha-card {
+          width: 333px;
+        }
+
+        state-card-content {
+          display: block;
+          padding: 16px;
+        }
+
+        more-info-content {
+          padding: 0 16px;
+        }
+
+        pre {
+          width: 400px;
+          margin: 16px;
+          overflow: auto;
+        }
+
+        @media only screen and (max-width: 800px) {
           :host {
-            display: flex;
-            align-items: start;
+            flex-direction: column;
           }
-
-          ha-card {
-            width: 333px;
-          }
-
-          state-card-content {
-            display: block;
-            padding: 16px;
-          }
-
-          more-info-content {
-            padding: 0 16px;
-          }
-
           pre {
-            width: 400px;
-            margin: 16px;
-            overflow: auto;
+            margin-left: 0;
           }
+        }
+      </style>
+      <ha-card>
+        <state-card-content
+          state-obj="[[_stateObj]]"
+          hass="[[hass]]"
+          in-dialog
+        ></state-card-content>
 
-          @media only screen and (max-width: 800px) {
-            :host {
-              flex-direction: column;
-            }
-            pre {
-              margin-left: 0;
-            }
-          }
-        </style>
-        <ha-card>
-          <state-card-content
-            state-obj="[[_stateObj]]"
-            hass="[[hass]]"
-            in-dialog
-          ></state-card-content>
-
-          <more-info-content
-            hass='[[hass]]'
-            state-obj='[[_stateObj]]'
-          ></more-info-content>
-        </ha-card>
-        <template is='dom-if' if='[[showConfig]]'>
-          <pre>[[_jsonEntity(_stateObj)]]</pre>
-        </template>
-      `;
+        <more-info-content
+          hass="[[hass]]"
+          state-obj="[[_stateObj]]"
+        ></more-info-content>
+      </ha-card>
+      <template is="dom-if" if="[[showConfig]]">
+        <pre>[[_jsonEntity(_stateObj)]]</pre>
+      </template>
+    `;
   }
 
   static get properties() {

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() {
@@ -25,18 +25,18 @@ class DemoMoreInfos extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <div class='filters'>
-          <paper-toggle-button
-            checked='{{_showConfig}}'
-          >Show entity</paper-toggle-button>
+        <div class="filters">
+          <paper-toggle-button checked="{{_showConfig}}"
+            >Show entity</paper-toggle-button
+          >
         </div>
       </app-toolbar>
-      <div class='cards'>
-        <template is='dom-repeat' items='[[entities]]'>
+      <div class="cards">
+        <template is="dom-repeat" items="[[entities]]">
           <demo-more-info
-            entity-id='[[item]]'
-            show-config='[[_showConfig]]'
-            hass='[[hass]]'
+            entity-id="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
           ></demo-more-info>
         </template>
       </div>

gallery/src/data/demo_config.js

@@ -1,109 +1,11 @@
-export default {
-  core: {
-    elevation: 300,
-    latitude: 51.5287352,
-    longitude: -0.381773,
-    unit_system: {
-      length: "km",
-      mass: "kg",
-      temperature: "°C",
-      volume: "L",
-    },
-  },
-  services: {
-    configurator: ["configure"],
-    tts: ["demo_say", "clear_cache"],
-    cover: [
-      "open_cover",
-      "close_cover",
-      "open_cover_tilt",
-      "close_cover_tilt",
-      "set_cover_tilt_position",
-      "set_cover_position",
-      "stop_cover_tilt",
-      "stop_cover",
-    ],
-    group: ["set", "reload", "remove", "set_visibility"],
-    alarm_control_panel: [
-      "alarm_arm_night",
-      "alarm_disarm",
-      "alarm_trigger",
-      "alarm_arm_home",
-      "alarm_arm_away",
-      "alarm_arm_custom_bypass",
-    ],
-    conversation: ["process"],
-    notify: ["demo_test_target_name", "notify"],
-    lock: ["open", "lock", "unlock"],
-    input_select: [
-      "select_previous",
-      "set_options",
-      "select_next",
-      "select_option",
-    ],
-    recorder: ["purge"],
-    persistent_notification: ["create", "dismiss"],
-    timer: ["pause", "cancel", "finish", "start"],
-    input_boolean: ["turn_off", "toggle", "turn_on"],
-    fan: [
-      "set_speed",
-      "turn_on",
-      "turn_off",
-      "set_direction",
-      "oscillate",
-      "toggle",
-    ],
-    climate: [
-      "set_humidity",
-      "set_operation_mode",
-      "set_aux_heat",
-      "turn_on",
-      "set_hold_mode",
-      "set_away_mode",
-      "turn_off",
-      "set_fan_mode",
-      "set_temperature",
-      "set_swing_mode",
-    ],
-    switch: ["turn_off", "toggle", "turn_on"],
-    script: ["turn_off", "demo", "reload", "toggle", "turn_on"],
-    scene: ["turn_on"],
-    system_log: ["clear", "write"],
-    camera: ["disable_motion_detection", "enable_motion_detection", "snapshot"],
-    image_processing: ["scan"],
-    media_player: [
-      "media_previous_track",
-      "clear_playlist",
-      "shuffle_set",
-      "media_seek",
-      "turn_on",
-      "media_play_pause",
-      "media_next_track",
-      "media_pause",
-      "volume_down",
-      "volume_set",
-      "media_stop",
-      "toggle",
-      "media_play",
-      "play_media",
-      "volume_mute",
-      "turn_off",
-      "select_sound_mode",
-      "select_source",
-      "volume_up",
-    ],
-    input_number: ["set_value", "increment", "decrement"],
-    device_tracker: ["see"],
-    homeassistant: [
-      "stop",
-      "check_config",
-      "reload_core_config",
-      "turn_on",
-      "turn_off",
-      "restart",
-      "toggle",
-    ],
-    light: ["turn_off", "toggle", "turn_on"],
-    input_text: ["set_value"],
+export const demoConfig = {
+  elevation: 300,
+  latitude: 51.5287352,
+  longitude: -0.381773,
+  unit_system: {
+    length: "km",
+    mass: "kg",
+    temperature: "°C",
+    volume: "L",
   },
 };

gallery/src/data/demo_services.ts

@@ -0,0 +1,96 @@
+export const demoServices = {
+  configurator: ["configure"],
+  tts: ["demo_say", "clear_cache"],
+  cover: [
+    "open_cover",
+    "close_cover",
+    "open_cover_tilt",
+    "close_cover_tilt",
+    "set_cover_tilt_position",
+    "set_cover_position",
+    "stop_cover_tilt",
+    "stop_cover",
+  ],
+  group: ["set", "reload", "remove", "set_visibility"],
+  alarm_control_panel: [
+    "alarm_arm_night",
+    "alarm_disarm",
+    "alarm_trigger",
+    "alarm_arm_home",
+    "alarm_arm_away",
+    "alarm_arm_custom_bypass",
+  ],
+  conversation: ["process"],
+  notify: ["demo_test_target_name", "notify"],
+  lock: ["open", "lock", "unlock"],
+  input_select: [
+    "select_previous",
+    "set_options",
+    "select_next",
+    "select_option",
+  ],
+  recorder: ["purge"],
+  persistent_notification: ["create", "dismiss"],
+  timer: ["pause", "cancel", "finish", "start"],
+  input_boolean: ["turn_off", "toggle", "turn_on"],
+  fan: [
+    "set_speed",
+    "turn_on",
+    "turn_off",
+    "set_direction",
+    "oscillate",
+    "toggle",
+  ],
+  climate: [
+    "set_humidity",
+    "set_operation_mode",
+    "set_aux_heat",
+    "turn_on",
+    "set_hold_mode",
+    "set_away_mode",
+    "turn_off",
+    "set_fan_mode",
+    "set_temperature",
+    "set_swing_mode",
+  ],
+  switch: ["turn_off", "toggle", "turn_on"],
+  script: ["turn_off", "demo", "reload", "toggle", "turn_on"],
+  scene: ["turn_on"],
+  system_log: ["clear", "write"],
+  camera: ["disable_motion_detection", "enable_motion_detection", "snapshot"],
+  image_processing: ["scan"],
+  media_player: [
+    "media_previous_track",
+    "clear_playlist",
+    "shuffle_set",
+    "media_seek",
+    "turn_on",
+    "media_play_pause",
+    "media_next_track",
+    "media_pause",
+    "volume_down",
+    "volume_set",
+    "media_stop",
+    "toggle",
+    "media_play",
+    "play_media",
+    "volume_mute",
+    "turn_off",
+    "select_sound_mode",
+    "select_source",
+    "volume_up",
+  ],
+  input_number: ["set_value", "increment", "decrement"],
+  device_tracker: ["see"],
+  homeassistant: [
+    "stop",
+    "check_config",
+    "reload_core_config",
+    "turn_on",
+    "turn_off",
+    "restart",
+    "toggle",
+  ],
+  light: ["turn_off", "toggle", "turn_on"],
+  input_text: ["set_value"],
+};

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, {
@@ -99,6 +101,21 @@ export class CoverEntity extends Entity {
   }
 }
 
+export class ClimateEntity extends Entity {
+  async handleService(domain, service, data) {
+    if (domain !== this.domain) return;
+
+    if (service === "set_operation_mode") {
+      this.update(
+        data.operation_mode === "heat" ? "heat" : data.operation_mode,
+        Object.assign(this.attributes, {
+          operation_mode: data.operation_mode,
+        })
+      );
+    }
+  }
+}
+
 export class GroupEntity extends Entity {
   async handleService(domain, service, data) {
     if (!["homeassistant", this.domain].includes(domain)) return;
@@ -115,6 +132,7 @@ export class GroupEntity extends Entity {
 }
 
 const TYPES = {
+  climate: ClimateEntity,
   light: LightEntity,
   lock: LockEntity,
   cover: CoverEntity,

gallery/src/data/provide_hass.js

@@ -1,7 +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 demoResources from "./demo_resources.js";
+import { demoConfig } from "./demo_config";
+import { demoServices } from "./demo_services";
+import demoResources from "./demo_resources";
 
 const ensureArray = (val) => (Array.isArray(val) ? val : [val]);
 
@@ -9,6 +10,7 @@ export default (elements, { initialStates = {} } = {}) => {
   elements = ensureArray(elements);
 
   const wsCommands = {};
+  const restResponses = {};
   let hass;
   const entities = {};
 
@@ -22,9 +24,17 @@ export default (elements, { initialStates = {} } = {}) => {
   updateHass({
     // Home Assistant properties
     config: demoConfig,
+    services: demoServices,
     language: "en",
     resources: demoResources,
     states: initialStates,
+    themes: {},
+    connection: {
+      subscribeEvents: async (callback, event) => {
+        console.log("subscribeEvents", event);
+        return () => console.log("unsubscribeEvents", event);
+      },
+    },
 
     // Mock properties
     mockEntities: entities,
@@ -66,6 +76,14 @@ export default (elements, { initialStates = {} } = {}) => {
       console.log("sendWS", msg);
     },
 
+    async callApi(method, path, parameters) {
+      const callback = restResponses[path];
+
+      return callback
+        ? callback(method, path, parameters)
+        : Promise.reject(`Mock for {path} is not implemented`);
+    },
+
     // Mock functions
     updateHass,
     updateStates(newStates) {
@@ -82,6 +100,12 @@ export default (elements, { initialStates = {} } = {}) => {
       });
       this.updateStates(states);
     },
+    mockWS(type, callback) {
+      wsCommands[type] = callback;
+    },
+    mockAPI(path, callback) {
+      restResponses[path] = callback;
+    },
   });
 
   return hass;

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -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", {
@@ -51,7 +51,11 @@ const CONFIGS = [
 class DemoAlarmPanelEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' hass='[[hass]]' configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 
@@ -65,7 +69,7 @@ class DemoAlarmPanelEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-conditional-card.ts

@@ -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", {
@@ -57,8 +57,8 @@ class DemoConditional extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
-        id='demos'
-        hass='[[hass]]'
+        id="demos"
+        hass="[[hass]]"
         configs="[[_configs]]"
       ></demo-cards>
     `;
@@ -74,7 +74,7 @@ class DemoConditional extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-entities-card.ts

@@ -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", {
@@ -175,11 +175,7 @@ const CONFIGS = [
 class DemoEntities extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        hass='[[hass]]'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 
@@ -189,11 +185,10 @@ class DemoEntities extends PolymerElement {
         type: Object,
         value: CONFIGS,
       },
-      hass: Object,
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -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", {
@@ -71,7 +71,11 @@ const CONFIGS = [
 class DemoEntityButtonEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' hass='[[hass]]' configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 
@@ -85,7 +89,7 @@ class DemoEntityButtonEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-entity-filter-card.js

@@ -1,74 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag.js";
-import { PolymerElement } from "@polymer/polymer/polymer-element.js";
-
-import "../components/demo-cards.js";
-
-const CONFIGS = [
-  {
-    heading: "Basic",
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-  state_filter:
-    - "on"
-    - not_home
-    `,
-  },
-  {
-    heading: "With card config",
-    config: `
-- type: entity-filter
-  entities:
-    - device_tracker.demo_anne_therese
-    - device_tracker.demo_home_boy
-    - device_tracker.demo_paulus
-    - light.bed_light
-    - light.ceiling_lights
-    - light.kitchen_lights
-  state_filter:
-    - "on"
-    - not_home
-  card:
-    type: glance
-    show_state: false
-    `,
-  },
-  {
-    heading: "Showing single entity conditionally",
-    config: `
-- type: entity-filter
-  entities:
-    - media_player.lounge_room
-  state_filter:
-    - 'playing'
-  card:
-    type: media-control
-    entity: media_player.lounge_room
-    `,
-  },
-];
-
-class DemoFilter extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
-    `;
-  }
-
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-}
-
-customElements.define("demo-hui-entity-filter-card", DemoFilter);

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -0,0 +1,115 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("device_tracker", "demo_paulus", "work", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("device_tracker", "demo_anne_therese", "school", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Anne Therese",
+  }),
+  getEntity("device_tracker", "demo_home_boy", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Home Boy",
+  }),
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
+  getEntity("light", "kitchen_lights", "on", {
+    friendly_name: "Kitchen Lights",
+  }),
+  getEntity("light", "ceiling_lights", "off", {
+    friendly_name: "Ceiling Lights",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Controller",
+    config: `
+- type: entities
+  entities:
+  - light.bed_light
+  - light.ceiling_lights
+  - light.kitchen_lights
+    `,
+  },
+  {
+    heading: "Basic",
+    config: `
+- type: entity-filter
+  entities:
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+    - device_tracker.demo_paulus
+    - light.bed_light
+    - light.ceiling_lights
+    - light.kitchen_lights
+  state_filter:
+    - "on"
+    - home
+    `,
+  },
+  {
+    heading: "With card config",
+    config: `
+- type: entity-filter
+  entities:
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+    - device_tracker.demo_paulus
+    - light.bed_light
+    - light.ceiling_lights
+    - light.kitchen_lights
+  state_filter:
+    - "on"
+    - not_home
+  card:
+    type: glance
+    show_state: false
+    `,
+  },
+];
+
+class DemoFilter extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-entity-filter-card", DemoFilter);

gallery/src/demos/demo-hui-gauge-card.ts

@@ -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 = [
   {

gallery/src/demos/demo-hui-glance-card.ts

@@ -1,7 +1,62 @@
-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 getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("device_tracker", "demo_paulus", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("media_player", "living_room", "playing", {
+    volume_level: 1,
+    is_volume_muted: false,
+    media_content_id: "eyU3bRy2x44",
+    media_content_type: "movie",
+    media_duration: 300,
+    media_position: 45.017773,
+    media_position_updated_at: "2018-07-19T10:44:45.919514+00:00",
+    media_title: "♥♥ The Best Fireplace Video (3 hours)",
+    app_name: "YouTube",
+    sound_mode: "Dummy Music",
+    sound_mode_list: ["Dummy Music", "Dummy Movie"],
+    shuffle: false,
+    friendly_name: "Living Room",
+    entity_picture:
+      "/api/media_player_proxy/media_player.living_room?token=e925f8db7f7bd1f317e4524dcb8333d60f6019219a3799a22604b5787f243567&cache=bc2ffb49c4f67034",
+    supported_features: 115597,
+  }),
+  getEntity("sun", "sun", "below_horizon", {
+    next_dawn: "2018-07-19T20:48:47+00:00",
+    next_dusk: "2018-07-20T11:46:06+00:00",
+    next_midnight: "2018-07-19T16:17:28+00:00",
+    next_noon: "2018-07-20T04:17:26+00:00",
+    next_rising: "2018-07-19T21:16:31+00:00",
+    next_setting: "2018-07-20T11:18:22+00:00",
+    elevation: 67.69,
+    azimuth: 338.55,
+    friendly_name: "Sun",
+  }),
+  getEntity("cover", "kitchen_window", "open", {
+    friendly_name: "Kitchen Window",
+    supported_features: 11,
+  }),
+  getEntity("light", "kitchen_lights", "on", {
+    friendly_name: "Kitchen Lights",
+  }),
+  getEntity("light", "ceiling_lights", "off", {
+    friendly_name: "Ceiling Lights",
+  }),
+  getEntity("lock", "kitchen_door", "locked", {
+    friendly_name: "Kitchen Door",
+  }),
+];
 
 const CONFIGS = [
   {
@@ -34,10 +89,10 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Custom column width",
+    heading: "Custom number of columns",
     config: `
 - type: glance
-  column_width: calc(100% / 7)
+  columns: 7
   entities:
     - device_tracker.demo_paulus
     - media_player.living_room
@@ -117,10 +172,14 @@ const CONFIGS = [
 - type: glance
   entities:
     - entity: lock.kitchen_door
-      tap_action: toggle
+      tap_action:
+        type: toggle
     - entity: light.ceiling_lights
-      tap_action: call-service
-      service: light.turn_on
+      tap_action:
+        action: call-service
+        service: light.turn_on
+        service_data:
+          entity_id: light.ceiling_lights
     - device_tracker.demo_paulus
     - media_player.living_room
     - sun.sun
@@ -162,7 +221,7 @@ const CONFIGS = [
 class DemoPicEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 
@@ -174,6 +233,12 @@ class DemoPicEntity extends PolymerElement {
       },
     };
   }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }
 
 customElements.define("demo-hui-glance-card", DemoPicEntity);

gallery/src/demos/demo-hui-iframe-card.ts

@@ -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 = [
   {

gallery/src/demos/demo-hui-light-card.ts

@@ -0,0 +1,48 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+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,
+      },
+    };
+  }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-light-card", DemoLightEntity);

gallery/src/demos/demo-hui-map-card.ts

@@ -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", {
@@ -139,7 +139,7 @@ class DemoMap extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-markdown-card.ts

@@ -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 = [
   {

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -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
@@ -78,8 +78,8 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
-        id='demos'
-        hass='[[hass]]'
+        id="demos"
+        hass="[[hass]]"
         configs="[[_configs]]"
       ></demo-cards>
     `;
@@ -95,7 +95,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -1,7 +1,31 @@
-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 getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
+  getEntity("group", "all_lights", "on", {
+    entity_id: ["light.bed_light"],
+    order: 8,
+    friendly_name: "All Lights",
+  }),
+  getEntity("camera", "demo_camera", "idle", {
+    access_token:
+      "2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
+    friendly_name: "Demo camera",
+    entity_picture:
+      "/api/camera_proxy/camera.demo_camera?token=2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
+  }),
+  getEntity("binary_sensor", "movement_backyard", "on", {
+    friendly_name: "Movement Backyard",
+    device_class: "motion",
+  }),
+];
 
 const CONFIGS = [
   {
@@ -32,7 +56,8 @@ const CONFIGS = [
         --iron-icon-fill-color: rgba(50, 50, 50, .75)
     - type: image
       entity: light.bed_light
-      tap_action: toggle
+      tap_action:
+        action: toggle
       image: /images/light_bulb_off.png
       state_image:
         'on': /images/light_bulb_on.png
@@ -56,7 +81,7 @@ const CONFIGS = [
 class DemoPicElements extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 
@@ -68,6 +93,12 @@ class DemoPicElements extends PolymerElement {
       },
     };
   }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }
 
 customElements.define("demo-hui-picture-elements-card", DemoPicElements);

gallery/src/demos/demo-hui-picture-entity-card.ts

@@ -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 = [
   {

gallery/src/demos/demo-hui-picture-glance-card.ts

@@ -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 = [
   {
@@ -83,6 +83,23 @@ const CONFIGS = [
     - binary_sensor.basement_floor_wet
     `,
   },
+  {
+    heading: "Custom tap action",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  title: Living room
+  entity: light.ceiling_lights
+  tap_action:
+    action: toggle
+  entities:
+    - entity: switch.decorative_lights
+      icon: mdi:power
+      tap_action:
+        action: toggle
+    - binary_sensor.basement_floor_wet
+    `,
+  },
 ];
 
 class DemoPicGlance extends PolymerElement {

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -0,0 +1,52 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "List example",
+    config: `
+- type: shopping-list
+    `,
+  },
+  {
+    heading: "List with title example",
+    config: `
+- type: shopping-list
+  title: Shopping List
+    `,
+  },
+];
+
+class DemoShoppingListEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+
+    hass.mockAPI("shopping_list", () => [
+      { name: "list", id: 1, complete: false },
+      { name: "all", id: 2, complete: false },
+      { name: "the", id: 3, complete: false },
+      { name: "things", id: 4, complete: true },
+    ]);
+  }
+}
+
+customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity);

gallery/src/demos/demo-hui-stack-card.ts

@@ -1,7 +1,39 @@
-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 getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("light", "kitchen_lights", "on", {
+    friendly_name: "Kitchen Lights",
+  }),
+  getEntity("device_tracker", "demo_paulus", "work", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("device_tracker", "demo_anne_therese", "school", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Anne Therese",
+  }),
+  getEntity("device_tracker", "demo_home_boy", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Home Boy",
+  }),
+];
 
 const CONFIGS = [
   {
@@ -59,7 +91,7 @@ const CONFIGS = [
 class DemoStack extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 
@@ -71,6 +103,12 @@ class DemoStack extends PolymerElement {
       },
     };
   }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }
 
 customElements.define("demo-hui-stack-card", DemoStack);

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -0,0 +1,85 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("climate", "ecobee", "auto", {
+    current_temperature: 73,
+    min_temp: 45,
+    max_temp: 95,
+    temperature: null,
+    target_temp_high: 75,
+    target_temp_low: 70,
+    fan_mode: "Auto Low",
+    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    operation_mode: "auto",
+    operation_list: ["heat", "cool", "auto", "off"],
+    hold_mode: "home",
+    swing_mode: "Auto",
+    swing_list: ["Auto", "1", "2", "3", "Off"],
+    friendly_name: "Ecobee",
+    supported_features: 1014,
+  }),
+  getEntity("climate", "nest", "heat", {
+    current_temperature: 17,
+    min_temp: 15,
+    max_temp: 25,
+    temperature: 19,
+    fan_mode: "Auto Low",
+    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    operation_mode: "heat",
+    operation_list: ["heat", "cool", "auto", "off"],
+    hold_mode: "home",
+    swing_mode: "Auto",
+    swing_list: ["Auto", "1", "2", "3", "Off"],
+    friendly_name: "Nest",
+    supported_features: 1014,
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Range example",
+    config: `
+- type: thermostat
+  entity: climate.ecobee
+- type: thermostat
+  entity: climate.nest
+    `,
+  },
+  {
+    heading: "Single temp example",
+    config: `
+- type: thermostat
+  entity: climate.nest
+    `,
+  },
+];
+
+class DemoThermostatEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-thermostat-card", DemoThermostatEntity);

gallery/src/demos/demo-more-info-light.ts

@@ -1,23 +1,14 @@
-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";
-
-/* eslint-disable no-unused-vars */
-
-const SUPPORT_BRIGHTNESS = 1;
-const SUPPORT_COLOR_TEMP = 2;
-const SUPPORT_EFFECT = 4;
-const SUPPORT_FLASH = 8;
-const SUPPORT_COLOR = 16;
-const SUPPORT_TRANSITION = 32;
-const SUPPORT_WHITE_VALUE = 128;
+import "../components/demo-more-infos";
+import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -34,8 +25,8 @@ class DemoMoreInfoLight extends PolymerElement {
   static get template() {
     return html`
       <demo-more-infos
-        hass='[[hass]]'
-        entities='[[_entities]]'
+        hass="[[hass]]"
+        entities="[[_entities]]"
       ></demo-more-infos>
     `;
   }
@@ -49,7 +40,7 @@ class DemoMoreInfoLight extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-util-long-press.ts

@@ -0,0 +1,79 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-button/paper-button";
+
+import "../../../src/components/ha-card";
+import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
+
+export class DemoUtilLongPress extends LitElement {
+  public render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      ${
+        [1, 2, 3].map(
+          () => html`
+            <ha-card>
+              <paper-button
+                @ha-click="${this._handleTap}"
+                @ha-hold="${this._handleHold}"
+                .longPress="${longPress()}"
+              >
+                (long) press me!
+              </paper-button>
+
+              <textarea></textarea>
+
+              <div>(try pressing and scrolling too!)</div>
+            </ha-card>
+          `
+        )
+      }
+    `;
+  }
+
+  private _handleTap(ev: Event) {
+    this._addValue(ev, "tap");
+  }
+
+  private _handleHold(ev: Event) {
+    this._addValue(ev, "hold");
+  }
+
+  private _addValue(ev: Event, value: string) {
+    const area = (ev.currentTarget as HTMLElement)
+      .nextElementSibling! as HTMLTextAreaElement;
+    const now = new Date().toTimeString().split(" ")[0];
+    area.value += `${now}: ${value}\n`;
+    area.scrollTop = area.scrollHeight;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        ha-card {
+          width: 200px;
+          margin: calc(42vh - 140px) auto;
+          padding: 8px;
+          text-align: center;
+        }
+        ha-card:first-of-type {
+          margin-top: 16px;
+        }
+        ha-card:last-of-type {
+          margin-bottom: 16px;
+        }
+
+        paper-button {
+          font-weight: bold;
+          color: var(--primary-color);
+        }
+
+        textarea {
+          height: 50px;
+        }
+      </style>
+    `;
+  }
+}
+
+customElements.define("demo-util-long-press", DemoUtilLongPress);

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"));

gallery/src/ha-gallery.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-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);
+const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
 const fixPath = (path) => path.substr(2, path.length - 5);
 
@@ -118,6 +118,22 @@ class HaGallery extends PolymerElement {
                   </a>
                 </template>
               </paper-card>
+
+              <paper-card heading="Util demos">
+                <div class='card-content intro'>
+                  <p>
+                    Test pages for our utility functions.
+                  </p>
+                </div>
+                <template is='dom-repeat' items='[[_utilDemos]]'>
+                  <a href='#[[item]]'>
+                    <paper-item>
+                      <paper-item-body>{{ item }}</paper-item-body>
+                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                    </paper-item>
+                  </a>
+                </template>
+              </paper-card>
             </div>
           </template>
         </div>
@@ -145,6 +161,10 @@ class HaGallery extends PolymerElement {
         type: Array,
         computed: "_computeMoreInfos(_demos)",
       },
+      _utilDemos: {
+        type: Array,
+        computed: "_computeUtil(_demos)",
+      },
     };
   }
 
@@ -152,14 +172,14 @@ class HaGallery extends PolymerElement {
     super.ready();
 
     this.addEventListener("show-notification", (ev) =>
-      this.$.notifications.showNotification(ev.detail.message)
+      this.$.notifications.showDialog({ message: ev.detail.message })
     );
 
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
-        this.$.notifications.showNotification(
-          `Showing more info for ${ev.detail.entityId}`
-        );
+        this.$.notifications.showDialog({
+          message: `Showing more info for ${ev.detail.entityId}`,
+        });
       }
     });
 
@@ -178,7 +198,7 @@ class HaGallery extends PolymerElement {
     while (root.lastChild) root.removeChild(root.lastChild);
 
     if (demo) {
-      DEMOS(`./${demo}.js`);
+      DEMOS(`./${demo}.ts`);
       const el = document.createElement(demo);
       root.appendChild(el);
     }
@@ -199,6 +219,10 @@ class HaGallery extends PolymerElement {
   _computeMoreInfos(demos) {
     return demos.filter((demo) => demo.includes("more-info"));
   }
+
+  _computeUtil(demos) {
+    return demos.filter((demo) => demo.includes("util"));
+  }
 }
 
 customElements.define("ha-gallery", HaGallery);

gallery/webpack.config.js

@@ -17,6 +17,10 @@ module.exports = {
   module: {
     rules: [
       babelLoaderConfig({ latestBuild: true }),
+      {
+        test: /\.css$/,
+        use: "raw-loader",
+      },
       {
         test: /\.(html)$/,
         use: {

gulp/tasks/gen-icons.js

@@ -111,4 +111,5 @@ gulp.task("gen-icons", ["gen-icons-hass", "gen-icons-mdi"], () => {});
 module.exports = {
   findIcons,
   generateIconset,
+  genMDIIcons,
 };

hassio/script/build_hassio

@@ -11,4 +11,4 @@ OUTPUT_DIR=build
 rm -rf $OUTPUT_DIR
 
 node script/gen-icons.js
-NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js
+NODE_ENV=production CI=false ../node_modules/.bin/webpack -p --config webpack.config.js

hassio/script/develop

@@ -4,6 +4,8 @@
 # Stop on errors
 set -e
 
+cd "$(dirname "$0")/.."
+
 OUTPUT_DIR=build
 
 rm -rf $OUTPUT_DIR

hassio/script/gen-icons.js

@@ -1,6 +1,10 @@
 #!/usr/bin/env node
 const fs = require("fs");
-const { findIcons, generateIconset } = require("../../gulp/tasks/gen-icons.js");
+const {
+  findIcons,
+  generateIconset,
+  genMDIIcons,
+} = require("../../gulp/tasks/gen-icons.js");
 
 const MENU_BUTTON_ICON = "menu";
 
@@ -9,4 +13,5 @@ function genHassioIcons() {
   fs.writeFileSync("./hassio-icons.html", generateIconset("hassio", iconNames));
 }
 
+genMDIIcons();
 genHassioIcons();

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

@@ -1,42 +1,60 @@
-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() {
     return html`
-    <style include="iron-flex ha-style hassio-style">
-      paper-card {
-        cursor: pointer;
-      }
-      a.repo {
-        display: block;
-        color: var(--primary-text-color);
-      }
-    </style>
-    <template is="dom-if" if="[[addons.length]]">
-      <div class="card-group">
-        <div class="title">
-          [[repo.name]]
-          <div class="description">
-            Maintained by [[repo.maintainer]]
-            <a class="repo" href="[[repo.url]]" target="_blank">[[repo.url]]</a>
-          </div>
-        </div>
-        <template is="dom-repeat" items="[[addons]]" as="addon" sort="sortAddons">
-          <paper-card on-click="addonTapped">
-            <div class="card-content">
-              <hassio-card-content hass="[[hass]]" title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
+      <style include="iron-flex ha-style hassio-style">
+        paper-card {
+          cursor: pointer;
+        }
+        .not_available {
+          opacity: 0.6;
+        }
+        a.repo {
+          display: block;
+          color: var(--primary-text-color);
+        }
+      </style>
+      <template is="dom-if" if="[[addons.length]]">
+        <div class="card-group">
+          <div class="title">
+            [[repo.name]]
+            <div class="description">
+              Maintained by [[repo.maintainer]]
+              <a class="repo" href="[[repo.url]]" target="_blank"
+                >[[repo.url]]</a
+              >
             </div>
-          </paper-card>
-        </template>
-      </div>
-    </template>
-`;
+          </div>
+          <template
+            is="dom-repeat"
+            items="[[addons]]"
+            as="addon"
+            sort="sortAddons"
+          >
+            <paper-card class$="[[computeClass(addon)]]" on-click="addonTapped">
+              <div class="card-content">
+                <hassio-card-content
+                  hass="[[hass]]"
+                  title="[[addon.name]]"
+                  description="[[addon.description]]"
+                  available="[[addon.available]]"
+                  icon="[[computeIcon(addon)]]"
+                  icon-title="[[computeIconTitle(addon)]]"
+                  icon-class="[[computeIconClass(addon)]]"
+                ></hassio-card-content>
+              </div>
+            </paper-card>
+          </template>
+        </div>
+      </template>
+    `;
   }
 
   static get properties() {
@@ -62,13 +80,19 @@ class HassioAddonRepository extends NavigateMixin(PolymerElement) {
       return addon.installed !== addon.version
         ? "New version available"
         : "Add-on is installed";
-    return "Add-on is not installed";
+    return addon.available
+      ? "Add-on is not installed"
+      : "Add-on is not available on your system";
   }
 
   computeIconClass(addon) {
     if (addon.installed)
       return addon.installed !== addon.version ? "update" : "installed";
-    return "";
+    return !addon.available ? "not_available" : "";
+  }
+
+  computeClass(addon) {
+    return !addon.available ? "not_available" : "";
   }
 
   addonTapped(ev) {

hassio/src/addon-store/hassio-addon-store.js

@@ -1,23 +1,30 @@
-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() {
     return html`
-    <style include="iron-flex ha-style">
-      hassio-addon-repository {
-        margin-top: 24px;
-      }
-    </style>
-    <hassio-repositories-editor hass="[[hass]]" repos="[[repos]]"></hassio-repositories-editor>
+      <style include="iron-flex ha-style">
+        hassio-addon-repository {
+          margin-top: 24px;
+        }
+      </style>
+      <hassio-repositories-editor
+        hass="[[hass]]"
+        repos="[[repos]]"
+      ></hassio-repositories-editor>
 
-    <template is="dom-repeat" items="[[repos]]" as="repo" sort="sortRepos">
-      <hassio-addon-repository hass="[[hass]]" repo="[[repo]]" addons="[[computeAddons(repo.slug)]]"></hassio-addon-repository>
-    </template>
-`;
+      <template is="dom-repeat" items="[[repos]]" as="repo" sort="sortRepos">
+        <hassio-addon-repository
+          hass="[[hass]]"
+          repo="[[repo]]"
+          addons="[[computeAddons(repo.slug)]]"
+        ></hassio-addon-repository>
+      </template>
+    `;
   }
 
   static get properties() {

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

@@ -1,58 +1,83 @@
-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() {
     return html`
-    <style include="ha-style hassio-style">
-      .add {
-        padding: 12px 16px;
-      }
-      iron-icon {
-        color: var(--secondary-text-color);
-        margin-right: 16px;
-        display: inline-block;
-      }
-      paper-input {
-        width: calc(100% - 49px);
-        display: inline-block;
-      }
-    </style>
-    <div class="card-group">
-      <div class="title">
-        Repositories
-        <div class="description">
-          Configure which add-on repositories to fetch data from:
+      <style include="ha-style hassio-style">
+        .add {
+          padding: 12px 16px;
+        }
+        iron-icon {
+          color: var(--secondary-text-color);
+          margin-right: 16px;
+          display: inline-block;
+        }
+        paper-input {
+          width: calc(100% - 49px);
+          display: inline-block;
+        }
+      </style>
+      <div class="card-group">
+        <div class="title">
+          Repositories
+          <div class="description">
+            Configure which add-on repositories to fetch data from:
+          </div>
         </div>
-      </div>
-      <template id="list" is="dom-repeat" items="[[repoList]]" as="repo" sort="sortRepos">
+        <template
+          id="list"
+          is="dom-repeat"
+          items="[[repoList]]"
+          as="repo"
+          sort="sortRepos"
+        >
+          <paper-card>
+            <div class="card-content">
+              <hassio-card-content
+                hass="[[hass]]"
+                title="[[repo.name]]"
+                description="[[repo.url]]"
+                icon="hassio:github-circle"
+              ></hassio-card-content>
+            </div>
+            <div class="card-actions">
+              <ha-call-api-button
+                hass="[[hass]]"
+                path="hassio/supervisor/options"
+                data="[[computeRemoveRepoData(repoList, repo.url)]]"
+                class="warning"
+                >Remove</ha-call-api-button
+              >
+            </div>
+          </paper-card>
+        </template>
         <paper-card>
-          <div class="card-content">
-            <hassio-card-content hass="[[hass]]" title="[[repo.name]]" description="[[repo.url]]" icon="hassio:github-circle"></hassio-card-content>
+          <div class="card-content add">
+            <iron-icon icon="hassio:github-circle"></iron-icon>
+            <paper-input
+              label="Add new repository by URL"
+              value="{{repoUrl}}"
+            ></paper-input>
           </div>
           <div class="card-actions">
-            <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeRemoveRepoData(repoList, repo.url)]]" class="warning">Remove</ha-call-api-button>
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/supervisor/options"
+              data="[[computeAddRepoData(repoList, repoUrl)]]"
+              >Add</ha-call-api-button
+            >
           </div>
         </paper-card>
-      </template>
-      <paper-card>
-        <div class="card-content add">
-          <iron-icon icon="hassio:github-circle"></iron-icon>
-          <paper-input label="Add new repository by URL" value="{{repoUrl}}"></paper-input>
-        </div>
-        <div class="card-actions">
-          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeAddRepoData(repoList, repoUrl)]]">Add</ha-call-api-button>
-        </div>
-      </paper-card>
-    </div>
-`;
+      </div>
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-audio.js

@@ -1,62 +1,74 @@
-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() {
     return html`
-    <style include="ha-style">
-      :host,
-      paper-card,
-      paper-dropdown-menu {
-        display: block;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-bottom: 16px;
-      }
-      paper-item {
-        width: 450px;
-      }
-      .card-actions {
-        text-align: right;
-      }
-    </style>
-    <paper-card heading="Audio">
-      <div class="card-content">
-        <template is="dom-if" if="[[error]]">
-          <div class="errors">[[error]]</div>
-        </template>
+      <style include="ha-style">
+        :host,
+        paper-card,
+        paper-dropdown-menu {
+          display: block;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-bottom: 16px;
+        }
+        paper-item {
+          width: 450px;
+        }
+        .card-actions {
+          text-align: right;
+        }
+      </style>
+      <paper-card heading="Audio">
+        <div class="card-content">
+          <template is="dom-if" if="[[error]]">
+            <div class="errors">[[error]]</div>
+          </template>
 
-        <paper-dropdown-menu label="Input">
-          <paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedInput}}">
-            <template is="dom-repeat" items="[[inputDevices]]">
-              <paper-item device\$="[[item.device]]">[[item.name]]</paper-item>
-            </template>
-          </paper-listbox>
-        </paper-dropdown-menu>
-        <paper-dropdown-menu label="Output">
-          <paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedOutput}}">
-            <template is="dom-repeat" items="[[outputDevices]]">
-              <paper-item device\$="[[item.device]]">[[item.name]]</paper-item>
-            </template>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </div>
-      <div class="card-actions">
-        <paper-button on-click="_saveSettings">Save</paper-button>
-      </div>
-    </paper-card>
-`;
+          <paper-dropdown-menu label="Input">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="device"
+              selected="{{selectedInput}}"
+            >
+              <template is="dom-repeat" items="[[inputDevices]]">
+                <paper-item device\$="[[item.device]]"
+                  >[[item.name]]</paper-item
+                >
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+          <paper-dropdown-menu label="Output">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="device"
+              selected="{{selectedOutput}}"
+            >
+              <template is="dom-repeat" items="[[outputDevices]]">
+                <paper-item device\$="[[item.device]]"
+                  >[[item.name]]</paper-item
+                >
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+        <div class="card-actions">
+          <paper-button on-click="_saveSettings">Save</paper-button>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-config.js

@@ -1,50 +1,61 @@
-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() {
     return html`
-    <style include="ha-style">
-      :host {
-        display: block;
-      }
-      paper-card {
-        display: block;
-      }
-      .card-actions {
-        @apply --layout;
-        @apply --layout-justified;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-bottom: 16px;
-      }
-      iron-autogrow-textarea {
-        width: 100%;
-        font-family: monospace;
-      }
-      .syntaxerror {
-        color: var(--google-red-500);
-      }
-    </style>
-    <paper-card heading="Config">
-      <div class="card-content">
-        <template is="dom-if" if="[[error]]">
-          <div class="errors">[[error]]</div>
-        </template>
-        <iron-autogrow-textarea id="config" value="{{config}}"></iron-autogrow-textarea>
-      </div>
-      <div class="card-actions">
-        <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/options" data="[[resetData]]">Reset to defaults</ha-call-api-button>
-        <paper-button on-click="saveTapped" disabled="[[!configParsed]]">Save</paper-button>
-      </div>
-    </paper-card>
-`;
+      <style include="ha-style">
+        :host {
+          display: block;
+        }
+        paper-card {
+          display: block;
+        }
+        .card-actions {
+          @apply --layout;
+          @apply --layout-justified;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-bottom: 16px;
+        }
+        iron-autogrow-textarea {
+          width: 100%;
+          font-family: monospace;
+        }
+        .syntaxerror {
+          color: var(--google-red-500);
+        }
+      </style>
+      <paper-card heading="Config">
+        <div class="card-content">
+          <template is="dom-if" if="[[error]]">
+            <div class="errors">[[error]]</div>
+          </template>
+          <iron-autogrow-textarea
+            id="config"
+            value="{{config}}"
+          ></iron-autogrow-textarea>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            class="warning"
+            hass="[[hass]]"
+            path="hassio/addons/[[addonSlug]]/options"
+            data="[[resetData]]"
+            >Reset to defaults</ha-call-api-button
+          >
+          <paper-button on-click="saveTapped" disabled="[[!configParsed]]"
+            >Save</paper-button
+          >
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-info.js

@@ -1,153 +1,408 @@
-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/ha-label-badge";
+import "../../../src/components/ha-markdown";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/resources/ha-style";
+import EventsMixin from "../../../src/mixins/events-mixin";
 
-import "../components/hassio-card-content.js";
+import "../components/hassio-card-content";
+
+const PERMIS_DESC = {
+  rating: {
+    title: "Addon Security Rating",
+    description:
+      "Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an addon requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
+  },
+  host_network: {
+    title: "Host Network",
+    description:
+      "Add-ons usually run in their own isolated network layer, which prevents them from accessing the network of the host operating system. In some cases, this network isolation can limit add-ons in providing their services and therefore, the isolation can be lifted by the add-on author, giving the addon full access to the network capabilities of the host machine. This gives the addon more networking capabilities but lowers the security, hence, the security rating of the add-on will be lowered when this option is used by the addon.",
+  },
+  homeassistant_api: {
+    title: "Home Assistant API Access",
+    description:
+      "This add-on is allowed to access your running Home Assistant instance directly via the Home Assistant API. This mode handles authentication for the addon as well, which enables an addon to interact with Home Assistant without the need for additional authentication tokens.",
+  },
+  full_access: {
+    title: "Full Hardware Access",
+    description:
+      "This addon is given full access to the hardware of your system, by request of the addon author. Access is comparable to the privileged mode in Docker. Since this opens up possible security risks, this feature impacts the addon security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the addon manually. Only disable the protection mode if you know, need AND trust the source of this addon.",
+  },
+  hassio_api: {
+    title: "Hass.io API Access",
+    description:
+      "The addon was given access to the Hass.io API, by request of the addon author. By default, the addon can access general version information of your system. When the addon requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Hass.io system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
+  },
+  docker_api: {
+    title: "Full Docker Access",
+    description:
+      "The addon author has requested the addon to have management access to the Docker instance running on your system. This mode gives the addon full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the addon security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the addon manually. Only disable the protection mode if you know, need AND trust the source of this addon.",
+  },
+  host_pid: {
+    title: "Host Processes Namespace",
+    description:
+      "Usually, the processes the addon runs, are isolated from all other system processes. The addon author has requested the addon to have access to the system processes running on the host system instance, and allow the addon to spawn processes on the host system as well. This mode gives the addon full access and control to your entire Hass.io system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the addon security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the addon manually. Only disable the protection mode if you know, need AND trust the source of this addon.",
+  },
+  apparmor: {
+    title: "AppArmor",
+    description:
+      "AppArmor ('Application Armor') is a Linux kernel security module that restricts addons capabilities like network access, raw socket access, and permission to read, write, or execute specific files.\n\nAddon authors can provide their security profiles, optimized for the addon, or request it to be disabled. If AppArmor is disabled, it will raise security risks and therefore, has a negative impact on the security score of the addon.",
+  },
+  auth_api: {
+    title: "Home Assistant Authentication",
+    description:
+      "An addon can authenticate users against Home Assistant, allowing add-ons to give users the possibility to log into applications running inside add-ons, using their Home Assistant username/password. This badge indicates if the add-on author requests this capability.",
+  },
+};
 
 class HassioAddonInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-    <style include="ha-style">
-      :host {
-        display: block;
-      }
-      paper-card {
-        display: block;
-        margin-bottom: 16px;
-      }
-      .addon-header {
-        @apply --paper-font-headline;
-      }
-      .light-color {
-        color: var(--secondary-text-color);
-      }
-      .addon-version {
-        float: right;
-        font-size: 15px;
-        vertical-align: middle;
-      }
-      .description {
-        margin-bottom: 16px;
-      }
-      .logo img {
-        max-height: 60px;
-        margin: 16px 0;
-        display: block;
-      }
-      .state div{
-        width: 150px;
-        display: inline-block;
-      }
-      paper-toggle-button {
-        display: inline;
-      }
-      iron-icon.running {
-        color: var(--paper-green-400);
-      }
-      iron-icon.stopped {
-        color: var(--google-red-300);
-      }
-      ha-call-api-button {
-        font-weight: 500;
-        color: var(--primary-color);
-      }
-      .right {
-        float: right;
-      }
-      ha-markdown img {
-        max-width: 100%;
-      }
-    </style>
-    <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
-      <paper-card heading="Update available! 🎉">
-        <div class="card-content">
-          <hassio-card-content hass="[[hass]]" title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="hassio:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
-        </div>
-        <div class="card-actions">
-          <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/update">Update</ha-call-api-button>
-          <template is="dom-if" if="[[addon.changelog]]">
-            <paper-button on-click="openChangelog">Changelog</paper-button>
-          </template>
-        </div>
-      </paper-card>
-    </template>
+      <style include="ha-style">
+        :host {
+          display: block;
+        }
+        paper-card {
+          display: block;
+          margin-bottom: 16px;
+        }
+        paper-card.warning {
+          background-color: var(--google-red-500);
+          color: white;
+          --paper-card-header-color: white;
+        }
+        paper-card.warning paper-button {
+          color: white !important;
+        }
+        .warning {
+          color: var(--google-red-500);
+        }
+        .addon-header {
+          @apply --paper-font-headline;
+        }
+        .light-color {
+          color: var(--secondary-text-color);
+        }
+        .addon-version {
+          float: right;
+          font-size: 15px;
+          vertical-align: middle;
+        }
+        .description {
+          margin-bottom: 16px;
+        }
+        .logo img {
+          max-height: 60px;
+          margin: 16px 0;
+          display: block;
+        }
+        .state div {
+          width: 150px;
+          display: inline-block;
+        }
+        paper-toggle-button {
+          display: inline;
+        }
+        iron-icon.running {
+          color: var(--paper-green-400);
+        }
+        iron-icon.stopped {
+          color: var(--google-red-300);
+        }
+        ha-call-api-button {
+          font-weight: 500;
+          color: var(--primary-color);
+        }
+        .right {
+          float: right;
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+        .red {
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        }
+        .blue {
+          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        }
+        .green {
+          --ha-label-badge-color: var(--label-badge-green, #0da035);
+        }
+        .yellow {
+          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        }
+        .security {
+          margin-bottom: 16px;
+        }
+        .security h3 {
+          margin-bottom: 8px;
+          font-weight: normal;
+        }
+        .security ha-label-badge {
+          cursor: pointer;
+          margin-right: 4px;
+          --iron-icon-height: 45px;
+        }
+      </style>
 
-    <paper-card>
-      <div class="card-content">
-        <div class="addon-header">[[addon.name]]
-          <div class="addon-version light-color">
-            <template is="dom-if" if="[[addon.version]]">
-              [[addon.version]]
-              <template is="dom-if" if="[[isRunning]]">
-                <iron-icon title="Add-on is running" class="running" icon="hassio:circle"></iron-icon>
-              </template>
-              <template is="dom-if" if="[[!isRunning]]">
-                <iron-icon title="Add-on is stopped" class="stopped" icon="hassio:circle"></iron-icon>
-              </template>
-            </template>
-            <template is="dom-if" if="[[!addon.version]]">
-              [[addon.last_version]]
+      <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
+        <paper-card heading="Update available! 🎉">
+          <div class="card-content">
+            <hassio-card-content
+              hass="[[hass]]"
+              title="[[addon.name]] [[addon.last_version]] is available"
+              description="You are currently running version [[addon.version]]"
+              icon="hassio:arrow-up-bold-circle"
+              icon-class="update"
+            ></hassio-card-content>
+          </div>
+          <div class="card-actions">
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/addons/[[addonSlug]]/update"
+              >Update</ha-call-api-button
+            >
+            <template is="dom-if" if="[[addon.changelog]]">
+              <paper-button on-click="openChangelog">Changelog</paper-button>
             </template>
           </div>
-        </div>
-        <div class="description light-color">
-          [[addon.description]].<br>
-          Visit <a href="[[addon.url]]" target="_blank">[[addon.name]] page</a> for details.
-        </div>
-        <template is="dom-if" if="[[addon.logo]]">
-          <a href="[[addon.url]]" target="_blank" class="logo">
-            <img src="/api/hassio/addons/[[addonSlug]]/logo">
-          </a>
-        </template>
-        <template is="dom-if" if="[[addon.version]]">
-          <div class="state">
-            <div>Start on boot</div>
-            <paper-toggle-button on-change="startOnBootToggled" checked="[[computeStartOnBoot(addon.boot)]]"></paper-toggle-button>
-          </div>
-          <div class="state">
-            <div>Auto update</div>
-            <paper-toggle-button on-change="autoUpdateToggled" checked="[[addon.auto_update]]"></paper-toggle-button>
-          </div>
-        </template>
-      </div>
-      <div class="card-actions">
-        <template is="dom-if" if="[[addon.version]]">
-          <paper-button class="warning" on-click="_unistallClicked">Uninstall</paper-button>
-          <template is="dom-if" if="[[addon.build]]">
-            <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/rebuild">Rebuild</ha-call-api-button>
-          </template>
-          <template is="dom-if" if="[[isRunning]]">
-            <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/restart">Restart</ha-call-api-button>
-            <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/stop">Stop</ha-call-api-button>
-          </template>
-          <template is="dom-if" if="[[!isRunning]]">
-            <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/start">Start</ha-call-api-button>
-          </template>
-          <template is="dom-if" if="[[computeShowWebUI(addon.webui, isRunning)]]">
-            <a href="[[pathWebui(addon.webui)]]" tabindex="-1" target="_blank" class="right"><paper-button>Open web UI</paper-button></a>
-          </template>
-        </template>
-        <template is="dom-if" if="[[!addon.version]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/install">Install</ha-call-api-button>
-        </template>
-      </div>
-    </paper-card>
-    <template is="dom-if" if="[[addon.long_description]]">
+        </paper-card>
+      </template>
+
       <paper-card>
         <div class="card-content">
-          <ha-markdown content="[[addon.long_description]]"></ha-markdown>
+          <div class="addon-header">
+            [[addon.name]]
+            <div class="addon-version light-color">
+              <template is="dom-if" if="[[addon.version]]">
+                [[addon.version]]
+                <template is="dom-if" if="[[isRunning]]">
+                  <iron-icon
+                    title="Add-on is running"
+                    class="running"
+                    icon="hassio:circle"
+                  ></iron-icon>
+                </template>
+                <template is="dom-if" if="[[!isRunning]]">
+                  <iron-icon
+                    title="Add-on is stopped"
+                    class="stopped"
+                    icon="hassio:circle"
+                  ></iron-icon>
+                </template>
+              </template>
+              <template is="dom-if" if="[[!addon.version]]">
+                [[addon.last_version]]
+              </template>
+            </div>
+          </div>
+          <div class="description light-color">
+            [[addon.description]].<br />
+            Visit
+            <a href="[[addon.url]]" target="_blank">[[addon.name]] page</a> for
+            details.
+          </div>
+          <template is="dom-if" if="[[addon.logo]]">
+            <a href="[[addon.url]]" target="_blank" class="logo">
+              <img src="/api/hassio/addons/[[addonSlug]]/logo" />
+            </a>
+          </template>
+          <template is="dom-if" if="[[!addon.protected]]">
+            <paper-card heading="Warning: Protection mode is disabled!" class="warning">
+              <div class="card-content">
+                Protection mode on this addon is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this addon.
+              </div>
+              <div class="card-actions">
+                  <paper-button on-click="protectionToggled">Enable Protection mode</paper-button>
+                </div>
+              </div>
+            </paper-card>
+          </template>
+          <div class="security">
+              <h3>Addon Security Rating</h3>
+              <div class="description light-color">
+                Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an addon requires on your system, the lower the score, thus raising the possible security risks.
+              </div>
+              <ha-label-badge
+                class$="[[computeSecurityClassName(addon.rating)]]"
+                on-click="showMoreInfo"
+                id="rating"
+                value="[[addon.rating]]"
+                label="rating"
+                description=""
+              ></ha-label-badge>
+              <template is="dom-if" if="[[addon.host_network]]">
+                <ha-label-badge
+                on-click="showMoreInfo"
+                id="host_network"
+                icon="hassio:network"
+                label="host"
+                description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.full_access]]">
+                <ha-label-badge
+                on-click="showMoreInfo"
+                id="full_access"
+                icon="hassio:chip"  
+                label="hardware"
+                description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.homeassistant_api]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="homeassistant_api"
+                  icon="hassio:home-assistant"
+                  label="hass"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[computeHassioApi(addon)]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="hassio_api"
+                  icon="hassio:home-assistant"
+                  label="hassio"
+                  description="[[addon.hassio_role]]"
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.docker_api]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="docker_api"
+                  icon="hassio:docker"
+                  label="docker"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.host_pid]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="host_pid"
+                  icon="hassio:pound"
+                  label="host pid"
+                  description=""
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.apparmor]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  class$="[[computeApparmorClassName(addon.apparmor)]]"
+                  id="apparmor"
+                  icon="hassio:shield"
+                  label="apparmor"
+                  description="[[addon.apparmor]]"
+                ></ha-label-badge>
+              </template>
+              <template is="dom-if" if="[[addon.auth_api]]">
+                <ha-label-badge
+                  on-click="showMoreInfo"
+                  id="auth_api"
+                  icon="hassio:key"
+                  label="auth"
+                  description=""
+                ></ha-label-badge>
+              </template>
+          </div>
+          <template is="dom-if" if="[[addon.version]]">
+            <div class="state">
+              <div>Start on boot</div>
+              <paper-toggle-button
+                on-change="startOnBootToggled"
+                checked="[[computeStartOnBoot(addon.boot)]]"
+              ></paper-toggle-button>
+            </div>
+            <div class="state">
+              <div>Auto update</div>
+              <paper-toggle-button
+                on-change="autoUpdateToggled"
+                checked="[[addon.auto_update]]"
+              ></paper-toggle-button>
+            </div>
+            <div class="state">
+              <div>Protection mode</div>
+              <paper-toggle-button
+                on-change="protectionToggled"
+                checked="[[addon.protected]]"
+              ></paper-toggle-button>
+            </div>
+          </template>
+        </div>
+        <div class="card-actions">
+          <template is="dom-if" if="[[addon.version]]">
+            <paper-button class="warning" on-click="_unistallClicked"
+              >Uninstall</paper-button
+            >
+            <template is="dom-if" if="[[addon.build]]">
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/rebuild"
+                >Rebuild</ha-call-api-button
+              >
+            </template>
+            <template is="dom-if" if="[[isRunning]]">
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/restart"
+                >Restart</ha-call-api-button
+              >
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/stop"
+                >Stop</ha-call-api-button
+              >
+            </template>
+            <template is="dom-if" if="[[!isRunning]]">
+              <ha-call-api-button
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/start"
+                >Start</ha-call-api-button
+              >
+            </template>
+            <template
+              is="dom-if"
+              if="[[computeShowWebUI(addon.webui, isRunning)]]"
+            >
+              <a
+                href="[[pathWebui(addon.webui)]]"
+                tabindex="-1"
+                target="_blank"
+                class="right"
+                ><paper-button>Open web UI</paper-button></a
+              >
+            </template>
+          </template>
+          <template is="dom-if" if="[[!addon.version]]">
+            <template is="dom-if" if="[[!addon.available]]">
+              <p class="warning">This addon is not available on your system.</p>
+            </template>
+            <ha-call-api-button
+              disabled="[[!addon.available]]"
+              hass="[[hass]]"
+              path="hassio/addons/[[addonSlug]]/install"
+              >Install</ha-call-api-button
+            >
+          </template>
         </div>
       </paper-card>
-    </template>
-`;
+      <template is="dom-if" if="[[addon.long_description]]">
+        <paper-card>
+          <div class="card-content">
+            <ha-markdown content="[[addon.long_description]]"></ha-markdown>
+          </div>
+        </paper-card>
+      </template>
+    `;
   }
 
   static get properties() {
@@ -155,10 +410,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
       hass: Object,
       addon: Object,
       addonSlug: String,
-      isRunning: {
-        type: Boolean,
-        computed: "computeIsRunning(addon)",
-      },
+      isRunning: { type: Boolean, computed: "computeIsRunning(addon)" },
     };
   }
 
@@ -175,6 +427,23 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     );
   }
 
+  computeHassioApi(addon) {
+    return (
+      addon.hassio_api &&
+      (addon.hassio_role === "manager" || addon.hassio_role === "admin")
+    );
+  }
+
+  computeApparmorClassName(apparmor) {
+    if (apparmor === "profile") {
+      return "green";
+    }
+    if (apparmor === "disable") {
+      return "red";
+    }
+    return "";
+  }
+
   pathWebui(webui) {
     return webui && webui.replace("[HOST]", document.location.hostname);
   }
@@ -187,6 +456,16 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     return state === "auto";
   }
 
+  computeSecurityClassName(rating) {
+    if (rating > 4) {
+      return "green";
+    }
+    if (rating > 2) {
+      return "yellow";
+    }
+    return "red";
+  }
+
   startOnBootToggled() {
     const data = { boot: this.addon.boot === "auto" ? "manual" : "auto" };
     this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
@@ -197,6 +476,20 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
   }
 
+  protectionToggled() {
+    const data = { protected: !this.addon.protected };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/security`, data);
+    this.set("addon.protected", !this.addon.protected);
+  }
+
+  showMoreInfo(e) {
+    const id = e.target.getAttribute("id");
+    this.fire("hassio-markdown-dialog", {
+      title: PERMIS_DESC[id].title,
+      content: PERMIS_DESC[id].description,
+    });
+  }
+
   openChangelog() {
     this.hass
       .callApi("get", `hassio/addons/${this.addonSlug}/changelog`)

hassio/src/addon-view/hassio-addon-logs.js

@@ -1,31 +1,33 @@
-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 { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
 
-import "../../../src/resources/ha-style.js";
+import "../../../src/resources/ha-style";
 
 class HassioAddonLogs extends PolymerElement {
   static get template() {
     return html`
-    <style include="ha-style">
-      :host,
-      paper-card {
-        display: block;
-      }
-      pre {
-        overflow-x: auto;
-      }
-    </style>
-    <paper-card heading="Log">
-      <div class="card-content">
-        <pre>[[log]]</pre>
-      </div>
-      <div class="card-actions">
-        <paper-button on-click="refresh">Refresh</paper-button>
-      </div>
-    </paper-card>
-`;
+      <style include="ha-style">
+        :host,
+        paper-card {
+          display: block;
+        }
+        pre {
+          overflow-x: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+        }
+      </style>
+      ${ANSI_HTML_STYLE}
+      <paper-card heading="Log">
+        <div class="card-content" id="content"></div>
+        <div class="card-actions">
+          <paper-button on-click="refresh">Refresh</paper-button>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {
@@ -35,7 +37,6 @@ class HassioAddonLogs extends PolymerElement {
         type: String,
         observer: "addonSlugChanged",
       },
-      log: String,
     };
   }
 
@@ -53,8 +54,11 @@ class HassioAddonLogs extends PolymerElement {
   refresh() {
     this.hass
       .callApi("get", `hassio/addons/${this.addonSlug}/logs`)
-      .then((info) => {
-        this.log = info;
+      .then((text) => {
+        while (this.$.content.lastChild) {
+          this.$.content.removeChild(this.$.content.lastChild);
+        }
+        this.$.content.appendChild(parseTextToColoredPre(text));
       });
   }
 }

hassio/src/addon-view/hassio-addon-network.js

@@ -1,60 +1,69 @@
-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() {
     return html`
-    <style include="ha-style">
-      :host {
-        display: block;
-      }
-      paper-card {
-        display: block;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-bottom: 16px;
-      }
-      .card-actions {
-        @apply --layout;
-        @apply --layout-justified;
-      }
-    </style>
-    <paper-card heading="Network">
-      <div class="card-content">
-        <template is="dom-if" if="[[error]]">
-          <div class="errors">[[error]]</div>
-        </template>
-
-        <table>
-          <tbody><tr>
-            <th>Container</th>
-            <th>Host</th>
-          </tr>
-          <template is="dom-repeat" items="[[config]]">
-            <tr>
-              <td>
-                [[item.container]]
-              </td>
-              <td>
-                <paper-input value="{{item.host}}" no-label-float=""></paper-input>
-              </td>
-            </tr>
+      <style include="ha-style">
+        :host {
+          display: block;
+        }
+        paper-card {
+          display: block;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-bottom: 16px;
+        }
+        .card-actions {
+          @apply --layout;
+          @apply --layout-justified;
+        }
+      </style>
+      <paper-card heading="Network">
+        <div class="card-content">
+          <template is="dom-if" if="[[error]]">
+            <div class="errors">[[error]]</div>
           </template>
-        </tbody></table>
-      </div>
-      <div class="card-actions">
-        <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/options" data="[[resetData]]">Reset to defaults</ha-call-api-button>
-        <paper-button on-click="saveTapped">Save</paper-button>
-      </div>
-    </paper-card>
-`;
+
+          <table>
+            <tbody>
+              <tr>
+                <th>Container</th>
+                <th>Host</th>
+              </tr>
+              <template is="dom-repeat" items="[[config]]">
+                <tr>
+                  <td>[[item.container]]</td>
+                  <td>
+                    <paper-input
+                      value="{{item.host}}"
+                      no-label-float=""
+                    ></paper-input>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            class="warning"
+            hass="[[hass]]"
+            path="hassio/addons/[[addonSlug]]/options"
+            data="[[resetData]]"
+            >Reset to defaults</ha-call-api-button
+          >
+          <paper-button on-click="saveTapped">Save</paper-button>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-view.js

@@ -1,86 +1,119 @@
-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() {
     return html`
-    <style include="iron-flex ha-style">
-      :host {
-        color: var(--primary-text-color);
-        --paper-card-header-color: var(--primary-text-color);
-      }
-      .content {
-        padding: 24px 0 32px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      hassio-addon-info,
-      hassio-addon-network,
-      hassio-addon-audio,
-      hassio-addon-config {
-        margin-bottom: 24px;
-        width: 600px;
-      }
-      hassio-addon-logs {
-        max-width: calc(100% - 8px);
-        min-width: 600px;
-      }
-      @media only screen and (max-width: 600px) {
+      <style include="iron-flex ha-style">
+        :host {
+          color: var(--primary-text-color);
+          --paper-card-header-color: var(--primary-text-color);
+        }
+        .content {
+          padding: 24px 0 32px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
         hassio-addon-info,
         hassio-addon-network,
         hassio-addon-audio,
-        hassio-addon-config,
-        hassio-addon-logs {
-          max-width: 100%;
-          min-width: 100%;
+        hassio-addon-config {
+          margin-bottom: 24px;
+          width: 600px;
         }
-      }
-    </style>
-    <app-route route="[[route]]" pattern="/addon/:slug" data="{{routeData}}" active="{{routeMatches}}"></app-route>
-    <app-header-layout has-scrolling-region="">
-      <app-header fixed="" slot="header">
-        <app-toolbar>
-          <ha-menu-button hassio narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
-          <paper-icon-button icon="hassio:arrow-left" on-click="backTapped"></paper-icon-button>
-          <div main-title="">Hass.io: add-on details</div>
-        </app-toolbar>
-      </app-header>
-      <div class="content">
-        <hassio-addon-info hass="[[hass]]" addon="[[addon]]" addon-slug="[[routeData.slug]]"></hassio-addon-info>
+        hassio-addon-logs {
+          max-width: calc(100% - 8px);
+          min-width: 600px;
+        }
+        @media only screen and (max-width: 600px) {
+          hassio-addon-info,
+          hassio-addon-network,
+          hassio-addon-audio,
+          hassio-addon-config,
+          hassio-addon-logs {
+            max-width: 100%;
+            min-width: 100%;
+          }
+        }
+      </style>
+      <app-route
+        route="[[route]]"
+        pattern="/addon/:slug"
+        data="{{routeData}}"
+        active="{{routeMatches}}"
+      ></app-route>
+      <app-header-layout has-scrolling-region="">
+        <app-header fixed="" slot="header">
+          <app-toolbar>
+            <ha-menu-button
+              hassio
+              narrow="[[narrow]]"
+              show-menu="[[showMenu]]"
+            ></ha-menu-button>
+            <paper-icon-button
+              icon="hassio:arrow-left"
+              on-click="backTapped"
+            ></paper-icon-button>
+            <div main-title="">Hass.io: add-on details</div>
+          </app-toolbar>
+        </app-header>
+        <div class="content">
+          <hassio-addon-info
+            hass="[[hass]]"
+            addon="[[addon]]"
+            addon-slug="[[routeData.slug]]"
+          ></hassio-addon-info>
 
-        <template is="dom-if" if="[[addon.version]]">
-          <hassio-addon-config hass="[[hass]]" addon="[[addon]]" addon-slug="[[routeData.slug]]"></hassio-addon-config>
+          <template is="dom-if" if="[[addon.version]]">
+            <hassio-addon-config
+              hass="[[hass]]"
+              addon="[[addon]]"
+              addon-slug="[[routeData.slug]]"
+            ></hassio-addon-config>
 
-          <template is="dom-if" if="[[addon.audio]]">
-            <hassio-addon-audio hass="[[hass]]" addon="[[addon]]"></hassio-addon-audio>
+            <template is="dom-if" if="[[addon.audio]]">
+              <hassio-addon-audio
+                hass="[[hass]]"
+                addon="[[addon]]"
+              ></hassio-addon-audio>
+            </template>
+
+            <template is="dom-if" if="[[addon.network]]">
+              <hassio-addon-network
+                hass="[[hass]]"
+                addon="[[addon]]"
+                addon-slug="[[routeData.slug]]"
+              ></hassio-addon-network>
+            </template>
+
+            <hassio-addon-logs
+              hass="[[hass]]"
+              addon-slug="[[routeData.slug]]"
+            ></hassio-addon-logs>
           </template>
+        </div>
+      </app-header-layout>
 
-          <template is="dom-if" if="[[addon.network]]">
-            <hassio-addon-network hass="[[hass]]" addon="[[addon]]" addon-slug="[[routeData.slug]]"></hassio-addon-network>
-          </template>
-
-          <hassio-addon-logs hass="[[hass]]" addon-slug="[[routeData.slug]]"></hassio-addon-logs>
-        </template>
-      </div>
-    </app-header-layout>
-
-    <hassio-markdown-dialog title="[[markdownTitle]]" content="[[markdownContent]]"></hassio-markdown-dialog>
-`;
+      <hassio-markdown-dialog
+        title="[[markdownTitle]]"
+        content="[[markdownContent]]"
+      ></hassio-markdown-dialog>
+    `;
   }
 
   static get properties() {

hassio/src/ansi-to-html.js

@@ -0,0 +1,203 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+
+export const ANSI_HTML_STYLE = html`
+  <style>
+    .bold {
+      font-weight: bold;
+    }
+    .italic {
+      font-style: italic;
+    }
+    .underline {
+      text-decoration: underline;
+    }
+    .strikethrough {
+      text-decoration: line-through;
+    }
+    .underline.strikethrough {
+      text-decoration: underline line-through;
+    }
+    .fg-red {
+      color: rgb(222, 56, 43);
+    }
+    .fg-green {
+      color: rgb(57, 181, 74);
+    }
+    .fg-yellow {
+      color: rgb(255, 199, 6);
+    }
+    .fg-blue {
+      color: rgb(0, 111, 184);
+    }
+    .fg-magenta {
+      color: rgb(118, 38, 113);
+    }
+    .fg-cyan {
+      color: rgb(44, 181, 233);
+    }
+    .fg-white {
+      color: rgb(204, 204, 204);
+    }
+    .bg-black {
+      background-color: rgb(0, 0, 0);
+    }
+    .bg-red {
+      background-color: rgb(222, 56, 43);
+    }
+    .bg-green {
+      background-color: rgb(57, 181, 74);
+    }
+    .bg-yellow {
+      background-color: rgb(255, 199, 6);
+    }
+    .bg-blue {
+      background-color: rgb(0, 111, 184);
+    }
+    .bg-magenta {
+      background-color: rgb(118, 38, 113);
+    }
+    .bg-cyan {
+      background-color: rgb(44, 181, 233);
+    }
+    .bg-white {
+      background-color: rgb(204, 204, 204);
+    }
+  </style>
+`;
+
+export function parseTextToColoredPre(text) {
+  const pre = document.createElement("pre");
+  const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
+  let i = 0;
+
+  const state = {
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    foregroundColor: null,
+    backgroundColor: null,
+  };
+
+  const addSpan = (content) => {
+    const span = document.createElement("span");
+    if (state.bold) span.classList.add("bold");
+    if (state.italic) span.classList.add("italic");
+    if (state.underline) span.classList.add("underline");
+    if (state.strikethrough) span.classList.add("strikethrough");
+    if (state.foregroundColor !== null)
+      span.classList.add(`fg-${state.foregroundColor}`);
+    if (state.backgroundColor !== null)
+      span.classList.add(`bg-${state.backgroundColor}`);
+    span.appendChild(document.createTextNode(content));
+    pre.appendChild(span);
+  };
+
+  /* eslint-disable no-cond-assign */
+  let match;
+  while ((match = re.exec(text)) !== null) {
+    const j = match.index;
+    addSpan(text.substring(i, j));
+    i = j + match[0].length;
+
+    if (match[1] === undefined) continue;
+
+    for (const colorCode of match[1].split(";")) {
+      switch (parseInt(colorCode)) {
+        case 0:
+          // reset
+          state.bold = false;
+          state.italic = false;
+          state.underline = false;
+          state.strikethrough = false;
+          state.foregroundColor = null;
+          state.backgroundColor = null;
+          break;
+        case 1:
+          state.bold = true;
+          break;
+        case 3:
+          state.italic = true;
+          break;
+        case 4:
+          state.underline = true;
+          break;
+        case 9:
+          state.strikethrough = true;
+          break;
+        case 22:
+          state.bold = false;
+          break;
+        case 23:
+          state.italic = false;
+          break;
+        case 24:
+          state.underline = false;
+          break;
+        case 29:
+          state.strikethrough = false;
+          break;
+        case 30:
+          // foreground black
+          state.foregroundColor = null;
+          break;
+        case 31:
+          state.foregroundColor = "red";
+          break;
+        case 32:
+          state.foregroundColor = "green";
+          break;
+        case 33:
+          state.foregroundColor = "yellow";
+          break;
+        case 34:
+          state.foregroundColor = "blue";
+          break;
+        case 35:
+          state.foregroundColor = "magenta";
+          break;
+        case 36:
+          state.foregroundColor = "cyan";
+          break;
+        case 37:
+          state.foregroundColor = "white";
+          break;
+        case 39:
+          // foreground reset
+          state.foregroundColor = null;
+          break;
+        case 40:
+          state.backgroundColor = "black";
+          break;
+        case 41:
+          state.backgroundColor = "red";
+          break;
+        case 42:
+          state.backgroundColor = "green";
+          break;
+        case 43:
+          state.backgroundColor = "yellow";
+          break;
+        case 44:
+          state.backgroundColor = "blue";
+          break;
+        case 45:
+          state.backgroundColor = "magenta";
+          break;
+        case 46:
+          state.backgroundColor = "cyan";
+          break;
+        case 47:
+          state.backgroundColor = "white";
+          break;
+        case 49:
+          // background reset
+          state.backgroundColor = null;
+          break;
+      }
+    }
+  }
+  addSpan(text.substring(i));
+
+  return pre;
+}

hassio/src/components/hassio-card-content.js

@@ -1,60 +1,74 @@
-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() {
     return html`
-    <style>
-      iron-icon {
-        margin-right: 16px;
-        margin-top: 16px;
-        float: left;
-        color: var(--secondary-text-color);
-      }
-      iron-icon.update {
-        color: var(--paper-orange-400);
-      }
-      iron-icon.running,
-      iron-icon.installed {
-        color: var(--paper-green-400);
-      }
-      iron-icon.hassupdate,
-      iron-icon.snapshot {
-        color: var(--paper-item-icon-color);
-      }
-      .title {
-        color: var(--primary-text-color);
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .addition {
-        color: var(--secondary-text-color);
-        overflow: hidden;
-        position: relative;
-        height: 2.4em;
-        line-height: 1.2em;
-      }
-      ha-relative-time {
-        display: block;
-      }
-    </style>
-    <iron-icon icon="[[icon]]" class\$="[[iconClass]]" title="[[iconTitle]]"></iron-icon>
-    <div>
-      <div class="title">[[title]]</div>
-      <div class="addition">
-        <template is="dom-if" if="[[description]]">
-          [[description]]
-        </template>
-        <template is="dom-if" if="[[datetime]]">
-          <ha-relative-time hass="[[hass]]" class="addition" datetime="[[datetime]]"></ha-relative-time>
-        </template>
+      <style>
+        iron-icon {
+          margin-right: 16px;
+          margin-top: 16px;
+          float: left;
+          color: var(--secondary-text-color);
+        }
+        iron-icon.update {
+          color: var(--paper-orange-400);
+        }
+        iron-icon.running,
+        iron-icon.installed {
+          color: var(--paper-green-400);
+        }
+        iron-icon.hassupdate,
+        iron-icon.snapshot {
+          color: var(--paper-item-icon-color);
+        }
+        iron-icon.not_available {
+          color: var(--google-red-500);
+        }
+        .title {
+          color: var(--primary-text-color);
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .addition {
+          color: var(--secondary-text-color);
+          overflow: hidden;
+          position: relative;
+          height: 2.4em;
+          line-height: 1.2em;
+        }
+        ha-relative-time {
+          display: block;
+        }
+      </style>
+      <iron-icon
+        icon="[[icon]]"
+        class\$="[[iconClass]]"
+        title="[[iconTitle]]"
+      ></iron-icon>
+      <div>
+        <div class="title">[[title]]</div>
+        <div class="addition">
+          <template is="dom-if" if="[[description]]">
+            [[description]]
+          </template>
+          <template is="dom-if" if="[[!available]]">
+            (Not available)
+          </template>
+          <template is="dom-if" if="[[datetime]]">
+            <ha-relative-time
+              hass="[[hass]]"
+              class="addition"
+              datetime="[[datetime]]"
+            ></ha-relative-time>
+          </template>
+        </div>
       </div>
-    </div>
-`;
+    `;
   }
 
   static get properties() {
@@ -62,6 +76,7 @@ class HassioCardContent extends PolymerElement {
       hass: Object,
       title: String,
       description: String,
+      available: Boolean,
       datetime: String,
       icon: {
         type: String,

hassio/src/dashboard/hassio-addons.js

@@ -1,37 +1,52 @@
-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() {
     return html`
-    <style include="ha-style hassio-style">
-      paper-card {
-        cursor: pointer;
-      }
-    </style>
-    <div class="content card-group">
-      <div class="title">Add-ons</div>
-      <template is="dom-if" if="[[!addons.length]]">
-        <paper-card>
-          <div class="card-content">
-            You don't have any add-ons installed yet. Head over to <a href="#" on-click="openStore">the add-on store</a> to get started!
-          </div>
-        </paper-card>
-      </template>
-      <template is="dom-repeat" items="[[addons]]" as="addon" sort="sortAddons">
-        <paper-card on-click="addonTapped">
-          <div class="card-content">
-            <hassio-card-content hass="[[hass]]" title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
-          </div>
-        </paper-card>
-      </template>
-    </div>
-`;
+      <style include="ha-style hassio-style">
+        paper-card {
+          cursor: pointer;
+        }
+      </style>
+      <div class="content card-group">
+        <div class="title">Add-ons</div>
+        <template is="dom-if" if="[[!addons.length]]">
+          <paper-card>
+            <div class="card-content">
+              You don't have any add-ons installed yet. Head over to
+              <a href="#" on-click="openStore">the add-on store</a> to get
+              started!
+            </div>
+          </paper-card>
+        </template>
+        <template
+          is="dom-repeat"
+          items="[[addons]]"
+          as="addon"
+          sort="sortAddons"
+        >
+          <paper-card on-click="addonTapped">
+            <div class="card-content">
+              <hassio-card-content
+                hass="[[hass]]"
+                title="[[addon.name]]"
+                description="[[addon.description]]"
+                available="[[addon.available]]"
+                icon="[[computeIcon(addon)]]"
+                icon-title="[[computeIconTitle(addon)]]"
+                icon-class="[[computeIconClass(addon)]]"
+              ></hassio-card-content>
+            </div>
+          </paper-card>
+        </template>
+      </div>
+    `;
   }
 
   static get properties() {

hassio/src/dashboard/hassio-dashboard.js

@@ -1,23 +1,29 @@
-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() {
     return html`
-    <style include="iron-flex ha-style">
-      .content {
-        margin: 0 auto;
-      }
-    </style>
-    <div class="content">
-      <hassio-hass-update hass="[[hass]]" hass-info="[[hassInfo]]"></hassio-hass-update>
-      <hassio-addons hass="[[hass]]" addons="[[supervisorInfo.addons]]"></hassio-addons>
-    </div>
-`;
+      <style include="iron-flex ha-style">
+        .content {
+          margin: 0 auto;
+        }
+      </style>
+      <div class="content">
+        <hassio-hass-update
+          hass="[[hass]]"
+          hass-info="[[hassInfo]]"
+        ></hassio-hass-update>
+        <hassio-addons
+          hass="[[hass]]"
+          addons="[[supervisorInfo.addons]]"
+        ></hassio-addons>
+      </div>
+    `;
   }
 
   static get properties() {

hassio/src/dashboard/hassio-hass-update.js

@@ -1,49 +1,69 @@
-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() {
     return html`
-    <style include="ha-style hassio-style">
-      paper-card {
-        display: block;
-        margin-bottom: 32px;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-top: 16px;
-      }
-      a {
-        color: var(--primary-color);
-      }
-    </style>
-    <template is="dom-if" if="[[computeUpdateAvailable(hassInfo)]]">
-      <div class="content">
-        <div class="card-group">
-          <div class="title">Update available! 🎉</div>
-          <paper-card>
-            <div class="card-content">
-              <hassio-card-content hass="[[hass]]" title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="hassio:home-assistant" icon-class="hassupdate"></hassio-card-content>
-              <template is="dom-if" if="[[error]]">
-                <div class="error">Error: [[error]]</div>
-              </template>
-              <p><a href='https://www.home-assistant.io/latest-release-notes/' target='_blank'>Read the release notes</a></p>
-            </div>
-            <div class="card-actions">
-              <ha-call-api-button hass="[[hass]]" path="hassio/homeassistant/update">Update</ha-call-api-button>
-              <a href="https://github.com/home-assistant/home-assistant/releases" target="_blank"><paper-button>Release notes</paper-button></a>
-            </div>
-          </paper-card>
+      <style include="ha-style hassio-style">
+        paper-card {
+          display: block;
+          margin-bottom: 32px;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-top: 16px;
+        }
+        a {
+          color: var(--primary-color);
+        }
+      </style>
+      <template is="dom-if" if="[[computeUpdateAvailable(hassInfo)]]">
+        <div class="content">
+          <div class="card-group">
+            <div class="title">Update available! 🎉</div>
+            <paper-card>
+              <div class="card-content">
+                <hassio-card-content
+                  hass="[[hass]]"
+                  title="Home Assistant [[hassInfo.last_version]] is available"
+                  description="You are currently running version [[hassInfo.version]]"
+                  icon="hassio:home-assistant"
+                  icon-class="hassupdate"
+                ></hassio-card-content>
+                <template is="dom-if" if="[[error]]">
+                  <div class="error">Error: [[error]]</div>
+                </template>
+                <p>
+                  <a
+                    href="https://www.home-assistant.io/latest-release-notes/"
+                    target="_blank"
+                    >Read the release notes</a
+                  >
+                </p>
+              </div>
+              <div class="card-actions">
+                <ha-call-api-button
+                  hass="[[hass]]"
+                  path="hassio/homeassistant/update"
+                  >Update</ha-call-api-button
+                >
+                <a
+                  href="https://github.com/home-assistant/home-assistant/releases"
+                  target="_blank"
+                  ><paper-button>Release notes</paper-button></a
+                >
+              </div>
+            </paper-card>
+          </div>
         </div>
-      </div>
-    </template>
-`;
+      </template>
+    `;
   }
 
   static get properties() {

hassio/src/hassio-app.js

@@ -1,16 +1,21 @@
-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() {
     return html`
-    <template is="dom-if" if="[[hass]]">
-      <hassio-main hass="[[hass]]" narrow="[[narrow]]" show-menu="[[showMenu]]" route="[[route]]"></hassio-main>
-    </template>
-`;
+      <template is="dom-if" if="[[hass]]">
+        <hassio-main
+          hass="[[hass]]"
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+          route="[[route]]"
+        ></hassio-main>
+      </template>
+    `;
   }
 
   static get properties() {

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() {

hassio/src/hassio-main.js

@@ -1,35 +1,61 @@
-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() {
     return html`
-    <app-route route="[[route]]" pattern="/:page" data="{{routeData}}"></app-route>
-    <hassio-data id="data" hass="[[hass]]" supervisor="{{supervisorInfo}}" homeassistant="{{hassInfo}}" host="{{hostInfo}}"></hassio-data>
+      <app-route
+        route="[[route]]"
+        pattern="/:page"
+        data="{{routeData}}"
+      ></app-route>
+      <hassio-data
+        id="data"
+        hass="[[hass]]"
+        supervisor="{{supervisorInfo}}"
+        homeassistant="{{hassInfo}}"
+        host="{{hostInfo}}"
+      ></hassio-data>
 
-    <template is="dom-if" if="[[!loaded]]">
-      <hass-loading-screen narrow="[[narrow]]" show-menu="[[showMenu]]"></hass-loading-screen>
-    </template>
+      <template is="dom-if" if="[[!loaded]]">
+        <hass-loading-screen
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        ></hass-loading-screen>
+      </template>
 
-    <template is="dom-if" if="[[loaded]]">
-      <template is="dom-if" if="[[!equalsAddon(routeData.page)]]">
-        <hassio-pages-with-tabs hass="[[hass]]" narrow="[[narrow]]" show-menu="[[showMenu]]" page="[[routeData.page]]" supervisor-info="[[supervisorInfo]]" hass-info="[[hassInfo]]" host-info="[[hostInfo]]"></hassio-pages-with-tabs>
+      <template is="dom-if" if="[[loaded]]">
+        <template is="dom-if" if="[[!equalsAddon(routeData.page)]]">
+          <hassio-pages-with-tabs
+            hass="[[hass]]"
+            narrow="[[narrow]]"
+            show-menu="[[showMenu]]"
+            page="[[routeData.page]]"
+            supervisor-info="[[supervisorInfo]]"
+            hass-info="[[hassInfo]]"
+            host-info="[[hostInfo]]"
+          ></hassio-pages-with-tabs>
+        </template>
+        <template is="dom-if" if="[[equalsAddon(routeData.page)]]">
+          <hassio-addon-view
+            hass="[[hass]]"
+            narrow="[[narrow]]"
+            show-menu="[[showMenu]]"
+            route="[[route]]"
+          ></hassio-addon-view>
+        </template>
       </template>
-      <template is="dom-if" if="[[equalsAddon(routeData.page)]]">
-        <hassio-addon-view hass="[[hass]]" narrow="[[narrow]]" show-menu="[[showMenu]]" route="[[route]]"></hassio-addon-view>
-      </template>
-    </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/hassio-markdown-dialog.js

@@ -1,65 +1,68 @@
-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() {
     return html`
-    <style include="ha-style-dialog">
-      paper-dialog {
-        min-width: 350px;
-        font-size: 14px;
-        border-radius: 2px;
-      }
-      app-toolbar {
-        margin: 0;
-        padding: 0 16px;
-        color: var(--primary-text-color);
-        background-color: var(--secondary-background-color);
-      }
-      app-toolbar [main-title] {
-        margin-left: 16px;
-      }
-      paper-checkbox {
-        display: block;
-        margin: 4px;
-      }
-      @media all and (max-width: 450px), all and (max-height: 500px) {
+      <style include="ha-style-dialog">
         paper-dialog {
-          max-height: 100%;
-        }
-        paper-dialog::before {
-          content: "";
-          position: fixed;
-          z-index: -1;
-          top: 0px;
-          left: 0px;
-          right: 0px;
-          bottom: 0px;
-          background-color: inherit;
+          min-width: 350px;
+          font-size: 14px;
+          border-radius: 2px;
         }
         app-toolbar {
-          color: var(--text-primary-color);
-          background-color: var(--primary-color);
+          margin: 0;
+          padding: 0 16px;
+          color: var(--primary-text-color);
+          background-color: var(--secondary-background-color);
         }
-      }
-    </style>
-    <paper-dialog id="dialog" with-backdrop="">
-      <app-toolbar>
-        <paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
-        <div main-title="">[[title]]</div>
-      </app-toolbar>
-      <paper-dialog-scrollable>
-        <ha-markdown content="[[content]]"></ha-markdown>
-      </paper-dialog-scrollable>
-    </paper-dialog>
-`;
+        app-toolbar [main-title] {
+          margin-left: 16px;
+        }
+        paper-checkbox {
+          display: block;
+          margin: 4px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          paper-dialog {
+            max-height: 100%;
+          }
+          paper-dialog::before {
+            content: "";
+            position: fixed;
+            z-index: -1;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            bottom: 0px;
+            background-color: inherit;
+          }
+          app-toolbar {
+            color: var(--text-primary-color);
+            background-color: var(--primary-color);
+          }
+        }
+      </style>
+      <paper-dialog id="dialog" with-backdrop="">
+        <app-toolbar>
+          <paper-icon-button
+            icon="hassio:close"
+            dialog-dismiss=""
+          ></paper-icon-button>
+          <div main-title="">[[title]]</div>
+        </app-toolbar>
+        <paper-dialog-scrollable>
+          <ha-markdown content="[[content]]"></ha-markdown>
+        </paper-dialog-scrollable>
+      </paper-dialog>
+    `;
   }
 
   static get properties() {

hassio/src/hassio-pages-with-tabs.js

@@ -1,75 +1,107 @@
-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() {
     return html`
-    <style include="iron-flex iron-positioning ha-style">
-      :host {
-        color: var(--primary-text-color);
-        --paper-card-header-color: var(--primary-text-color);
-      }
-      paper-tabs {
-        margin-left: 12px;
-        --paper-tabs-selection-bar-color: #FFF;
-        text-transform: uppercase;
-      }
-    </style>
-    <app-header-layout id="layout" has-scrolling-region>
-      <app-header fixed slot="header">
-        <app-toolbar>
-          <ha-menu-button hassio narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
-          <div main-title>Hass.io</div>
-          <template is="dom-if" if="[[showRefreshButton(page)]]">
-            <paper-icon-button icon="hassio:refresh" on-click="refreshClicked"></paper-icon-button>
-          </template>
-        </app-toolbar>
-        <paper-tabs scrollable="" selected="[[page]]" attr-for-selected="page-name" on-iron-activate="handlePageSelected">
-          <paper-tab page-name="dashboard">Dashboard</paper-tab>
-          <paper-tab page-name="snapshots">Snapshots</paper-tab>
-          <paper-tab page-name="store">Add-on store</paper-tab>
-          <paper-tab page-name="system">System</paper-tab>
-        </paper-tabs>
-      </app-header>
-      <template is="dom-if" if="[[equals(page, &quot;dashboard&quot;)]]">
-        <hassio-dashboard hass="[[hass]]" supervisor-info="[[supervisorInfo]]" hass-info="[[hassInfo]]"></hassio-dashboard>
-      </template>
+      <style include="iron-flex iron-positioning ha-style">
+        :host {
+          color: var(--primary-text-color);
+          --paper-card-header-color: var(--primary-text-color);
+        }
+        paper-tabs {
+          margin-left: 12px;
+          --paper-tabs-selection-bar-color: #fff;
+          text-transform: uppercase;
+        }
+      </style>
+      <app-header-layout id="layout" has-scrolling-region>
+        <app-header fixed slot="header">
+          <app-toolbar>
+            <ha-menu-button
+              hassio
+              narrow="[[narrow]]"
+              show-menu="[[showMenu]]"
+            ></ha-menu-button>
+            <div main-title>Hass.io</div>
+            <template is="dom-if" if="[[showRefreshButton(page)]]">
+              <paper-icon-button
+                icon="hassio:refresh"
+                on-click="refreshClicked"
+              ></paper-icon-button>
+            </template>
+          </app-toolbar>
+          <paper-tabs
+            scrollable=""
+            selected="[[page]]"
+            attr-for-selected="page-name"
+            on-iron-activate="handlePageSelected"
+          >
+            <paper-tab page-name="dashboard">Dashboard</paper-tab>
+            <paper-tab page-name="snapshots">Snapshots</paper-tab>
+            <paper-tab page-name="store">Add-on store</paper-tab>
+            <paper-tab page-name="system">System</paper-tab>
+          </paper-tabs>
+        </app-header>
+        <template is="dom-if" if="[[equals(page, &quot;dashboard&quot;)]]">
+          <hassio-dashboard
+            hass="[[hass]]"
+            supervisor-info="[[supervisorInfo]]"
+            hass-info="[[hassInfo]]"
+          ></hassio-dashboard>
+        </template>
+        <template is="dom-if" if="[[equals(page, &quot;snapshots&quot;)]]">
+          <hassio-snapshots
+            hass="[[hass]]"
+            installed-addons="[[supervisorInfo.addons]]"
+            snapshot-slug="{{snapshotSlug}}"
+            snapshot-deleted="{{snapshotDeleted}}"
+          ></hassio-snapshots>
+        </template>
+        <template is="dom-if" if="[[equals(page, &quot;store&quot;)]]">
+          <hassio-addon-store hass="[[hass]]"></hassio-addon-store>
+        </template>
+        <template is="dom-if" if="[[equals(page, &quot;system&quot;)]]">
+          <hassio-system
+            hass="[[hass]]"
+            supervisor-info="[[supervisorInfo]]"
+            host-info="[[hostInfo]]"
+          ></hassio-system>
+        </template>
+      </app-header-layout>
+
+      <hassio-markdown-dialog
+        title="[[markdownTitle]]"
+        content="[[markdownContent]]"
+      ></hassio-markdown-dialog>
+
       <template is="dom-if" if="[[equals(page, &quot;snapshots&quot;)]]">
-        <hassio-snapshots hass="[[hass]]" installed-addons="[[supervisorInfo.addons]]" snapshot-slug="{{snapshotSlug}}" snapshot-deleted="{{snapshotDeleted}}"></hassio-snapshots>
+        <hassio-snapshot
+          hass="[[hass]]"
+          snapshot-slug="{{snapshotSlug}}"
+          snapshot-deleted="{{snapshotDeleted}}"
+        ></hassio-snapshot>
       </template>
-      <template is="dom-if" if="[[equals(page, &quot;store&quot;)]]">
-        <hassio-addon-store hass="[[hass]]"></hassio-addon-store>
-      </template>
-      <template is="dom-if" if="[[equals(page, &quot;system&quot;)]]">
-        <hassio-system hass="[[hass]]" supervisor-info="[[supervisorInfo]]" host-info="[[hostInfo]]"></hassio-system>
-      </template>
-    </app-header-layout>
-
-    <hassio-markdown-dialog title="[[markdownTitle]]" content="[[markdownContent]]"></hassio-markdown-dialog>
-
-    <template is="dom-if" if="[[equals(page, &quot;snapshots&quot;)]]">
-      <hassio-snapshot hass="[[hass]]" snapshot-slug="{{snapshotSlug}}" snapshot-deleted="{{snapshotDeleted}}"></hassio-snapshot>
-    </template>
-`;
+    `;
   }
 
   static get properties() {

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");

hassio/src/snapshots/hassio-snapshot.js

@@ -1,111 +1,139 @@
-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 { getSignedPath } from "../../../src/auth/data";
 
-import "../../../src/resources/ha-style.js";
+import "../../../src/resources/ha-style";
 
 class HassioSnapshot extends PolymerElement {
   static get template() {
     return html`
-    <style include="ha-style-dialog">
-      paper-dialog {
-        min-width: 350px;
-        font-size: 14px;
-        border-radius: 2px;
-      }
-      app-toolbar {
-        margin: 0;
-        padding: 0 16px;
-        color: var(--primary-text-color);
-        background-color: var(--secondary-background-color);
-      }
-      app-toolbar [main-title] {
-        margin-left: 16px;
-      }
-      paper-dialog-scrollable {
-        margin: 0;
-      }
-      paper-checkbox {
-        display: block;
-        margin: 4px;
-      }
-      @media all and (max-width: 450px), all and (max-height: 500px) {
+      <style include="ha-style-dialog">
         paper-dialog {
-          max-height: 100%;
-          height: 100%;
+          min-width: 350px;
+          font-size: 14px;
+          border-radius: 2px;
         }
         app-toolbar {
-          color: var(--text-primary-color);
-          background-color: var(--primary-color);
+          margin: 0;
+          padding: 0 16px;
+          color: var(--primary-text-color);
+          background-color: var(--secondary-background-color);
         }
-      }
-      .details {
-        color: var(--secondary-text-color);
-      }
-      .download {
-        color: var(--primary-color);
-      }
-      .warning,
-      .error {
-        color: var(--google-red-500);
-      }
-    </style>
-    <paper-dialog id="dialog" with-backdrop="" on-iron-overlay-closed="_dialogClosed">
-      <app-toolbar>
-        <paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
-        <div main-title="">[[_computeName(snapshot)]]</div>
-      </app-toolbar>
-      <div class="details">
-        [[_computeType(snapshot.type)]] ([[_computeSize(snapshot.size)]])<br>
-        [[_formatDatetime(snapshot.date)]]
-      </div>
-      <div>Home Assistant:</div>
-      <paper-checkbox checked="{{restoreHass}}">
-        Home Assistant [[snapshot.homeassistant]]
-      </paper-checkbox>
-      <template is="dom-if" if="[[snapshot.addons.length]]">
-        <div>Folders:</div>
-        <template is="dom-repeat" items="[[snapshot.folders]]">
-          <paper-checkbox checked="{{item.checked}}">
-            [[item.name]]
-          </paper-checkbox>
-        </template>
-      </template>
-      <template is="dom-if" if="[[snapshot.addons.length]]">
-        <div>Add-ons:</div>
-        <paper-dialog-scrollable>
-          <template is="dom-repeat" items="[[snapshot.addons]]" sort="_sortAddons">
+        app-toolbar [main-title] {
+          margin-left: 16px;
+        }
+        paper-dialog-scrollable {
+          margin: 0;
+        }
+        paper-checkbox {
+          display: block;
+          margin: 4px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+          app-toolbar {
+            color: var(--text-primary-color);
+            background-color: var(--primary-color);
+          }
+        }
+        .details {
+          color: var(--secondary-text-color);
+        }
+        .download {
+          color: var(--primary-color);
+        }
+        .warning,
+        .error {
+          color: var(--google-red-500);
+        }
+      </style>
+      <paper-dialog
+        id="dialog"
+        with-backdrop=""
+        on-iron-overlay-closed="_dialogClosed"
+      >
+        <app-toolbar>
+          <paper-icon-button
+            icon="hassio:close"
+            dialog-dismiss=""
+          ></paper-icon-button>
+          <div main-title="">[[_computeName(snapshot)]]</div>
+        </app-toolbar>
+        <div class="details">
+          [[_computeType(snapshot.type)]] ([[_computeSize(snapshot.size)]])<br />
+          [[_formatDatetime(snapshot.date)]]
+        </div>
+        <div>Home Assistant:</div>
+        <paper-checkbox checked="{{restoreHass}}">
+          Home Assistant [[snapshot.homeassistant]]
+        </paper-checkbox>
+        <template is="dom-if" if="[[snapshot.addons.length]]">
+          <div>Folders:</div>
+          <template is="dom-repeat" items="[[snapshot.folders]]">
             <paper-checkbox checked="{{item.checked}}">
               [[item.name]]
-              <span class="details">([[item.version]])</span>
             </paper-checkbox>
           </template>
-        </paper-dialog-scrollable>
-      </template>
-      <template is="dom-if" if="[[snapshot.protected]]">
-        <paper-input autofocus="" label="Password" type="password" value="{{snapshotPassword}}"></paper-input>
-      </template>
-      <template is="dom-if" if="[[error]]">
-        <p class="error">Error: [[error]]</p>
-      </template>
-      <div class="buttons">
-        <paper-icon-button icon="hassio:delete" on-click="_deleteClicked" class="warning" title="Delete snapshot"></paper-icon-button>
-        <a href="[[_computeDownloadUrl(snapshotSlug)]]" download="[[_computeDownloadName(snapshot)]]">
-          <paper-icon-button icon="hassio:download" class="download" title="Download snapshot"></paper-icon-button>
-        </a>
-        <paper-button on-click="_partialRestoreClicked">Restore selected</paper-button>
-        <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
-          <paper-button on-click="_fullRestoreClicked">Wipe &amp; restore</paper-button>
         </template>
-      </div>
-    </paper-dialog>
-`;
+        <template is="dom-if" if="[[snapshot.addons.length]]">
+          <div>Add-ons:</div>
+          <paper-dialog-scrollable>
+            <template
+              is="dom-repeat"
+              items="[[snapshot.addons]]"
+              sort="_sortAddons"
+            >
+              <paper-checkbox checked="{{item.checked}}">
+                [[item.name]] <span class="details">([[item.version]])</span>
+              </paper-checkbox>
+            </template>
+          </paper-dialog-scrollable>
+        </template>
+        <template is="dom-if" if="[[snapshot.protected]]">
+          <paper-input
+            autofocus=""
+            label="Password"
+            type="password"
+            value="{{snapshotPassword}}"
+          ></paper-input>
+        </template>
+        <template is="dom-if" if="[[error]]">
+          <p class="error">Error: [[error]]</p>
+        </template>
+        <div class="buttons">
+          <paper-icon-button
+            icon="hassio:delete"
+            on-click="_deleteClicked"
+            class="warning"
+            title="Delete snapshot"
+          ></paper-icon-button>
+          <paper-icon-button
+            on-click="_downloadClicked"
+            icon="hassio:download"
+            class="download"
+            title="Download snapshot"
+          ></paper-icon-button>
+          <paper-button on-click="_partialRestoreClicked"
+            >Restore selected</paper-button
+          >
+          <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
+            <paper-button on-click="_fullRestoreClicked"
+              >Wipe &amp; restore</paper-button
+            >
+          </template>
+        </div>
+      </paper-dialog>
+    `;
   }
 
   static get properties() {
@@ -251,14 +279,24 @@ class HassioSnapshot extends PolymerElement {
       );
   }
 
-  _computeDownloadUrl(snapshotSlug) {
-    const password = encodeURIComponent(this.hass.connection.options.authToken);
-    return `/api/hassio/snapshots/${snapshotSlug}/download?api_password=${password}`;
-  }
-
-  _computeDownloadName(snapshot) {
-    const name = this._computeName(snapshot).replace(/[^a-z0-9]+/gi, "_");
-    return `Hass_io_${name}.tar`;
+  async _downloadClicked() {
+    let signedPath;
+    try {
+      signedPath = await getSignedPath(
+        this.hass,
+        `/api/hassio/snapshots/${this.snapshotSlug}/download`
+      );
+    } catch (err) {
+      alert(`Error: ${err.message}`);
+      return;
+    }
+    const name = this._computeName(this.snapshot).replace(/[^a-z0-9]+/gi, "_");
+    const a = document.createElement("A");
+    a.href = signedPath.path;
+    a.download = `Hass_io_${name}.tar`;
+    this.$.dialog.appendChild(a);
+    a.click();
+    this.$.dialog.removeChild(a);
   }
 
   _computeName(snapshot) {

hassio/src/snapshots/hassio-snapshots.js

@@ -1,103 +1,133 @@
-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() {
     return html`
-    <style include="ha-style hassio-style">
-      paper-radio-group {
-        display: block;
-      }
-      paper-radio-button {
-        padding: 0 0 2px 2px;
-      }
-      paper-radio-button,
-      paper-checkbox,
-      paper-input[type="password"] {
-        display: block;
-        margin: 4px 0 4px 48px;
-      }
-      .pointer {
-        cursor: pointer;
-      }
-    </style>
-    <div class="content">
-      <div class="card-group">
-        <div class="title">
-          Create snapshot
-          <div class="description">
-            Snapshots allow you to easily backup and
-            restore all data of your Hass.io instance.
+      <style include="ha-style hassio-style">
+        paper-radio-group {
+          display: block;
+        }
+        paper-radio-button {
+          padding: 0 0 2px 2px;
+        }
+        paper-radio-button,
+        paper-checkbox,
+        paper-input[type="password"] {
+          display: block;
+          margin: 4px 0 4px 48px;
+        }
+        .pointer {
+          cursor: pointer;
+        }
+      </style>
+      <div class="content">
+        <div class="card-group">
+          <div class="title">
+            Create snapshot
+            <div class="description">
+              Snapshots allow you to easily backup and restore all data of your
+              Hass.io instance.
+            </div>
           </div>
-        </div>
-        <paper-card>
-          <div class="card-content">
-            <paper-input autofocus="" label="Name" value="{{snapshotName}}"></paper-input>
-            Type:
-            <paper-radio-group selected="{{snapshotType}}">
-              <paper-radio-button name="full">
-                Full snapshot
-              </paper-radio-button>
-              <paper-radio-button name="partial">
-                Partial snapshot
-              </paper-radio-button>
-            </paper-radio-group>
-            <template is="dom-if" if="[[!_fullSelected(snapshotType)]]">
-              Folders:
-              <template is="dom-repeat" items="[[folderList]]">
-                <paper-checkbox checked="{{item.checked}}">
-                  [[item.name]]
-                </paper-checkbox>
-              </template>
-              Add-ons:
-              <template is="dom-repeat" items="[[addonList]]" sort="_sortAddons">
-                <paper-checkbox checked="{{item.checked}}">
-                  [[item.name]]
-                </paper-checkbox>
-              </template>
-            </template>
-            Security:
-            <paper-checkbox checked="{{snapshotHasPassword}}">Password protection</paper-checkbox>
-            <template is="dom-if" if="[[snapshotHasPassword]]">
-              <paper-input label="Password" type="password" value="{{snapshotPassword}}"></paper-input>
-            </template>
-            <template is="dom-if" if="[[error]]">
-              <p class="error">[[error]]</p>
-            </template>
-          </div>
-          <div class="card-actions">
-            <paper-button disabled="[[creatingSnapshot]]" on-click="_createSnapshot">Create</paper-button>
-          </div>
-        </paper-card>
-      </div>
-
-      <div class="card-group">
-        <div class="title">Available snapshots</div>
-        <template is="dom-if" if="[[!snapshots.length]]">
           <paper-card>
-            <div class="card-content">You don't have any snapshots yet.</div>
-          </paper-card>
-        </template>
-        <template is="dom-repeat" items="[[snapshots]]" as="snapshot" sort="_sortSnapshots">
-          <paper-card class="pointer" on-click="_snapshotClicked">
             <div class="card-content">
-              <hassio-card-content hass="[[hass]]" title="[[_computeName(snapshot)]]" description="[[_computeDetails(snapshot)]]" datetime="[[snapshot.date]]" icon="[[_computeIcon(snapshot.type)]]" icon-class="snapshot"></hassio-card-content>
+              <paper-input
+                autofocus=""
+                label="Name"
+                value="{{snapshotName}}"
+              ></paper-input>
+              Type:
+              <paper-radio-group selected="{{snapshotType}}">
+                <paper-radio-button name="full">
+                  Full snapshot
+                </paper-radio-button>
+                <paper-radio-button name="partial">
+                  Partial snapshot
+                </paper-radio-button>
+              </paper-radio-group>
+              <template is="dom-if" if="[[!_fullSelected(snapshotType)]]">
+                Folders:
+                <template is="dom-repeat" items="[[folderList]]">
+                  <paper-checkbox checked="{{item.checked}}">
+                    [[item.name]]
+                  </paper-checkbox>
+                </template>
+                Add-ons:
+                <template
+                  is="dom-repeat"
+                  items="[[addonList]]"
+                  sort="_sortAddons"
+                >
+                  <paper-checkbox checked="{{item.checked}}">
+                    [[item.name]]
+                  </paper-checkbox>
+                </template>
+              </template>
+              Security:
+              <paper-checkbox checked="{{snapshotHasPassword}}"
+                >Password protection</paper-checkbox
+              >
+              <template is="dom-if" if="[[snapshotHasPassword]]">
+                <paper-input
+                  label="Password"
+                  type="password"
+                  value="{{snapshotPassword}}"
+                ></paper-input>
+              </template>
+              <template is="dom-if" if="[[error]]">
+                <p class="error">[[error]]</p>
+              </template>
+            </div>
+            <div class="card-actions">
+              <paper-button
+                disabled="[[creatingSnapshot]]"
+                on-click="_createSnapshot"
+                >Create</paper-button
+              >
             </div>
           </paper-card>
-        </template>
+        </div>
+
+        <div class="card-group">
+          <div class="title">Available snapshots</div>
+          <template is="dom-if" if="[[!snapshots.length]]">
+            <paper-card>
+              <div class="card-content">You don't have any snapshots yet.</div>
+            </paper-card>
+          </template>
+          <template
+            is="dom-repeat"
+            items="[[snapshots]]"
+            as="snapshot"
+            sort="_sortSnapshots"
+          >
+            <paper-card class="pointer" on-click="_snapshotClicked">
+              <div class="card-content">
+                <hassio-card-content
+                  hass="[[hass]]"
+                  title="[[_computeName(snapshot)]]"
+                  description="[[_computeDetails(snapshot)]]"
+                  datetime="[[snapshot.date]]"
+                  icon="[[_computeIcon(snapshot.type)]]"
+                  icon-class="snapshot"
+                ></hassio-card-content>
+              </div>
+            </paper-card>
+          </template>
+        </div>
       </div>
-    </div>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-host-info.js

@@ -1,95 +1,118 @@
-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() {
     return html`
-    <style include="iron-flex ha-style">
-      paper-card {
-        display: inline-block;
-        width: 400px;
-        margin-left: 8px;
-      }
-      .card-content {
-        height: 200px;
-        color: var(--primary-text-color);
-      }
-      @media screen and (max-width: 830px) {
+      <style include="iron-flex ha-style">
         paper-card {
-          margin-top: 8px;
-          margin-left: 0;
-          width: 100%;
+          display: inline-block;
+          width: 400px;
+          margin-left: 8px;
         }
         .card-content {
-          height: 100%;
+          height: 200px;
+          color: var(--primary-text-color);
         }
-      }
-      .info {
-        width: 100%;
-      }
-      .info td:nth-child(2) {
-        text-align: right;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-top: 16px;
-      }
-      paper-button.info {
-        max-width: calc(50% - 12px);
-      }
-    </style>
-    <paper-card>
-      <div class="card-content">
-        <h2>Host system</h2>
-        <table class="info">
-          <tbody><tr>
-            <td>Hostname</td>
-            <td>[[data.hostname]]</td>
-          </tr>
-          <tr>
-            <td>System</td>
-            <td>[[data.operating_system]]</td>
-          </tr>
-          <template is="dom-if" if="[[data.deployment]]">
-            <tr>
-              <td>Deployment</td>
-              <td>[[data.deployment]]</td>
-            </tr>
-          </template>
-        </tbody></table>
-        <paper-button raised on-click="_showHardware" class="info">
-          Hardware
-        </paper-button>
-        <template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
-          <paper-button raised on-click="_changeHostnameClicked" class="info">
-            Change hostname
+        @media screen and (max-width: 830px) {
+          paper-card {
+            margin-top: 8px;
+            margin-left: 0;
+            width: 100%;
+          }
+          .card-content {
+            height: auto;
+          }
+        }
+        .info {
+          width: 100%;
+        }
+        .info td:nth-child(2) {
+          text-align: right;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-top: 16px;
+        }
+        paper-button.info {
+          max-width: calc(50% - 12px);
+        }
+        table.info {
+          margin-bottom: 10px;
+        }
+      </style>
+      <paper-card>
+        <div class="card-content">
+          <h2>Host system</h2>
+          <table class="info">
+            <tbody>
+              <tr>
+                <td>Hostname</td>
+                <td>[[data.hostname]]</td>
+              </tr>
+              <tr>
+                <td>System</td>
+                <td>[[data.operating_system]]</td>
+              </tr>
+              <template is="dom-if" if="[[data.deployment]]">
+                <tr>
+                  <td>Deployment</td>
+                  <td>[[data.deployment]]</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+          <paper-button raised on-click="_showHardware" class="info">
+            Hardware
           </paper-button>
-        </template>
-        <template is="dom-if" if="[[errors]]">
-          <div class="errors">Error: [[errors]]</div>
-        </template>
-      </div>
-      <div class="card-actions">
-        <template is="dom-if" if="[[_featureAvailable(data, 'reboot')]]">
-          <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/host/reboot">Reboot</ha-call-api-button>
-        </template>
-        <template is="dom-if" if="[[_featureAvailable(data, 'shutdown')]]">
-          <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/host/shutdown">Shutdown</ha-call-api-button>
-        </template>
-        <template is="dom-if" if="[[_featureAvailable(data, 'hassos')]]">
-          <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/hassos/config/sync" title="Load HassOS configs or updates from USB">Import from USB</ha-call-api-button>
-        </template>
-        <template is="dom-if" if="[[_computeUpdateAvailable(_hassOs)]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/hassos/update">Update</ha-call-api-button>
-        </template>
-      </div>
-    </paper-card>
-`;
+          <template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
+            <paper-button raised on-click="_changeHostnameClicked" class="info">
+              Change hostname
+            </paper-button>
+          </template>
+          <template is="dom-if" if="[[errors]]">
+            <div class="errors">Error: [[errors]]</div>
+          </template>
+        </div>
+        <div class="card-actions">
+          <template is="dom-if" if="[[_featureAvailable(data, 'reboot')]]">
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/host/reboot"
+              >Reboot</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if="[[_featureAvailable(data, 'shutdown')]]">
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/host/shutdown"
+              >Shutdown</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if="[[_featureAvailable(data, 'hassos')]]">
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/hassos/config/sync"
+              title="Load HassOS configs or updates from USB"
+              >Import from USB</ha-call-api-button
+            >
+          </template>
+          <template is="dom-if" if="[[_computeUpdateAvailable(_hassOs)]]">
+            <ha-call-api-button hass="[[hass]]" path="hassio/hassos/update"
+              >Update</ha-call-api-button
+            >
+          </template>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-supervisor-info.js

@@ -1,81 +1,104 @@
-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() {
     return html`
-    <style include="iron-flex ha-style">
-      paper-card {
-        display: inline-block;
-        width: 400px;
-      }
-      .card-content {
-        height: 200px;
-        color: var(--primary-text-color);
-      }
-      @media screen and (max-width: 830px) {
+      <style include="iron-flex ha-style">
         paper-card {
-          width: 100%;
+          display: inline-block;
+          width: 400px;
         }
         .card-content {
-          height: 100%;
+          height: 200px;
+          color: var(--primary-text-color);
         }
-      }
-      .info {
-        width: 100%;
-      }
-      .info td:nth-child(2) {
-        text-align: right;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-top: 16px;
-      }
-    </style>
-    <paper-card>
-      <div class="card-content">
-        <h2>Hass.io supervisor</h2>
-        <table class="info">
-          <tbody><tr>
-            <td>Version</td>
-            <td>
-              [[data.version]]
-            </td>
-          </tr>
-          <tr>
-            <td>Latest version</td>
-            <td>[[data.last_version]]</td>
-          </tr>
-          <template is="dom-if" if="[[!_equals(data.channel, &quot;stable&quot;)]]">
-            <tr>
-              <td>Channel</td>
-              <td>[[data.channel]]</td>
-            </tr>
+        @media screen and (max-width: 830px) {
+          paper-card {
+            width: 100%;
+          }
+          .card-content {
+            height: auto;
+          }
+        }
+        .info {
+          width: 100%;
+        }
+        .info td:nth-child(2) {
+          text-align: right;
+        }
+        .errors {
+          color: var(--google-red-500);
+          margin-top: 16px;
+        }
+      </style>
+      <paper-card>
+        <div class="card-content">
+          <h2>Hass.io supervisor</h2>
+          <table class="info">
+            <tbody>
+              <tr>
+                <td>Version</td>
+                <td>[[data.version]]</td>
+              </tr>
+              <tr>
+                <td>Latest version</td>
+                <td>[[data.last_version]]</td>
+              </tr>
+              <template
+                is="dom-if"
+                if="[[!_equals(data.channel, &quot;stable&quot;)]]"
+              >
+                <tr>
+                  <td>Channel</td>
+                  <td>[[data.channel]]</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+          <template is="dom-if" if="[[errors]]">
+            <div class="errors">Error: [[errors]]</div>
           </template>
-        </tbody></table>
-        <template is="dom-if" if="[[errors]]">
-          <div class="errors">Error: [[errors]]</div>
-        </template>
-      </div>
-      <div class="card-actions">
-        <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/reload">Reload</ha-call-api-button>
-        <template is="dom-if" if="[[computeUpdateAvailable(data)]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/update">Update</ha-call-api-button>
-        </template>
-        <template is="dom-if" if="[[_equals(data.channel, &quot;beta&quot;)]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[leaveBeta]]">Leave beta channel</ha-call-api-button>
-        </template>
-        <template is="dom-if" if="[[_equals(data.channel, &quot;stable&quot;)]]">
-          <paper-button on-click="_joinBeta" class="warning" title="Get beta updates for Home Assistant (RCs), supervisor and host">Join beta channel</paper-button>
-        </template>
-      </div>
-    </paper-card>
-`;
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/reload"
+            >Reload</ha-call-api-button
+          >
+          <template is="dom-if" if="[[computeUpdateAvailable(data)]]">
+            <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/update"
+              >Update</ha-call-api-button
+            >
+          </template>
+          <template
+            is="dom-if"
+            if="[[_equals(data.channel, &quot;beta&quot;)]]"
+          >
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/supervisor/options"
+              data="[[leaveBeta]]"
+              >Leave beta channel</ha-call-api-button
+            >
+          </template>
+          <template
+            is="dom-if"
+            if="[[_equals(data.channel, &quot;stable&quot;)]]"
+          >
+            <paper-button
+              on-click="_joinBeta"
+              class="warning"
+              title="Get beta updates for Home Assistant (RCs), supervisor and host"
+              >Join beta channel</paper-button
+            >
+          </template>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-supervisor-log.js

@@ -1,34 +1,38 @@
-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 { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
 
 class HassioSupervisorLog extends PolymerElement {
   static get template() {
     return html`
-    <style include="ha-style">
-      paper-card {
-        display: block;
-      }
-      pre {
-        overflow-x: auto;
-      }
-    </style>
-    <paper-card>
-      <div class="card-content">
-        <pre>[[log]]</pre>
-      </div>
-      <div class="card-actions">
-        <paper-button on-click="refreshTapped">Refresh</paper-button>
-      </div>
-    </paper-card>
-`;
+      <style include="ha-style">
+        paper-card {
+          display: block;
+        }
+        pre {
+          overflow-x: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+        }
+        .fg-green {
+          color: var(--primary-text-color) !important;
+        }
+      </style>
+      ${ANSI_HTML_STYLE}
+      <paper-card>
+        <div class="card-content" id="content"></div>
+        <div class="card-actions">
+          <paper-button on-click="refresh">Refresh</paper-button>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {
     return {
       hass: Object,
-      log: String,
     };
   }
 
@@ -39,16 +43,20 @@ class HassioSupervisorLog extends PolymerElement {
 
   loadData() {
     this.hass.callApi("get", "hassio/supervisor/logs").then(
-      (info) => {
-        this.log = info;
+      (text) => {
+        while (this.$.content.lastChild) {
+          this.$.content.removeChild(this.$.content.lastChild);
+        }
+        this.$.content.appendChild(parseTextToColoredPre(text));
       },
       () => {
-        this.log = "Error fetching logs";
+        this.$.content.innerHTML =
+          '<span class="fg-red bold">Error fetching logs</span>';
       }
     );
   }
 
-  refreshTapped() {
+  refresh() {
     this.loadData();
   }
 }

hassio/src/system/hassio-system.js

@@ -1,34 +1,40 @@
-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() {
     return html`
-    <style include="iron-flex ha-style">
-      .content {
-        margin: 4px;
-      }
-      .title {
-        margin-top: 24px;
-        color: var(--primary-text-color);
-        font-size: 2em;
-        padding-left: 8px;
-        margin-bottom: 8px;
-      }
-    </style>
-    <div class="content">
-      <div class="title">Information</div>
-      <hassio-supervisor-info hass="[[hass]]" data="[[supervisorInfo]]"></hassio-supervisor-info>
-      <hassio-host-info hass="[[hass]]" data="[[hostInfo]]"></hassio-host-info>
-      <div class="title">System log</div>
-      <hassio-supervisor-log hass="[[hass]]"></hassio-supervisor-log>
-    </div>
-`;
+      <style include="iron-flex ha-style">
+        .content {
+          margin: 4px;
+        }
+        .title {
+          margin-top: 24px;
+          color: var(--primary-text-color);
+          font-size: 2em;
+          padding-left: 8px;
+          margin-bottom: 8px;
+        }
+      </style>
+      <div class="content">
+        <div class="title">Information</div>
+        <hassio-supervisor-info
+          hass="[[hass]]"
+          data="[[supervisorInfo]]"
+        ></hassio-supervisor-info>
+        <hassio-host-info
+          hass="[[hass]]"
+          data="[[hostInfo]]"
+        ></hassio-host-info>
+        <div class="title">System log</div>
+        <hassio-supervisor-log hass="[[hass]]"></hassio-supervisor-log>
+      </div>
+    `;
   }
 
   static get properties() {

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$/],

package.json

@@ -8,8 +8,8 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint": "eslint src hassio/src gallery/src test-mocha && tslint -c tslint.json 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'test-mocha/**/*.ts' && polymer lint && tsc",
-    "mocha": "node_modules/.bin/mocha --opts test-mocha/mocha.opts",
+    "lint": "eslint src hassio/src gallery/src && tslint 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'test-mocha/**/*.ts' && polymer lint && tsc",
+    "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
     "test": "npm run lint && npm run mocha",
     "docker_build": "sh ./script/docker_run.sh build $npm_package_version",
     "bash": "sh ./script/docker_run.sh bash $npm_package_version"
@@ -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",
@@ -35,7 +35,7 @@
     "@polymer/iron-media-query": "^3.0.1",
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/lit-element": "^0.6.2",
+    "@polymer/lit-element": "0.6.2",
     "@polymer/neon-animation": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
@@ -64,20 +64,21 @@
     "@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",
-    "@webcomponents/shadycss": "^1.5.2",
-    "@webcomponents/webcomponentsjs": "^2.1.3",
+    "@vaadin/vaadin-combo-box": "^4.2.0",
+    "@vaadin/vaadin-date-picker": "^3.3.1",
+    "@webcomponents/shadycss": "^1.6.0",
+    "@webcomponents/webcomponentsjs": "^2.2.0",
     "chart.js": "~2.7.2",
     "chartjs-chart-timeline": "^0.2.1",
     "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.2.4",
     "intl-messageformat": "^2.2.0",
+    "jquery": "^3.3.1",
     "js-yaml": "^3.12.0",
     "leaflet": "^1.3.4",
-    "lit-html": "^0.12.0",
+    "lit-html": "0.12.0",
     "marked": "^0.5.0",
     "mdn-polyfills": "^5.12.0",
     "moment": "^2.22.2",
@@ -85,6 +86,8 @@
     "preact-compat": "^3.18.4",
     "react-big-calendar": "^0.19.2",
     "regenerator-runtime": "^0.12.1",
+    "round-slider": "^1.3.2",
+    "superstruct": "^0.6.0",
     "unfetch": "^4.0.1",
     "web-animations-js": "^2.3.1",
     "xss": "^1.0.3"
@@ -96,12 +99,14 @@
     "@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",
+    "@types/chai": "^4.1.7",
+    "@types/mocha": "^5.2.5",
     "babel-eslint": "^10",
     "babel-loader": "^8.0.4",
     "babel-minify-webpack-plugin": "^0.3.1",
-    "chai": "^4.1.2",
+    "chai": "^4.2.0",
     "compression-webpack-plugin": "^2.0.0",
     "copy-webpack-plugin": "^4.5.2",
     "del": "^3.0.0",
@@ -120,10 +125,9 @@
     "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",
+    "lint-staged": "^8.0.2",
     "merge-stream": "^1.0.1",
     "mocha": "^5.2.0",
     "parse5": "^5.1.0",
@@ -132,13 +136,15 @@
     "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.1",
+    "ts-mocha": "^2.0.0",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
     "tslint-eslint-rules": "^5.4.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",
@@ -147,16 +153,14 @@
     "workbox-webpack-plugin": "^3.5.0"
   },
   "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@polymer/polymer": "3.0.5",
-    "@webcomponents/webcomponentsjs": "2.1.3",
-    "@webcomponents/shadycss": "^1.5.2",
-    "@vaadin/vaadin-overlay": "3.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "1.2.0",
-    "fecha": "https://github.com/balloob/fecha/archive/51d14fd0eb4781e2ecf265d1c3080706259133b5.tar.gz"
+    "@polymer/polymer": "3.1.0",
+    "@webcomponents/webcomponentsjs": "2.2.1",
+    "@webcomponents/shadycss": "^1.6.0",
+    "@vaadin/vaadin-overlay": "3.2.2",
+    "@vaadin/vaadin-lumo-styles": "1.3.0",
+    "fecha": "https://github.com/taylorhakes/fecha/archive/5e8fe08d982647fdb19fb403459838b02647813c.tar.gz",
+    "lit-html": "0.12.0",
+    "@polymer/lit-element": "0.6.2"
   },
   "main": "src/home-assistant.js",
   "husky": {
@@ -166,7 +170,7 @@
   },
   "lint-staged": {
     "linters": {
-      "*.{js,json,css,md}": [
+      "*.{js,ts,json,css,md}": [
         "prettier --write",
         "git add"
       ]

script/develop

@@ -4,6 +4,8 @@
 # Stop on errors
 set -e
 
+cd "$(dirname "$0")/.."
+
 BUILD_DIR=build
 OUTPUT_DIR=hass_frontend
 OUTPUT_DIR_ES5=hass_frontend_es5

script/release

@@ -9,9 +9,12 @@ cd "$(dirname "$0")/.."
 # Install node modules
 yarn install
 
+# Verify everything is ok
+tsc
+
 script/build_frontend
 
 rm -rf dist
 python3 setup.py sdist
-python3 -m twine upload dist/* 
+python3 -m twine upload dist/*
 

script/size_stats

@@ -0,0 +1,11 @@
+#!/bin/sh
+# Analyze stats
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+STATS=1 NODE_ENV=production webpack --profile --json > compilation-stats.json
+npx webpack-bundle-analyzer compilation-stats.json hass_frontend
+rm compilation-stats.json

script/version_bump.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+
+function patch(version) {
+  const parts = version.split(".");
+  return `${parts[0]}.${Number(parts[1]) + 1}`;
+}
+
+function today() {
+  const now = new Date();
+  return `${now.getFullYear()}${now.getMonth() + 1}${String(
+    now.getDate()
+  ).padStart(2, "0")}.0`;
+}
+
+const methods = {
+  patch,
+  today,
+};
+
+async function main(args) {
+  const method = args.length > 0 && methods[args[0]];
+  const commit = args.length > 1 && args[1] == "--commit";
+
+  if (!method) {
+    console.error(
+      "Missing required method. Choose from",
+      Object.keys(methods).join(", ")
+    );
+    return;
+  }
+
+  const setup = fs.readFileSync("setup.py", "utf8");
+  const version = setup.match(/\d{8}\.\d+/)[0];
+  const newVersion = method(version);
+
+  console.log("Current version:", version);
+  console.log("New version:", newVersion);
+
+  fs.writeFileSync("setup.py", setup.replace(version, newVersion), "utf-8");
+
+  if (!commit) {
+    return;
+  }
+
+  const { stdout } = await exec(
+    `git commit -am "Bumped version to ${newVersion}"`
+  );
+  console.log(stdout);
+}
+
+main(process.argv.slice(2));

setup.py

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

src/auth/data.ts

@@ -0,0 +1,7 @@
+import { HomeAssistant } from "../types";
+import { SignedPath } from "./types";
+
+export const getSignedPath = (
+  hass: HomeAssistant,
+  path: string
+): Promise<SignedPath> => hass.callWS({ type: "auth/sign_path", path });

src/auth/ha-auth-flow.js

@@ -1,60 +1,67 @@
-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) {
+class HaAuthFlow extends localizeLiteMixin(PolymerElement) {
   static get template() {
     return html`
-    <style>
-      :host {
-        /* So we can set min-height to avoid jumping during loading */
-        display: block;
-      }
-      .action {
-        margin: 24px 0 8px;
-        text-align: center;
-      }
-      .error {
-        color: red;
-      }
-    </style>
-    <form>
-      <template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]">
-      [[localize('ui.panel.page-authorize.form.working')]]:
-      </template>
-      <template is="dom-if" if="[[_equals(_state, &quot;error&quot;)]]">
-      <div class='error'>Error: [[_errorMsg]]</div>
-      </template>
-      <template is="dom-if" if="[[_equals(_state, &quot;step&quot;)]]">
-        <template is="dom-if" if="[[_equals(_step.type, &quot;abort&quot;)]]">
-          [[localize('ui.panel.page-authorize.abort_intro')]]:
-          <ha-markdown content="[[_computeStepAbortedReason(localize, _step)]]"></ha-markdown>
+      <style>
+        :host {
+          /* So we can set min-height to avoid jumping during loading */
+          display: block;
+        }
+        .action {
+          margin: 24px 0 8px;
+          text-align: center;
+        }
+        .error {
+          color: red;
+        }
+      </style>
+      <form>
+        <template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]">
+          [[localize('ui.panel.page-authorize.form.working')]]:
         </template>
-
-        <template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]">
-          <template is="dom-if" if="[[_computeStepDescription(localize, _step)]]">
-            <ha-markdown content="[[_computeStepDescription(localize, _step)]]" allow-svg></ha-markdown>
+        <template is="dom-if" if="[[_equals(_state, &quot;error&quot;)]]">
+          <div class="error">Error: [[_errorMsg]]</div>
+        </template>
+        <template is="dom-if" if="[[_equals(_state, &quot;step&quot;)]]">
+          <template is="dom-if" if="[[_equals(_step.type, &quot;abort&quot;)]]">
+            [[localize('ui.panel.page-authorize.abort_intro')]]:
+            <ha-markdown
+              content="[[_computeStepAbortedReason(localize, _step)]]"
+            ></ha-markdown>
           </template>
 
-          <ha-form
-            data="{{_stepData}}"
-            schema="[[_step.data_schema]]"
-            error="[[_step.errors]]"
-            compute-label="[[_computeLabelCallback(localize, _step)]]"
-            compute-error="[[_computeErrorCallback(localize, _step)]]"
-          ></ha-form>
+          <template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]">
+            <template
+              is="dom-if"
+              if="[[_computeStepDescription(localize, _step)]]"
+            >
+              <ha-markdown
+                content="[[_computeStepDescription(localize, _step)]]"
+                allow-svg
+              ></ha-markdown>
+            </template>
+
+            <ha-form
+              data="{{_stepData}}"
+              schema="[[_step.data_schema]]"
+              error="[[_step.errors]]"
+              compute-label="[[_computeLabelCallback(localize, _step)]]"
+              compute-error="[[_computeErrorCallback(localize, _step)]]"
+            ></ha-form>
+          </template>
+          <div class="action">
+            <paper-button raised on-click="_handleSubmit"
+              >[[_computeSubmitCaption(_step.type)]]</paper-button
+            >
+          </div>
         </template>
-        <div class='action'>
-          <paper-button
-            raised
-            on-click='_handleSubmit'
-          >[[_computeSubmitCaption(_step.type)]]</paper-button>
-        </div>
-      </template>
-    </form>
-`;
+      </form>
+    `;
   }
 
   static get properties() {

src/auth/ha-authorize.js

@@ -1,152 +0,0 @@
-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 "../components/ha-markdown.js";
-
-import LocalizeLiteMixin from "../mixins/localize-lite-mixin.js";
-
-import "./ha-auth-flow.js";
-
-class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
-  static get template() {
-    return html`
-    <style>
-      ha-markdown {
-        display: block;
-        margin-bottom: 16px;
-      }
-      ha-markdown a {
-        color: var(--primary-color);
-      }
-      ha-markdown p:last-child{
-        margin-bottom: 0;
-      }
-      ha-pick-auth-provider {
-        display: block;
-        margin-top: 48px;
-      }
-    </style>
-
-    <template is="dom-if" if="[[!_authProviders]]">
-      <p>[[localize('ui.panel.page-authorize.initializing')]]</p>
-    </template>
-
-    <template is="dom-if" if="[[_authProviders]]">
-      <ha-markdown content='[[_computeIntro(localize, clientId, _authProvider)]]'></ha-markdown>
-
-      <ha-auth-flow
-        resources="[[resources]]"
-        client-id="[[clientId]]"
-        redirect-uri="[[redirectUri]]"
-        oauth2-state="[[oauth2State]]"
-        auth-provider="[[_authProvider]]"
-        step="{{step}}"
-      ></ha-auth-flow>
-
-      <template is="dom-if" if="[[_computeMultiple(_authProviders)]]">
-        <ha-pick-auth-provider
-          resources="[[resources]]"
-          client-id="[[clientId]]"
-          auth-providers="[[_computeInactiveProvders(_authProvider, _authProviders)]]"
-          on-pick="_handleAuthProviderPick"
-        ></ha-pick-auth-provider>
-      </template>
-    </template>
-`;
-  }
-
-  static get properties() {
-    return {
-      _authProvider: String,
-      _authProviders: Array,
-      clientId: String,
-      redirectUri: String,
-      oauth2State: String,
-      translationFragment: {
-        type: String,
-        value: "page-authorize",
-      },
-    };
-  }
-
-  async ready() {
-    super.ready();
-    const query = {};
-    const values = location.search.substr(1).split("&");
-    for (let i = 0; i < values.length; i++) {
-      const value = values[i].split("=");
-      if (value.length > 1) {
-        query[decodeURIComponent(value[0])] = decodeURIComponent(value[1]);
-      }
-    }
-    const props = {};
-    if (query.client_id) props.clientId = query.client_id;
-    if (query.redirect_uri) props.redirectUri = query.redirect_uri;
-    if (query.state) props.oauth2State = query.state;
-    this.setProperties(props);
-
-    import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider.js");
-
-    // Fetch auth providers
-    try {
-      const response = await window.providersPromise;
-      const authProviders = await response.json();
-
-      // Forward to main screen which will redirect to right onboarding page.
-      if (
-        response.status === 400 &&
-        authProviders.code === "onboarding_required"
-      ) {
-        location.href = "/";
-        return;
-      }
-
-      if (authProviders.length === 0) {
-        alert("No auth providers returned. Unable to finish login.");
-        return;
-      }
-
-      this.setProperties({
-        _authProviders: authProviders,
-        _authProvider: authProviders[0],
-      });
-    } catch (err) {
-      // eslint-disable-next-line
-      console.error("Error loading auth providers", err);
-      this._state = "error-loading";
-    }
-  }
-
-  _computeMultiple(array) {
-    return array && array.length > 1;
-  }
-
-  async _handleAuthProviderPick(ev) {
-    this._authProvider = ev.detail;
-  }
-
-  _computeInactiveProvders(curProvider, providers) {
-    return providers.filter(
-      (prv) => prv.type !== curProvider.type || prv.id !== curProvider.id
-    );
-  }
-
-  _computeIntro(localize, clientId, authProvider) {
-    return (
-      localize(
-        "ui.panel.page-authorize.authorizing_client",
-        "clientId",
-        clientId
-      ) +
-      "\n\n" +
-      localize(
-        "ui.panel.page-authorize.logging_in_with",
-        "authProviderName",
-        authProvider.name
-      )
-    );
-  }
-}
-customElements.define("ha-authorize", HaAuthorize);

src/auth/ha-authorize.ts

@@ -0,0 +1,158 @@
+import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
+import { LitElement, html, PropertyDeclarations } from "@polymer/lit-element";
+import "./ha-auth-flow";
+import { AuthProvider } from "../data/auth";
+
+import(/* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider");
+
+interface QueryParams {
+  client_id?: string;
+  redirect_uri?: string;
+  state?: string;
+}
+
+class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
+  public clientId?: string;
+  public redirectUri?: string;
+  public oauth2State?: string;
+  private _authProvider?: AuthProvider;
+  private _authProviders?: AuthProvider[];
+
+  constructor() {
+    super();
+    this.translationFragment = "page-authorize";
+    const query: QueryParams = {};
+    const values = location.search.substr(1).split("&");
+    for (const item of values) {
+      const value = item.split("=");
+      if (value.length > 1) {
+        query[decodeURIComponent(value[0])] = decodeURIComponent(value[1]);
+      }
+    }
+    if (query.client_id) {
+      this.clientId = query.client_id;
+    }
+    if (query.redirect_uri) {
+      this.redirectUri = query.redirect_uri;
+    }
+    if (query.state) {
+      this.oauth2State = query.state;
+    }
+  }
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _authProvider: {},
+      _authProviders: {},
+      clientId: {},
+      redirectUri: {},
+      oauth2State: {},
+    };
+  }
+
+  public render() {
+    if (!this._authProviders) {
+      return html`
+        <p>[[localize('ui.panel.page-authorize.initializing')]]</p>
+      `;
+    }
+
+    // We don't have a good approach yet to map text markup in localization.
+    // So we sanitize the translation with innerText and then inject
+    // the name with a bold tag.
+    const loggingInWith = document.createElement("div");
+    loggingInWith.innerText = this.localize(
+      "ui.panel.page-authorize.logging_in_with",
+      "authProviderName",
+      "NAME"
+    );
+    loggingInWith.innerHTML = loggingInWith.innerHTML.replace(
+      "**NAME**",
+      `<b>${this._authProvider!.name}</b>`
+    );
+
+    const inactiveProviders = this._authProviders.filter(
+      (prv) => prv !== this._authProvider
+    );
+
+    return html`
+      ${this.renderStyle()}
+      <p>
+        ${
+          this.localize(
+            "ui.panel.page-authorize.authorizing_client",
+            "clientId",
+            this.clientId
+          )
+        }
+      </p>
+      ${loggingInWith}
+
+      <ha-auth-flow
+        .resources="${this.resources}"
+        .clientId="${this.clientId}"
+        .redirectUri="${this.redirectUri}"
+        .oauth2State="${this.oauth2State}"
+        .authProvider="${this._authProvider}"
+        .step="{{step}}"
+      ></ha-auth-flow>
+
+      ${
+        inactiveProviders.length > 0
+          ? html`
+              <ha-pick-auth-provider
+                .resources="${this.resources}"
+                .clientId="${this.clientId}"
+                .authProviders="${inactiveProviders}"
+                @pick="${this._handleAuthProviderPick}"
+              ></ha-pick-auth-provider>
+            `
+          : ""
+      }
+    `;
+  }
+
+  public async firstUpdated() {
+    // Fetch auth providers
+    try {
+      const response = await (window as any).providersPromise;
+      const authProviders = await response.json();
+
+      // Forward to main screen which will redirect to right onboarding page.
+      if (
+        response.status === 400 &&
+        authProviders.code === "onboarding_required"
+      ) {
+        location.href = "/?";
+        return;
+      }
+
+      if (authProviders.length === 0) {
+        alert("No auth providers returned. Unable to finish login.");
+        return;
+      }
+
+      this._authProviders = authProviders;
+      this._authProvider = authProviders[0];
+    } catch (err) {
+      // tslint:disable-next-line
+      console.error("Error loading auth providers", err);
+    }
+  }
+
+  protected renderStyle() {
+    return html`
+      <style>
+        ha-pick-auth-provider {
+          display: block;
+          margin-top: 48px;
+        }
+      </style>
+    `;
+  }
+
+  private async _handleAuthProviderPick(ev) {
+    this._authProvider = ev.detail;
+  }
+}
+customElements.define("ha-authorize", HaAuthorize);

src/auth/ha-pick-auth-provider.js

@@ -1,35 +1,35 @@
-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
  */
 class HaPickAuthProvider extends EventsMixin(
-  LocalizeLiteMixin(PolymerElement)
+  localizeLiteMixin(PolymerElement)
 ) {
   static get template() {
     return html`
-    <style>
-      paper-item {
-        cursor: pointer;
-      }
-      p {
-        margin-top: 0;
-      }
-    </style>
-    <p>[[localize('ui.panel.page-authorize.pick_auth_provider')]]:</p>
-    <template is="dom-repeat" items="[[authProviders]]">
-      <paper-item on-click="_handlePick">
-        <paper-item-body>[[item.name]]</paper-item-body>
-        <iron-icon icon="hass:chevron-right"></iron-icon>
-      </paper-item>
-    </template>
-`;
+      <style>
+        paper-item {
+          cursor: pointer;
+        }
+        p {
+          margin-top: 0;
+        }
+      </style>
+      <p>[[localize('ui.panel.page-authorize.pick_auth_provider')]]:</p>
+      <template is="dom-repeat" items="[[authProviders]]">
+        <paper-item on-click="_handlePick">
+          <paper-item-body>[[item.name]]</paper-item-body>
+          <iron-icon icon="hass:chevron-right"></iron-icon>
+        </paper-item>
+      </template>
+    `;
   }
 
   static get properties() {

src/auth/types.ts

@@ -0,0 +1,3 @@
+export interface SignedPath {
+  path: string;
+}

src/cards/ha-badges-card.js

@@ -1,21 +1,24 @@
-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() {
     return html`
-    <style>
-      ha-state-label-badge {
-        display: inline-block;
-        margin-bottom: var(--ha-state-label-badge-margin-bottom, 16px);
-      }
-    </style>
-    <template is="dom-repeat" items="[[states]]">
-      <ha-state-label-badge hass="[[hass]]" state="[[item]]"></ha-state-label-badge>
-    </template>
-`;
+      <style>
+        ha-state-label-badge {
+          display: inline-block;
+          margin-bottom: var(--ha-state-label-badge-margin-bottom, 16px);
+        }
+      </style>
+      <template is="dom-repeat" items="[[states]]">
+        <ha-state-label-badge
+          hass="[[hass]]"
+          state="[[item]]"
+        ></ha-state-label-badge>
+      </template>
+    `;
   }
 
   static get properties() {

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
 /*
@@ -14,51 +14,55 @@ const UPDATE_INTERVAL = 10000; // ms
 class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
-  <style include="paper-material-styles">
-    :host {
-      @apply --paper-material-elevation-1;
-      display: block;
-      position: relative;
-      font-size: 0px;
-      border-radius: 2px;
-      cursor: pointer;
-      min-height: 48px;
-      line-height: 0;
-    }
-    .camera-feed {
-      width: 100%;
-      height: auto;
-      border-radius: 2px;
-    }
-    .caption {
-      @apply --paper-font-common-nowrap;
-      position: absolute;
-      left: 0px;
-      right: 0px;
-      bottom: 0px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      <style include="paper-material-styles">
+        :host {
+          @apply --paper-material-elevation-1;
+          display: block;
+          position: relative;
+          font-size: 0px;
+          border-radius: 2px;
+          cursor: pointer;
+          min-height: 48px;
+          line-height: 0;
+        }
+        .camera-feed {
+          width: 100%;
+          height: auto;
+          border-radius: 2px;
+        }
+        .caption {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0px;
+          right: 0px;
+          bottom: 0px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
 
-      background-color: rgba(0, 0, 0, 0.3);
-      padding: 16px;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 16px;
 
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 16px;
-      color: white;
-    }
-  </style>
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 16px;
+          color: white;
+        }
+      </style>
 
-  <template is="dom-if" if="[[cameraFeedSrc]]">
-    <img src="[[cameraFeedSrc]]" class="camera-feed" alt="[[_computeStateName(stateObj)]]">
-  </template>
-  <div class="caption">
-    [[_computeStateName(stateObj)]]
-    <template is="dom-if" if="[[!imageLoaded]]">
-      ([[localize('ui.card.camera.not_available')]])
-    </template>
-  </div>
-`;
+      <template is="dom-if" if="[[cameraFeedSrc]]">
+        <img
+          src="[[cameraFeedSrc]]"
+          class="camera-feed"
+          alt="[[_computeStateName(stateObj)]]"
+        />
+      </template>
+      <div class="caption">
+        [[_computeStateName(stateObj)]]
+        <template is="dom-if" if="[[!imageLoaded]]">
+          ([[localize('ui.card.camera.not_available')]])
+        </template>
+      </div>
+    `;
   }
 
   static get properties() {

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() {

src/cards/ha-entities-card.js

@@ -1,69 +1,83 @@
-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() {
     return html`
-    <style include="iron-flex"></style>
-    <style>
-      ha-card {
-        padding: 16px;
-      }
-      .states {
-        margin: -4px 0;
-      }
-      .state {
-        padding: 4px 0;
-      }
-      .header {
-        @apply --paper-font-headline;
-        /* overwriting line-height +8 because entity-toggle can be 40px height,
+      <style include="iron-flex"></style>
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        .states {
+          margin: -4px 0;
+        }
+        .state {
+          padding: 4px 0;
+        }
+        .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;
-      }
-      .header .name {
-        @apply --paper-font-common-nowrap;
-      }
-      ha-entity-toggle {
-        margin-left: 16px;
-      }
-      .more-info {
-        cursor: pointer;
-      }
-    </style>
+          line-height: 40px;
+          color: var(--primary-text-color);
+          padding: 4px 0 12px;
+        }
+        .header .name {
+          @apply --paper-font-common-nowrap;
+        }
+        ha-entity-toggle {
+          margin-left: 16px;
+        }
+        .more-info {
+          cursor: pointer;
+        }
+      </style>
 
-    <ha-card>
-      <template is="dom-if" if="[[title]]">
-        <div class$="[[computeTitleClass(groupEntity)]]" on-click="entityTapped">
-          <div class="flex name">[[title]]</div>
-          <template is="dom-if" if="[[showGroupToggle(groupEntity, states)]]">
-            <ha-entity-toggle hass="[[hass]]" state-obj="[[groupEntity]]"></ha-entity-toggle>
-          </template>
-        </div>
-      </template>
-      <div class="states">
-        <template is="dom-repeat" items="[[states]]" on-dom-change="addTapEvents">
-          <div class$="[[computeStateClass(item)]]">
-            <state-card-content hass="[[hass]]" class="state-card" state-obj="[[item]]"></state-card-content>
+      <ha-card>
+        <template is="dom-if" if="[[title]]">
+          <div
+            class$="[[computeTitleClass(groupEntity)]]"
+            on-click="entityTapped"
+          >
+            <div class="flex name">[[title]]</div>
+            <template is="dom-if" if="[[showGroupToggle(groupEntity, states)]]">
+              <ha-entity-toggle
+                hass="[[hass]]"
+                state-obj="[[groupEntity]]"
+              ></ha-entity-toggle>
+            </template>
           </div>
         </template>
-      </div>
-    </ha-card>
-`;
+        <div class="states">
+          <template
+            is="dom-repeat"
+            items="[[states]]"
+            on-dom-change="addTapEvents"
+          >
+            <div class$="[[computeStateClass(item)]]">
+              <state-card-content
+                hass="[[hass]]"
+                class="state-card"
+                state-obj="[[item]]"
+              ></state-card-content>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
   }
 
   static get properties() {

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
@@ -14,39 +14,56 @@ import EventsMixin from "../mixins/events-mixin.js";
 class HaHistoryGraphCard extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-    <style>
-      paper-card:not([dialog]) .content {
-        padding: 0 16px 16px;
-      }
-      paper-card[dialog] {
-        padding-top: 16px;
-        background-color: transparent;
-      }
-      paper-card {
-        width: 100%;
-        /* prevent new stacking context, chart tooltip needs to overflow */
-        position: static;
-      }
-      .header {
-        @apply --paper-font-headline;
-        line-height: 40px;
-        color: var(--primary-text-color);
-        padding: 20px 16px 12px;
-        @apply --paper-font-common-nowrap;
-      }
-      paper-card[dialog] .header {
-        display: none;
-      }
-    </style>
-    <ha-state-history-data hass="[[hass]]" filter-type="recent-entity" entity-id="[[computeHistoryEntities(stateObj)]]" data="{{stateHistory}}" is-loading="{{stateHistoryLoading}}" cache-config="[[cacheConfig]]"></ha-state-history-data>
-    <paper-card dialog$="[[inDialog]]" on-click="cardTapped" elevation="[[computeElevation(inDialog)]]">
-      <div class="header">[[computeTitle(stateObj)]]</div>
-      <div class="content">
-         <state-history-charts hass="[[hass]]" history-data="[[stateHistory]]" is-loading-data="[[stateHistoryLoading]]" up-to-now no-single>
-         </state-history-charts>
-      </div>
-    </paper-card>
-`;
+      <style>
+        paper-card:not([dialog]) .content {
+          padding: 0 16px 16px;
+        }
+        paper-card[dialog] {
+          padding-top: 16px;
+          background-color: transparent;
+        }
+        paper-card {
+          width: 100%;
+          /* prevent new stacking context, chart tooltip needs to overflow */
+          position: static;
+        }
+        .header {
+          @apply --paper-font-headline;
+          line-height: 40px;
+          color: var(--primary-text-color);
+          padding: 20px 16px 12px;
+          @apply --paper-font-common-nowrap;
+        }
+        paper-card[dialog] .header {
+          display: none;
+        }
+      </style>
+      <ha-state-history-data
+        hass="[[hass]]"
+        filter-type="recent-entity"
+        entity-id="[[computeHistoryEntities(stateObj)]]"
+        data="{{stateHistory}}"
+        is-loading="{{stateHistoryLoading}}"
+        cache-config="[[cacheConfig]]"
+      ></ha-state-history-data>
+      <paper-card
+        dialog$="[[inDialog]]"
+        on-click="cardTapped"
+        elevation="[[computeElevation(inDialog)]]"
+      >
+        <div class="header">[[computeTitle(stateObj)]]</div>
+        <div class="content">
+          <state-history-charts
+            hass="[[hass]]"
+            history-data="[[stateHistory]]"
+            is-loading-data="[[stateHistoryLoading]]"
+            up-to-now
+            no-single
+          >
+          </state-history-charts>
+        </div>
+      </paper-card>
+    `;
   }
 
   static get properties() {

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
@@ -18,169 +18,200 @@ import LocalizeMixin from "../mixins/localize-mixin.js";
 class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
-    <style include="paper-material-styles iron-flex iron-flex-alignment iron-positioning">
-      :host {
-        @apply --paper-material-elevation-1;
-        display: block;
-        position: relative;
-        font-size: 0px;
-        border-radius: 2px;
-      }
+      <style
+        include="paper-material-styles iron-flex iron-flex-alignment iron-positioning"
+      >
+        :host {
+          @apply --paper-material-elevation-1;
+          display: block;
+          position: relative;
+          font-size: 0px;
+          border-radius: 2px;
+        }
 
-      .banner {
-        position: relative;
-        background-color: white;
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-      }
+        .banner {
+          position: relative;
+          background-color: white;
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+        }
 
-      .banner:before {
-        display: block;
-        content: "";
-        width: 100%;
-        /* removed .25% from 16:9 ratio to fix YT black bars */
-        padding-top: 56%;
-        transition: padding-top .8s;
-      }
+        .banner:before {
+          display: block;
+          content: "";
+          width: 100%;
+          /* removed .25% from 16:9 ratio to fix YT black bars */
+          padding-top: 56%;
+          transition: padding-top 0.8s;
+        }
 
-      .banner.no-cover {
-        background-position: center center;
-        background-image: url(/static/images/card_media_player_bg.png);
-        background-repeat: no-repeat;
-        background-color: var(--primary-color);
-      }
+        .banner.no-cover {
+          background-position: center center;
+          background-image: url(/static/images/card_media_player_bg.png);
+          background-repeat: no-repeat;
+          background-color: var(--primary-color);
+        }
 
-      .banner.content-type-music:before {
-        padding-top: 100%;
-      }
+        .banner.content-type-music:before {
+          padding-top: 100%;
+        }
 
-      .banner.no-cover:before {
-        padding-top: 88px;
-      }
+        .banner.no-cover:before {
+          padding-top: 88px;
+        }
 
-      .banner > .cover {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        .banner > .cover {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
 
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
 
-        background-position: center center;
-        background-size: cover;
-        transition: opacity .8s;
-        opacity: 1;
-      }
+          background-position: center center;
+          background-size: cover;
+          transition: opacity 0.8s;
+          opacity: 1;
+        }
 
-      .banner.is-off > .cover {
-        opacity: 0;
-      }
+        .banner.is-off > .cover {
+          opacity: 0;
+        }
 
-      .banner > .caption {
-        @apply --paper-font-caption;
+        .banner > .caption {
+          @apply --paper-font-caption;
 
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
 
-        background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
+          background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
 
-        padding: 8px 16px;
+          padding: 8px 16px;
 
-        font-size: 14px;
-        font-weight: 500;
-        color: white;
+          font-size: 14px;
+          font-weight: 500;
+          color: white;
 
-        transition: background-color .5s;
-      }
+          transition: background-color 0.5s;
+        }
 
-      .banner.is-off > .caption {
-        background-color: initial;
-      }
+        .banner.is-off > .caption {
+          background-color: initial;
+        }
 
-      .banner > .caption .title {
-        @apply --paper-font-common-nowrap;
-        font-size: 1.2em;
-        margin: 8px 0 4px;
-      }
+        .banner > .caption .title {
+          @apply --paper-font-common-nowrap;
+          font-size: 1.2em;
+          margin: 8px 0 4px;
+        }
 
-      .progress {
-        width: 100%;
-        height: var(--paper-progress-height, 4px);
-        margin-top: calc(-1*var(--paper-progress-height, 4px));
-        --paper-progress-active-color: var(--accent-color);
-        --paper-progress-container-color: rgba(200,200,200,0.5);
-      }
+        .progress {
+          width: 100%;
+          height: var(--paper-progress-height, 4px);
+          margin-top: calc(-1 * var(--paper-progress-height, 4px));
+          --paper-progress-active-color: var(--accent-color);
+          --paper-progress-container-color: rgba(200, 200, 200, 0.5);
+        }
 
-      .controls {
-        position: relative;
-        @apply --paper-font-body1;
-        padding: 8px;
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        background-color: var(--paper-card-background-color, white);
-      }
+        .controls {
+          position: relative;
+          @apply --paper-font-body1;
+          padding: 8px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+          background-color: var(--paper-card-background-color, white);
+        }
 
-      .controls paper-icon-button {
-        width: 44px;
-        height: 44px;
-      }
+        .controls paper-icon-button {
+          width: 44px;
+          height: 44px;
+        }
 
-      paper-icon-button {
-        opacity: var(--dark-primary-opacity);
-      }
+        paper-icon-button {
+          opacity: var(--dark-primary-opacity);
+        }
 
-      paper-icon-button[disabled] {
-        opacity: var(--dark-disabled-opacity);
-      }
+        paper-icon-button[disabled] {
+          opacity: var(--dark-disabled-opacity);
+        }
 
-      paper-icon-button.primary {
-        width: 56px !important;
-        height: 56px !important;
-        background-color: var(--primary-color);
-        color: white;
-        border-radius: 50%;
-        padding: 8px;
-        transition: background-color .5s;
-      }
+        paper-icon-button.primary {
+          width: 56px !important;
+          height: 56px !important;
+          background-color: var(--primary-color);
+          color: white;
+          border-radius: 50%;
+          padding: 8px;
+          transition: background-color 0.5s;
+        }
 
-      paper-icon-button.primary[disabled] {
-        background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
-      }
+        paper-icon-button.primary[disabled] {
+          background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
+        }
 
-      [invisible] {
-        visibility: hidden !important;
-      }
-    </style>
+        [invisible] {
+          visibility: hidden !important;
+        }
+      </style>
 
-    <div class$="[[computeBannerClasses(playerObj)]]">
-      <div class="cover" id="cover"></div>
+      <div class$="[[computeBannerClasses(playerObj)]]">
+        <div class="cover" id="cover"></div>
 
-      <div class="caption">
-        [[_computeStateName(stateObj)]]
-        <div class="title">[[computePrimaryText(localize, playerObj)]]</div>
-        [[playerObj.secondaryTitle]]<br>
-      </div>
-    </div>
-
-    <paper-progress max="[[stateObj.attributes.media_duration]]" value="[[playbackPosition]]" hidden$="[[computeHideProgress(playerObj)]]" class="progress"></paper-progress>
-
-    <div class="controls layout horizontal justified">
-      <paper-icon-button icon="hass:power" on-click="handleTogglePower" invisible$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
-
-      <div>
-        <paper-icon-button icon="hass:skip-previous" invisible$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
-        <paper-icon-button class="primary" icon="[[computePlaybackControlIcon(playerObj)]]" invisible$="[[!computePlaybackControlIcon(playerObj)]]" disabled="[[playerObj.isOff]]" on-click="handlePlaybackControl"></paper-icon-button>
-        <paper-icon-button icon="hass:skip-next" invisible$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
+        <div class="caption">
+          [[_computeStateName(stateObj)]]
+          <div class="title">[[computePrimaryText(localize, playerObj)]]</div>
+          [[playerObj.secondaryTitle]]<br />
+        </div>
       </div>
 
-      <paper-icon-button icon="hass:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
+      <paper-progress
+        max="[[stateObj.attributes.media_duration]]"
+        value="[[playbackPosition]]"
+        hidden$="[[computeHideProgress(playerObj)]]"
+        class="progress"
+      ></paper-progress>
 
-    </div>
-`;
+      <div class="controls layout horizontal justified">
+        <paper-icon-button
+          icon="hass:power"
+          on-click="handleTogglePower"
+          invisible$="[[computeHidePowerButton(playerObj)]]"
+          class="self-center secondary"
+        ></paper-icon-button>
+
+        <div>
+          <paper-icon-button
+            icon="hass:skip-previous"
+            invisible$="[[!playerObj.supportsPreviousTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePrevious"
+          ></paper-icon-button>
+          <paper-icon-button
+            class="primary"
+            icon="[[computePlaybackControlIcon(playerObj)]]"
+            invisible$="[[!computePlaybackControlIcon(playerObj)]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePlaybackControl"
+          ></paper-icon-button>
+          <paper-icon-button
+            icon="hass:skip-next"
+            invisible$="[[!playerObj.supportsNextTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handleNext"
+          ></paper-icon-button>
+        </div>
+
+        <paper-icon-button
+          icon="hass:dots-vertical"
+          on-click="handleOpenMoreInfo"
+          class="self-center secondary"
+        ></paper-icon-button>
+      </div>
+    `;
   }
 
   static get properties() {

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";
 
 /*
@@ -15,40 +15,42 @@ import computeObjectId from "../common/entity/compute_object_id";
 class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
-    <style>
-      :host {
-        @apply --paper-font-body1;
-      }
-      ha-markdown {
-        display: block;
-        padding: 0 16px;
-        -ms-user-select: initial;
-        -webkit-user-select: initial;
-        -moz-user-select: initial;
-      }
-      ha-markdown p:first-child {
-        margin-top: 0;
-      }
-      ha-markdown p:last-child {
-        margin-bottom: 0;
-      }
-      ha-markdown a {
-        color: var(--primary-color);
-      }
-      ha-markdown img {
-        max-width: 100%;
-      }
-      paper-button {
-        margin: 8px;
-        font-weight: 500;
-      }
-    </style>
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        ha-markdown p:first-child {
+          margin-top: 0;
+        }
+        ha-markdown p:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+        paper-button {
+          margin: 8px;
+          font-weight: 500;
+        }
+      </style>
 
-    <ha-card header="[[computeTitle(stateObj)]]">
-      <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
-      <paper-button on-click="dismissTap">[[localize('ui.card.persistent_notification.dismiss')]]</paper-button>
-    </ha-card>
-`;
+      <ha-card header="[[computeTitle(stateObj)]]">
+        <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
+        <paper-button on-click="dismissTap"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+        >
+      </ha-card>
+    `;
   }
 
   static get properties() {

src/cards/ha-plant-card.js

@@ -1,91 +1,109 @@
-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() {
     return html`
-    <style>
-      .banner {
-        display: flex;
-        align-items: flex-end;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center;
-        padding-top: 12px;
-      }
-      .has-plant-image .banner {
-        padding-top: 30%;
-      }
-      .header {
-        @apply --paper-font-headline;
-        line-height: 40px;
-        padding: 8px 16px;
-      }
-      .has-plant-image .header {
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 16px;
-        padding: 16px;
-        color: white;
-        width: 100%;
-        background:rgba(0, 0, 0, var(--dark-secondary-opacity));
-      }
-      .content {
-        display: flex;
-        justify-content: space-between;
-        padding: 16px 32px 24px 32px;
-      }
-      .has-plant-image .content {
-        padding-bottom: 16px;
-      }
-      ha-icon {
-        color: var(--paper-item-icon-color);
-        margin-bottom: 8px;
-      }
-      .attributes {
-        cursor: pointer;
-      }
-      .attributes div {
-        text-align: center;
-      }
-      .problem {
-        color: var(--google-red-500);
-        font-weight: bold;
-      }
-      .uom {
-        color: var(--secondary-text-color);
-      }
-    </style>
+      <style>
+        .banner {
+          display: flex;
+          align-items: flex-end;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          padding-top: 12px;
+        }
+        .has-plant-image .banner {
+          padding-top: 30%;
+        }
+        .header {
+          @apply --paper-font-headline;
+          line-height: 40px;
+          padding: 8px 16px;
+        }
+        .has-plant-image .header {
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 16px;
+          padding: 16px;
+          color: white;
+          width: 100%;
+          background: rgba(0, 0, 0, var(--dark-secondary-opacity));
+        }
+        .content {
+          display: flex;
+          justify-content: space-between;
+          padding: 16px 32px 24px 32px;
+        }
+        .has-plant-image .content {
+          padding-bottom: 16px;
+        }
+        ha-icon {
+          color: var(--paper-item-icon-color);
+          margin-bottom: 8px;
+        }
+        .attributes {
+          cursor: pointer;
+        }
+        .attributes div {
+          text-align: center;
+        }
+        .problem {
+          color: var(--google-red-500);
+          font-weight: bold;
+        }
+        .uom {
+          color: var(--secondary-text-color);
+        }
+      </style>
 
-    <ha-card class$="[[computeImageClass(stateObj.attributes.entity_picture)]]">
-      <div class="banner" style="background-image:url([[stateObj.attributes.entity_picture]])">
-        <div class="header">[[computeTitle(stateObj)]]</div>
-      </div>
-      <div class="content">
-        <template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
-          <div class="attributes" on-click="attributeClicked">
-            <div><ha-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></ha-icon></div>
-            <div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
-              [[computeValue(stateObj.attributes, item)]]
+      <ha-card
+        class$="[[computeImageClass(stateObj.attributes.entity_picture)]]"
+      >
+        <div
+          class="banner"
+          style="background-image:url([[stateObj.attributes.entity_picture]])"
+        >
+          <div class="header">[[computeTitle(stateObj)]]</div>
+        </div>
+        <div class="content">
+          <template
+            is="dom-repeat"
+            items="[[computeAttributes(stateObj.attributes)]]"
+          >
+            <div class="attributes" on-click="attributeClicked">
+              <div>
+                <ha-icon
+                  icon="[[computeIcon(item, stateObj.attributes.battery)]]"
+                ></ha-icon>
+              </div>
+              <div
+                class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]"
+              >
+                [[computeValue(stateObj.attributes, item)]]
+              </div>
+              <div class="uom">
+                [[computeUom(stateObj.attributes.unit_of_measurement_dict,
+                item)]]
+              </div>
             </div>
-            <div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
-          </div>
-        </template>
-      </div>
-    </ha-card>
-`;
+          </template>
+        </div>
+      </ha-card>
+    `;
   }
 
   static get properties() {
     return {
       hass: Object,
       stateObj: Object,
+      config: Object,
     };
   }
 
@@ -101,7 +119,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
   }
 
   computeTitle(stateObj) {
-    return computeStateName(stateObj);
+    return this.config.name || computeStateName(stateObj);
   }
 
   computeAttributes(data) {

src/cards/ha-weather-card.js

@@ -1,11 +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 "../components/ha-card.js";
-import "../components/ha-icon.js";
+import computeStateName from "../common/entity/compute_state_name";
 
-import EventsMixin from "../mixins/events-mixin.js";
-import LocalizeMixin from "../mixins/localize-mixin.js";
+import "../components/ha-card";
+import "../components/ha-icon";
+
+import EventsMixin from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -26,6 +28,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 +79,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 +91,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .forecast .icon {
-          margin: 8px 0;
+          margin: 4px 0;
           text-align: center;
         }
 
@@ -88,7 +105,11 @@ 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">[[computeName(stateObj)]]</div>
+        </div>
         <div class="content">
           <div class="now">
             <div class="main">
@@ -96,53 +117,71 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 <ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
               </template>
               <div class="temp">
-                [[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
+                [[stateObj.attributes.temperature]]<span
+                  >[[getUnit('temperature')]]</span
+                >
               </div>
             </div>
             <div class="attributes">
-              <template is="dom-if" if="[[_showValue(stateObj.attributes.pressure)]]">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.pressure)]]"
+              >
                 <div>
                   [[localize('ui.card.weather.attributes.air_pressure')]]:
                   [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
                 </div>
               </template>
-              <template is="dom-if" if="[[_showValue(stateObj.attributes.humidity)]]">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.humidity)]]"
+              >
                 <div>
                   [[localize('ui.card.weather.attributes.humidity')]]:
                   [[stateObj.attributes.humidity]] %
                 </div>
               </template>
-              <template is="dom-if" if="[[_showValue(stateObj.attributes.wind_speed)]]">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.wind_speed)]]"
+              >
                 <div>
                   [[localize('ui.card.weather.attributes.wind_speed')]]:
-                  [[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
+                  [[getWind(stateObj.attributes.wind_speed,
+                  stateObj.attributes.wind_bearing, localize)]]
                 </div>
               </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]]">
                 <div>
-                  <div class="weekday">[[computeDate(item.datetime)]]<br>
+                  <div class="weekday">
+                    [[computeDate(item.datetime)]]<br />
                     <template is="dom-if" if="[[!_showValue(item.templow)]]">
                       [[computeTime(item.datetime)]]
                     </template>
                   </div>
                   <template is="dom-if" if="[[_showValue(item.condition)]]">
                     <div class="icon">
-                      <ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon>
+                      <ha-icon
+                        icon="[[getWeatherIcon(item.condition)]]"
+                      ></ha-icon>
                     </div>
                   </template>
-                  <div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
+                  <div class="temp">
+                    [[item.temperature]] [[getUnit('temperature')]]
+                  </div>
                   <template is="dom-if" if="[[_showValue(item.templow)]]">
-                    <div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
+                    <div class="templow">
+                      [[item.templow]] [[getUnit('temperature')]]
+                    </div>
                   </template>
                   <template is="dom-if" if="[[_showValue(item.precipitation)]]">
-                    <div class="precipitation">[[item.precipitation]] [[getUnit('precipitation')]]</div>
+                    <div class="precipitation">
+                      [[item.precipitation]] [[getUnit('precipitation')]]
+                    </div>
                   </template>
                 </div>
               </template>
@@ -234,6 +273,10 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return localize(`state.weather.${state}`) || state;
   }
 
+  computeName(stateObj) {
+    return this.config.name || computeStateName(stateObj);
+  }
+
   showWeatherIcon(condition) {
     return condition in this.weatherIcons;
   }

src/common/auth/external_auth.ts

@@ -6,6 +6,34 @@ import { Auth } from "home-assistant-js-websocket";
 const CALLBACK_SET_TOKEN = "externalAuthSetToken";
 const CALLBACK_REVOKE_TOKEN = "externalAuthRevokeToken";
 
+interface BasePayload {
+  callback: string;
+}
+
+interface RefreshTokenResponse {
+  access_token: string;
+  expires_in: number;
+}
+
+declare global {
+  interface Window {
+    externalApp?: {
+      getExternalAuth(payload: BasePayload);
+      revokeExternalAuth(payload: BasePayload);
+    };
+    webkit?: {
+      messageHandlers: {
+        getExternalAuth: {
+          postMessage(payload: BasePayload);
+        };
+        revokeExternalAuth: {
+          postMessage(payload: BasePayload);
+        };
+      };
+    };
+  }
+}
+
 if (!window.externalApp && !window.webkit) {
   throw new Error(
     "External auth requires either externalApp or webkit defined on Window object."
@@ -14,21 +42,24 @@ if (!window.externalApp && !window.webkit) {
 
 export default class ExternalAuth extends Auth {
   constructor(hassUrl) {
-    super();
-
-    this.data = {
+    super({
       hassUrl,
+      clientId: "",
+      refresh_token: "",
       access_token: "",
+      expires_in: 0,
       // This will trigger connection to do a refresh right away
       expires: 0,
-    };
+    });
   }
 
-  async refreshAccessToken() {
-    const responseProm = new Promise((resolve, reject) => {
-      window[CALLBACK_SET_TOKEN] = (success, data) =>
-        success ? resolve(data) : reject(data);
-    });
+  public async refreshAccessToken() {
+    const responseProm = new Promise<RefreshTokenResponse>(
+      (resolve, reject) => {
+        window[CALLBACK_SET_TOKEN] = (success, data) =>
+          success ? resolve(data) : reject(data);
+      }
+    );
 
     // Allow promise to set resolve on window object.
     await 0;
@@ -38,23 +69,18 @@ export default class ExternalAuth extends Auth {
     if (window.externalApp) {
       window.externalApp.getExternalAuth(callbackPayload);
     } else {
-      window.webkit.messageHandlers.getExternalAuth.postMessage(
+      window.webkit!.messageHandlers.getExternalAuth.postMessage(
         callbackPayload
       );
     }
 
-    // Response we expect back:
-    // {
-    //   "access_token": "qwere",
-    //   "expires_in": 1800
-    // }
     const tokens = await responseProm;
 
     this.data.access_token = tokens.access_token;
     this.data.expires = tokens.expires_in * 1000 + Date.now();
   }
 
-  async revoke() {
+  public async revoke() {
     const responseProm = new Promise((resolve, reject) => {
       window[CALLBACK_REVOKE_TOKEN] = (success, data) =>
         success ? resolve(data) : reject(data);
@@ -68,7 +94,7 @@ export default class ExternalAuth extends Auth {
     if (window.externalApp) {
       window.externalApp.revokeExternalAuth(callbackPayload);
     } else {
-      window.webkit.messageHandlers.revokeExternalAuth.postMessage(
+      window.webkit!.messageHandlers.revokeExternalAuth.postMessage(
         callbackPayload
       );
     }

src/common/auth/token_storage.ts

@@ -1,5 +1,18 @@
+import { AuthData } from "home-assistant-js-websocket";
+
 const storage = window.localStorage || {};
 
+declare global {
+  interface Window {
+    __tokenCache: {
+      // undefined: we haven't loaded yet
+      // null: none stored
+      tokens?: AuthData | null;
+      writeEnabled?: boolean;
+    };
+  }
+}
+
 // So that core.js and main app hit same shared object.
 let tokenCache = window.__tokenCache;
 if (!tokenCache) {
@@ -15,18 +28,22 @@ export function askWrite() {
   );
 }
 
-export function saveTokens(tokens) {
+export function saveTokens(tokens: AuthData | null) {
   tokenCache.tokens = tokens;
   if (tokenCache.writeEnabled) {
     try {
       storage.hassTokens = JSON.stringify(tokens);
-    } catch (err) {} // eslint-disable-line
+    } catch (err) {
+      // write failed, ignore it. Happens if storage is full or private mode.
+    }
   }
 }
 
 export function enableWrite() {
   tokenCache.writeEnabled = true;
-  saveTokens(tokenCache.tokens);
+  if (tokenCache.tokens) {
+    saveTokens(tokenCache.tokens);
+  }
 }
 
 export function loadTokens() {

src/common/config/is_component_loaded.js

@@ -1,4 +0,0 @@
-/** Return if a component is loaded. */
-export default function isComponentLoaded(hass, component) {
-  return hass && hass.config.components.indexOf(component) !== -1;
-}

src/common/config/is_component_loaded.ts

@@ -0,0 +1,9 @@
+import { HomeAssistant } from "../../types";
+
+/** Return if a component is loaded. */
+export default function isComponentLoaded(
+  hass: HomeAssistant,
+  component: string
+): boolean {
+  return hass && hass.config.components.indexOf(component) !== -1;
+}

src/common/config/is_pwa.ts

@@ -1,4 +1,4 @@
 /** Return if the displaymode is in standalone mode (PWA). */
-export default function isPwa() {
+export default function isPwa(): boolean {
   return window.matchMedia("(display-mode: standalone)").matches;
 }

src/common/config/location_name.js

@@ -1,4 +0,0 @@
-/** Get the location name from a hass object. */
-export default function computeLocationName(hass) {
-  return hass && hass.config.location_name;
-}

src/common/config/location_name.ts

@@ -0,0 +1,6 @@
+import { HomeAssistant } from "../../types";
+
+/** Get the location name from a hass object. */
+export default function computeLocationName(hass: HomeAssistant): string {
+  return hass && hass.config.location_name;
+}

src/common/datetime/duration_to_seconds.ts

@@ -1,4 +1,4 @@
-export default function durationToSeconds(duration) {
+export default function durationToSeconds(duration: string): number {
   const parts = duration.split(":").map(Number);
   return parts[0] * 3600 + parts[1] * 60 + parts[2];
 }

src/common/datetime/format_date.ts

@@ -11,11 +11,10 @@ function toLocaleDateStringSupportsOptions() {
 }
 
 export default (toLocaleDateStringSupportsOptions()
-  ? (dateObj, locales) =>
+  ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleDateString(locales, {
         year: "numeric",
         month: "long",
         day: "numeric",
       })
-  : // eslint-disable-next-line no-unused-vars
-    (dateObj, locales) => fecha.format(dateObj, "mediumDate"));
+  : (dateObj: Date) => fecha.format(dateObj, "mediumDate"));

src/common/datetime/format_date_time.ts

@@ -11,7 +11,7 @@ function toLocaleStringSupportsOptions() {
 }
 
 export default (toLocaleStringSupportsOptions()
-  ? (dateObj, locales) =>
+  ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleString(locales, {
         year: "numeric",
         month: "long",
@@ -19,5 +19,4 @@ export default (toLocaleStringSupportsOptions()
         hour: "numeric",
         minute: "2-digit",
       })
-  : // eslint-disable-next-line no-unused-vars
-    (dateObj, locales) => fecha.format(dateObj, "haDateTime"));
+  : (dateObj: Date) => fecha.format(dateObj, "haDateTime"));

src/common/datetime/format_time.ts

@@ -11,10 +11,9 @@ function toLocaleTimeStringSupportsOptions() {
 }
 
 export default (toLocaleTimeStringSupportsOptions()
-  ? (dateObj, locales) =>
+  ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleTimeString(locales, {
         hour: "numeric",
         minute: "2-digit",
       })
-  : // eslint-disable-next-line no-unused-vars
-    (dateObj, locales) => fecha.format(dateObj, "shortTime"));
+  : (dateObj: Date) => fecha.format(dateObj, "shortTime"));