Bumped version to 20181112.0

* Ability to add items to shopping-list-card

* Address review comments

.dockerignore

@@ -1,6 +1,4 @@
 node_modules
-bower_components
 hass_frontend
-build
-build-temp
+hass_frontend_es5
 .git

.eslintrc-hound.json

@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb-base",
+  "extends": ["airbnb-base", "prettier"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true,
@@ -9,16 +9,25 @@
   "settings": {
     "react": {
       "pragma": "h"
+    },
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.js"
+      }
     }
   },
   "globals": {
     "__DEV__": false,
-    "__DEMO__": false,
+    "__BUILD__": false,
+    "__VERSION__": false,
+    "__STATIC_PATH__": false,
     "Polymer": true,
     "webkitSpeechRecognition": false,
+    "ResizeObserver": false
   },
   "env": {
-    "browser": true
+    "browser": true,
+    "mocha": true
   },
   "rules": {
     "class-methods-use-this": 0,
@@ -40,10 +49,15 @@
     "no-multi-assign": 0,
     "radix": 0,
     "no-alert": 0,
+    "no-return-await": 0,
     "prefer-destructuring": 0,
-    "no-restricted-globals": 0,
+    "no-restricted-globals": [2, "event"],
     "prefer-promise-reject-errors": 0,
     "import/prefer-default-export": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": [2, "ignorePackages"],
+    "object-curly-newline": 0,
+    "default-case": 0,
     "react/jsx-no-bind": [2, { "ignoreRefs": true }],
     "react/jsx-no-duplicate-props": 2,
     "react/self-closing-comp": 2,
@@ -53,13 +67,11 @@
     "react/no-find-dom-node": 2,
     "react/no-is-mounted": 2,
     "react/jsx-no-comment-textnodes": 2,
-    "react/jsx-curly-spacing": 2,
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2
+    "react/jsx-uses-vars": 2,
+    "no-restricted-syntax": [0, "ForOfStatement"],
+    "prettier/prettier": "error"
   },
-  "plugins": [
-    "html",
-    "react"
-  ]
+  "plugins": ["react", "prettier"]
 }

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./.eslintrc-hound.json",
+  "plugins": [
+    "react"
+  ],
+  "env": {
+    "browser": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "import/no-unresolved": 2,
+    "linebreak-style": 0,
+    "implicit-arrow-linebreak": 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

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!-- READ THIS FIRST:
+- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
+- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
+- This is for bugs only. Feature and enhancement requests should go in our community forum: https://community.home-assistant.io/c/feature-requests
+- Provide as many details as possible. Do not delete any text from this template!
+-->
+
+**Home Assistant release with the issue:**
+<!--
+- Frontend -> Developer tools -> Info
+- Or use this command: hass --version
+-->
+
+**Last working Home Assistant release (if known):**
+
+
+**Browser and Operating System:**
+<!--
+Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
+-->
+
+**Description of problem:**
+<!--
+Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description.
+-->
+
+
+**Javascript errors shown in the web inspector (if applicable):**
+```
+
+```
+
+**Additional information:**

.github/move.yml

@@ -0,0 +1,13 @@
+# Configuration for move-issues - https://github.com/dessant/move-issues
+
+# Delete the command comment. Ignored when the comment also contains other content
+deleteCommand: true
+# Close the source issue after moving
+closeSourceIssue: true
+# Lock the source issue after moving
+lockSourceIssue: false
+# Set custom aliases for targets
+# aliases:
+#   r: repo
+#   or: owner/repo
+

.github/release-drafter.yml

@@ -0,0 +1,4 @@
+template: |
+  ## What's Changed
+
+  $CHANGES

.gitignore

@@ -1,10 +1,11 @@
-build/*
-build-temp/*
+build
+build-translations/*
 node_modules/*
-bower_components/*
 npm-debug.log
 .DS_Store
 hass_frontend/*
+hass_frontend_es5/*
+.reify-cache
 
 # Python stuff
 *.py[cod]
@@ -19,3 +20,11 @@ venv
 lib
 bin
 dist
+
+# vscode
+.vscode/*
+!.vscode/extensions.json
+
+# Secrets
+.lokalise_token
+yarn-error.log

.hound.yml

@@ -3,4 +3,4 @@ jshint:
 
 eslint:
   enabled: true
-  config_file: .eslintrc
+  config_file: .eslintrc-hound.json

.nvmrc

@@ -1 +1 @@
-8.8.1
+8.11.1

.travis.yml

@@ -3,22 +3,24 @@ language: node_js
 cache:
   yarn: true
   directories:
-  - bower_components
-install:
-  - yarn install
-  - ./node_modules/.bin/bower install
-addons:
-  firefox: latest
-  apt:
-    sources:
-    - google-chrome
-    packages:
-    - google-chrome-stable
+    - bower_components
+install: yarn install
 script:
   - npm run build
+  - hassio/script/build_hassio
   - npm run test
-  - xvfb-run wct
-  - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --plugin sauce; fi
+  # - xvfb-run wct --module-resolution=node --npm
+  # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
+services:
+  - docker
+before_deploy:
+  - 'docker pull lokalise/lokalise-cli@sha256:2198814ebddfda56ee041a4b427521757dd57f75415ea9693696a64c550cef21'
+deploy:
+  provider: script
+  script: script/travis_deploy
+  'on':
+    branch: master
 dist: trusty
 addons:
   sauce_connect: true
+

.vscode/extensions.json

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

Dockerfile

@@ -1,25 +1,31 @@
-FROM node:8.2.1-alpine
+FROM node:8.11.1-alpine
 
 # install yarn
 ENV PATH /root/.yarn/bin:$PATH
 
+## Install/force base tools
 RUN apk update \
-  && apk add curl bash binutils tar git python3 \
+  && apk add make g++ curl bash binutils tar git python2 python3 \
   && rm -rf /var/cache/apk/* \
   && /bin/bash \
-  && touch ~/.bashrc \
-  && curl -o- -L https://yarnpkg.com/install.sh | bash
+  && touch ~/.bashrc
 
+## Install yarn
+RUN curl -o- -L https://yarnpkg.com/install.sh | bash
+
+## Setup the project
 RUN mkdir -p /frontend
+
 WORKDIR /frontend
 
-ENV NODE_ENV production
+COPY package.json yarn.lock ./
 
-COPY package.json ./
-RUN yarn
-
-COPY bower.json ./
-RUN ./node_modules/.bin/bower install --allow-root
+RUN yarn install --frozen-lockfile
 
 COPY . .
-CMD [ "/bin/bash", "./script/build_frontend" ]
+
+COPY script/docker_entrypoint.sh /usr/bin/docker_entrypoint.sh
+
+RUN chmod +x /usr/bin/docker_entrypoint.sh
+
+CMD [ "docker_entrypoint.sh" ]

MANIFEST.in

@@ -1,4 +1,5 @@
 include README.md
 include LICENSE.md
 graft hass_frontend
+graft hass_frontend_es5
 recursive-exclude * *.py[co]

README.md

@@ -1,17 +1,33 @@
 # Home Assistant Polymer [![Build Status](https://travis-ci.org/home-assistant/home-assistant-polymer.svg?branch=master)](https://travis-ci.org/home-assistant/home-assistant-polymer)
 
-This is the repository for the official [Home Assistant](https://home-assistant.io) frontend. The frontend is built on top of the following technologies:
-
- * [Websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
- * [Polymer](https://www.polymer-project.org/)
- * [Rollup](http://rollupjs.org/) to package Home Assistant JS
- * [Bower](https://bower.io) for Polymer package management
+This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
 [![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://home-assistant.io/demo/)
 
-[View demo of the Polymer frontend](https://home-assistant.io/demo/)  
-[More information about Home Assistant](https://home-assistant.io)  
-[Frontend development instructions](https://home-assistant.io/developers/frontend/)
+- [View demo of the Polymer frontend](https://home-assistant.io/demo/)
+- [More information about Home Assistant](https://home-assistant.io)
+- [Frontend development instructions](https://developers.home-assistant.io/docs/en/frontend_index.html)
+
+## Development
+
+- Initial setup: `script/setup`
+- Development: [Instructions](https://developers.home-assistant.io/docs/en/frontend_development.html)
+- Production build: `script/build_frontend`
+- Gallery: `cd gallery && script/develop_gallery`
+- Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
+
+## Frontend development
+
+### Classic environment
+A complete guide can be found at the following [link](https://www.home-assistant.io/developers/frontend/). It describes a short guide for the build of project.
+
+### Docker environment
+It is possible to compile the project and/or run commands in the development environment having only the [Docker](https://www.docker.com) pre-installed in the system. On the root of project you can do:
+* `sh ./script/docker_run.sh build` Build all the project with one command
+* `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the *classic environment*) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
+
+**Note**: if you have installed `npm` in addition to the `docker`, you can use the commands `npm run docker_build` and `npm run bash` to get a full build or bash as explained above
 
 ## License
+
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

bower.json

@@ -1,62 +0,0 @@
-{
-  "name": "home-assistant",
-  "version": "0.1.0",
-  "authors": [
-    "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl>"
-  ],
-  "main": "src/home-assistant.html",
-  "license": "MIT",
-  "private": true,
-  "dependencies": {
-    "app-layout": "^2.0.0",
-    "app-localize-behavior": "PolymerElements/app-localize-behavior#~2.0.0",
-    "app-route": "PolymerElements/app-route#^2.0.0",
-    "app-storage": "^2.0.2",
-    "fecha": "~2.3.0",
-    "font-roboto-local": "~1.0.1",
-    "font-roboto": "PolymerElements/font-roboto-local#~1.0.1",
-    "google-apis": "GoogleWebComponents/google-apis#~2.0.0",
-    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.0.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
-    "iron-image": "PolymerElements/iron-image#^2.1.1",
-    "iron-input": "PolymerElements/iron-input#^2.0.0",
-    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
-    "iron-pages": "PolymerElements/iron-pages#^2.0.0",
-    "leaflet": "^1.0.2",
-    "neon-animation": "PolymerElements/neon-animation#^2.0.1",
-    "paper-button": "PolymerElements/paper-button#^2.0.0",
-    "paper-card": "PolymerElements/paper-card#^2.0.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0",
-    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
-    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
-    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^2.0.0",
-    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
-    "paper-fab": "PolymerElements/paper-fab#^2.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
-    "paper-input": "PolymerElements/paper-input#^2.0.1",
-    "paper-item": "PolymerElements/paper-item#^2.0.0",
-    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
-    "paper-material": "PolymerElements/paper-material#^2.0.0",
-    "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
-    "paper-progress": "PolymerElements/paper-progress#^2.0.1",
-    "paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
-    "paper-radio-group": "PolymerElements/paper-radio-group#^2.0.0",
-    "paper-scroll-header-panel": "~2.0.0",
-    "paper-slider": "PolymerElements/paper-slider#^2.0.1",
-    "paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
-    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
-    "paper-time-input": "ryanburns23/paper-time-input#^2.0.4",
-    "paper-toast": "PolymerElements/paper-toast#^2.0.0",
-    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
-    "polymer": "^2.1.1",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#^2.0.0",
-    "vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.0",
-    "web-animations-js": "^2.2.5",
-    "webcomponentsjs": "^1.0.10"
-  },
-  "devDependencies": {
-    "web-component-tester": "^6.3.0"
-  }
-}

config/babel.js

@@ -0,0 +1,35 @@
+module.exports.babelLoaderConfig = ({ latestBuild }) => {
+  if (latestBuild === undefined) {
+    throw Error("latestBuild not defined for babel loader config");
+  }
+  return {
+    test: /\.m?js$|\.ts$/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: [
+          !latestBuild && [
+            require("@babel/preset-env").default,
+            { modules: false },
+          ],
+          require("@babel/preset-typescript").default,
+        ].filter(Boolean),
+        plugins: [
+          // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+          [
+            "@babel/plugin-proposal-object-rest-spread",
+            { loose: true, useBuiltIns: true },
+          ],
+          // Only support the syntax, Webpack will handle it.
+          "@babel/syntax-dynamic-import",
+          [
+            "@babel/transform-react-jsx",
+            {
+              pragma: "h",
+            },
+          ],
+        ],
+      },
+    },
+  };
+};

gallery/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../.eslintrc.json",
+  "rules": {
+    "no-console": 0
+  }
+}

gallery/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#2157BC">
+    <title>HAGallery</title>
+    <script src='./main.js' async></script>
+    <style>
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>

gallery/script/build_gallery

@@ -0,0 +1,17 @@
+#!/bin/sh
+# Run the gallery
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+OUTPUT_DIR=dist
+
+rm -rf $OUTPUT_DIR
+
+cd ..
+./node_modules/.bin/gulp build-translations gen-icons
+cd gallery
+
+NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js

gallery/script/develop_gallery

@@ -0,0 +1,13 @@
+#!/bin/sh
+# Run the gallery
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+cd ..
+./node_modules/.bin/gulp build-translations gen-icons
+cd gallery
+
+../node_modules/.bin/webpack-dev-server

gallery/src/components/demo-card.js

@@ -0,0 +1,97 @@
+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";
+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() {
+    return html`
+      <style>
+        .root {
+          display: flex;
+        }
+        h2 {
+          margin: 0 0 20px;
+          color: var(--primary-color);
+        }
+        #card {
+          width: 400px;
+        }
+        pre {
+          width: 400px;
+          margin: 16px;
+          overflow: auto;
+        }
+        @media only screen and (max-width: 800px) {
+          .root {
+            flex-direction: column;
+          }
+          pre {
+            margin-left: 0;
+          }
+        }
+      </style>
+      <h2>[[config.heading]]</h2>
+      <div class="root">
+        <div id="card"></div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_trim(config.config)]]</pre>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+      showConfig: Boolean,
+    };
+  }
+
+  _configChanged(config) {
+    const card = this.$.card;
+    while (card.lastChild) {
+      card.removeChild(card.lastChild);
+    }
+
+    const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
+
+    if (this.hass) {
+      el.hass = this.hass;
+    } else {
+      const hass = new HomeAssistant(demoStates);
+      hass.config = demoConfig;
+      hass.services = demoServices;
+      hass.resources = demoResources;
+      hass.language = "en";
+      hass.states = demoStates;
+      el.hass = hass;
+    }
+
+    card.appendChild(el);
+  }
+
+  _hassChanged(hass) {
+    const card = this.$.card.lastChild;
+    if (card) card.hass = hass;
+  }
+
+  _trim(config) {
+    return config.trim();
+  }
+}
+
+customElements.define("demo-card", DemoCard);

gallery/src/components/demo-cards.js

@@ -0,0 +1,58 @@
+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";
+
+class DemoCards extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        demo-card {
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
+        }
+      </style>
+      <app-toolbar>
+        <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]]">
+          <demo-card
+            config="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
+          ></demo-card>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      configs: Object,
+      hass: Object,
+      _showConfig: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+}
+
+customElements.define("demo-cards", DemoCards);

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

@@ -0,0 +1,92 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+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>
+        :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 {
+            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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      entityId: String,
+      showConfig: Boolean,
+      _stateObj: {
+        type: Object,
+        computed: "_getState(entityId, hass.states)",
+      },
+    };
+  }
+
+  _getState(entityId, states) {
+    return states[entityId];
+  }
+
+  _jsonEntity(stateObj) {
+    // We are caching some things on stateObj
+    // (it sucks, we will remove in the future)
+    const tmp = {};
+    Object.keys(stateObj).forEach((key) => {
+      if (key[0] !== "_") {
+        tmp[key] = stateObj[key];
+      }
+    });
+    return JSON.stringify(tmp, null, 2);
+  }
+}
+
+customElements.define("demo-more-info", DemoMoreInfo);

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

@@ -0,0 +1,58 @@
+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";
+
+class DemoMoreInfos extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        demo-more-info {
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
+        }
+      </style>
+      <app-toolbar>
+        <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]]">
+          <demo-more-info
+            entity-id="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
+          ></demo-more-info>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      entities: Array,
+      hass: Object,
+      _showConfig: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+}
+
+customElements.define("demo-more-infos", DemoMoreInfos);

gallery/src/data/demo_config.js

@@ -0,0 +1,11 @@
+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_resources.js

@@ -0,0 +1,264 @@
+export default {
+  en: {
+    "state.default.off": "Off",
+    "state.default.on": "On",
+    "state.default.unknown": "Unknown",
+    "state.default.unavailable": "Unavailable",
+    "state.alarm_control_panel.armed": "Armed",
+    "state.alarm_control_panel.disarmed": "Disarmed",
+    "state.alarm_control_panel.armed_home": "Armed home",
+    "state.alarm_control_panel.armed_away": "Armed away",
+    "state.alarm_control_panel.armed_night": "Armed night",
+    "state.alarm_control_panel.armed_custom_bypass": "Armed custom bypass",
+    "state.alarm_control_panel.pending": "Pending",
+    "state.alarm_control_panel.arming": "Arming",
+    "state.alarm_control_panel.disarming": "Disarming",
+    "state.alarm_control_panel.triggered": "Triggered",
+    "state.automation.off": "Off",
+    "state.automation.on": "On",
+    "state.binary_sensor.default.off": "Off",
+    "state.binary_sensor.default.on": "On",
+    "state.binary_sensor.battery.off": "Normal",
+    "state.binary_sensor.battery.on": "Low",
+    "state.binary_sensor.cold.off": "Normal",
+    "state.binary_sensor.cold.on": "Cold",
+    "state.binary_sensor.connectivity.off": "Disconnected",
+    "state.binary_sensor.connectivity.on": "Connected",
+    "state.binary_sensor.door.off": "Closed",
+    "state.binary_sensor.door.on": "Open",
+    "state.binary_sensor.garage_door.off": "Closed",
+    "state.binary_sensor.garage_door.on": "Open",
+    "state.binary_sensor.gas.off": "Clear",
+    "state.binary_sensor.gas.on": "Detected",
+    "state.binary_sensor.heat.off": "Normal",
+    "state.binary_sensor.heat.on": "Hot",
+    "state.binary_sensor.lock.off": "Locked",
+    "state.binary_sensor.lock.on": "Unlocked",
+    "state.binary_sensor.moisture.off": "Dry",
+    "state.binary_sensor.moisture.on": "Wet",
+    "state.binary_sensor.motion.off": "Clear",
+    "state.binary_sensor.motion.on": "Detected",
+    "state.binary_sensor.occupancy.off": "Clear",
+    "state.binary_sensor.occupancy.on": "Detected",
+    "state.binary_sensor.opening.off": "Closed",
+    "state.binary_sensor.opening.on": "Open",
+    "state.binary_sensor.presence.off": "Away",
+    "state.binary_sensor.presence.on": "Home",
+    "state.binary_sensor.problem.off": "OK",
+    "state.binary_sensor.problem.on": "Problem",
+    "state.binary_sensor.safety.off": "Safe",
+    "state.binary_sensor.safety.on": "Unsafe",
+    "state.binary_sensor.smoke.off": "Clear",
+    "state.binary_sensor.smoke.on": "Detected",
+    "state.binary_sensor.sound.off": "Clear",
+    "state.binary_sensor.sound.on": "Detected",
+    "state.binary_sensor.vibration.off": "Clear",
+    "state.binary_sensor.vibration.on": "Detected",
+    "state.binary_sensor.window.off": "Closed",
+    "state.binary_sensor.window.on": "Open",
+    "state.calendar.off": "Off",
+    "state.calendar.on": "On",
+    "state.camera.recording": "Recording",
+    "state.camera.streaming": "Streaming",
+    "state.camera.idle": "Idle",
+    "state.climate.off": "Off",
+    "state.climate.on": "On",
+    "state.climate.heat": "Heat",
+    "state.climate.cool": "Cool",
+    "state.climate.idle": "Idle",
+    "state.climate.auto": "Auto",
+    "state.climate.dry": "Dry",
+    "state.climate.fan_only": "Fan only",
+    "state.climate.eco": "Eco",
+    "state.climate.electric": "Electric",
+    "state.climate.performance": "Performance",
+    "state.climate.high_demand": "High demand",
+    "state.climate.heat_pump": "Heat pump",
+    "state.climate.gas": "Gas",
+    "state.configurator.configure": "Configure",
+    "state.configurator.configured": "Configured",
+    "state.cover.open": "Open",
+    "state.cover.opening": "Opening",
+    "state.cover.closed": "Closed",
+    "state.cover.closing": "Closing",
+    "state.cover.stopped": "Stopped",
+    "state.device_tracker.home": "Home",
+    "state.device_tracker.not_home": "Away",
+    "state.fan.off": "Off",
+    "state.fan.on": "On",
+    "state.group.off": "Off",
+    "state.group.on": "On",
+    "state.group.home": "Home",
+    "state.group.not_home": "Away",
+    "state.group.open": "Open",
+    "state.group.opening": "Opening",
+    "state.group.closed": "Closed",
+    "state.group.closing": "Closing",
+    "state.group.stopped": "Stopped",
+    "state.group.locked": "Locked",
+    "state.group.unlocked": "Unlocked",
+    "state.group.ok": "OK",
+    "state.group.problem": "Problem",
+    "state.input_boolean.off": "Off",
+    "state.input_boolean.on": "On",
+    "state.light.off": "Off",
+    "state.light.on": "On",
+    "state.lock.locked": "Locked",
+    "state.lock.unlocked": "Unlocked",
+    "state.media_player.off": "Off",
+    "state.media_player.on": "On",
+    "state.media_player.playing": "Playing",
+    "state.media_player.paused": "Paused",
+    "state.media_player.idle": "Idle",
+    "state.media_player.standby": "Standby",
+    "state.plant.ok": "OK",
+    "state.plant.problem": "Problem",
+    "state.remote.off": "Off",
+    "state.remote.on": "On",
+    "state.scene.scening": "Scening",
+    "state.script.off": "Off",
+    "state.script.on": "On",
+    "state.sensor.off": "Off",
+    "state.sensor.on": "On",
+    "state.sun.above_horizon": "Above horizon",
+    "state.sun.below_horizon": "Below horizon",
+    "state.switch.off": "Off",
+    "state.switch.on": "On",
+    "state.weather.clear-night": "Clear, night",
+    "state.weather.cloudy": "Cloudy",
+    "state.weather.fog": "Fog",
+    "state.weather.hail": "Hail",
+    "state.weather.lightning": "Lightning",
+    "state.weather.lightning-rainy": "Lightning, rainy",
+    "state.weather.partlycloudy": "Partly cloudy",
+    "state.weather.pouring": "Pouring",
+    "state.weather.rainy": "Rainy",
+    "state.weather.snowy": "Snowy",
+    "state.weather.snowy-rainy": "Snowy, rainy",
+    "state.weather.sunny": "Sunny",
+    "state.weather.windy": "Windy",
+    "state.weather.windy-variant": "Windy",
+    "state.zwave.default.initializing": "Initializing",
+    "state.zwave.default.dead": "Dead",
+    "state.zwave.default.sleeping": "Sleeping",
+    "state.zwave.default.ready": "Ready",
+    "state.zwave.query_stage.initializing": "Initializing ({query_stage})",
+    "state.zwave.query_stage.dead": "Dead ({query_stage})",
+    "state_badge.default.unknown": "Unk",
+    "state_badge.default.unavailable": "Unavai",
+    "state_badge.alarm_control_panel.armed": "Armed",
+    "state_badge.alarm_control_panel.disarmed": "Disarm",
+    "state_badge.alarm_control_panel.armed_home": "Armed",
+    "state_badge.alarm_control_panel.armed_away": "Armed",
+    "state_badge.alarm_control_panel.armed_night": "Armed",
+    "state_badge.alarm_control_panel.armed_custom_bypass": "Armed",
+    "state_badge.alarm_control_panel.pending": "Pend",
+    "state_badge.alarm_control_panel.arming": "Arming",
+    "state_badge.alarm_control_panel.disarming": "Disarm",
+    "state_badge.alarm_control_panel.triggered": "Trig",
+    "state_badge.device_tracker.home": "Home",
+    "state_badge.device_tracker.not_home": "Away",
+    "ui.card.alarm_control_panel.code": "Code",
+    "ui.card.alarm_control_panel.clear_code": "Clear",
+    "ui.card.alarm_control_panel.disarm": "Disarm",
+    "ui.card.alarm_control_panel.arm_home": "Arm home",
+    "ui.card.alarm_control_panel.arm_away": "Arm away",
+    "ui.card.automation.last_triggered": "Last triggered",
+    "ui.card.automation.trigger": "Trigger",
+    "ui.card.camera.not_available": "Image not available",
+    "ui.card.climate.currently": "Currently",
+    "ui.card.climate.on_off": "On / off",
+    "ui.card.climate.target_temperature": "Target temperature",
+    "ui.card.climate.target_humidity": "Target humidity",
+    "ui.card.climate.operation": "Operation",
+    "ui.card.climate.fan_mode": "Fan mode",
+    "ui.card.climate.swing_mode": "Swing mode",
+    "ui.card.climate.away_mode": "Away mode",
+    "ui.card.climate.aux_heat": "Aux heat",
+    "ui.card.cover.position": "Position",
+    "ui.card.cover.tilt_position": "Tilt position",
+    "ui.card.fan.speed": "Speed",
+    "ui.card.fan.oscillate": "Oscillate",
+    "ui.card.fan.direction": "Direction",
+    "ui.card.light.brightness": "Brightness",
+    "ui.card.light.color_temperature": "Color temperature",
+    "ui.card.light.white_value": "White value",
+    "ui.card.light.effect": "Effect",
+    "ui.card.lock.code": "Code",
+    "ui.card.lock.lock": "Lock",
+    "ui.card.lock.unlock": "Unlock",
+    "ui.card.media_player.source": "Source",
+    "ui.card.media_player.sound_mode": "Sound mode",
+    "ui.card.media_player.text_to_speak": "Text to speak",
+    "ui.card.persistent_notification.dismiss": "Dismiss",
+    "ui.card.scene.activate": "Activate",
+    "ui.card.script.execute": "Execute",
+    "ui.card.weather.attributes.air_pressure": "Air pressure",
+    "ui.card.weather.attributes.humidity": "Humidity",
+    "ui.card.weather.attributes.temperature": "Temperature",
+    "ui.card.weather.attributes.visibility": "Visibility",
+    "ui.card.weather.attributes.wind_speed": "Wind speed",
+    "ui.card.weather.cardinal_direction.e": "E",
+    "ui.card.weather.cardinal_direction.ene": "ENE",
+    "ui.card.weather.cardinal_direction.ese": "ESE",
+    "ui.card.weather.cardinal_direction.n": "N",
+    "ui.card.weather.cardinal_direction.ne": "NE",
+    "ui.card.weather.cardinal_direction.nne": "NNE",
+    "ui.card.weather.cardinal_direction.nw": "NW",
+    "ui.card.weather.cardinal_direction.nnw": "NNW",
+    "ui.card.weather.cardinal_direction.s": "S",
+    "ui.card.weather.cardinal_direction.se": "SE",
+    "ui.card.weather.cardinal_direction.sse": "SSE",
+    "ui.card.weather.cardinal_direction.ssw": "SSW",
+    "ui.card.weather.cardinal_direction.sw": "SW",
+    "ui.card.weather.cardinal_direction.w": "W",
+    "ui.card.weather.cardinal_direction.wnw": "WNW",
+    "ui.card.weather.cardinal_direction.wsw": "WSW",
+    "ui.card.weather.forecast": "Forecast",
+    "ui.common.loading": "Loading",
+    "ui.common.cancel": "Cancel",
+    "ui.components.entity.entity-picker.entity": "Entity",
+    "ui.components.relative_time.past": "{time} ago",
+    "ui.components.relative_time.future": "In {time}",
+    "ui.components.relative_time.never": "Never",
+    "ui.components.relative_time.duration.second":
+      "{count} {count, plural,\n  one {second}\n  other {seconds}\n}",
+    "ui.components.relative_time.duration.minute":
+      "{count} {count, plural,\n  one {minute}\n  other {minutes}\n}",
+    "ui.components.relative_time.duration.hour":
+      "{count} {count, plural,\n  one {hour}\n  other {hours}\n}",
+    "ui.components.relative_time.duration.day":
+      "{count} {count, plural,\n  one {day}\n  other {days}\n}",
+    "ui.components.relative_time.duration.week":
+      "{count} {count, plural,\n  one {week}\n  other {weeks}\n}",
+    "ui.components.history_charts.loading_history": "Loading state history...",
+    "ui.components.history_charts.no_history_found": "No state history found.",
+    "ui.components.service-picker.service": "Service",
+    "ui.dialogs.more_info_settings.save": "Save",
+    "ui.dialogs.more_info_settings.name": "Name",
+    "ui.duration.second":
+      "{count} {count, plural,\n  one {second}\n  other {seconds}\n}",
+    "ui.duration.minute":
+      "{count} {count, plural,\n  one {minute}\n  other {minutes}\n}",
+    "ui.duration.hour":
+      "{count} {count, plural,\n  one {hour}\n  other {hours}\n}",
+    "ui.duration.day":
+      "{count} {count, plural,\n  one {day}\n  other {days}\n}",
+    "ui.duration.week":
+      "{count} {count, plural,\n  one {week}\n  other {weeks}\n}",
+    "ui.login-form.password": "Password",
+    "ui.login-form.remember": "Remember",
+    "ui.login-form.log_in": "Log in",
+    "ui.notification_toast.entity_turned_on": "Turned on {entity}.",
+    "ui.notification_toast.entity_turned_off": "Turned off {entity}.",
+    "ui.notification_toast.service_called": "Service {service} called.",
+    "ui.notification_toast.service_call_failed":
+      "Failed to call service {service}.",
+    "ui.notification_toast.connection_lost": "Connection lost. Reconnecting…",
+    "ui.sidebar.developer_tools": "Developer tools",
+    "ui.sidebar.log_out": "Log out",
+    "attribute.weather.humidity": "Humidity",
+    "attribute.weather.visibility": "Visibility",
+    "attribute.weather.wind_speed": "Wind speed",
+  },
+};

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

@@ -0,0 +1,143 @@
+const now = () => new Date().toISOString();
+const randomTime = () =>
+  new Date(new Date().getTime() - Math.random() * 80 * 60 * 1000).toISOString();
+
+/* eslint-disable no-unused-vars */
+
+export class Entity {
+  constructor(domain, objectId, state, baseAttributes) {
+    this.domain = domain;
+    this.objectId = objectId;
+    this.entityId = `${domain}.${objectId}`;
+    this.lastChanged = randomTime();
+    this.lastUpdated = randomTime();
+    this.state = state;
+    // These are the attributes that we always write to the state machine
+    this.baseAttributes = baseAttributes;
+    this.attributes = baseAttributes;
+  }
+
+  async handleService(domain, service, data) {
+    console.log(
+      `Unmocked service for ${this.entityId}: ${domain}/${service}`,
+      data
+    );
+  }
+
+  update(state, attributes = {}) {
+    this.state = state;
+    this.lastUpdated = now();
+    this.lastChanged =
+      state === this.state ? this.lastChanged : this.lastUpdated;
+    this.attributes = Object.assign({}, this.baseAttributes, attributes);
+
+    console.log("update", this.entityId, this);
+
+    this.hass.updateStates({
+      [this.entityId]: this.toState(),
+    });
+  }
+
+  toState() {
+    return {
+      entity_id: this.entityId,
+      state: this.state,
+      attributes: this.attributes,
+      last_changed: this.lastChanged,
+      last_updated: this.lastUpdated,
+    };
+  }
+}
+
+export class LightEntity extends Entity {
+  async handleService(domain, service, data) {
+    if (!["homeassistant", this.domain].includes(domain)) return;
+
+    if (service === "turn_on") {
+      // eslint-disable-next-line
+      let { brightness, hs_color, brightness_pct } = data;
+      // eslint-disable-next-line
+      brightness = (255 * brightness_pct) / 100;
+      this.update(
+        "on",
+        Object.assign(this.attributes, {
+          brightness,
+          hs_color,
+        })
+      );
+    } else if (service === "turn_off") {
+      this.update("off");
+    } else if (service === "toggle") {
+      if (this.state === "on") {
+        this.handleService(domain, "turn_off", data);
+      } else {
+        this.handleService(domain, "turn_on", data);
+      }
+    }
+  }
+}
+
+export class LockEntity extends Entity {
+  async handleService(domain, service, data) {
+    if (domain !== this.domain) return;
+
+    if (service === "lock") {
+      this.update("locked");
+    } else if (service === "unlock") {
+      this.update("unlocked");
+    }
+  }
+}
+
+export class CoverEntity extends Entity {
+  async handleService(domain, service, data) {
+    if (domain !== this.domain) return;
+
+    if (service === "open_cover") {
+      this.update("open");
+    } else if (service === "close_cover") {
+      this.update("closing");
+    }
+  }
+}
+
+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;
+
+    await Promise.all(
+      this.attributes.entity_id.map((ent) => {
+        const entity = this.hass.mockEntities[ent];
+        return entity.handleService(entity.domain, service, data);
+      })
+    );
+
+    this.update(service === "turn_on" ? "on" : "off");
+  }
+}
+
+const TYPES = {
+  climate: ClimateEntity,
+  light: LightEntity,
+  lock: LockEntity,
+  cover: CoverEntity,
+  group: GroupEntity,
+};
+
+export default (domain, objectId, state, baseAttributes = {}) =>
+  new (TYPES[domain] || Entity)(domain, objectId, state, baseAttributes);

gallery/src/data/hass.js

@@ -0,0 +1,36 @@
+export default class FakeHass {
+  constructor(states = {}) {
+    this.states = states;
+    this._wsCommands = {};
+  }
+
+  addWSCommand(command, callback) {
+    this._wsCommands[command] = callback;
+  }
+
+  async callService(domain, service, serviceData) {
+    console.log("callService", { domain, service, serviceData });
+    return Promise.resolve();
+  }
+
+  async callWS(msg) {
+    const callback = this._wsCommands[msg.type];
+    return callback
+      ? callback(msg)
+      : Promise.reject({
+          code: "command_not_mocked",
+          message: "This command is not implemented in the gallery.",
+        });
+  }
+
+  async sendWS(msg) {
+    const callback = this._wsCommands[msg.type];
+
+    if (callback) {
+      callback(msg);
+    } else {
+      console.error(`Unknown command: ${msg.type}`);
+    }
+    console.log("sendWS", msg);
+  }
+}

gallery/src/data/provide_hass.js

@@ -0,0 +1,112 @@
+import { fireEvent } from "../../../src/common/dom/fire_event";
+
+import { demoConfig } from "./demo_config";
+import { demoServices } from "./demo_services";
+import demoResources from "./demo_resources";
+
+const ensureArray = (val) => (Array.isArray(val) ? val : [val]);
+
+export default (elements, { initialStates = {} } = {}) => {
+  elements = ensureArray(elements);
+
+  const wsCommands = {};
+  const restResponses = {};
+  let hass;
+  const entities = {};
+
+  function updateHass(obj) {
+    hass = Object.assign({}, hass, obj);
+    elements.forEach((el) => {
+      el.hass = hass;
+    });
+  }
+
+  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,
+
+    // Home Assistant functions
+    async callService(domain, service, data) {
+      fireEvent(elements[0], "show-notification", {
+        message: `Called service ${domain}/${service}`,
+      });
+      if (data.entity_id) {
+        await Promise.all(
+          ensureArray(data.entity_id).map((ent) =>
+            entities[ent].handleService(domain, service, data)
+          )
+        );
+      } else {
+        console.log("unmocked callService", domain, service, data);
+      }
+    },
+
+    async callWS(msg) {
+      const callback = wsCommands[msg.type];
+      return callback
+        ? callback(msg)
+        : Promise.reject({
+            code: "command_not_mocked",
+            message: "This command is not implemented in the gallery.",
+          });
+    },
+
+    async sendWS(msg) {
+      const callback = wsCommands[msg.type];
+
+      if (callback) {
+        callback(msg);
+      } else {
+        console.error(`Unknown command: ${msg.type}`);
+      }
+      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) {
+      updateHass({
+        states: Object.assign({}, hass.states, newStates),
+      });
+    },
+    addEntities(newEntities) {
+      const states = {};
+      ensureArray(newEntities).forEach((ent) => {
+        ent.hass = hass;
+        entities[ent.entityId] = ent;
+        states[ent.entityId] = ent.toState();
+      });
+      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.js

@@ -0,0 +1,79 @@
+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("alarm_control_panel", "alarm", "disarmed", {
+    friendly_name: "Alarm",
+  }),
+  getEntity("alarm_control_panel", "alarm_armed", "armed_home", {
+    friendly_name: "Alarm",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Basic Example",
+    config: `
+- type: alarm-panel
+  entity: alarm_control_panel.alarm
+    `,
+  },
+  {
+    heading: "With Title",
+    config: `
+- type: alarm-panel
+  entity: alarm_control_panel.alarm_armed
+  title: My Alarm
+    `,
+  },
+  {
+    heading: "Using only Arm_Home State",
+    config: `
+- type: alarm-panel
+  entity: alarm_control_panel.alarm
+  states:
+    - arm_home
+    `,
+  },
+  {
+    heading: "Invalid Entity",
+    config: `
+- type: alarm-panel
+  entity: alarm_control_panel.alarm1
+    `,
+  },
+];
+
+class DemoAlarmPanelEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+      hass: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-alarm-panel-card", DemoAlarmPanelEntity);

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

@@ -0,0 +1,84 @@
+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", "controller_1", "on", {
+    friendly_name: "Controller 1",
+  }),
+  getEntity("light", "controller_2", "on", {
+    friendly_name: "Controller 2",
+  }),
+  getEntity("light", "floor", "off", {
+    friendly_name: "Floor light",
+  }),
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen light",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Controller",
+    config: `
+- type: entities
+  entities:
+    - light.controller_1
+    - light.controller_2
+    - type: divider
+    - light.floor
+    - light.kitchen
+    `,
+  },
+  {
+    heading: "Demo",
+    config: `
+- type: conditional
+  conditions:
+    - entity: light.controller_1
+      state: "on"
+    - entity: light.controller_2
+      state_not: "off"
+  card:
+    type: entities
+    entities:
+      - light.controller_1
+      - light.controller_2
+      - light.floor
+      - light.kitchen
+    `,
+  },
+];
+
+class DemoConditional extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+      hass: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-conditional-card", DemoConditional);

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

@@ -0,0 +1,198 @@
+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",
+  }),
+  getEntity("group", "kitchen", "on", {
+    entity_id: ["light.bed_light"],
+    order: 8,
+    friendly_name: "Kitchen",
+  }),
+  getEntity("lock", "kitchen_door", "locked", {
+    friendly_name: "Kitchen Door",
+  }),
+  getEntity("cover", "kitchen_window", "open", {
+    friendly_name: "Kitchen Window",
+    supported_features: 11,
+  }),
+  getEntity("scene", "romantic_lights", "scening", {
+    entity_id: ["light.bed_light", "light.ceiling_lights"],
+    friendly_name: "Romantic lights",
+  }),
+  getEntity("device_tracker", "demo_paulus", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  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"],
+    unit_of_measurement: "°F",
+    friendly_name: "Ecobee",
+    supported_features: 1014,
+  }),
+  getEntity("input_number", "noise_allowance", 5, {
+    min: 0,
+    max: 10,
+    step: 1,
+    mode: "slider",
+    unit_of_measurement: "dB",
+    friendly_name: "Allowed Noise",
+    icon: "mdi:bell-ring",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Basic",
+    config: `
+- type: entities
+  entities:
+    - scene.romantic_lights
+    - device_tracker.demo_paulus
+    - cover.kitchen_window
+    - group.kitchen
+    - lock.kitchen_door
+    - light.bed_light
+    - light.non_existing
+    - climate.ecobee
+    - input_number.noise_allowance
+    `,
+  },
+  {
+    heading: "With title, toggle-able",
+    config: `
+- type: entities
+  entities:
+    - scene.romantic_lights
+    - device_tracker.demo_paulus
+    - cover.kitchen_window
+    - group.kitchen
+    - lock.kitchen_door
+    - light.bed_light
+    - climate.ecobee
+    - input_number.noise_allowance
+  title: Random group
+    `,
+  },
+  {
+    heading: "With title, toggle = false",
+    config: `
+- type: entities
+  entities:
+    - scene.romantic_lights
+    - device_tracker.demo_paulus
+    - cover.kitchen_window
+    - group.kitchen
+    - lock.kitchen_door
+    - light.bed_light
+    - climate.ecobee
+    - input_number.noise_allowance
+  title: Random group
+  show_header_toggle: false
+    `,
+  },
+  {
+    heading: "With title, can't toggle",
+    config: `
+- type: entities
+  entities:
+    - device_tracker.demo_paulus
+  title: Random group
+    `,
+  },
+  {
+    heading: "Custom name, secondary info, custom icon",
+    config: `
+- type: entities
+  entities:
+    - entity: scene.romantic_lights
+      name: ¯\\_(ツ)_/¯
+    - entity: device_tracker.demo_paulus
+      secondary_info: entity-id
+    - entity: cover.kitchen_window
+      secondary_info: last-changed
+    - entity: group.kitchen
+      icon: mdi:home-assistant
+    - lock.kitchen_door
+    - entity: light.bed_light
+      icon: mdi:alarm-light
+      name: Bed Light Custom Icon
+    - climate.ecobee
+    - input_number.noise_allowance
+  title: Random group
+  show_header_toggle: false
+    `,
+  },
+  {
+    heading: "Special rows",
+    config: `
+- type: entities
+  entities:
+    - type: call-service
+      icon: mdi:power
+      name: Bed light
+      action_name: Toggle light
+      service: light.toggle
+      service_data:
+        entity_id: light.bed_light
+    - type: section
+      label: Links
+    - type: weblink
+      url: http://google.com/
+      icon: mdi:google
+      name: Google
+    - type: divider
+    - type: divider
+      style:
+        height: 30px
+        margin: 4px 0
+        background: center / contain url("/images/divider.png") no-repeat
+    `,
+  },
+];
+
+class DemoEntities extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-entities-card", DemoEntities);

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

@@ -0,0 +1,99 @@
+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",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: `
+- type: entity-button
+  entity: light.bed_light
+    `,
+  },
+  {
+    heading: "With Name",
+    config: `
+- type: entity-button
+  name: Bedroom
+  entity: light.bed_light
+    `,
+  },
+  {
+    heading: "With Icon",
+    config: `
+- type: entity-button
+  entity: light.bed_light
+  icon: mdi:hotel
+    `,
+  },
+  {
+    heading: "Without State",
+    config: `
+- type: entity-button
+  entity: light.bed_light
+  show_state: false
+    `,
+  },
+  {
+    heading: "Custom Tap Action (toggle)",
+    config: `
+- type: entity-button
+  entity: light.bed_light
+  tap_action: toggle
+    `,
+  },
+  {
+    heading: "Running Service",
+    config: `
+- type: entity-button
+  entity: light.bed_light
+  service: light.toggle
+    `,
+  },
+  {
+    heading: "Invalid Entity",
+    config: `
+- type: entity-button
+  entity: sensor.invalid_entity
+    `,
+  },
+];
+
+class DemoEntityButtonEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+      hass: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-entity-button-card", DemoEntityButtonEntity);

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

@@ -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,
+      },
+    };
+  }
+
+  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.js

@@ -0,0 +1,83 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: `
+- type: gauge
+  entity: sensor.brightness
+    `,
+  },
+  {
+    heading: "With title",
+    config: `
+- type: gauge
+  title: Humidity
+  entity: sensor.outside_humidity
+    `,
+  },
+  {
+    heading: "Custom Unit of Measurement",
+    config: `
+- type: gauge
+  entity: sensor.outside_temperature
+  unit_of_measurement: C
+    `,
+  },
+  {
+    heading: "Setting Severity Levels",
+    config: `
+- type: gauge
+  entity: sensor.brightness
+  severity:
+    red: 32
+    green: 0
+    yellow: 23
+    `,
+  },
+  {
+    heading: "Setting Min and Max Values",
+    config: `
+- type: gauge
+  entity: sensor.brightness
+  min: 0
+  max: 38
+    `,
+  },
+  {
+    heading: "Invalid Entity",
+    config: `
+- type: gauge
+  entity: sensor.invalid_entity
+    `,
+  },
+  {
+    heading: "Non-Numeric Value",
+    config: `
+- type: gauge
+  entity: plant.bonsai
+    `,
+  },
+];
+
+class DemoGaugeEntity 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-gauge-card", DemoGaugeEntity);

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

@@ -0,0 +1,240 @@
+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", "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 = [
+  {
+    heading: "Basic example",
+    config: `
+- type: glance
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "With title",
+    config: `
+- type: glance
+  title: This is glance
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "Custom column width",
+    config: `
+- type: glance
+  column_width: calc(100% / 7)
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "No name",
+    config: `
+- type: glance
+  show_name: false
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "No state",
+    config: `
+- type: glance
+  show_state: false
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "No name and no state",
+    config: `
+- type: glance
+  show_name: false
+  show_state: false
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "Custom name, custom icon",
+    config: `
+- type: glance
+  entities:
+    - entity: device_tracker.demo_paulus
+      name: ¯\\_(ツ)_/¯
+      icon: mdi:home-assistant
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - entity: light.kitchen_lights
+      icon: mdi:alarm-light
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "Custom tap action",
+    config: `
+- type: glance
+  entities:
+    - entity: lock.kitchen_door
+      tap_action: toggle
+    - entity: light.ceiling_lights
+      tap_action: call-service
+      service: light.turn_on
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    `,
+  },
+  {
+    heading: "Selectively hidden name",
+    config: `
+- type: glance
+  entities:
+    - device_tracker.demo_paulus
+    - entity: media_player.living_room
+      name:
+    - sun.sun
+    - entity: cover.kitchen_window
+      name:
+    - light.kitchen_lights
+    `,
+  },
+  {
+    heading: "Primary theme",
+    config: `
+- type: glance
+  theming: primary
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+];
+
+class DemoPicEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-glance-card", DemoPicEntity);

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

@@ -0,0 +1,57 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "Without title",
+    config: `
+- type: iframe
+  url: https://embed.windy.com/embed2.html
+    `,
+  },
+  {
+    heading: "With title",
+    config: `
+- type: iframe
+  url: https://embed.windy.com/embed2.html
+  title: Weather radar
+    `,
+  },
+  {
+    heading: "Height-Width 3:4",
+    config: `
+- type: iframe
+  url: https://embed.windy.com/embed2.html
+  aspect_ratio: 75%
+    `,
+  },
+  {
+    heading: "Height-Width 1:1",
+    config: `
+- type: iframe
+  url: https://embed.windy.com/embed2.html
+  aspect_ratio: 100%
+    `,
+  },
+];
+
+class DemoIframe 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-iframe-card", DemoIframe);

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

@@ -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,
+      },
+    };
+  }
+
+  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.js

@@ -0,0 +1,149 @@
+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", "not_home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("device_tracker", "demo_home_boy", "home", {
+    source_type: "gps",
+    latitude: 32.87334,
+    longitude: 117.22745,
+    gps_accuracy: 20,
+    battery: 53,
+    friendly_name: "Home Boy",
+  }),
+  getEntity("zone", "home", "zoning", {
+    latitude: 32.87354,
+    longitude: 117.22765,
+    radius: 100,
+    friendly_name: "Home",
+    icon: "mdi:home",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Without title",
+    config: `
+- type: map
+  entities:
+    - entity: device_tracker.demo_paulus
+    - device_tracker.demo_home_boy
+    - zone.home
+    `,
+  },
+  {
+    heading: "With title",
+    config: `
+- type: map
+  entities:
+    - entity: device_tracker.demo_paulus
+    - zone.home
+  title: Where is Paulus?
+    `,
+  },
+  {
+    heading: "Height-Width 1:2",
+    config: `
+- type: map
+  entities:
+    - entity: device_tracker.demo_paulus
+    - zone.home
+  aspect_ratio: 50%
+    `,
+  },
+  {
+    heading: "Default Zoom",
+    config: `
+- type: map
+  default_zoom: 12
+  entities:
+    - entity: device_tracker.demo_paulus
+    - zone.home
+    `,
+  },
+  {
+    heading: "Default Zoom too High",
+    config: `
+- type: map
+  default_zoom: 20
+  entities:
+    - entity: device_tracker.demo_paulus
+    - zone.home
+    `,
+  },
+  {
+    heading: "Single Marker",
+    config: `
+- type: map
+  entities:
+    - device_tracker.demo_paulus
+    `,
+  },
+  {
+    heading: "Single Marker Default Zoom",
+    config: `
+- type: map
+  default_zoom: 8
+  entities:
+    - device_tracker.demo_paulus
+    `,
+  },
+  {
+    heading: "No Entities",
+    config: `
+- type: map
+  entities:
+    - light.bed_light
+    `,
+  },
+  {
+    heading: "No Entities, Default Zoom",
+    config: `
+- type: map
+  default_zoom: 8
+  entities:
+    - light.bed_light
+    `,
+  },
+];
+
+class DemoMap extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+      hass: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-map-card", DemoMap);

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

@@ -0,0 +1,272 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "markdown-it demo",
+    config: `
+- type: markdown
+  content: >
+    # h1 Heading 8-)
+
+    ## h2 Heading
+
+    ### h3 Heading
+
+    #### h4 Heading
+
+    ##### h5 Heading
+
+    ###### h6 Heading
+
+
+    ## Horizontal Rules
+
+    ___
+
+    ---
+
+    ***
+
+
+    ## Typographic replacements
+
+    Enable typographer option to see result.
+
+    (c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+    test.. test... test..... test?..... test!....
+
+    !!!!!! ???? ,,  -- ---
+
+    "Smartypants, double quotes" and 'single quotes'
+
+
+    ## Emphasis
+
+    **This is bold text**
+
+    __This is bold text__
+
+    *This is italic text*
+
+    _This is italic text_
+
+    ~~Strikethrough~~
+
+
+    ## Blockquotes
+
+
+    > Blockquotes can also be nested...
+    >> ...by using additional greater-than signs right next to each other...
+    > > > ...or with spaces between arrows.
+
+
+    ## Lists
+
+    Unordered
+
+    + Create a list by starting a line with \`+\`, \`-\`, or \`*\`
+    + Sub-lists are made by indenting 2 spaces:
+      - Marker character change forces new list start:
+        * Ac tristique libero volutpat at
+        + Facilisis in pretium nisl aliquet
+        - Nulla volutpat aliquam velit
+    + Very easy!
+
+
+    Ordered
+
+    1. Lorem ipsum dolor sit amet
+    2. Consectetur adipiscing elit
+    3. Integer molestie lorem at massa
+
+
+    1. You can use sequential numbers...
+    1. ...or keep all the numbers as \`1.\`
+
+    Start numbering with offset:
+
+    57. foo
+    1. bar
+
+
+    ## Code
+
+    Inline \`code\`
+
+    Indented code
+
+        // Some comments
+        line 1 of code
+        line 2 of code
+        line 3 of code
+
+
+    Block code "fences"
+
+    \`\`\`
+    Sample text here...
+    \`\`\`
+
+    Syntax highlighting
+
+    \`\`\` js
+    var foo = function (bar) {
+      return bar++;
+    };
+
+    console.log(foo(5));
+    \`\`\`
+
+    ## Tables
+
+    | Option | Description |
+    | ------ | ----------- |
+    | data   | path to data files to supply the data that will be passed into templates. |
+    | engine | engine to be used for processing templates. Handlebars is the default. |
+    | ext    | extension to be used for dest files. |
+
+    Right aligned columns
+
+    | Option | Description |
+    | ------:| -----------:|
+    | data   | path to data files to supply the data that will be passed into templates. |
+    | engine | engine to be used for processing templates. Handlebars is the default. |
+    | ext    | extension to be used for dest files. |
+
+
+    ## Links
+
+    [link text](http://dev.nodeca.com)
+
+    [link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+    Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+    ## Images
+
+    ![Minion](https://octodex.github.com/images/minion.png)
+    ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+    Like links, Images also have a footnote style syntax
+
+    ![Alt text][id]
+
+    With a reference later in the document defining the URL location:
+
+    [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+
+    ## Plugins
+
+    The killer feature of \`markdown-it\` is very effective support of
+    [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+    ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+    > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+    >
+    > Shortcuts (emoticons): :-) :-( 8-) ;)
+
+    see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+    ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+    - 19^th^
+    - H~2~O
+
+
+    ### [<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+    ++Inserted text++
+
+
+    ### [<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+    ==Marked text==
+
+
+    ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+    Footnote 1 link[^first].
+
+    Footnote 2 link[^second].
+
+    Inline footnote^[Text of inline footnote] definition.
+
+    Duplicated footnote reference[^second].
+
+    [^first]: Footnote **can have markup**
+
+        and multiple paragraphs.
+
+    [^second]: Footnote text.
+
+
+    ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+    Term 1
+
+    :   Definition 1
+    with lazy continuation.
+
+    Term 2 with *inline markup*
+
+    :   Definition 2
+
+            { some code, part of Definition 2 }
+
+        Third paragraph of definition 2.
+
+    _Compact style:_
+
+    Term 1
+      ~ Definition 1
+
+    Term 2
+      ~ Definition 2a
+      ~ Definition 2b
+
+
+    ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+    This is HTML abbreviation example.
+
+    It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+    *[HTML]: Hyper Text Markup Language
+
+    ### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+    ::: warning
+    *here be dragons*
+    :::
+    `,
+  },
+];
+
+class DemoMarkdown 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-markdown-card", DemoMarkdown);

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

@@ -0,0 +1,105 @@
+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("media_player", "bedroom", "playing", {
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 32,
+  }),
+  getEntity("media_player", "family_room", "paused", {
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    supported_features: 16417,
+  }),
+  getEntity("media_player", "family_room_no_play", "paused", {
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 33,
+  }),
+  getEntity("media_player", "living_room", "playing", {
+    media_content_type: "tvshow",
+    media_title: "Chapter 1",
+    media_series_title: "House of Cards",
+    app_name: "Netflix",
+    supported_features: 1,
+  }),
+  getEntity("media_player", "lounge_room", "idle", {
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    supported_features: 1,
+  }),
+  getEntity("media_player", "theater", "off", {
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 33,
+  }),
+  getEntity("media_player", "android_cast", "playing", {
+    media_title: "Android Screen Casting",
+    app_name: "Screen Mirroring",
+    supported_features: 21437,
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Media Players",
+    config: `
+- type: entities
+  entities:
+    - entity: media_player.bedroom
+      name: Skip, no pause
+    - entity: media_player.family_room
+      name: Paused, music
+    - entity: media_player.family_room_no_play
+      name: Paused, no play
+    - entity: media_player.living_room
+      name: Pause, No skip, tvshow
+    - entity: media_player.android_cast
+      name: Screen casting
+    - entity: media_player.lounge_room
+      name: Chromcast Idle
+    - entity: media_player.theater
+      name: 'Player Off'
+    `,
+  },
+];
+
+class DemoHuiMediaPlayerRows extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+      hass: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-media-player-rows", DemoHuiMediaPlayerRows);

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

@@ -0,0 +1,103 @@
+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",
+  }),
+  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 = [
+  {
+    heading: "Card with few elements",
+    config: `
+- type: picture-elements
+  image: /images/floorplan.png
+  elements:
+    - type: service-button
+      title: Lights Off
+      style:
+        top: 97%
+        left: 90%
+        padding: 0px
+      service: light.turn_off
+      service_data:
+        entity_id: group.all_lights
+    - type: icon
+      icon: mdi:cctv
+      entity: camera.demo_camera
+      style:
+        top: 12%
+        left: 6%
+        transform: rotate(-60deg) scaleX(-1)
+        --iron-icon-height: 30px
+        --iron-icon-width: 30px
+        --iron-icon-stroke-color: black
+        --iron-icon-fill-color: rgba(50, 50, 50, .75)
+    - type: image
+      entity: light.bed_light
+      tap_action: toggle
+      image: /images/light_bulb_off.png
+      state_image:
+        'on': /images/light_bulb_on.png
+      state_filter:
+        'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)
+        'off': brightness(80%) saturate(0.8)
+      style:
+        top: 35%
+        left: 65%
+        width: 7%
+        padding: 50px 50px 100px 50px
+    - type: state-icon
+      entity: binary_sensor.movement_backyard
+      style:
+        top: 8%
+        left: 35%
+    `,
+  },
+];
+
+class DemoPicElements extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-picture-elements-card", DemoPicElements);

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

@@ -0,0 +1,85 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "State on",
+    config: `
+- type: picture-entity
+  image: /images/kitchen.png
+  entity: light.kitchen_lights
+    `,
+  },
+  {
+    heading: "State off",
+    config: `
+- type: picture-entity
+  image: /images/bed.png
+  entity: light.bed_light
+    `,
+  },
+  {
+    heading: "Entity unavailable",
+    config: `
+- type: picture-entity
+  image: /images/living_room.png
+  entity: light.non_existing
+    `,
+  },
+  {
+    heading: "Camera entity",
+    config: `
+- type: picture-entity
+  entity: camera.demo_camera
+    `,
+  },
+  {
+    heading: "Hidden name",
+    config: `
+- type: picture-entity
+  image: /images/kitchen.png
+  entity: light.kitchen_lights
+  show_name: false
+    `,
+  },
+  {
+    heading: "Hidden state",
+    config: `
+- type: picture-entity
+  image: /images/kitchen.png
+  entity: light.kitchen_lights
+  show_state: false
+    `,
+  },
+  {
+    heading: "Both hidden",
+    config: `
+- type: picture-entity
+  image: /images/kitchen.png
+  entity: light.kitchen_lights
+  show_name: false
+  show_state: false
+    `,
+  },
+];
+
+class DemoPicEntity 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-picture-entity-card", DemoPicEntity);

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

@@ -0,0 +1,105 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "Title, dialog, toggle",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  title: Living room
+  entities:
+    - switch.decorative_lights
+    - light.ceiling_lights
+    - binary_sensor.movement_backyard
+    - binary_sensor.basement_floor_wet
+    `,
+  },
+  {
+    heading: "Title, dialog, no toggle",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  title: Living room
+  entities:
+    - binary_sensor.movement_backyard
+    - binary_sensor.basement_floor_wet
+    `,
+  },
+  {
+    heading: "Title, no dialog, toggle",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  title: Living room
+  entities:
+    - switch.decorative_lights
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "No title, dialog, toggle",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  entities:
+    - switch.decorative_lights
+    - light.ceiling_lights
+    - binary_sensor.movement_backyard
+    - binary_sensor.basement_floor_wet
+    `,
+  },
+  {
+    heading: "No title, dialog, no toggle",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  entities:
+    - binary_sensor.movement_backyard
+    - binary_sensor.basement_floor_wet
+    `,
+  },
+  {
+    heading: "No title, no dialog, toggle",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  entities:
+    - switch.decorative_lights
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "Custom icon",
+    config: `
+- type: picture-glance
+  image: /images/living_room.png
+  title: Living room
+  entities:
+    - entity: switch.decorative_lights
+      icon: mdi:power
+    - binary_sensor.basement_floor_wet
+    `,
+  },
+];
+
+class DemoPicGlance 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-picture-glance-card", DemoPicGlance);

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

@@ -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,
+      },
+    };
+  }
+
+  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.js

@@ -0,0 +1,114 @@
+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", "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 = [
+  {
+    heading: "Vertical Stack",
+    config: `
+- type: vertical-stack
+  cards:
+    - type: picture-entity
+      image: /images/kitchen.png
+      entity: light.kitchen_lights
+    - type: glance
+      entities:
+        - device_tracker.demo_anne_therese
+        - device_tracker.demo_home_boy
+        - device_tracker.demo_paulus
+    `,
+  },
+  {
+    heading: "Horizontal Stack",
+    config: `
+- type: horizontal-stack
+  cards:
+    - type: picture-entity
+      image: /images/kitchen.png
+      entity: light.kitchen_lights
+    - type: glance
+      entities:
+        - device_tracker.demo_anne_therese
+        - device_tracker.demo_home_boy
+        - device_tracker.demo_paulus
+    `,
+  },
+  {
+    heading: "Combination of both",
+    config: `
+- type: vertical-stack
+  cards:
+    - type: horizontal-stack
+      cards:
+        - type: picture-entity
+          image: /images/kitchen.png
+          entity: light.kitchen_lights
+        - type: glance
+          entities:
+            - device_tracker.demo_anne_therese
+            - device_tracker.demo_home_boy
+            - device_tracker.demo_paulus
+    - type: picture-entity
+      image: /images/bed.png
+      entity: light.bed_light
+    `,
+  },
+];
+
+class DemoStack extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-stack-card", DemoStack);

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

@@ -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,
+      },
+    };
+  }
+
+  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.js

@@ -0,0 +1,59 @@
+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";
+import "../../../src/components/ha-card";
+
+import getEntity from "../data/entity";
+import provideHass from "../data/provide_hass";
+
+import "../components/demo-more-infos";
+
+/* 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;
+
+const ENTITIES = [
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Basic Light",
+  }),
+  getEntity("light", "kitchen_light", "on", {
+    friendly_name: "Brightness Light",
+    brightness: 80,
+    supported_features: SUPPORT_BRIGHTNESS,
+  }),
+];
+
+class DemoMoreInfoLight extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-more-infos
+        hass="[[hass]]"
+        entities="[[_entities]]"
+      ></demo-more-infos>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _entities: {
+        type: Array,
+        value: ENTITIES.map((ent) => ent.entityId),
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-more-info-light", DemoMoreInfoLight);

gallery/src/entrypoint.js

@@ -0,0 +1,12 @@
+import "@polymer/paper-styles/typography";
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
+
+import "../../src/resources/hass-icons";
+import "../../src/resources/ha-style";
+import "../../src/resources/roboto";
+import "../../src/components/ha-iconset-svg";
+
+import "./ha-gallery";
+
+document.body.appendChild(document.createElement("ha-gallery"));

gallery/src/ha-gallery.js

@@ -0,0 +1,204 @@
+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";
+
+const DEMOS = require.context("./demos", true, /^(.*\.(js$))[^.]*$/im);
+
+const fixPath = (path) => path.substr(2, path.length - 5);
+
+class HaGallery extends PolymerElement {
+  static get template() {
+    return html`
+      <style include="iron-positioning ha-style">
+      :host {
+        -ms-user-select: initial;
+        -webkit-user-select: initial;
+        -moz-user-select: initial;
+      }
+      app-header-layout {
+        min-height: 100vh;
+      }
+      paper-icon-button.invisible {
+        visibility: hidden;
+      }
+
+      .pickers {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: start;
+      }
+
+      .pickers paper-card {
+        width: 400px;
+        display: block;
+        margin: 16px 8px;
+      }
+
+      .pickers paper-card:last-child {
+        margin-bottom: 16px;
+      }
+
+      .intro {
+        margin: -1em 0;
+      }
+
+      p a {
+        color: var(--primary-color);
+      }
+
+      a paper-item {
+        color: var(--primary-text-color);
+        text-decoration: none;
+      }
+
+      </style>
+
+      <app-header-layout>
+        <app-header slot="header" fixed>
+          <app-toolbar>
+            <paper-icon-button
+              icon="hass:arrow-left"
+              on-click="_backTapped"
+              class$='[[_computeHeaderButtonClass(_demo)]]'
+            ></paper-icon-button>
+            <div main-title>[[_withDefault(_demo, "Home Assistant Gallery")]]</div>
+          </app-toolbar>
+        </app-header>
+
+        <div class='content'>
+          <div id='demo'></div>
+          <template is='dom-if' if='[[!_demo]]'>
+            <div class='pickers'>
+              <paper-card heading="Lovelace card demos">
+                <div class='card-content intro'>
+                  <p>
+                    Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
+                  </p>
+
+                  <p>
+                    This gallery helps our developers and designers to see all the different states that each card can be in.
+                  </p>
+
+                  <p>
+                    Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>.
+                  </p>
+                </div>
+                <template is='dom-repeat' items='[[_lovelaceDemos]]'>
+                  <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>
+
+              <paper-card heading="More Info demos">
+                <div class='card-content intro'>
+                  <p>
+                    More info screens show up when an entity is clicked.
+                  </p>
+                </div>
+                <template is='dom-repeat' items='[[_moreInfoDemos]]'>
+                  <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>
+      </app-header-layout>
+      <notification-manager id='notifications'></notification-manager>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _demo: {
+        type: String,
+        value: document.location.hash.substr(1),
+        observer: "_demoChanged",
+      },
+      _demos: {
+        type: Array,
+        value: DEMOS.keys().map(fixPath),
+      },
+      _lovelaceDemos: {
+        type: Array,
+        computed: "_computeLovelace(_demos)",
+      },
+      _moreInfoDemos: {
+        type: Array,
+        computed: "_computeMoreInfos(_demos)",
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+
+    this.addEventListener("show-notification", (ev) =>
+      this.$.notifications.showDialog({ message: ev.detail.message })
+    );
+
+    this.addEventListener("hass-more-info", (ev) => {
+      if (ev.detail.entityId) {
+        this.$.notifications.showDialog({
+          message: `Showing more info for ${ev.detail.entityId}`,
+        });
+      }
+    });
+
+    window.addEventListener("hashchange", () => {
+      this._demo = document.location.hash.substr(1);
+    });
+  }
+
+  _withDefault(value, def) {
+    return value || def;
+  }
+
+  _demoChanged(demo) {
+    const root = this.$.demo;
+
+    while (root.lastChild) root.removeChild(root.lastChild);
+
+    if (demo) {
+      DEMOS(`./${demo}.js`);
+      const el = document.createElement(demo);
+      root.appendChild(el);
+    }
+  }
+
+  _computeHeaderButtonClass(demo) {
+    return demo ? "" : "invisible";
+  }
+
+  _backTapped() {
+    document.location.hash = "";
+  }
+
+  _computeLovelace(demos) {
+    return demos.filter((demo) => demo.includes("hui"));
+  }
+
+  _computeMoreInfos(demos) {
+    return demos.filter((demo) => demo.includes("more-info"));
+  }
+}
+
+customElements.define("ha-gallery", HaGallery);

gallery/webpack.config.js

@@ -0,0 +1,75 @@
+const path = require("path");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { babelLoaderConfig } = require("../config/babel.js");
+
+const isProd = process.env.NODE_ENV === "production";
+const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
+const buildPath = path.resolve(__dirname, "dist");
+const publicPath = isProd ? "./" : "http://localhost:8080/";
+
+module.exports = {
+  mode: isProd ? "production" : "development",
+  // Disabled in prod while we make Home Assistant able to serve the right files.
+  // Was source-map
+  devtool: isProd ? "none" : "inline-source-map",
+  entry: "./src/entrypoint.js",
+  module: {
+    rules: [
+      babelLoaderConfig({ latestBuild: true }),
+      {
+        test: /\.css$/,
+        use: "raw-loader",
+      },
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: "html-loader",
+          options: {
+            exportAsEs6Default: true,
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      "public",
+      { from: "../public", to: "static" },
+      { from: "../build-translations/output", to: "static/translations" },
+      {
+        from: "../node_modules/leaflet/dist/leaflet.css",
+        to: "static/images/leaflet/",
+      },
+      {
+        from: "../node_modules/@polymer/font-roboto-local/fonts",
+        to: "static/fonts",
+      },
+      {
+        from: "../node_modules/leaflet/dist/images",
+        to: "static/images/leaflet/",
+      },
+    ]),
+    isProd &&
+      new UglifyJsPlugin({
+        extractComments: true,
+        sourceMap: true,
+        uglifyOptions: {
+          // Disabling because it broke output
+          mangle: false,
+        },
+      }),
+  ].filter(Boolean),
+  resolve: {
+    extensions: [".ts", ".js", ".json"],
+  },
+  output: {
+    filename: "[name].js",
+    chunkFilename: chunkFilename,
+    path: buildPath,
+    publicPath,
+  },
+  devServer: {
+    contentBase: "./public",
+  },
+};

gulp/.eslintrc

@@ -1,5 +1,7 @@
 {
   "rules": {
-   "no-restricted-syntax": 0
+    "import/no-extraneous-dependencies": 0,
+    "no-restricted-syntax": 0,
+    "no-console": 0
   }
 }

gulp/common/html.js

@@ -1,58 +0,0 @@
-const {
-  Analyzer,
-  FSUrlLoader
-} = require('polymer-analyzer');
-
-const Bundler = require('polymer-bundler').Bundler;
-const parse5 = require('parse5');
-
-const { streamFromString } = require('./stream');
-
-// Bundle an HTML file and convert it to a stream
-async function bundledStreamFromHTML(path, bundlerOptions = {}) {
-  const bundler = new Bundler(bundlerOptions);
-  const manifest = await bundler.generateManifest([path]);
-  const result = await bundler.bundle(manifest);
-  return streamFromString(
-    path, parse5.serialize(result.documents.get(path).ast));
-}
-
-async function analyze(root, paths) {
-  const analyzer = new Analyzer({
-    urlLoader: new FSUrlLoader(root),
-  });
-  return analyzer.analyze(paths);
-}
-
-async function findDependencies(root, element) {
-  const deps = new Set();
-
-  async function resolve(files) {
-    const analysis = await analyze(root, files);
-    const toResolve = [];
-
-    for (const file of files) {
-      const doc = analysis.getDocument(file);
-
-      for (const importEl of doc.getFeatures({ kind: 'import' })) {
-        const url = importEl.url;
-        if (!deps.has(url)) {
-          deps.add(url);
-          toResolve.push(url);
-        }
-      }
-    }
-
-    if (toResolve.length > 0) {
-      return resolve(toResolve);
-    }
-  }
-
-  await resolve([element]);
-  return deps;
-}
-
-module.exports = {
-  bundledStreamFromHTML,
-  findDependencies,
-};

gulp/common/strategy.js

@@ -1,33 +0,0 @@
-/**
- * Polymer build strategy to strip imports, even if explictely imported
- */
-module.exports.stripImportsStrategy = function (urls) {
-  return (bundles) => {
-    for (const bundle of bundles) {
-      for (const url of urls) {
-        bundle.stripImports.add(url);
-      }
-    }
-    return bundles;
-  };
-};
-
-/**
- * Polymer build strategy to strip everything but the entrypoints
- * for bundles that match a specific entry point.
- */
-module.exports.stripAllButEntrypointStrategy = function (entryPoint) {
-  return (bundles) => {
-    for (const bundle of bundles) {
-      if (bundle.entrypoints.size === 1 &&
-          bundle.entrypoints.has(entryPoint)) {
-        for (const file of bundle.files) {
-          if (!bundle.entrypoints.has(file)) {
-            bundle.stripImports.add(file);
-          }
-        }
-      }
-    }
-    return bundles;
-  };
-};

gulp/common/stream.js

@@ -1,21 +0,0 @@
-const stream = require('stream');
-
-const gutil = require('gulp-util');
-
-function streamFromString(filename, string) {
-  var src = stream.Readable({ objectMode: true });
-  src._read = function () {
-    this.push(new gutil.File({
-      cwd: '',
-      base: '',
-      path: filename,
-      contents: new Buffer(string)
-    }));
-    this.push(null);
-  };
-  return src;
-}
-
-module.exports = {
-  streamFromString,
-};

gulp/common/transform.js

@@ -1,27 +0,0 @@
-const gulpif = require('gulp-if');
-
-const babel = require('gulp-babel');
-const uglify = require('gulp-uglify');
-const { gulp: cssSlam } = require('css-slam');
-const htmlMinifier = require('gulp-html-minifier');
-const { HtmlSplitter } = require('polymer-build');
-
-module.exports.minifyStream = function (stream) {
-  const sourcesHtmlSplitter = new HtmlSplitter();
-  return stream
-    .pipe(sourcesHtmlSplitter.split())
-    .pipe(gulpif(/[^app]\.js$/, babel({
-      sourceType: 'script',
-      presets: [
-        ['es2015', { modules: false }]
-      ]
-    })))
-    .pipe(gulpif(/\.js$/, uglify({ sourceMap: false })))
-    .pipe(gulpif(/\.css$/, cssSlam()))
-    .pipe(gulpif(/\.html$/, cssSlam()))
-    .pipe(gulpif(/\.html$/, htmlMinifier({
-      collapseWhitespace: true,
-      removeComments: true
-    })))
-    .pipe(sourcesHtmlSplitter.rejoin());
-};

gulp/config.js

@@ -1,7 +1,8 @@
-var path = require('path');
+var path = require("path");
 
 module.exports = {
-  static_dir: path.resolve(__dirname, '../..'),
-  polymer_dir: path.resolve(__dirname, '..'),
-  build_dir: path.resolve(__dirname, '../build'),
+  polymer_dir: path.resolve(__dirname, ".."),
+  build_dir: path.resolve(__dirname, "../build"),
+  output: path.resolve(__dirname, "../hass_frontend"),
+  output_es5: path.resolve(__dirname, "../hass_frontend_es5"),
 };

gulp/service-worker.js.tmpl

@@ -1,77 +0,0 @@
-self.addEventListener("push", function(event) {
-  var data;
-  if (event.data) {
-    data = event.data.json();
-    event.waitUntil(
-      self.registration.showNotification(data.title, data)
-      .then(function(notification){
-        firePushCallback({
-          type: "received",
-          tag: data.tag,
-          data: data.data
-        }, data.data.jwt);
-      })
-    );
-  }
-});
-self.addEventListener('notificationclick', function(event) {
-  var url;
-
-  notificationEventCallback('clicked', event);
-
-  event.notification.close();
-
-  if (!event.notification.data || !event.notification.data.url) {
-    return;
-  }
-
-  url = event.notification.data.url;
-
-  if (!url) return;
-
-  event.waitUntil(
-    clients.matchAll({
-      type: 'window',
-    })
-    .then(function (windowClients) {
-      var i;
-      var client;
-      for (i = 0; i < windowClients.length; i++) {
-        client = windowClients[i];
-        if (client.url === url && 'focus' in client) {
-            return client.focus();
-        }
-      }
-      if (clients.openWindow) {
-        return clients.openWindow(url);
-      }
-      return undefined;
-    })
-  );
-});
-self.addEventListener('notificationclose', function(event) {
-  notificationEventCallback('closed', event);
-});
-
-function notificationEventCallback(event_type, event){
-  firePushCallback({
-    action: event.action,
-    data: event.notification.data,
-    tag: event.notification.tag,
-    type: event_type
-  }, event.notification.data.jwt);
-}
-function firePushCallback(payload, jwt){
-  // Don't send the JWT in the payload.data
-  delete payload.data.jwt;
-  // If payload.data is empty then just remove the entire payload.data object.
-  if (Object.keys(payload.data).length === 0 && payload.data.constructor === Object) {
-    delete payload.data;
-  }
-  fetch('/api/notify.html5/callback', {
-    method: 'POST',
-    headers: new Headers({'Content-Type': 'application/json',
-                          'Authorization': 'Bearer '+jwt}),
-    body: JSON.stringify(payload)
-  });
-}

gulp/tasks/build.js

@@ -1,58 +0,0 @@
-const gulp = require('gulp');
-const filter = require('gulp-filter');
-const { PolymerProject, } = require('polymer-build');
-const {
-  composeStrategies,
-  generateShellMergeStrategy,
-} = require('polymer-bundler');
-const mergeStream = require('merge-stream');
-const rename = require('gulp-rename');
-
-const polymerConfig = require('../../polymer');
-
-const minifyStream = require('../common/transform').minifyStream;
-const {
-  stripImportsStrategy,
-  stripAllButEntrypointStrategy
-} = require('../common/strategy');
-
-function renamePanel(path) {
-  // Rename panels to be panels/* and not their subdir
-  if (path.basename.substr(0, 9) === 'ha-panel-' && path.extname === '.html') {
-    path.dirname = 'panels/';
-  }
-
-  // Rename frontend
-  if (path.dirname === 'src' && path.basename === 'home-assistant' &&
-      path.extname === '.html') {
-    path.dirname = '';
-    path.basename = 'frontend';
-  }
-}
-
-gulp.task('build', ['ru_all', 'build-translations'], () => {
-  const strategy = composeStrategies([
-    generateShellMergeStrategy(polymerConfig.shell),
-    stripImportsStrategy([
-      'bower_components/font-roboto/roboto.html',
-      'bower_components/paper-styles/color.html',
-    ]),
-    stripAllButEntrypointStrategy('panels/hassio/ha-panel-hassio.html')
-  ]);
-  const project = new PolymerProject(polymerConfig);
-
-  return mergeStream(minifyStream(project.sources()),
-              minifyStream(project.dependencies()))
-    .pipe(project.bundler({
-      strategy,
-      strip: true,
-      sourcemaps: false,
-      stripComments: true,
-      inlineScripts: true,
-      inlineCss: true,
-      implicitStrip: true,
-    }))
-    .pipe(rename(renamePanel))
-    .pipe(filter(['**', '!src/entrypoint.html']))
-    .pipe(gulp.dest('build/'));
-});

gulp/tasks/clean.js

@@ -1,6 +0,0 @@
-const del = require('del');
-const gulp = require('gulp');
-
-gulp.task('clean', () => {
-  return del(['build', 'build-temp']);
-});

gulp/tasks/default.js

@@ -1,9 +0,0 @@
-const gulp = require('gulp');
-const runSequence = require('run-sequence');
-
-gulp.task('default', () => {
-  return runSequence.use(gulp)(
-    'clean',
-    'build'
-  );
-});

gulp/tasks/gen-icons.js

@@ -0,0 +1,114 @@
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs");
+const config = require("../config");
+
+const ICON_PACKAGE_PATH = path.resolve(
+  __dirname,
+  "../../node_modules/@mdi/svg/"
+);
+const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
+const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
+const OUTPUT_DIR = path.resolve(__dirname, "../../build");
+const MDI_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "mdi.html");
+const HASS_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "hass-icons.html");
+
+const BUILT_IN_PANEL_ICONS = [
+  "calendar", // Calendar
+  "settings", // Config
+  "home-assistant", // Hass.io
+  "poll-box", // History panel
+  "format-list-bulleted-type", // Logbook
+  "mailbox", // Mailbox
+  "account-location", // Map
+  "cart", // Shopping List
+];
+
+// Given an icon name, load the SVG file
+function loadIcon(name) {
+  const iconPath = path.resolve(ICON_PATH, `${name}.svg`);
+  try {
+    return fs.readFileSync(iconPath, "utf-8");
+  } catch (err) {
+    return null;
+  }
+}
+
+// Given an SVG file, convert it to an iron-iconset-svg definition
+function transformXMLtoPolymer(name, xml) {
+  const start = xml.indexOf("><path") + 1;
+  const end = xml.length - start - 6;
+  const path = xml.substr(start, end);
+  return `<g id="${name}">${path}</g>`;
+}
+
+// Given an iconset name and icon names, generate a polymer iconset
+function generateIconset(name, iconNames) {
+  const iconDefs = iconNames
+    .map((name) => {
+      const iconDef = loadIcon(name);
+      if (!iconDef) {
+        throw new Error(`Unknown icon referenced: ${name}`);
+      }
+      return transformXMLtoPolymer(name, iconDef);
+    })
+    .join("");
+  return `<ha-iconset-svg name="${name}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
+}
+
+// Generate the full MDI iconset
+function genMDIIcons() {
+  const meta = JSON.parse(
+    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
+  );
+  const iconNames = meta.map((iconInfo) => iconInfo.name);
+  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
+  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
+}
+
+// Helper function to map recursively over files in a folder and it's subfolders
+function mapFiles(startPath, filter, mapFunc) {
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      mapFiles(filename, filter, mapFunc);
+    } else if (filename.indexOf(filter) >= 0) {
+      mapFunc(filename);
+    }
+  }
+}
+
+// Find all icons used by the project.
+function findIcons(path, iconsetName) {
+  const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");
+  const icons = new Set();
+  function processFile(filename) {
+    const content = fs.readFileSync(filename);
+    let match;
+    // eslint-disable-next-line
+    while ((match = iconRegex.exec(content))) {
+      // strip off "hass:" and add to set
+      icons.add(match[0].substr(iconsetName.length + 1));
+    }
+  }
+  mapFiles(path, ".js", processFile);
+  mapFiles(path, ".ts", processFile);
+  return Array.from(icons);
+}
+
+function genHassIcons() {
+  const iconNames = findIcons("./src", "hass").concat(BUILT_IN_PANEL_ICONS);
+  fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
+  fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset("hass", iconNames));
+}
+
+gulp.task("gen-icons-mdi", () => genMDIIcons());
+gulp.task("gen-icons-hass", () => genHassIcons());
+gulp.task("gen-icons", ["gen-icons-hass", "gen-icons-mdi"], () => {});
+
+module.exports = {
+  findIcons,
+  generateIconset,
+};

gulp/tasks/gen-service-worker.js

@@ -1,117 +0,0 @@
-/*
-Generate a caching service worker for HA
-
-Will be called as part of build_frontend.
-
-Expects home-assistant-polymer repo as submodule of HA repo.
-Creates a caching service worker based on the CURRENT content of HA repo.
-Output service worker to build/service_worker.js
-
-TODO:
- - Use gulp streams
- - Fix minifying the stream
-*/
-var gulp = require('gulp');
-var crypto = require('crypto');
-var file = require('gulp-file');
-var fs = require('fs');
-var path = require('path');
-var swPrecache = require('sw-precache');
-var uglifyJS = require('uglify-js');
-
-const config = require('../config');
-
-const DEV = !!JSON.parse(process.env.BUILD_DEV || 'true');
-
-var rootDir = 'hass_frontend';
-var panelDir = path.resolve(rootDir, 'panels');
-
-var dynamicUrlToDependencies = {};
-
-var staticFingerprinted = [
-  'frontend.html',
-  'mdi.html',
-  'core.js',
-  'compatibility.js',
-  'translations/en.json',
-];
-
-// These panels will always be registered inside HA and thus can
-// be safely assumed to be able to preload.
-var panelsFingerprinted = [
-  'dev-event', 'dev-info', 'dev-service', 'dev-state', 'dev-template',
-  'dev-mqtt', 'kiosk',
-];
-
-function md5(filename) {
-  return crypto.createHash('md5')
-    .update(fs.readFileSync(filename)).digest('hex');
-}
-
-gulp.task('gen-service-worker', () => {
-  var genPromise = null;
-  if (DEV) {
-    var devBase = 'console.warn("Service worker caching disabled in development")';
-    genPromise = Promise.resolve(devBase);
-  } else {
-    // Create fingerprinted versions of our dependencies.
-    staticFingerprinted.forEach(fn => {
-      var parts = path.parse(fn);
-      var base = parts.dir.length > 0 ? parts.dir + '/' + parts.name : parts.name;
-      var hash = md5(rootDir + '/' + base + parts.ext);
-      var url = '/static/' + base + '-' + hash + parts.ext;
-      var fpath = rootDir + '/' + base + parts.ext;
-      dynamicUrlToDependencies[url] = [fpath];
-    });
-
-    panelsFingerprinted.forEach(panel => {
-      var fpath = panelDir + '/ha-panel-' + panel + '.html';
-      var hash = md5(fpath);
-      var url = '/static/panels/ha-panel-' + panel + '-' + hash + '.html';
-      dynamicUrlToDependencies[url] = [fpath];
-    });
-    var fallbackList = '(?!(?:static|api|local|service_worker.js|manifest.json))';
-
-    var options = {
-      navigateFallback: '/',
-      navigateFallbackWhitelist: [RegExp('^(?:' + fallbackList + '.)*$')],
-      dynamicUrlToDependencies: dynamicUrlToDependencies,
-      staticFileGlobs: [
-        rootDir + '/icons/favicon.ico',
-        rootDir + '/icons/favicon-192x192.png',
-        rootDir + '/webcomponents-lite.min.js',
-        rootDir + '/fonts/roboto/Roboto-Light.ttf',
-        rootDir + '/fonts/roboto/Roboto-Medium.ttf',
-        rootDir + '/fonts/roboto/Roboto-Regular.ttf',
-        rootDir + '/fonts/roboto/Roboto-Bold.ttf',
-        rootDir + '/images/card_media_player_bg.png',
-      ],
-      runtimeCaching: [{
-        urlPattern: /\/static\/translations\//,
-        handler: 'cacheFirst',
-      }, {
-        urlPattern: RegExp('^[^/]*/' + fallbackList + '.'),
-        handler: 'fastest',
-      }],
-      stripPrefix: 'hass_frontend',
-      replacePrefix: 'static',
-      verbose: true,
-      // Allow our users to refresh to get latest version.
-      clientsClaim: true,
-    };
-
-    genPromise = swPrecache.generate(options);
-  }
-
-  var swHass = fs.readFileSync(path.resolve(__dirname, '../service-worker.js.tmpl'), 'UTF-8');
-
-  // Fix this
-  // if (!DEV) {
-  //   genPromise = genPromise.then(
-  //     swString => uglifyJS.minify(swString, { fromString: true }).code);
-  // }
-
-  return genPromise.then(swString => swString + '\n' + swHass)
-    .then(swString => file('service_worker.js', swString)
-      .pipe(gulp.dest(config.build_dir)));
-});

gulp/tasks/hassio-panel.js

@@ -1,47 +0,0 @@
-var gulp = require('gulp');
-const rename = require('gulp-rename');
-
-const {
-  stripImportsStrategy,
-} = require('../common/strategy');
-const minifyStream = require('../common/transform').minifyStream;
-const {
-  bundledStreamFromHTML,
-  findDependencies
-} = require('../common/html');
-
-const { polymer_dir } = require('../config');
-
-const DEPS_TO_STRIP = [
-  'bower_components/font-roboto/roboto.html',
-  'bower_components/paper-styles/color.html',
-  'bower_components/iron-meta/iron-meta.html',
-];
-const DEPS_TO_STRIP_RECURSIVELY = [
-  'bower_components/polymer/polymer.html',
-];
-
-gulp.task(
-  'hassio-panel',
-  async () => {
-    const toStrip = [...DEPS_TO_STRIP];
-
-    for (let dep of DEPS_TO_STRIP_RECURSIVELY) {
-      toStrip.push(dep);
-      const deps = await findDependencies(polymer_dir, dep);
-      for (const importUrl of deps) {
-        toStrip.push(importUrl);
-      }
-    }
-
-    const stream = await bundledStreamFromHTML(
-      'panels/hassio/hassio-main.html', {
-        strategy: stripImportsStrategy(toStrip)
-      }
-    );
-
-    return minifyStream(stream)
-        .pipe(rename('hassio-main.html'))
-        .pipe(gulp.dest('build-temp/'));
-  }
-);

gulp/tasks/rollup.js

@@ -1,30 +0,0 @@
-const gulp = require('gulp');
-const rollupEach = require('gulp-rollup-each');
-const rollupConfig = require('../../rollup.config');
-
-gulp.task('run_rollup', () => {
-  return gulp.src([
-    'js/core.js',
-    'js/compatibility.js',
-    'js/automation-editor/automation-editor.js',
-    'js/script-editor/script-editor.js',
-    'demo_data/demo_data.js',
-  ])
-  .pipe(rollupEach(rollupConfig, rollupConfig))
-  .pipe(gulp.dest('build-temp'));
-});
-
-gulp.task('ru_all', ['run_rollup'], () => {
-  gulp.src([
-    'build-temp/core.js',
-    'build-temp/compatibility.js',
-  ])
-  .pipe(gulp.dest('build/'));
-});
-
-gulp.task('watch_ru_all', ['ru_all'], () => {
-  gulp.watch([
-    'js/**/*.js',
-    'demo_data/**/*.js'
-  ], ['ru_all']);
-});

gulp/tasks/translations.js

@@ -1,110 +1,297 @@
-const path = require('path');
-const gulp = require('gulp');
-const foreach = require('gulp-foreach');
-const hash = require('gulp-hash');
-const insert = require('gulp-insert');
-const merge = require('gulp-merge-json');
-const minify = require('gulp-jsonminify');
-const rename = require('gulp-rename');
-const transform = require('gulp-json-transform');
+const path = require("path");
+const gulp = require("gulp");
+const foreach = require("gulp-foreach");
+const hash = require("gulp-hash");
+const insert = require("gulp-insert");
+const merge = require("gulp-merge-json");
+const minify = require("gulp-jsonminify");
+const rename = require("gulp-rename");
+const transform = require("gulp-json-transform");
 
-const inDir = 'translations'
-const outDir = 'build/translations';
+const inDir = "translations";
+const workDir = "build-translations";
+const fullDir = workDir + "/full";
+const coreDir = workDir + "/core";
+const outDir = workDir + "/output";
+
+// Panel translations which should be split from the core translations. These
+// should mirror the fragment definitions in polymer.json, so that we load
+// additional resources at equivalent points.
+const TRANSLATION_FRAGMENTS = [
+  "config",
+  "history",
+  "logbook",
+  "mailbox",
+  "profile",
+  "shopping-list",
+  "page-authorize",
+  "page-onboarding",
+];
 
 const tasks = [];
 
-function recursive_flatten (prefix, data) {
-  var output = {};
-  Object.keys(data).forEach(function (key) {
-    if (typeof(data[key]) === 'object') {
-      output = Object.assign({}, output, recursive_flatten(key + '.', data[key]));
+function recursiveFlatten(prefix, data) {
+  let output = {};
+  Object.keys(data).forEach(function(key) {
+    if (typeof data[key] === "object") {
+      output = Object.assign(
+        {},
+        output,
+        recursiveFlatten(prefix + key + ".", data[key])
+      );
     } else {
       output[prefix + key] = data[key];
     }
   });
-  return output
+  return output;
 }
 
-function flatten (data) {
-  return recursive_flatten('', data);
+function flatten(data) {
+  return recursiveFlatten("", data);
 }
 
-var taskName = 'build-translation-native-names';
-gulp.task(taskName, function() {
-  return gulp.src(inDir + '/*.json')
-    .pipe(transform(function(data, file) {
-      // Look up the native name for each language and generate a json
-      // object with all available languages and native names
-      const lang = path.basename(file.relative, '.json');
-      return {[lang]: {nativeName: data.language[lang]}};
-    }))
-    .pipe(merge({
-      fileName: 'translationNativeNames.json',
-    }))
-    .pipe(gulp.dest('build-temp'));
-});
-tasks.push(taskName);
-
-var taskName = 'build-merged-translations';
-gulp.task(taskName, function () {
-  return gulp.src(inDir + '/*.json')
-    .pipe(foreach(function(stream, file) {
-      // For each language generate a merged json file. It begins with en.json as
-      // a failsafe for untranslated strings, and merges all parent tags into one
-      // file for each specific subtag
-      const tr = path.basename(file.history[0], '.json');
-      const subtags = tr.split('-');
-      const src = [inDir + '/en.json']; // Start with en as a fallback for missing translations
-      for (i = 1; i <= subtags.length; i++) {
-        const lang = subtags.slice(0, i).join('-');
-        src.push(inDir + '/' + lang + '.json');
+function emptyFilter(data) {
+  const newData = {};
+  Object.keys(data).forEach((key) => {
+    if (data[key]) {
+      if (typeof data[key] === "object") {
+        newData[key] = emptyFilter(data[key]);
+      } else {
+        newData[key] = data[key];
       }
-      return gulp.src(src)
-        .pipe(merge({
-          fileName: tr + '.json',
-        }))
-        .pipe(transform(function(data, file) {
-          // Polymer.AppLocalizeBehavior requires flattened json
-          return flatten(data);
-        }))
-        .pipe(minify())
-        .pipe(gulp.dest(outDir));
-    }));
-});
-tasks.push(taskName);
+    }
+  });
+  return newData;
+}
 
-var taskName = 'build-translation-fingerprints';
-gulp.task(taskName, ['build-merged-translations'], function() {
-  return gulp.src(outDir + '/*.json')
-    .pipe(rename({
-      extname: "",
-    }))
-    .pipe(hash({
-      algorithm: 'md5',
-      hashLength: 32,
-      template: '<%= name %>-<%= hash %>.json',
-    }))
-    .pipe(hash.manifest('translationFingerprints.json'))
-    .pipe(transform(function(data, file) {
-      Object.keys(data).map(function(key, index) {
-        data[key] = {fingerprint: data[key]};
+/**
+ * Replace Lokalise key placeholders with their actual values.
+ *
+ * We duplicate the behavior of Lokalise here so that placeholders can
+ * be included in src/translations/en.json, but still be usable while
+ * developing locally.
+ *
+ * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
+ */
+const re_key_reference = /\[%key:([^%]+)%\]/;
+function lokalise_transform(data, original) {
+  const output = {};
+  Object.entries(data).forEach(([key, value]) => {
+    if (value instanceof Object) {
+      output[key] = lokalise_transform(value, original);
+    } else {
+      output[key] = value.replace(re_key_reference, (match, key) => {
+        const replace = key.split("::").reduce((tr, k) => tr[k], original);
+        if (typeof replace !== "string") {
+          throw Error(
+            `Invalid key placeholder ${key} in src/translations/en.json`
+          );
+        }
+        return replace;
       });
-      return data;
-    }))
-    .pipe(gulp.dest('build-temp'));
+    }
+  });
+  return output;
+}
+
+/**
+ * This task will build a master translation file, to be used as the base for
+ * all languages. This starts with src/translations/en.json, and replaces all
+ * Lokalise key placeholders with their target values. Under normal circumstances,
+ * this will be the same as translations/en.json However, we build it here to
+ * facilitate both making changes in development mode, and to ensure that the
+ * project is buildable immediately after merging new translation keys, since
+ * the Lokalise update to translations/en.json will not happen immediately.
+ */
+let taskName = "build-master-translation";
+gulp.task(taskName, function() {
+  return gulp
+    .src("src/translations/en.json")
+    .pipe(
+      transform(function(data, file) {
+        return lokalise_transform(data, data);
+      })
+    )
+    .pipe(rename("translationMaster.json"))
+    .pipe(gulp.dest(workDir));
 });
 tasks.push(taskName);
 
-var taskName = 'build-translations';
-gulp.task(taskName, ['build-translation-fingerprints', 'build-translation-native-names'], function() {
-  return gulp.src([
-      'build-temp/translationFingerprints.json',
-      'build-temp/translationNativeNames.json',
+taskName = "build-merged-translations";
+gulp.task(taskName, ["build-master-translation"], function() {
+  return gulp.src(inDir + "/*.json").pipe(
+    foreach(function(stream, file) {
+      // For each language generate a merged json file. It begins with the master
+      // translation as a failsafe for untranslated strings, and merges all parent
+      // tags into one file for each specific subtag
+      //
+      // TODO: This is a naive interpretation of BCP47 that should be improved.
+      //       Will be OK for now as long as we don't have anything more complicated
+      //       than a base translation + region.
+      const tr = path.basename(file.history[0], ".json");
+      const subtags = tr.split("-");
+      const src = [workDir + "/translationMaster.json"];
+      for (let i = 1; i <= subtags.length; i++) {
+        const lang = subtags.slice(0, i).join("-");
+        src.push(inDir + "/" + lang + ".json");
+      }
+      return gulp
+        .src(src)
+        .pipe(transform((data) => emptyFilter(data)))
+        .pipe(
+          merge({
+            fileName: tr + ".json",
+          })
+        )
+        .pipe(gulp.dest(fullDir));
+    })
+  );
+});
+tasks.push(taskName);
+
+const splitTasks = [];
+TRANSLATION_FRAGMENTS.forEach((fragment) => {
+  taskName = "build-translation-fragment-" + fragment;
+  gulp.task(taskName, ["build-merged-translations"], function() {
+    // Return only the translations for this fragment.
+    return gulp
+      .src(fullDir + "/*.json")
+      .pipe(
+        transform((data) => ({
+          ui: {
+            panel: {
+              [fragment]: data.ui.panel[fragment],
+            },
+          },
+        }))
+      )
+      .pipe(gulp.dest(workDir + "/" + fragment));
+  });
+  tasks.push(taskName);
+  splitTasks.push(taskName);
+});
+
+taskName = "build-translation-core";
+gulp.task(taskName, ["build-merged-translations"], function() {
+  // Remove the fragment translations from the core translation.
+  return gulp
+    .src(fullDir + "/*.json")
+    .pipe(
+      transform((data) => {
+        TRANSLATION_FRAGMENTS.forEach((fragment) => {
+          delete data.ui.panel[fragment];
+        });
+        return data;
+      })
+    )
+    .pipe(gulp.dest(coreDir));
+});
+tasks.push(taskName);
+splitTasks.push(taskName);
+
+taskName = "build-flattened-translations";
+gulp.task(taskName, splitTasks, function() {
+  // Flatten the split versions of our translations, and move them into outDir
+  return gulp
+    .src(
+      TRANSLATION_FRAGMENTS.map(
+        (fragment) => workDir + "/" + fragment + "/*.json"
+      ).concat(coreDir + "/*.json"),
+      { base: workDir }
+    )
+    .pipe(
+      transform(function(data) {
+        // Polymer.AppLocalizeBehavior requires flattened json
+        return flatten(data);
+      })
+    )
+    .pipe(minify())
+    .pipe(
+      rename((filePath) => {
+        if (filePath.dirname === "core") {
+          filePath.dirname = "";
+        }
+      })
+    )
+    .pipe(gulp.dest(outDir));
+});
+tasks.push(taskName);
+
+taskName = "build-translation-fingerprints";
+gulp.task(taskName, ["build-flattened-translations"], function() {
+  return gulp
+    .src(outDir + "/**/*.json")
+    .pipe(
+      rename({
+        extname: "",
+      })
+    )
+    .pipe(
+      hash({
+        algorithm: "md5",
+        hashLength: 32,
+        template: "<%= name %>-<%= hash %>.json",
+      })
+    )
+    .pipe(hash.manifest("translationFingerprints.json"))
+    .pipe(
+      transform(function(data) {
+        // After generating fingerprints of our translation files, consolidate
+        // all translation fragment fingerprints under the translation name key
+        const newData = {};
+        Object.entries(data).forEach(([key, value]) => {
+          const parts = key.split("/");
+          let translation = key;
+          if (parts.length === 2) {
+            translation = parts[1];
+          }
+          if (!(translation in newData)) {
+            newData[translation] = {
+              fingerprints: {},
+            };
+          }
+          newData[translation].fingerprints[key] = value;
+        });
+        return newData;
+      })
+    )
+    .pipe(gulp.dest(workDir));
+});
+tasks.push(taskName);
+
+taskName = "build-translations";
+gulp.task(taskName, ["build-translation-fingerprints"], function() {
+  return gulp
+    .src([
+      "src/translations/translationMetadata.json",
+      workDir + "/translationFingerprints.json",
     ])
     .pipe(merge({}))
-    .pipe(insert.wrap('<script>\nwindow.translationMetadata = ', ';\n</script>'))
-    .pipe(rename('translationMetadata.html'))
-    .pipe(gulp.dest('build-temp'));
+    .pipe(
+      transform(function(data) {
+        const newData = {};
+        Object.entries(data).forEach(([key, value]) => {
+          // Filter out translations without native name.
+          if (data[key].nativeName) {
+            newData[key] = data[key];
+          } else {
+            console.warn(
+              `Skipping language ${key}. Native name was not translated.`
+            );
+          }
+          if (data[key]) newData[key] = value;
+        });
+        return newData;
+      })
+    )
+    .pipe(
+      transform((data) => ({
+        fragments: TRANSLATION_FRAGMENTS,
+        translations: data,
+      }))
+    )
+    .pipe(rename("translationMetadata.json"))
+    .pipe(gulp.dest(workDir));
 });
 tasks.push(taskName);
 

hassio/.gitignore

@@ -0,0 +1 @@
+hassio-icons.html

hassio/config.js

@@ -0,0 +1,8 @@
+const path = require("path");
+
+module.exports = {
+  // Target directory for the build.
+  buildDir: path.resolve(__dirname, "build"),
+  // Path where the Hass.io frontend will be publicly available.
+  publicPath: "/api/hassio/app",
+};

hassio/script/build_hassio

@@ -0,0 +1,14 @@
+#!/bin/sh
+# Builds the Hass.io app for production
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+OUTPUT_DIR=build
+
+rm -rf $OUTPUT_DIR
+
+node script/gen-icons.js
+NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js

hassio/script/develop

@@ -0,0 +1,12 @@
+#!/bin/sh
+# Run the Hass.io development server
+
+# Stop on errors
+set -e
+
+OUTPUT_DIR=build
+
+rm -rf $OUTPUT_DIR
+mkdir $OUTPUT_DIR
+node script/gen-icons.js
+../node_modules/.bin/webpack --watch --progress

hassio/script/gen-icons.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const { findIcons, generateIconset } = require("../../gulp/tasks/gen-icons.js");
+
+const MENU_BUTTON_ICON = "menu";
+
+function genHassioIcons() {
+  const iconNames = findIcons("./src", "hassio").concat(MENU_BUTTON_ICON);
+  fs.writeFileSync("./hassio-icons.html", generateIconset("hassio", iconNames));
+}
+
+genHassioIcons();

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

@@ -0,0 +1,93 @@
+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";
+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>
+              </div>
+            </paper-card>
+          </template>
+        </div>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      repo: Object,
+      addons: Array,
+    };
+  }
+
+  sortAddons(a, b) {
+    return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
+  }
+
+  computeIcon(addon) {
+    return addon.installed && addon.installed !== addon.version
+      ? "hassio:arrow-up-bold-circle"
+      : "hassio:puzzle";
+  }
+
+  computeIconTitle(addon) {
+    if (addon.installed)
+      return addon.installed !== addon.version
+        ? "New version available"
+        : "Add-on is installed";
+    return "Add-on is not installed";
+  }
+
+  computeIconClass(addon) {
+    if (addon.installed)
+      return addon.installed !== addon.version ? "update" : "installed";
+    return "";
+  }
+
+  addonTapped(ev) {
+    this.navigate(`/hassio/addon/${ev.model.addon.slug}`);
+  }
+}
+
+customElements.define("hassio-addon-repository", HassioAddonRepository);

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

@@ -0,0 +1,92 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+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>
+
+      <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() {
+    return {
+      hass: Object,
+      addons: Array,
+      repos: Array,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+    this.loadData();
+  }
+
+  apiCalled(ev) {
+    if (ev.detail.success) {
+      this.loadData();
+    }
+  }
+
+  sortRepos(a, b) {
+    if (a.slug === "local") {
+      return -1;
+    }
+    if (b.slug === "local") {
+      return 1;
+    }
+    if (a.slug === "core") {
+      return -1;
+    }
+    if (b.slug === "core") {
+      return 1;
+    }
+    return a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1;
+  }
+
+  computeAddons(repo) {
+    return this.addons.filter(function(addon) {
+      return addon.repository === repo;
+    });
+  }
+
+  loadData() {
+    this.hass.callApi("get", "hassio/addons").then(
+      (info) => {
+        this.addons = info.data.addons;
+        this.repos = info.data.repositories;
+      },
+      () => {
+        this.addons = [];
+        this.repos = [];
+      }
+    );
+  }
+
+  refreshData() {
+    this.hass.callApi("post", "hassio/addons/reload").then(() => {
+      this.loadData();
+    });
+  }
+}
+
+customElements.define("hassio-addon-store", HassioAddonStore);

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

@@ -0,0 +1,120 @@
+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";
+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:
+          </div>
+        </div>
+        <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 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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      repos: {
+        type: Array,
+        observer: "reposChanged",
+      },
+      repoList: Array,
+      repoUrl: String,
+    };
+  }
+
+  reposChanged(repos) {
+    this.repoList = repos.filter(
+      (repo) => repo.slug !== "core" && repo.slug !== "local"
+    );
+    this.repoUrl = "";
+  }
+
+  sortRepos(a, b) {
+    return a.name < b.name ? -1 : 1;
+  }
+
+  computeRemoveRepoData(repoList, url) {
+    const list = repoList
+      .filter((repo) => repo.url !== url)
+      .map((repo) => repo.url);
+    return { addons_repositories: list };
+  }
+
+  computeAddRepoData(repoList, url) {
+    const list = repoList ? repoList.map((repo) => repo.url) : [];
+    list.push(url);
+    return { addons_repositories: list };
+  }
+}
+
+customElements.define("hassio-repositories-editor", HassioRepositoriesEditor);

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

@@ -0,0 +1,142 @@
+import "web-animations-js/web-animations-next-lite.min";
+
+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";
+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>
+
+          <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() {
+    return {
+      hass: Object,
+      addon: {
+        type: Object,
+        observer: "addonChanged",
+      },
+      inputDevices: Array,
+      outputDevices: Array,
+      selectedInput: String,
+      selectedOutput: String,
+      error: String,
+    };
+  }
+
+  addonChanged(addon) {
+    this.setProperties({
+      selectedInput: addon.audio_input || "null",
+      selectedOutput: addon.audio_output || "null",
+    });
+    if (this.outputDevices) return;
+
+    const noDevice = [{ device: "null", name: "-" }];
+    this.hass.callApi("get", "hassio/hardware/audio").then(
+      (resp) => {
+        const dev = resp.data.audio;
+        const input = Object.keys(dev.input).map((key) => ({
+          device: key,
+          name: dev.input[key],
+        }));
+        const output = Object.keys(dev.output).map((key) => ({
+          device: key,
+          name: dev.output[key],
+        }));
+        this.setProperties({
+          inputDevices: noDevice.concat(input),
+          outputDevices: noDevice.concat(output),
+        });
+      },
+      () => {
+        this.setProperties({
+          inputDevices: noDevice,
+          outputDevices: noDevice,
+        });
+      }
+    );
+  }
+
+  _saveSettings() {
+    this.error = null;
+    const path = `hassio/addons/${this.addon.slug}/options`;
+    this.hass
+      .callApi("post", path, {
+        audio_input: this.selectedInput === "null" ? null : this.selectedInput,
+        audio_output:
+          this.selectedOutput === "null" ? null : this.selectedOutput,
+      })
+      .then(
+        () => {
+          this.fire("hass-api-called", { success: true, path: path });
+        },
+        (resp) => {
+          this.error = resp.body.message;
+        }
+      );
+  }
+}
+
+customElements.define("hassio-addon-audio", HassioAddonAudio);

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

@@ -0,0 +1,111 @@
+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";
+
+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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addon: {
+        type: Object,
+        observer: "addonChanged",
+      },
+      addonSlug: String,
+      config: {
+        type: String,
+        observer: "configChanged",
+      },
+      configParsed: Object,
+      error: String,
+      resetData: {
+        type: Object,
+        value: {
+          options: null,
+        },
+      },
+    };
+  }
+
+  addonChanged(addon) {
+    this.config = addon ? JSON.stringify(addon.options, null, 2) : "";
+  }
+
+  configChanged(config) {
+    try {
+      this.$.config.classList.remove("syntaxerror");
+      this.configParsed = JSON.parse(config);
+    } catch (err) {
+      this.$.config.classList.add("syntaxerror");
+      this.configParsed = null;
+    }
+  }
+
+  saveTapped() {
+    this.error = null;
+
+    this.hass
+      .callApi("post", `hassio/addons/${this.addonSlug}/options`, {
+        options: this.configParsed,
+      })
+      .catch((resp) => {
+        this.error = resp.body.message;
+      });
+  }
+}
+
+customElements.define("hassio-addon-config", HassioAddonConfig);

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

@@ -0,0 +1,298 @@
+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";
+import "../../../src/components/ha-markdown";
+import "../../../src/resources/ha-style";
+import EventsMixin from "../../../src/mixins/events-mixin";
+
+import "../components/hassio-card-content";
+
+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>
+
+      <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>
+            </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>
+          <div class="card-content">
+            <ha-markdown content="[[addon.long_description]]"></ha-markdown>
+          </div>
+        </paper-card>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addon: Object,
+      addonSlug: String,
+      isRunning: {
+        type: Boolean,
+        computed: "computeIsRunning(addon)",
+      },
+    };
+  }
+
+  computeIsRunning(addon) {
+    return addon && addon.state === "started";
+  }
+
+  computeUpdateAvailable(addon) {
+    return (
+      addon &&
+      !addon.detached &&
+      addon.version &&
+      addon.version !== addon.last_version
+    );
+  }
+
+  pathWebui(webui) {
+    return webui && webui.replace("[HOST]", document.location.hostname);
+  }
+
+  computeShowWebUI(webui, isRunning) {
+    return webui && isRunning;
+  }
+
+  computeStartOnBoot(state) {
+    return state === "auto";
+  }
+
+  startOnBootToggled() {
+    const data = { boot: this.addon.boot === "auto" ? "manual" : "auto" };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
+  }
+
+  autoUpdateToggled() {
+    const data = { auto_update: !this.addon.auto_update };
+    this.hass.callApi("POST", `hassio/addons/${this.addonSlug}/options`, data);
+  }
+
+  openChangelog() {
+    this.hass
+      .callApi("get", `hassio/addons/${this.addonSlug}/changelog`)
+      .then((resp) => resp, () => "Error getting changelog")
+      .then((content) => {
+        this.fire("hassio-markdown-dialog", {
+          title: "Changelog",
+          content: content,
+        });
+      });
+  }
+
+  _unistallClicked() {
+    if (!confirm("Are you sure you want to uninstall this add-on?")) {
+      return;
+    }
+    const path = `hassio/addons/${this.addonSlug}/uninstall`;
+    const eventData = {
+      path: path,
+    };
+    this.hass
+      .callApi("post", path)
+      .then(
+        (resp) => {
+          eventData.success = true;
+          eventData.response = resp;
+        },
+        (resp) => {
+          eventData.success = false;
+          eventData.response = resp;
+        }
+      )
+      .then(() => {
+        this.fire("hass-api-called", eventData);
+      });
+  }
+}
+customElements.define("hassio-addon-info", HassioAddonInfo);

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

@@ -0,0 +1,60 @@
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../../../src/resources/ha-style";
+
+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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addonSlug: {
+        type: String,
+        observer: "addonSlugChanged",
+      },
+      log: String,
+    };
+  }
+
+  addonSlugChanged(slug) {
+    if (!this.hass) {
+      setTimeout(() => {
+        this.addonChanged(slug);
+      }, 0);
+      return;
+    }
+
+    this.refresh();
+  }
+
+  refresh() {
+    this.hass
+      .callApi("get", `hassio/addons/${this.addonSlug}/logs`)
+      .then((info) => {
+        this.log = info;
+      });
+  }
+}
+
+customElements.define("hassio-addon-logs", HassioAddonLogs);

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

@@ -0,0 +1,124 @@
+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";
+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>
+              </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() {
+    return {
+      hass: Object,
+      addonSlug: String,
+      config: Object,
+      addon: {
+        type: Object,
+        observer: "addonChanged",
+      },
+      error: String,
+      resetData: {
+        type: Object,
+        value: {
+          network: null,
+        },
+      },
+    };
+  }
+
+  addonChanged(addon) {
+    if (!addon) return;
+
+    const network = addon.network || {};
+    const items = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+    }));
+    this.config = items.sort(function(el1, el2) {
+      return el1.host - el2.host;
+    });
+  }
+
+  saveTapped() {
+    this.error = null;
+    const data = {};
+    this.config.forEach(function(item) {
+      data[item.container] = parseInt(item.host);
+    });
+    const path = `hassio/addons/${this.addonSlug}/options`;
+
+    this.hass
+      .callApi("post", path, {
+        network: data,
+      })
+      .then(
+        () => {
+          this.fire("hass-api-called", { success: true, path: path });
+        },
+        (resp) => {
+          this.error = resp.body.message;
+        }
+      );
+  }
+}
+
+customElements.define("hassio-addon-network", HassioAddonNetwork);

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

@@ -0,0 +1,185 @@
+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";
+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) {
+          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.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>
+
+      <hassio-markdown-dialog
+        title="[[markdownTitle]]"
+        content="[[markdownContent]]"
+      ></hassio-markdown-dialog>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      showMenu: Boolean,
+      narrow: Boolean,
+      route: Object,
+      routeData: {
+        type: Object,
+        observer: "routeDataChanged",
+      },
+      routeMatches: Boolean,
+      addon: Object,
+
+      markdownTitle: String,
+      markdownContent: {
+        type: String,
+        value: "",
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+    this.addEventListener("hassio-markdown-dialog", (ev) =>
+      this.openMarkdown(ev)
+    );
+  }
+
+  apiCalled(ev) {
+    const path = ev.detail.path;
+
+    if (!path) return;
+
+    if (path.substr(path.lastIndexOf("/") + 1) === "uninstall") {
+      this.backTapped();
+    } else {
+      this.routeDataChanged(this.routeData);
+    }
+  }
+
+  routeDataChanged(routeData) {
+    if (!this.routeMatches || !routeData || !routeData.slug) return;
+    this.hass.callApi("get", `hassio/addons/${routeData.slug}/info`).then(
+      (info) => {
+        this.addon = info.data;
+      },
+      () => {
+        this.addon = null;
+      }
+    );
+  }
+
+  backTapped() {
+    history.back();
+  }
+
+  openMarkdown(ev) {
+    this.setProperties({
+      markdownTitle: ev.detail.title,
+      markdownContent: ev.detail.content,
+    });
+    this.shadowRoot.querySelector("hassio-markdown-dialog").openDialog();
+  }
+}
+
+customElements.define("hassio-addon-view", HassioAddonView);

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

@@ -0,0 +1,83 @@
+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";
+
+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>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      title: String,
+      description: String,
+      datetime: String,
+      icon: {
+        type: String,
+        value: "hass:help-circle",
+      },
+      iconTitle: String,
+      iconClass: String,
+    };
+  }
+}
+customElements.define("hassio-card-content", HassioCardContent);

hassio/src/dashboard/hassio-addons.js

@@ -0,0 +1,91 @@
+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";
+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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      addons: Array,
+    };
+  }
+
+  sortAddons(a, b) {
+    return a.name < b.name ? -1 : 1;
+  }
+
+  computeIcon(addon) {
+    return addon.installed !== addon.version
+      ? "hassio:arrow-up-bold-circle"
+      : "hassio:puzzle";
+  }
+
+  computeIconTitle(addon) {
+    if (addon.installed !== addon.version) return "New version available";
+    return addon.state === "started"
+      ? "Add-on is running"
+      : "Add-on is stopped";
+  }
+
+  computeIconClass(addon) {
+    if (addon.installed !== addon.version) return "update";
+    return addon.state === "started" ? "running" : "";
+  }
+
+  addonTapped(ev) {
+    this.navigate("/hassio/addon/" + ev.model.addon.slug);
+    ev.target.blur();
+  }
+
+  openStore(ev) {
+    this.navigate("/hassio/store");
+    ev.target.blur();
+  }
+}
+
+customElements.define("hassio-addons", HassioAddons);

hassio/src/dashboard/hassio-dashboard.js

@@ -0,0 +1,38 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      supervisorInfo: Object,
+      hassInfo: Object,
+    };
+  }
+}
+
+customElements.define("hassio-dashboard", HassioDashboard);

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

@@ -0,0 +1,102 @@
+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";
+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>
+          </div>
+        </div>
+      </template>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      hassInfo: Object,
+      error: String,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+  }
+
+  apiCalled(ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    const response = ev.detail.response;
+
+    if (typeof response.body === "object") {
+      this.errors = response.body.message || "Unknown error";
+    } else {
+      this.errors = response.body;
+    }
+  }
+
+  computeUpdateAvailable(hassInfo) {
+    return hassInfo.version !== hassInfo.last_version;
+  }
+}
+
+customElements.define("hassio-hass-update", HassioHassUpdate);

hassio/src/entrypoint.js

@@ -0,0 +1,4 @@
+window.loadES5Adapter().then(() => {
+  import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons.js");
+  import(/* webpackChunkName: "hassio-main" */ "./hassio-main.js");
+});

hassio/src/hassio-app.js

@@ -0,0 +1,51 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+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>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      narrow: Boolean,
+      showMenu: Boolean,
+      route: Object,
+      hassioPanel: {
+        type: Object,
+        value: window.parent.hassioPanel,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    window.setProperties = this.setProperties.bind(this);
+    this.addEventListener("location-changed", () => this._locationChanged());
+    this.addEventListener("hass-open-menu", () => this._menuEvent(true));
+    this.addEventListener("hass-close-menu", () => this._menuEvent(false));
+  }
+
+  _menuEvent(shouldOpen) {
+    this.hassioPanel.fire(shouldOpen ? "hass-open-menu" : "hass-close-menu");
+  }
+
+  _locationChanged() {
+    this.hassioPanel.navigate(window.location.pathname);
+  }
+}
+
+customElements.define("hassio-app", HassioApp);