Fix more info dialog resizing

.gitattributes

@@ -11,4 +11,3 @@
 *.mp3 binary
 
 demo/public/api/camera_proxy_stream/* binary
-demo/public/api/media_player_proxy/* binary

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -3,7 +3,6 @@ name: Report a bug with the UI, Frontend or Lovelace
 about: Report an issue related to the Home Assistant frontend.
 labels: bug
 ---
-
 <!-- 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
@@ -11,7 +10,6 @@ labels: bug
 - Provide as many details as possible. Paste logs, configuration samples and code into the backticks.
 DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed without comment.
 -->
-
 ## Checklist
 
 - [ ] I have updated to the latest available Home Assistant version.
@@ -19,22 +17,21 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 - [ ] I have tried a different browser to see if it is related to my browser.
 
 ## The problem
-
 <!--
   Describe the issue you are experiencing here to communicate to the
   maintainers. Tell us about the current behavior.
   If possible provide a screenshot with a description.
 -->
 
-## Expected behavior
 
-<!--
+## Expected behavior
+<!-- 
   Describe what you expected to happen or it should look/behave.
   If possible provide a screenshot with a description.
 -->
 
-## Steps to reproduce
 
+## Steps to reproduce
 <!--
   Provide steps for us, that helps reproducing your issue.
   For example:
@@ -46,8 +43,8 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
     6. Set the HVAC action to cool
 -->
 
-## Environment
 
+## Environment
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
@@ -57,13 +54,13 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
   your issue in a different browser and be sure to include your findings.
 -->
 
-- Home Assistant release with the issue:
-- Last working Home Assistant release (if known):
-- Browser and browser version:
-- Operating system:
+- Home Assistant release with the issue: 
+- Last working Home Assistant release (if known): 
+- UI Type (States or Lovelace): 
+- Browser and browser version: 
+- Operating system: 
 
 ## Problem-relevant configuration
-
 <!--
   An example configuration that caused the problem for you. Fill this out even
   if it seems unimportant to you. Please be sure to remove personal information
@@ -75,7 +72,6 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 ```
 
 ## Javascript errors shown in your browser console/inspector
-
 <!--
   If you come across any javascript or other error logs, e.g., in your browser
   console/inspector please provide them.
@@ -86,3 +82,4 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 ```
 
 ## Additional information
+

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
-    url: https://github.com/home-assistant/core/issues
+    url: https://github.com/home-assistant/home-assistant/issues
     about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues

.github/workflows/ci.yaml

@@ -1,127 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - dev
-      - master
-  pull_request:
-    branches:
-      - dev
-      - master
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-hassio gen-icons-mdi gen-icons-app
-      - name: Build translations
-        run: ./node_modules/.bin/gulp build-translations
-      - name: Run eslint
-        run: ./node_modules/.bin/eslint src hassio/src gallery/src
-      - name: Run tslint
-        run: ./node_modules/.bin/tslint 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'cast/src/**/*.ts' 'test-mocha/**/*.ts'
-      - name: Run tsc
-        run: ./node_modules/.bin/tsc
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Run Mocha
-        run: npm run mocha
-  build:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-app
-        env:
-          TRAVIS: "true"
-  supervisor:
-    runs-on: ubuntu-latest
-    needs: [lint, test]
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Application
-        run: ./node_modules/.bin/gulp build-hassio
-        env:
-          TRAVIS: "true"

.github/workflows/demo.yaml

@@ -1,39 +0,0 @@
-name: Demo
-
-on:
-  push:
-    branches:
-      - dev
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
-      - name: Deploy to Netlify
-        uses: netlify/actions/cli@master
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
-        with:
-          args: deploy --dir=demo/dist --prod

.travis.yml

@@ -0,0 +1,18 @@
+sudo: false
+language: node_js
+cache:
+  yarn: true
+  directories:
+    - bower_components
+install: yarn install
+script:
+  - npm run build
+  - hassio/script/build_hassio
+  # Because else eslint fails because hassio has cleaned that build
+  - ./node_modules/.bin/gulp gen-icons-app
+  - npm run test
+  # - xvfb-run wct --module-resolution=node --npm
+  # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
+dist: trusty
+addons:
+  sauce_connect: true

README.md

@@ -1,4 +1,4 @@
-# Home Assistant Frontend
+# 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.
 
@@ -19,15 +19,12 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 ## 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.
+* `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
 

azure-pipelines-release.yml

@@ -8,7 +8,7 @@ trigger:
 pr: none
 variables:
   - name: versionWheels
-    value: '1.10.1-3.7-alpine3.11'
+    value: '1.3-3.7-alpine3.10'
   - name: versionNode
     value: '12.1'
   - group: twine

azure-pipelines-translation.yml

@@ -11,7 +11,7 @@ trigger:
 pr: none
 schedules:
   - cron: "30 0 * * *"
-    displayName: "frontend translation update"
+    displayName: "translation update"
     branches:
       include:
       - dev

build-scripts/babel.js

@@ -34,7 +34,6 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
             },
           ],
           "@babel/plugin-proposal-optional-chaining",
-          "@babel/plugin-proposal-nullish-coalescing-operator",
           [
             require("@babel/plugin-proposal-decorators").default,
             { decoratorsBeforeExport: true },

build-scripts/env.js

@@ -1,14 +1,6 @@
 module.exports = {
-  isProdBuild() {
-    return process.env.NODE_ENV === "production";
-  },
-  isStatsBuild() {
-    return process.env.STATS === "1";
-  },
-  isTravis() {
-    return process.env.TRAVIS === "true";
-  },
-  isNetlify() {
-    return process.env.NETLIFY === "true";
-  },
+  isProdBuild: process.env.NODE_ENV === "production",
+  isStatsBuild: process.env.STATS === "1",
+  isTravis: process.env.TRAVIS === "true",
+  isNetlify: process.env.NETLIFY === "true",
 };

build-scripts/gulp/app.js

@@ -24,7 +24,7 @@ gulp.task(
       gulp.parallel("gen-icons-app", "gen-icons-mdi"),
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations"
+      gulp.series("create-test-translation", "build-translations")
     ),
     "copy-static",
     "webpack-watch-app"
@@ -42,7 +42,7 @@ gulp.task(
     "copy-static",
     "webpack-prod-app",
     ...// Don't compress running tests
-    (envVars.isTravis() ? [] : ["compress-app"]),
+    (envVars.isTravis ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/gallery.js

@@ -16,7 +16,7 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-gallery",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
     "webpack-dev-server-gallery"

build-scripts/gulp/gather-static.js

@@ -65,12 +65,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-translations", (done) => {
-  const staticDir = paths.static;
-  copyTranslations(staticDir);
-  done();
-});
-
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
   const staticPath = genStaticPath(paths.static);

build-scripts/gulp/gen-icons.js

@@ -2,7 +2,6 @@ const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs");
 const paths = require("../paths");
-const { mapFiles } = require("../util");
 
 const ICON_PACKAGE_PATH = path.resolve(
   __dirname,
@@ -58,6 +57,20 @@ function generateIconset(iconsetName, iconNames) {
   return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
+// 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(searchPath, iconsetName) {
   const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");

build-scripts/gulp/hassio.js

@@ -29,6 +29,6 @@ gulp.task(
     gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
     "webpack-prod-hassio",
     ...// Don't compress running tests
-    (envVars.isTravis() ? [] : ["compress-hassio"])
+    (envVars.isTravis ? [] : ["compress-hassio"])
   )
 );

build-scripts/gulp/translations.js

@@ -1,18 +1,14 @@
-const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
-const source = require("vinyl-source-stream");
-const vinylBuffer = require("vinyl-buffer");
 const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
+const hash = require("gulp-hash");
+const hashFilename = require("gulp-hash-filename");
 const merge = require("gulp-merge-json");
 const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
-const { mapFiles } = require("../util");
-const env = require("../env");
-const paths = require("../paths");
 
 const inDir = "translations";
 const workDir = "build-translations";
@@ -43,6 +39,8 @@ const TRANSLATION_FRAGMENTS = [
   "developer-tools",
 ];
 
+const tasks = [];
+
 function recursiveFlatten(prefix, data) {
   let output = {};
   Object.keys(data).forEach(function(key) {
@@ -118,9 +116,11 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function() {
-  return del([workDir]);
+let taskName = "clean-translations";
+gulp.task(taskName, function() {
+  return del([`${outDir}/**/*.json`]);
 });
+tasks.push(taskName);
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
@@ -129,23 +129,29 @@ gulp.task("ensure-translations-build-dir", (done) => {
   done();
 });
 
-gulp.task("create-test-metadata", function(cb) {
-  fs.writeFile(
-    workDir + "/testMetadata.json",
-    JSON.stringify({
-      test: {
-        nativeName: "Test",
-      },
-    }),
-    cb
-  );
-});
-
+taskName = "create-test-metadata";
 gulp.task(
-  "create-test-translation",
-  gulp.series("create-test-metadata", function createTestTranslation() {
+  taskName,
+  gulp.series("ensure-translations-build-dir", function writeTestMetaData(cb) {
+    fs.writeFile(
+      workDir + "/testMetadata.json",
+      JSON.stringify({
+        test: {
+          nativeName: "Test",
+        },
+      }),
+      cb
+    );
+  })
+);
+tasks.push(taskName);
+
+taskName = "create-test-translation";
+gulp.task(
+  taskName,
+  gulp.series("create-test-metadata", function() {
     return gulp
-      .src(path.join(paths.translations_src, "en.json"))
+      .src("src/translations/en.json")
       .pipe(
         transform(function(data, file) {
           return recursiveEmpty(data);
@@ -155,6 +161,7 @@ gulp.task(
       .pipe(gulp.dest(workDir));
   })
 );
+tasks.push(taskName);
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -165,216 +172,235 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", function() {
-  return gulp
-    .src(path.join(paths.translations_src, "en.json"))
-    .pipe(
-      transform(function(data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(rename("translationMaster.json"))
-    .pipe(gulp.dest(workDir));
-});
+taskName = "build-master-translation";
+gulp.task(
+  taskName,
+  gulp.series("clean-translations", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
+      .pipe(rename("translationMaster.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
 
-gulp.task("build-merged-translations", function() {
-  return gulp
-    .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
-    .pipe(
-      transform(function(data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .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("-");
-          if (lang === "test") {
-            src.push(workDir + "/test.json");
-          } else if (lang !== "en") {
-            src.push(inDir + "/" + lang + ".json");
+taskName = "build-merged-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-master-translation", function() {
+    return gulp
+      .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
+      .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("-");
+            if (lang === "test") {
+              src.push(workDir + "/test.json");
+            } else if (lang !== "en") {
+              src.push(inDir + "/" + lang + ".json");
+            }
           }
-        }
-        return gulp
-          .src(src, { allowEmpty: true })
-          .pipe(transform((data) => emptyFilter(data)))
-          .pipe(
-            merge({
-              fileName: tr + ".json",
-            })
-          )
-          .pipe(gulp.dest(fullDir));
-      })
-    );
-});
-
-var taskName;
+          return gulp
+            .src(src, { allowEmpty: true })
+            .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, function() {
-    // Return only the translations for this fragment.
-    return gulp
-      .src(fullDir + "/*.json")
-      .pipe(
-        transform((data) => ({
-          ui: {
-            panel: {
-              [fragment]: data.ui.panel[fragment],
+  gulp.task(
+    taskName,
+    gulp.series("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));
-  });
+          }))
+        )
+        .pipe(gulp.dest(workDir + "/" + fragment));
+    })
+  );
+  tasks.push(taskName);
   splitTasks.push(taskName);
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, 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));
-});
-
+gulp.task(
+  taskName,
+  gulp.series("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);
 
-gulp.task("build-flattened-translations", 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));
-});
-
-const fingerprints = {};
-
+taskName = "build-flattened-translations";
 gulp.task(
-  "build-translation-fingerprints",
-  function fingerprintTranslationFiles() {
-    // Fingerprint full file of each language
-    const files = fs.readdirSync(fullDir);
-
-    for (let i = 0; i < files.length; i++) {
-      fingerprints[files[i].split(".")[0]] = {
-        // In dev we create fake hashes
-        hash: env.isProdBuild()
-          ? crypto
-              .createHash("md5")
-              .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
-              .digest("hex")
-          : "dev",
-      };
-    }
-
-    mapFiles(outDir, ".json", (filename) => {
-      const parsed = path.parse(filename);
-
-      // nl.json -> nl-<hash>.json
-      if (!(parsed.name in fingerprints)) {
-        throw new Error(`Unable to find hash for ${filename}`);
-      }
-
-      fs.renameSync(
-        filename,
-        `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
-          parsed.ext
-        }`
-      );
-    });
-
-    const stream = source("translationFingerprints.json");
-    stream.write(JSON.stringify(fingerprints));
-    process.nextTick(() => stream.end());
-    return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
-  }
+  taskName,
+  gulp.series(...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(hashFilename())
+      .pipe(
+        rename((filePath) => {
+          if (filePath.dirname === "core") {
+            filePath.dirname = "";
+          }
+        })
+      )
+      .pipe(gulp.dest(outDir));
+  })
 );
+tasks.push(taskName);
 
+taskName = "build-translation-fingerprints";
 gulp.task(
-  "build-translations",
-  gulp.series(
-    "clean-translations",
-    "ensure-translations-build-dir",
-    env.isProdBuild() ? (done) => done() : "create-test-translation",
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations",
-    "build-translation-fingerprints",
-    function writeMetadata() {
-      return gulp
-        .src(
-          [
-            path.join(paths.translations_src, "translationMetadata.json"),
-            workDir + "/testMetadata.json",
-            workDir + "/translationFingerprints.json",
-          ],
-          { allowEmpty: true }
-        )
-        .pipe(merge({}))
-        .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));
-    }
-  )
+  taskName,
+  gulp.series("build-flattened-translations", function() {
+    return gulp
+      .src(outDir + "/**/*.json")
+      .pipe(
+        rename({
+          extname: "",
+        })
+      )
+      .pipe(
+        hash({
+          algorithm: "md5",
+          hashLength: 32,
+          template: "<%= name %>.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 [path, _md5] = key.rsplit("-", 1);
+            // let translation = key;
+            let translation = path;
+            const parts = translation.split("/");
+            if (parts.length === 2) {
+              translation = parts[1];
+            }
+            if (!(translation in newData)) {
+              newData[translation] = {
+                fingerprints: {},
+              };
+            }
+            newData[translation].fingerprints[path] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(gulp.dest(workDir));
+  })
 );
+tasks.push(taskName);
+
+taskName = "build-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-translation-fingerprints", function() {
+    return gulp
+      .src(
+        [
+          "src/translations/translationMetadata.json",
+          workDir + "/testMetadata.json",
+          workDir + "/translationFingerprints.json",
+        ],
+        { allowEmpty: true }
+      )
+      .pipe(merge({}))
+      .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);
+
+module.exports = tasks;

build-scripts/gulp/webpack.js

@@ -3,7 +3,6 @@ const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const log = require("fancy-log");
-const path = require("path");
 const paths = require("../paths");
 const {
   createAppConfig,
@@ -58,14 +57,10 @@ const handler = (done) => (err, stats) => {
 
 gulp.task("webpack-watch-app", () => {
   // we are not calling done, so this command will run forever
-  webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    { ignored: /build-translations/ },
+  webpack(bothBuilds(createAppConfig, { isProdBuild: false })).watch(
+    {},
     handler()
   );
-  gulp.watch(
-    path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations")
-  );
 });
 
 gulp.task(

build-scripts/paths.js

@@ -29,6 +29,4 @@ module.exports = {
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_root: path.resolve(__dirname, "../hassio/build"),
   hassio_publicPath: "/api/hassio/app/",
-
-  translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/util.js

@@ -1,16 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-
-// Helper function to map recursively over files in a folder and it's subfolders
-module.exports.mapFiles = 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);
-    }
-  }
-};

build-scripts/webpack.js

@@ -148,17 +148,11 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     // Create an object mapping browser urls to their paths during build
     const translationMetadata = require("../build-translations/translationMetadata.json");
     const workBoxTranslationsTemplatedURLs = {};
-    const englishFilename = `en-${translationMetadata.translations.en.hash}.json`;
-
-    // core
-    workBoxTranslationsTemplatedURLs[
-      `/static/translations/${englishFilename}`
-    ] = `build-translations/output/${englishFilename}`;
-
-    translationMetadata.fragments.forEach((fragment) => {
+    const englishFP = translationMetadata.translations.en.fingerprints;
+    Object.keys(englishFP).forEach((key) => {
       workBoxTranslationsTemplatedURLs[
-        `/static/translations/${fragment}/${englishFilename}`
-      ] = `build-translations/output/${fragment}/${englishFilename}`;
+        `/static/translations/${englishFP[key]}`
+      ] = `build-translations/output/${key}.json`;
     });
 
     config.plugins.push(

cast/src/launcher/layout/hc-cast.ts

@@ -26,12 +26,10 @@ import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   LovelaceConfig,
   getLovelaceCollection,
-  getLegacyLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import "./hc-layout";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import { atLeastVersion } from "../../../../src/common/config/version";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -135,9 +133,7 @@ class HcCast extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
-    const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
-      ? getLovelaceCollection(this.connection)
-      : getLegacyLovelaceCollection(this.connection);
+    const llColl = getLovelaceCollection(this.connection);
     // We first do a single refresh because we need to check if there is LL
     // configuration.
     llColl.refresh().then(

cast/src/receiver/layout/hc-main.ts

@@ -15,9 +15,6 @@ import {
 import {
   LovelaceConfig,
   getLovelaceCollection,
-  fetchResources,
-  LegacyLovelaceConfig,
-  getLegacyLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import "./hc-launch-screen";
 import { castContext } from "../cast_context";
@@ -25,9 +22,6 @@ import { CAST_NS } from "../../../../src/cast/const";
 import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
 import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
-import { atLeastVersion } from "../../../../src/common/config/version";
-
-let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
@@ -40,7 +34,6 @@ export class HcMain extends HassElement {
   @property() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
-  private _urlPath?: string | null;
 
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
@@ -115,7 +108,6 @@ export class HcMain extends HassElement {
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
       status.lovelacePath = this._lovelacePath!;
-      status.urlPath = this._urlPath;
     }
 
     if (senderId) {
@@ -171,17 +163,8 @@ export class HcMain extends HassElement {
       this._error = "Cannot show Lovelace because we're not connected.";
       return;
     }
-    if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
-      if (msg.urlPath === "lovelace") {
-        msg.urlPath = null;
-      }
-      this._urlPath = msg.urlPath;
-      if (this._unsubLovelace) {
-        this._unsubLovelace();
-      }
-      const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass!.connection);
+    if (!this._unsubLovelace) {
+      const llColl = getLovelaceCollection(this.hass!.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -200,15 +183,6 @@ export class HcMain extends HassElement {
         );
       }
     }
-    if (!resourcesLoaded) {
-      resourcesLoaded = true;
-      const resources = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? await fetchResources(this.hass!.connection)
-        : (this._lovelaceConfig as LegacyLovelaceConfig).resources;
-      if (resources) {
-        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
-      }
-    }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
     if (castContext.getDeviceCapabilities().touch_input_supported) {
@@ -220,6 +194,12 @@ export class HcMain extends HassElement {
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
     castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;
+    if (lovelaceConfig.resources) {
+      loadLovelaceResources(
+        lovelaceConfig.resources,
+        this.hass!.auth.data.hassUrl
+      );
+    }
   }
 
   private _handleShowDemo(_msg: ShowDemoMessage) {

cast/webpack.config.js

@@ -6,6 +6,6 @@ const { isProdBuild } = require("../build-scripts/env.js");
 const latestBuild = true;
 
 module.exports = createCastConfig({
-  isProdBuild: isProdBuild(),
+  isProdBuild,
   latestBuild,
 });

demo/src/configs/arsaboo/entities.ts

@@ -291,7 +291,16 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "13:21",
       attributes: {
         attribution: "Data provided by Ring.com",
+        device_id: "e04f434dca02",
+        firmware: "Up to Date",
+        kind: "lpd_v2",
+        timezone: "America/New_York",
+        type: "doorbots",
+        wifi_name: "RingOfSecurity-hUrGKNlhR",
+        created_at: "2019-01-22T13:21:03-05:00",
         answered: false,
+        recording_status: "ready",
+        category: "motion",
         friendly_name: "Front Door Last Motion",
         icon: "hademo:history",
       },
@@ -304,7 +313,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "cbd8dfac9efb441f19168e271cb8629b0372d0c1f721353394b23ed0202013b0",
         motion_detection: true,
         friendly_name: "Patio",
-        entity_picture: "/assets/arsaboo/images/camera.patio.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.patio?token=cbd8dfac9efb441f19168e271cb8629b0372d0c1f721353394b23ed0202013b0",
         supported_features: 0,
       },
     },
@@ -316,7 +326,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "479b332e0a7cad4c58e0fb98a1ecb7942e3b225190adb93a1341edfa7daf45b0",
         motion_detection: true,
         friendly_name: "Porch",
-        entity_picture: "/assets/arsaboo/images/camera.porch.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.porch?token=479b332e0a7cad4c58e0fb98a1ecb7942e3b225190adb93a1341edfa7daf45b0",
         supported_features: 0,
       },
     },
@@ -328,7 +339,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "9381b2e4edd1bb21e868e2193f5d132a5fae153ce4f458451d979a02712b4642",
         motion_detection: true,
         friendly_name: "Backyard",
-        entity_picture: "/assets/arsaboo/images/camera.backyard.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.backyard?token=9381b2e4edd1bb21e868e2193f5d132a5fae153ce4f458451d979a02712b4642",
         supported_features: 0,
       },
     },
@@ -340,7 +352,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
           "ac38bf88c2c5896eed66ae15739a3e726677f92d79e0d57f83f726ac28bda746",
         motion_detection: true,
         friendly_name: "Driveway",
-        entity_picture: "/assets/arsaboo/images/camera.driveway.jpg",
+        entity_picture:
+          "/api/camera_proxy/camera.driveway?token=ac38bf88c2c5896eed66ae15739a3e726677f92d79e0d57f83f726ac28bda746",
         supported_features: 0,
       },
     },
@@ -464,7 +477,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         friendly_name: localize(
           "ui.panel.page-demo.config.arsaboo.names.family_room"
         ),
-        entity_picture: "/assets/arsaboo/images/media_player_family_room.jpg",
+        entity_picture:
+          "/api/media_player_proxy/media_player.family_room_2?token=be41a86e2a360761d67c36a010b09654b730deec092016ee92aafef79b1978ff&cache=e03d22fb103202e7",
         supported_features: 64063,
       },
     },
@@ -473,7 +487,16 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "06:44",
       attributes: {
         attribution: "Data provided by Ring.com",
+        device_id: "e04f434dca02",
+        firmware: "Up to Date",
+        kind: "lpd_v2",
+        timezone: "America/New_York",
+        type: "doorbots",
+        wifi_name: "RingOfSecurity-hUrGKNlhR",
+        created_at: "2019-01-22T06:44:31-05:00",
         answered: false,
+        recording_status: "ready",
+        category: "ding",
         friendly_name: "Front Door Last Ding",
         icon: "hademo:history",
       },

demo/src/configs/teachingbirds/lovelace.ts

@@ -395,7 +395,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           cards: [
             {
               entity: "script.air_cleaner_quiet",
-              type: "button",
+              type: "entity-button",
               name: "AC bed",
               tap_action: {
                 action: "call-service",
@@ -408,7 +408,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.air_cleaner_auto",
-              type: "button",
+              type: "entity-button",
               name: "AC bed",
               tap_action: {
                 action: "call-service",
@@ -421,7 +421,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.air_cleaner_turbo",
-              type: "button",
+              type: "entity-button",
               name: "AC bed",
               tap_action: {
                 action: "call-service",
@@ -434,7 +434,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.ac_off",
-              type: "button",
+              type: "entity-button",
               name: "AC",
               tap_action: {
                 action: "call-service",
@@ -447,7 +447,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
             },
             {
               entity: "script.ac_on",
-              type: "button",
+              type: "entity-button",
               name: "AC",
               tap_action: {
                 action: "call-service",
@@ -658,7 +658,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     action: "call-service",
                     service: "script.goodnight",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:weather-night",
                 },
                 {
@@ -670,7 +670,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "scene.turn_on",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:coffee-outline",
                 },
                 {
@@ -682,7 +682,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "scene.turn_on",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:television-classic",
                 },
               ],
@@ -743,7 +743,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "light.toggle",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:page-layout-footer",
                 },
                 {
@@ -755,7 +755,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                     },
                     service: "light.toggle",
                   },
-                  type: "button",
+                  type: "entity-button",
                   icon: "mdi:page-layout-header",
                 },
               ],

demo/webpack.config.js

@@ -6,7 +6,7 @@ const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 const latestBuild = true;
 
 module.exports = createDemoConfig({
-  isProdBuild: isProdBuild(),
-  isStatsBuild: isStatsBuild(),
+  isProdBuild,
+  isStatsBuild,
   latestBuild,
 });

gallery/src/data/media_players.ts

@@ -1,84 +0,0 @@
-import { getEntity } from "../../../src/fake_data/entity";
-
-export const createMediaPlayerEntities = () => [
-  getEntity("media_player", "music_paused", "paused", {
-    friendly_name: "Pausing The Music",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 64063,
-    entity_picture: "/images/album_cover_2.jpg",
-    media_duration: 300,
-    media_position: 50,
-    media_position_updated_at: new Date(
-      // 23 seconds in
-      new Date().getTime() - 23000
-    ).toISOString(),
-  }),
-  getEntity("media_player", "music_playing", "playing", {
-    friendly_name: "Playing The Music",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 64063,
-    entity_picture: "/images/album_cover.jpg",
-    media_duration: 300,
-    media_position: 0,
-    media_position_updated_at: new Date(
-      // 23 seconds in
-      new Date().getTime() - 23000
-    ).toISOString(),
-  }),
-  getEntity("media_player", "stream_playing", "playing", {
-    friendly_name: "Playing the Stream",
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    entity_picture: "/images/frenck.jpg",
-    supported_features: 33,
-  }),
-  getEntity("media_player", "living_room", "playing", {
-    friendly_name: "Pause, No skip, tvshow",
-    media_content_type: "tvshow",
-    media_title: "Chapter 1",
-    media_series_title: "House of Cards",
-    app_name: "Netflix",
-    entity_picture: "/images/netflix.jpg",
-    supported_features: 1,
-  }),
-  getEntity("media_player", "sonos_idle", "idle", {
-    friendly_name: "Sonos Idle",
-    supported_features: 64063,
-  }),
-  getEntity("media_player", "theater", "off", {
-    friendly_name: "TV Off",
-    supported_features: 161,
-  }),
-  getEntity("media_player", "android_cast", "playing", {
-    friendly_name: "Casting App",
-    media_title: "Android Screen Casting",
-    app_name: "Screen Mirroring",
-    // supported_features: 21437,
-  }),
-  getEntity("media_player", "unavailable", "unavailable", {
-    friendly_name: "Player Unavailable",
-    supported_features: 21437,
-  }),
-  getEntity("media_player", "unknown", "unknown", {
-    friendly_name: "Player Unknown",
-    supported_features: 21437,
-  }),
-  getEntity("media_player", "receiver_on", "on", {
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    volume_level: 0.63,
-    is_volume_muted: false,
-    source: "TV",
-    friendly_name: "Receiver",
-    supported_features: 84364,
-  }),
-  getEntity("media_player", "receiver_off", "off", {
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    friendly_name: "Receiver",
-    supported_features: 84364,
-  }),
-];

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

@@ -15,14 +15,14 @@ const CONFIGS = [
   {
     heading: "Basic example",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
     `,
   },
   {
     heading: "With Name",
     config: `
-- type: button
+- type: entity-button
   name: Bedroom
   entity: light.bed_light
     `,
@@ -30,7 +30,7 @@ const CONFIGS = [
   {
     heading: "With Icon",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   icon: mdi:hotel
     `,
@@ -38,7 +38,7 @@ const CONFIGS = [
   {
     heading: "Without State",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   show_state: false
     `,
@@ -46,7 +46,7 @@ const CONFIGS = [
   {
     heading: "Custom Tap Action (toggle)",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   tap_action: 
     action: toggle
@@ -55,7 +55,7 @@ const CONFIGS = [
   {
     heading: "Running Service",
     config: `
-- type: button
+- type: entity-button
   entity: light.bed_light
   service: light.toggle
     `,
@@ -63,13 +63,13 @@ const CONFIGS = [
   {
     heading: "Invalid Entity",
     config: `
-- type: button
+- type: entity-button
   entity: sensor.invalid_entity
     `,
   },
 ];
 
-class DemoButtonEntity extends PolymerElement {
+class DemoEntityButtonEntity extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
@@ -97,4 +97,4 @@ class DemoButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-button-card", DemoButtonEntity);
+customElements.define("demo-hui-entity-button-card", DemoEntityButtonEntity);

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,117 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import "../components/demo-cards";
-import { createMediaPlayerEntities } from "../data/media_players";
-import "../../../src/panels/lovelace/cards/hui-media-control-card";
-
-const CONFIGS = [
-  {
-    heading: "Paused music",
-    config: `
-  - type: media-control
-    entity: media_player.music_paused
-    `,
-  },
-  {
-    heading: "Playing music",
-    config: `
-  - type: media-control
-    entity: media_player.music_playing
-    `,
-  },
-  {
-    heading: "Playing stream",
-    config: `
-  - type: media-control
-    entity: media_player.stream_playing
-    `,
-  },
-  {
-    heading: "Pause, No skip, tvshow",
-    config: `
-  - type: media-control
-    entity: media_player.living_room
-    `,
-  },
-  {
-    heading: "Screen casting",
-    config: `
-  - type: media-control
-    entity: media_player.android_cast
-    `,
-  },
-  {
-    heading: "Sonos Idle",
-    config: `
-  - type: media-control
-    entity: media_player.sonos_idle
-    `,
-  },
-  {
-    heading: "Player Off",
-    config: `
-  - type: media-control
-    entity: media_player.theater
-    `,
-  },
-  {
-    heading: "Player Unavailable",
-    config: `
-  - type: media-control
-    entity: media_player.unavailable
-    `,
-  },
-  {
-    heading: "Player Unknown",
-    config: `
-  - type: media-control
-    entity: media_player.unknown
-    `,
-  },
-  {
-    heading: "Receiver On",
-    config: `
-  - type: media-control
-    entity: media_player.receiver_on
-    `,
-  },
-  {
-    heading: "Receiver Off",
-    config: `
-  - type: media-control
-    entity: media_player.receiver_off
-    `,
-  },
-];
-
-class DemoHuiMediControlCard 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,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
-    hass.addEntities(createMediaPlayerEntities());
-  }
-}
-
-customElements.define("demo-hui-media-control-card", DemoHuiMediControlCard);

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

@@ -1,9 +1,54 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
-import { createMediaPlayerEntities } from "../data/media_players";
+
+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 = [
   {
@@ -11,24 +56,20 @@ const CONFIGS = [
     config: `
 - type: entities
   entities:
-    - entity: media_player.music_paused
-      name: Paused music
-    - entity: media_player.music_playing
-      name: Playing music
-    - entity: media_player.stream_playing
+    - 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.sonos_idle
+    - entity: media_player.lounge_room
       name: Chromcast Idle
     - entity: media_player.theater
-      name: Player Off
-    - entity: media_player.unavailable
-      name: Player Unavailable
-    - entity: media_player.unknown
-      name: Player Unknown
+      name: 'Player Off'
     `,
   },
 ];
@@ -57,7 +98,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
   public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
-    hass.addEntities(createMediaPlayerEntities());
+    hass.addEntities(ENTITIES);
   }
 }
 

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

@@ -18,7 +18,6 @@ import {
 } from "../../../src/data/hassio/addon";
 import { navigate } from "../../../src/common/navigate";
 import { filterAndSort } from "../components/hassio-filter-addons";
-import { atLeastVersion } from "../../../src/common/config/version";
 
 class HassioAddonRepositoryEl extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -40,6 +39,7 @@ class HassioAddonRepositoryEl extends LitElement {
   protected render(): TemplateResult {
     const repo = this.repo;
     const addons = this._getAddons(this.addons, this.filter);
+    const ha105pluss = this._computeHA105plus;
 
     if (this.filter && addons.length < 1) {
       return html`
@@ -57,9 +57,7 @@ class HassioAddonRepositoryEl extends LitElement {
         </h1>
         <p class="description">
           Maintained by ${repo.maintainer}<br />
-          <a class="repo" href=${repo.url} target="_blank" rel="noreferrer">
-            ${repo.url}
-          </a>
+          <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
         </p>
         <div class="card-group">
           ${addons.map(
@@ -92,11 +90,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : !addon.available
                       ? "not_available"
                       : ""}
-                    .iconImage=${atLeastVersion(
-                      this.hass.config.version,
-                      0,
-                      105
-                    ) && addon.icon
+                    .iconImage=${ha105pluss && addon.icon
                       ? `/api/hassio/addons/${addon.slug}/icon`
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
@@ -121,6 +115,11 @@ class HassioAddonRepositoryEl extends LitElement {
     navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
+  private get _computeHA105plus(): boolean {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 105);
+  }
+
   static get styles(): CSSResultArray {
     return [
       hassioStyle,

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

@@ -128,27 +128,22 @@ class HassioAddonAudio extends LitElement {
 
   private _setInputDevice(ev): void {
     const device = ev.detail.item.getAttribute("device");
-    this._selectedInput = device;
+    this._selectedInput = device || null;
   }
 
   private _setOutputDevice(ev): void {
     const device = ev.detail.item.getAttribute("device");
-    this._selectedOutput = device;
+    this._selectedOutput = device || null;
   }
 
   private async _addonChanged(): Promise<void> {
-    this._selectedInput =
-      this.addon.audio_input === null ? "default" : this.addon.audio_input;
-    this._selectedOutput =
-      this.addon.audio_output === null ? "default" : this.addon.audio_output;
+    this._selectedInput = this.addon.audio_input;
+    this._selectedOutput = this.addon.audio_output;
     if (this._outputDevices) {
       return;
     }
 
-    const noDevice: HassioHardwareAudioDevice = {
-      device: "default",
-      name: "Default",
-    };
+    const noDevice: HassioHardwareAudioDevice = { device: null, name: "-" };
 
     try {
       const { audio } = await fetchHassioHardwareAudio(this.hass);
@@ -173,10 +168,8 @@ class HassioAddonAudio extends LitElement {
   private async _saveSettings(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      audio_input:
-        this._selectedInput === "default" ? null : this._selectedInput,
-      audio_output:
-        this._selectedOutput === "default" ? null : this._selectedOutput,
+      audio_input: this._selectedInput || null,
+      audio_output: this._selectedOutput || null,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);

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

@@ -36,7 +36,6 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { navigate } from "../../../src/common/navigate";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import { atLeastVersion } from "../../../src/common/config/version";
 
 const PERMIS_DESC = {
   rating: {
@@ -107,7 +106,7 @@ class HassioAddonInfo extends LitElement {
                 <hassio-card-content
                   .hass=${this.hass}
                   .title="${this.addon.name} ${this.addon
-                    .version_latest} is available"
+                    .last_version} is available"
                   .description="You are currently running version ${this.addon
                     .version}"
                   icon="hassio:arrow-up-bold-circle"
@@ -179,26 +178,21 @@ class HassioAddonInfo extends LitElement {
                         `}
                   `
                 : html`
-                    ${this.addon.version_latest}
+                    ${this.addon.last_version}
                   `}
             </div>
           </div>
           <div class="description light-color">
             ${this.addon.description}.<br />
             Visit
-            <a href="${this.addon.url}" target="_blank" rel="noreferrer">
+            <a href="${this.addon.url}" target="_blank">
               ${this.addon.name} page</a
             >
             for details.
           </div>
           ${this.addon.logo
             ? html`
-                <a
-                  href="${this.addon.url}"
-                  target="_blank"
-                  class="logo"
-                  rel="noreferrer"
-                >
+                <a href="${this.addon.url}" target="_blank" class="logo">
                   <img src="/api/hassio/addons/${this.addon.slug}/logo" />
                 </a>
               `
@@ -434,7 +428,6 @@ class HassioAddonInfo extends LitElement {
                         tabindex="-1"
                         target="_blank"
                         class="right"
-                        rel="noopener"
                       >
                         <mwc-button>
                           Open web UI
@@ -459,7 +452,7 @@ class HassioAddonInfo extends LitElement {
                     `
                   : ""}
                 <ha-progress-button
-                  .disabled=${!this.addon.available || this._installing}
+                  .disabled=${!this.addon.available}
                   .progress=${this._installing}
                   @click=${this._installClicked}
                 >
@@ -636,7 +629,7 @@ class HassioAddonInfo extends LitElement {
       this.addon &&
       !this.addon.detached &&
       this.addon.version &&
-      this.addon.version !== this.addon.version_latest
+      this.addon.version !== this.addon.last_version
     );
   }
 
@@ -660,9 +653,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private get _computeCannotIngressSidebar(): boolean {
-    return (
-      !this.addon.ingress || !atLeastVersion(this.hass.config.version, 0, 92)
-    );
+    return !this.addon.ingress || !this._computeHA92plus;
   }
 
   private get _computeUsesProtectedOptions(): boolean {
@@ -671,6 +662,11 @@ class HassioAddonInfo extends LitElement {
     );
   }
 
+  private get _computeHA92plus(): boolean {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 92);
+  }
+
   private async _startOnBootToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {

hassio/src/dashboard/hassio-addons.ts

@@ -15,7 +15,6 @@ import { navigate } from "../../../src/common/navigate";
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
 import "../components/hassio-card-content";
-import { atLeastVersion } from "../../../src/common/config/version";
 
 @customElement("hassio-addons")
 class HassioAddons extends LitElement {
@@ -23,6 +22,9 @@ class HassioAddons extends LitElement {
   @property() public addons?: HassioAddonInfo[];
 
   protected render(): TemplateResult {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    const ha105pluss =
+      Number(major) > 0 || (major === "0" && Number(minor) >= 105);
     return html`
       <div class="content">
         <h1>Add-ons</h1>
@@ -66,11 +68,7 @@ class HassioAddons extends LitElement {
                             : addon.installed && addon.state === "started"
                             ? "running"
                             : "stopped"}
-                          .iconImage=${atLeastVersion(
-                            this.hass.config.version,
-                            0,
-                            105
-                          ) && addon.icon
+                          .iconImage=${ha105pluss && addon.icon
                             ? `/api/hassio/addons/${addon.slug}/icon`
                             : undefined}
                         ></hassio-card-content>

hassio/src/dashboard/hassio-update.ts

@@ -40,11 +40,9 @@ export class HassioUpdate extends LitElement {
     ].filter((value) => {
       return (
         !!value &&
-        (value.version_latest
-          ? value.version !== value.version_latest
-          : value.version_latest
-          ? value.version !== value.version_latest
-          : false)
+        (value.last_version
+          ? value.version !== value.last_version
+          : value.version !== value.version_latest)
       );
     }).length;
 
@@ -68,26 +66,26 @@ export class HassioUpdate extends LitElement {
           ${this._renderUpdateCard(
             "Home Assistant Core",
             this.hassInfo.version,
-            this.hassInfo.version_latest,
+            this.hassInfo.last_version,
             "hassio/homeassistant/update",
             `https://${
-              this.hassInfo.version_latest.includes("b") ? "rc" : "www"
+              this.hassInfo.last_version.includes("b") ? "rc" : "www"
             }.home-assistant.io/latest-release-notes/`,
             "hassio:home-assistant"
           )}
           ${this._renderUpdateCard(
             "Supervisor",
             this.supervisorInfo.version,
-            this.supervisorInfo.version_latest,
+            this.supervisorInfo.last_version,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.version_latest}`
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.last_version}`
           )}
           ${this.hassOsInfo
             ? this._renderUpdateCard(
                 "Operating System",
                 this.hassOsInfo.version,
                 this.hassOsInfo.version_latest,
-                "hassio/os/update",
+                "hassio/hassos/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
               )
             : ""}
@@ -104,7 +102,7 @@ export class HassioUpdate extends LitElement {
     releaseNotesUrl: string,
     icon?: string
   ): TemplateResult {
-    if (!lastVersion || lastVersion === curVersion) {
+    if (lastVersion === curVersion) {
       return html``;
     }
     return html`
@@ -123,7 +121,7 @@ export class HassioUpdate extends LitElement {
           </div>
         </div>
         <div class="card-actions">
-          <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
+          <a href="${releaseNotesUrl}" target="_blank">
             <mwc-button>Release notes</mwc-button>
           </a>
           <ha-call-api-button

hassio/src/hassio-main.ts

@@ -87,7 +87,8 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
     applyThemesOnElement(
       this.parentElement,
       this.hass.themes,
-      this.hass.selectedTheme || this.hass.themes.default_theme
+      this.hass.selectedTheme,
+      true
     );
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     // Paulus - March 17, 2019

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

@@ -100,7 +100,7 @@ class HassioHostInfo extends LitElement {
                 <ha-call-api-button
                   class="warning"
                   .hass=${this.hass}
-                  path="hassio/os/config/sync"
+                  path="hassio/hassos/config/sync"
                   title="Load HassOS configs or updates from USB"
                   >Import from USB</ha-call-api-button
                 >
@@ -108,7 +108,9 @@ class HassioHostInfo extends LitElement {
             : ""}
           ${this.hostInfo.version !== this.hostInfo.version_latest
             ? html`
-                <ha-call-api-button .hass=${this.hass} path="hassio/os/update"
+                <ha-call-api-button
+                  .hass=${this.hass}
+                  path="hassio/hassos/update"
                   >Update</ha-call-api-button
                 >
               `

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

@@ -41,7 +41,7 @@ class HassioSupervisorInfo extends LitElement {
               </tr>
               <tr>
                 <td>Latest version</td>
-                <td>${this.supervisorInfo.version_latest}</td>
+                <td>${this.supervisorInfo.last_version}</td>
               </tr>
               ${this.supervisorInfo.channel !== "stable"
                 ? html`
@@ -63,7 +63,7 @@ class HassioSupervisorInfo extends LitElement {
           <ha-call-api-button .hass=${this.hass} path="hassio/supervisor/reload"
             >Reload</ha-call-api-button
           >
-          ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
+          ${this.supervisorInfo.version !== this.supervisorInfo.last_version
             ? html`
                 <ha-call-api-button
                   .hass=${this.hass}
@@ -148,7 +148,7 @@ class HassioSupervisorInfo extends LitElement {
       !confirm(`WARNING:
 Beta releases are for testers and early adopters and can contain unstable code changes. Make sure you have backups of your data before you activate this feature.
 
-This includes beta releases for:
+This inludes beta releases for:
 - Home Assistant (Release Candidates)
 - Hass.io supervisor
 - Host system`)

hassio/webpack.config.js

@@ -6,6 +6,6 @@ const { isProdBuild } = require("../build-scripts/env.js");
 const latestBuild = false;
 
 module.exports = createHassioConfig({
-  isProdBuild: isProdBuild(),
+  isProdBuild,
   latestBuild,
 });

package.json

@@ -18,13 +18,15 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material/chips": "^5.0.0",
-    "@material/mwc-button": "^0.13.0",
-    "@material/mwc-checkbox": "^0.13.0",
-    "@material/mwc-dialog": "^0.13.0",
-    "@material/mwc-fab": "^0.13.0",
-    "@material/mwc-ripple": "^0.13.0",
-    "@material/mwc-switch": "^0.13.0",
+    "@material/chips": "^3.2.0",
+    "@material/data-table": "^3.2.0",
+    "@material/mwc-base": "^0.10.0",
+    "@material/mwc-button": "^0.10.0",
+    "@material/mwc-checkbox": "^0.10.0",
+    "@material/mwc-dialog": "^0.10.0",
+    "@material/mwc-fab": "^0.10.0",
+    "@material/mwc-ripple": "^0.10.0",
+    "@material/mwc-switch": "^0.10.0",
     "@mdi/svg": "4.9.95",
     "@polymer/app-layout": "^3.0.2",
     "@polymer/app-localize-behavior": "^3.0.1",
@@ -68,9 +70,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.3.7",
-    "@types/resize-observer-browser": "^0.1.3",
-    "@vaadin/vaadin-combo-box": "^5.0.10",
-    "@vaadin/vaadin-date-picker": "^4.0.7",
+    "@vaadin/vaadin-combo-box": "^5.0.6",
+    "@vaadin/vaadin-date-picker": "^4.0.3",
     "@webcomponents/shadycss": "^1.9.0",
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "~2.8.0",
@@ -78,13 +79,12 @@
     "codemirror": "^5.49.0",
     "cpx": "^1.5.0",
     "deep-clone-simple": "^1.1.1",
-    "deep-freeze": "^0.0.1",
     "es6-object-assign": "^1.1.0",
     "fecha": "^3.0.2",
     "fuse.js": "^3.4.4",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^0.12.4",
-    "home-assistant-js-websocket": "5.0.0",
+    "home-assistant-js-websocket": "^4.4.0",
     "intl-messageformat": "^2.2.0",
     "js-yaml": "^3.13.1",
     "leaflet": "^1.4.0",
@@ -96,12 +96,10 @@
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",
     "moment": "^2.24.0",
-    "node-vibrant": "^3.1.5",
     "preact": "^8.4.2",
     "preact-compat": "^3.18.4",
     "react-big-calendar": "^0.20.4",
     "regenerator-runtime": "^0.13.2",
-    "resize-observer": "^1.0.0",
     "roboto-fontface": "^0.10.0",
     "superstruct": "^0.6.1",
     "tslib": "^1.10.0",
@@ -110,17 +108,16 @@
     "xss": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-external-helpers": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-typescript": "^7.8.3",
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-external-helpers": "^7.7.4",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-transform-react-jsx": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^3.0.12",
     "@types/chromecast-caf-sender": "^1.0.1",
@@ -146,11 +143,13 @@
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
     "gulp-foreach": "^0.1.0",
+    "gulp-hash": "^4.2.2",
+    "gulp-hash-filename": "^2.0.1",
     "gulp-insert": "^0.5.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-jsonminify": "^1.1.0",
     "gulp-merge-json": "^1.3.1",
-    "gulp-rename": "^2.0.0",
+    "gulp-rename": "^1.4.0",
     "gulp-zopfli-green": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
@@ -173,8 +172,6 @@
     "tslint-eslint-rules": "^5.4.0",
     "tslint-plugin-prettier": "^2.0.1",
     "typescript": "^3.7.2",
-    "vinyl-buffer": "^1.0.1",
-    "vinyl-source-stream": "^2.0.0",
     "web-component-tester": "^6.9.2",
     "webpack": "^4.40.2",
     "webpack-cli": "^3.3.9",
@@ -188,15 +185,7 @@
   "resolutions": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
-    "lit-html": "^1.1.2",
-    "@material/button": "^5.0.0",
-    "@material/checkbox": "^5.0.0",
-    "@material/dialog": "^5.0.0",
-    "@material/fab": "^5.0.0",
-    "@material/switch": "^5.0.0",
-    "@material/ripple": "^5.0.0",
-    "@material/dom": "^5.0.0",
-    "@material/touch-target": "^5.0.0"
+    "lit-html": "^1.1.2"
   },
   "main": "src/home-assistant.js",
   "husky": {

polymer.json

@@ -11,13 +11,17 @@
     "src/panels/dev-template/ha-panel-dev-template.js",
     "src/panels/history/ha-panel-history.js",
     "src/panels/iframe/ha-panel-iframe.js",
+    "src/panels/kiosk/ha-panel-kiosk.js",
     "src/panels/logbook/ha-panel-logbook.js",
     "src/panels/map/ha-panel-map.js",
     "src/panels/shopping-list/ha-panel-shopping-list.js",
     "src/panels/mailbox/ha-panel-mailbox.js",
     "hassio/src/entrypoint.js"
   ],
-  "sources": ["src/**/*", "!src/translations/*"],
+  "sources": [
+    "src/**/*",
+    "!src/translations/*"
+  ],
   "lint": {
     "rules": ["polymer-3"],
     "ignoreWarnings": ["could-not-resolve-reference", "could-not-load"],

setup.py

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

src/cards/ha-badges-card.ts

@@ -0,0 +1,45 @@
+import { TemplateResult, html } from "lit-html";
+import { customElement, LitElement, property } from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import "../components/entity/ha-state-label-badge";
+
+import { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-badges-card")
+class HaBadgesCard extends LitElement {
+  @property() public hass?: HomeAssistant;
+  @property() public states?: HassEntity[];
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.states) {
+      return html``;
+    }
+
+    return html`
+      ${this.states.map(
+        (state) => html`
+          <ha-state-label-badge
+            .hass=${this.hass}
+            .state=${state}
+            @click=${this._handleClick}
+          ></ha-state-label-badge>
+        `
+      )}
+    `;
+  }
+
+  private _handleClick(ev: Event) {
+    const entityId = ((ev.target as any).state as HassEntity).entity_id;
+    fireEvent(this, "hass-more-info", {
+      entityId,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-badges-card": HaBadgesCard;
+  }
+}

src/cards/ha-camera-card.js

@@ -0,0 +1,127 @@
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+import { fetchThumbnailUrlWithCache } from "../data/camera";
+
+const UPDATE_INTERVAL = 10000; // ms
+/*
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
+ */
+class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style include="paper-material-styles">
+        :host {
+          @apply --paper-material-elevation-1;
+          display: block;
+          position: relative;
+          font-size: 0px;
+          border-radius: 2px;
+          cursor: pointer;
+          min-height: 48px;
+          line-height: 0;
+        }
+        .camera-feed {
+          width: 100%;
+          height: auto;
+          border-radius: 2px;
+        }
+        .caption {
+          @apply --paper-font-common-nowrap;
+          position: absolute;
+          left: 0px;
+          right: 0px;
+          bottom: 0px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 16px;
+
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 16px;
+          color: white;
+        }
+      </style>
+
+      <template is="dom-if" if="[[cameraFeedSrc]]">
+        <img
+          src="[[cameraFeedSrc]]"
+          class="camera-feed"
+          alt="[[_computeStateName(stateObj)]]"
+          on-load="_imageLoaded"
+          on-error="_imageError"
+        />
+      </template>
+      <div class="caption">
+        [[_computeStateName(stateObj)]]
+        <template is="dom-if" if="[[!imageLoaded]]">
+          ([[localize('ui.card.camera.not_available')]])
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: {
+        type: Object,
+        observer: "updateCameraFeedSrc",
+      },
+      cameraFeedSrc: {
+        type: String,
+        value: "",
+      },
+      imageLoaded: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener("click", () => this.cardTapped());
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.timer = setInterval(() => this.updateCameraFeedSrc(), UPDATE_INTERVAL);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this.timer);
+  }
+
+  _imageLoaded() {
+    this.imageLoaded = true;
+  }
+
+  _imageError() {
+    this.imageLoaded = false;
+  }
+
+  cardTapped() {
+    this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
+  }
+
+  async updateCameraFeedSrc() {
+    this.cameraFeedSrc = await fetchThumbnailUrlWithCache(
+      this.hass,
+      this.stateObj.entity_id
+    );
+  }
+
+  _computeStateName(stateObj) {
+    return computeStateName(stateObj);
+  }
+}
+customElements.define("ha-camera-card", HaCameraCard);

src/cards/ha-card-chooser.js

@@ -0,0 +1,81 @@
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "./ha-camera-card";
+import "./ha-entities-card";
+import "./ha-history_graph-card";
+import "./ha-media_player-card";
+import "./ha-persistent_notification-card";
+import "./ha-plant-card";
+import "./ha-weather-card";
+
+import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
+
+class HaCardChooser extends PolymerElement {
+  static get properties() {
+    return {
+      cardData: {
+        type: Object,
+        observer: "cardDataChanged",
+      },
+    };
+  }
+
+  _updateCard(newData) {
+    dynamicContentUpdater(
+      this,
+      "HA-" + newData.cardType.toUpperCase() + "-CARD",
+      newData
+    );
+  }
+
+  createObserver() {
+    this._updatesAllowed = false;
+    this.observer = new IntersectionObserver((entries) => {
+      if (!entries.length) return;
+      if (entries[0].isIntersecting) {
+        this.style.height = "";
+        if (this._detachedChild) {
+          this.appendChild(this._detachedChild);
+          this._detachedChild = null;
+        }
+        this._updateCard(this.cardData); // Don't use 'newData' as it might have changed.
+        this._updatesAllowed = true;
+      } else {
+        // Set the card to be 48px high. Otherwise if the card is kept as 0px height then all
+        // following cards would trigger the observer at once.
+        const offsetHeight = this.offsetHeight;
+        this.style.height = `${offsetHeight || 48}px`;
+        if (this.lastChild) {
+          this._detachedChild = this.lastChild;
+          this.removeChild(this.lastChild);
+        }
+        this._updatesAllowed = false;
+      }
+    });
+    this.observer.observe(this);
+  }
+
+  cardDataChanged(newData) {
+    if (!newData) return;
+    // ha-entities-card is exempt from observer as it doesn't load heavy resources.
+    // and usually doesn't load external resources (except for entity_picture).
+    const eligibleToObserver =
+      window.IntersectionObserver && newData.cardType !== "entities";
+    if (!eligibleToObserver) {
+      if (this.observer) {
+        this.observer.unobserve(this);
+        this.observer = null;
+      }
+      this.style.height = "";
+      this._updateCard(newData);
+      return;
+    }
+    if (!this.observer) {
+      this.createObserver();
+    }
+    if (this._updatesAllowed) {
+      this._updateCard(newData);
+    }
+  }
+}
+customElements.define("ha-card-chooser", HaCardChooser);

src/cards/ha-entities-card.js

@@ -0,0 +1,182 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/entity/ha-entity-toggle";
+import "../components/ha-card";
+import "../state-summary/state-card-content";
+
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { stateMoreInfoType } from "../common/entity/state_more_info_type";
+import { canToggleState } from "../common/entity/can_toggle_state";
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+
+class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style include="iron-flex"></style>
+      <style>
+        ha-card {
+          padding: 16px;
+        }
+        .states {
+          margin: -4px 0;
+        }
+        .state {
+          padding: 4px 0;
+        }
+        .header {
+          @apply --paper-font-headline;
+          /* overwriting line-height +8 because entity-toggle can be 40px height,
+           compensating this with reduced padding */
+          line-height: 40px;
+          color: var(--primary-text-color);
+          padding: 4px 0 12px;
+        }
+        .header .name {
+          @apply --paper-font-common-nowrap;
+        }
+        ha-entity-toggle {
+          margin-left: 16px;
+        }
+        .more-info {
+          cursor: pointer;
+        }
+      </style>
+
+      <ha-card>
+        <template is="dom-if" if="[[title]]">
+          <div
+            class$="[[computeTitleClass(groupEntity)]]"
+            on-click="entityTapped"
+          >
+            <div class="flex name">[[title]]</div>
+            <template is="dom-if" if="[[showGroupToggle(groupEntity, states)]]">
+              <ha-entity-toggle
+                hass="[[hass]]"
+                state-obj="[[groupEntity]]"
+              ></ha-entity-toggle>
+            </template>
+          </div>
+        </template>
+        <div class="states">
+          <template
+            is="dom-repeat"
+            items="[[states]]"
+            on-dom-change="addTapEvents"
+          >
+            <div class$="[[computeStateClass(item)]]">
+              <state-card-content
+                hass="[[hass]]"
+                class="state-card"
+                state-obj="[[item]]"
+              ></state-card-content>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      states: Array,
+      groupEntity: Object,
+      title: {
+        type: String,
+        computed: "computeTitle(states, groupEntity, localize)",
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    // We need to save a single bound function reference to ensure the event listener
+    // can identify it properly.
+    this.entityTapped = this.entityTapped.bind(this);
+  }
+
+  computeTitle(states, groupEntity, localize) {
+    if (groupEntity) {
+      return computeStateName(groupEntity).trim();
+    }
+    const domain = computeStateDomain(states[0]);
+    return (
+      (localize && localize(`domain.${domain}`)) || domain.replace(/_/g, " ")
+    );
+  }
+
+  computeTitleClass(groupEntity) {
+    let classes = "header horizontal layout center ";
+    if (groupEntity) {
+      classes += "more-info";
+    }
+    return classes;
+  }
+
+  computeStateClass(stateObj) {
+    return stateMoreInfoType(stateObj) !== "hidden"
+      ? "state more-info"
+      : "state";
+  }
+
+  addTapEvents() {
+    const cards = this.root.querySelectorAll(".state");
+    cards.forEach((card) => {
+      if (card.classList.contains("more-info")) {
+        card.addEventListener("click", this.entityTapped);
+      } else {
+        card.removeEventListener("click", this.entityTapped);
+      }
+    });
+  }
+
+  entityTapped(ev) {
+    const item = this.root
+      .querySelector("dom-repeat")
+      .itemForElement(ev.target);
+    let entityId;
+    if (!item && !this.groupEntity) {
+      return;
+    }
+    ev.stopPropagation();
+
+    if (item) {
+      entityId = item.entity_id;
+    } else {
+      entityId = this.groupEntity.entity_id;
+    }
+    this.fire("hass-more-info", { entityId: entityId });
+  }
+
+  showGroupToggle(groupEntity, states) {
+    if (
+      !groupEntity ||
+      !states ||
+      groupEntity.attributes.control === "hidden" ||
+      (groupEntity.state !== "on" && groupEntity.state !== "off")
+    ) {
+      return false;
+    }
+
+    // Only show if we can toggle 2+ entities in group
+    let canToggleCount = 0;
+    for (let i = 0; i < states.length; i++) {
+      if (!canToggleState(this.hass, states[i])) {
+        continue;
+      }
+
+      canToggleCount++;
+
+      if (canToggleCount > 1) {
+        break;
+      }
+    }
+
+    return canToggleCount > 1;
+  }
+}
+customElements.define("ha-entities-card", HaEntitiesCard);

src/cards/ha-media_player-card.js

@@ -0,0 +1,409 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-progress/paper-progress";
+import "@polymer/paper-styles/element-styles/paper-material-styles";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import HassMediaPlayerEntity from "../util/hass-media-player-model";
+import { fetchMediaPlayerThumbnailWithCache } from "../data/media-player";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+
+/*
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
+ */
+class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style
+        include="paper-material-styles iron-flex iron-flex-alignment iron-positioning"
+      >
+        :host {
+          @apply --paper-material-elevation-1;
+          display: block;
+          position: relative;
+          font-size: 0px;
+          border-radius: 2px;
+        }
+
+        .banner {
+          position: relative;
+          background-color: white;
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+        }
+
+        .banner:before {
+          display: block;
+          content: "";
+          width: 100%;
+          /* removed .25% from 16:9 ratio to fix YT black bars */
+          padding-top: 56%;
+          transition: padding-top 0.8s;
+        }
+
+        .banner.no-cover {
+          background-position: center center;
+          background-image: url(/static/images/card_media_player_bg.png);
+          background-repeat: no-repeat;
+          background-color: var(--primary-color);
+        }
+
+        .banner.content-type-music:before {
+          padding-top: 100%;
+        }
+
+        .banner.content-type-game:before {
+          padding-top: 100%;
+        }
+
+        .banner.no-cover:before {
+          padding-top: 88px;
+        }
+
+        .banner > .cover {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+
+          background-position: center center;
+          background-size: cover;
+          transition: opacity 0.8s;
+          opacity: 1;
+        }
+
+        .banner.is-off > .cover {
+          opacity: 0;
+        }
+
+        .banner > .caption {
+          @apply --paper-font-caption;
+
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+
+          background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
+
+          padding: 8px 16px;
+
+          font-size: 14px;
+          font-weight: 500;
+          color: white;
+
+          transition: background-color 0.5s;
+        }
+
+        .banner.is-off > .caption {
+          background-color: initial;
+        }
+
+        .banner > .caption .title {
+          @apply --paper-font-common-nowrap;
+          font-size: 1.2em;
+          margin: 8px 0 4px;
+        }
+
+        .progress {
+          width: 100%;
+          height: var(--paper-progress-height, 4px);
+          margin-top: calc(-1 * var(--paper-progress-height, 4px));
+          --paper-progress-active-color: var(--accent-color);
+          --paper-progress-container-color: rgba(200, 200, 200, 0.5);
+        }
+
+        .controls {
+          position: relative;
+          @apply --paper-font-body1;
+          padding: 8px;
+          border-bottom-left-radius: 2px;
+          border-bottom-right-radius: 2px;
+          background-color: var(--paper-card-background-color, white);
+        }
+
+        .controls paper-icon-button {
+          width: 44px;
+          height: 44px;
+        }
+
+        .playback-controls {
+          direction: ltr;
+        }
+
+        paper-icon-button {
+          opacity: var(--dark-primary-opacity);
+        }
+
+        paper-icon-button[disabled] {
+          opacity: var(--dark-disabled-opacity);
+        }
+
+        paper-icon-button.primary {
+          width: 56px !important;
+          height: 56px !important;
+          background-color: var(--primary-color);
+          color: white;
+          border-radius: 50%;
+          padding: 8px;
+          transition: background-color 0.5s;
+        }
+
+        paper-icon-button.primary[disabled] {
+          background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
+        }
+
+        [invisible] {
+          visibility: hidden !important;
+        }
+      </style>
+
+      <div
+        class$="[[computeBannerClasses(playerObj, _coverShowing, _coverLoadError)]]"
+      >
+        <div class="cover" id="cover"></div>
+
+        <div class="caption">
+          [[_computeStateName(stateObj)]]
+          <div class="title">[[computePrimaryText(localize, playerObj)]]</div>
+          [[playerObj.secondaryTitle]]<br />
+        </div>
+      </div>
+
+      <paper-progress
+        max="[[stateObj.attributes.media_duration]]"
+        value="[[playbackPosition]]"
+        hidden$="[[computeHideProgress(playerObj)]]"
+        class="progress"
+      ></paper-progress>
+
+      <div class="controls layout horizontal justified">
+        <paper-icon-button
+          aria-label="Turn off"
+          icon="hass:power"
+          on-click="handleTogglePower"
+          invisible$="[[computeHidePowerButton(playerObj)]]"
+          class="self-center secondary"
+        ></paper-icon-button>
+
+        <div class="playback-controls">
+          <paper-icon-button
+            aria-label="Previous track"
+            icon="hass:skip-previous"
+            invisible$="[[!playerObj.supportsPreviousTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePrevious"
+          ></paper-icon-button>
+          <paper-icon-button
+            aria-label="Play or Pause"
+            class="primary"
+            icon="[[computePlaybackControlIcon(playerObj)]]"
+            invisible$="[[!computePlaybackControlIcon(playerObj)]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePlaybackControl"
+          ></paper-icon-button>
+          <paper-icon-button
+            aria-label="Next track"
+            icon="hass:skip-next"
+            invisible$="[[!playerObj.supportsNextTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handleNext"
+          ></paper-icon-button>
+        </div>
+
+        <paper-icon-button
+          aria-label="More information."
+          icon="hass:dots-vertical"
+          on-click="handleOpenMoreInfo"
+          class="self-center secondary"
+        ></paper-icon-button>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      playerObj: {
+        type: Object,
+        computed: "computePlayerObj(hass, stateObj)",
+        observer: "playerObjChanged",
+      },
+      playbackControlIcon: {
+        type: String,
+        computed: "computePlaybackControlIcon(playerObj)",
+      },
+      playbackPosition: Number,
+      _coverShowing: {
+        type: Boolean,
+        value: false,
+      },
+      _coverLoadError: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  async playerObjChanged(playerObj, oldPlayerObj) {
+    if (playerObj.isPlaying && playerObj.showProgress) {
+      if (!this._positionTracking) {
+        this._positionTracking = setInterval(
+          () => this.updatePlaybackPosition(),
+          1000
+        );
+      }
+    } else if (this._positionTracking) {
+      clearInterval(this._positionTracking);
+      this._positionTracking = null;
+    }
+    if (playerObj.showProgress) {
+      this.updatePlaybackPosition();
+    }
+
+    const picture = playerObj.stateObj.attributes.entity_picture;
+    const oldPicture =
+      oldPlayerObj && oldPlayerObj.stateObj.attributes.entity_picture;
+
+    if (picture !== oldPicture && !picture) {
+      this.$.cover.style.backgroundImage = "";
+      return;
+    }
+    if (picture === oldPicture) {
+      return;
+    }
+
+    // We have a new picture url
+    // If entity picture is non-relative, we use that url directly.
+    if (picture.substr(0, 1) !== "/") {
+      this._coverShowing = true;
+      this._coverLoadError = false;
+      this.$.cover.style.backgroundImage = `url(${picture})`;
+      return;
+    }
+
+    try {
+      const {
+        content_type: contentType,
+        content,
+      } = await fetchMediaPlayerThumbnailWithCache(
+        this.hass,
+        playerObj.stateObj.entity_id
+      );
+      this._coverShowing = true;
+      this._coverLoadError = false;
+      this.$.cover.style.backgroundImage = `url(data:${contentType};base64,${content})`;
+    } catch (err) {
+      this._coverShowing = false;
+      this._coverLoadError = true;
+      this.$.cover.style.backgroundImage = "";
+    }
+  }
+
+  updatePlaybackPosition() {
+    this.playbackPosition = this.playerObj.currentProgress;
+  }
+
+  computeBannerClasses(playerObj, coverShowing, coverLoadError) {
+    var cls = "banner";
+
+    if (!playerObj) {
+      return cls;
+    }
+
+    if (playerObj.isOff || playerObj.isIdle) {
+      cls += " is-off no-cover";
+    } else if (
+      !playerObj.stateObj.attributes.entity_picture ||
+      coverLoadError ||
+      !coverShowing
+    ) {
+      cls += " no-cover";
+    } else if (playerObj.stateObj.attributes.media_content_type === "music") {
+      cls += " content-type-music";
+    } else if (playerObj.stateObj.attributes.media_content_type === "game") {
+      cls += " content-type-game";
+    }
+    return cls;
+  }
+
+  computeHideProgress(playerObj) {
+    return !playerObj.showProgress;
+  }
+
+  computeHidePowerButton(playerObj) {
+    return playerObj.isOff
+      ? !playerObj.supportsTurnOn
+      : !playerObj.supportsTurnOff;
+  }
+
+  computePlayerObj(hass, stateObj) {
+    return new HassMediaPlayerEntity(hass, stateObj);
+  }
+
+  computePrimaryText(localize, playerObj) {
+    return (
+      playerObj.primaryTitle ||
+      localize(`state.media_player.${playerObj.stateObj.state}`) ||
+      localize(`state.default.${playerObj.stateObj.state}`) ||
+      playerObj.stateObj.state
+    );
+  }
+
+  computePlaybackControlIcon(playerObj) {
+    if (playerObj.isPlaying) {
+      return playerObj.supportsPause ? "hass:pause" : "hass:stop";
+    }
+    if (playerObj.hasMediaControl || playerObj.isOff || playerObj.isIdle) {
+      if (
+        playerObj.hasMediaControl &&
+        playerObj.supportsPause &&
+        !playerObj.isPaused
+      ) {
+        return "hass:play-pause";
+      }
+      return playerObj.supportsPlay ? "hass:play" : null;
+    }
+    return "";
+  }
+
+  _computeStateName(stateObj) {
+    return computeStateName(stateObj);
+  }
+
+  handleNext(ev) {
+    ev.stopPropagation();
+    this.playerObj.nextTrack();
+  }
+
+  handleOpenMoreInfo(ev) {
+    ev.stopPropagation();
+    this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
+  }
+
+  handlePlaybackControl(ev) {
+    ev.stopPropagation();
+    this.playerObj.mediaPlayPause();
+  }
+
+  handlePrevious(ev) {
+    ev.stopPropagation();
+    this.playerObj.previousTrack();
+  }
+
+  handleTogglePower(ev) {
+    ev.stopPropagation();
+    this.playerObj.togglePower();
+  }
+}
+customElements.define("ha-media_player-card", HaMediaPlayerCard);

src/cards/ha-persistent_notification-card.js

@@ -0,0 +1,76 @@
+import "@material/mwc-button";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/ha-card";
+import "../components/ha-markdown";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import LocalizeMixin from "../mixins/localize-mixin";
+import { computeObjectId } from "../common/entity/compute_object_id";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        ha-markdown p:first-child {
+          margin-top: 0;
+        }
+        ha-markdown p:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+        mwc-button {
+          margin: 8px;
+        }
+      </style>
+
+      <ha-card header="[[computeTitle(stateObj)]]">
+        <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
+        <mwc-button on-click="dismissTap"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
+        >
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+    };
+  }
+
+  computeTitle(stateObj) {
+    return stateObj.attributes.title || computeStateName(stateObj);
+  }
+
+  dismissTap(ev) {
+    ev.preventDefault();
+    this.hass.callService("persistent_notification", "dismiss", {
+      notification_id: computeObjectId(this.stateObj.entity_id),
+    });
+  }
+}
+customElements.define(
+  "ha-persistent_notification-card",
+  HaPersistentNotificationCard
+);

src/cards/ha-plant-card.js

@@ -0,0 +1,165 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../components/ha-card";
+import "../components/ha-icon";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+import { EventsMixin } from "../mixins/events-mixin";
+
+class HaPlantCard extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        .banner {
+          display: flex;
+          align-items: flex-end;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          padding-top: 12px;
+        }
+        .has-plant-image .banner {
+          padding-top: 30%;
+        }
+        .header {
+          @apply --paper-font-headline;
+          line-height: 40px;
+          padding: 8px 16px;
+        }
+        .has-plant-image .header {
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 16px;
+          padding: 16px;
+          color: white;
+          width: 100%;
+          background: rgba(0, 0, 0, var(--dark-secondary-opacity));
+        }
+        .content {
+          display: flex;
+          justify-content: space-between;
+          padding: 16px 32px 24px 32px;
+        }
+        .has-plant-image .content {
+          padding-bottom: 16px;
+        }
+        ha-icon {
+          color: var(--paper-item-icon-color);
+          margin-bottom: 8px;
+        }
+        .attributes {
+          cursor: pointer;
+        }
+        .attributes div {
+          text-align: center;
+        }
+        .problem {
+          color: var(--google-red-500);
+          font-weight: bold;
+        }
+        .uom {
+          color: var(--secondary-text-color);
+        }
+      </style>
+
+      <ha-card
+        class$="[[computeImageClass(stateObj.attributes.entity_picture)]]"
+      >
+        <div
+          class="banner"
+          style="background-image:url([[stateObj.attributes.entity_picture]])"
+        >
+          <div class="header">[[computeTitle(stateObj)]]</div>
+        </div>
+        <div class="content">
+          <template
+            is="dom-repeat"
+            items="[[computeAttributes(stateObj.attributes)]]"
+          >
+            <div class="attributes" on-click="attributeClicked">
+              <div>
+                <ha-icon
+                  icon="[[computeIcon(item, stateObj.attributes.battery)]]"
+                ></ha-icon>
+              </div>
+              <div
+                class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]"
+              >
+                [[computeValue(stateObj.attributes, item)]]
+              </div>
+              <div class="uom">
+                [[computeUom(stateObj.attributes.unit_of_measurement_dict,
+                item)]]
+              </div>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      config: Object,
+    };
+  }
+
+  constructor() {
+    super();
+    this.sensors = {
+      moisture: "hass:water",
+      temperature: "hass:thermometer",
+      brightness: "hass:white-balance-sunny",
+      conductivity: "hass:emoticon-poop",
+      battery: "hass:battery",
+    };
+  }
+
+  computeTitle(stateObj) {
+    return (this.config && this.config.name) || computeStateName(stateObj);
+  }
+
+  computeAttributes(data) {
+    return Object.keys(this.sensors).filter((key) => key in data);
+  }
+
+  computeIcon(attr, batLvl) {
+    const icon = this.sensors[attr];
+    if (attr === "battery") {
+      if (batLvl <= 5) {
+        return `${icon}-alert`;
+      }
+      if (batLvl < 95) {
+        return `${icon}-${Math.round(batLvl / 10 - 0.01) * 10}`;
+      }
+    }
+    return icon;
+  }
+
+  computeValue(attributes, attr) {
+    return attributes[attr];
+  }
+
+  computeUom(dict, attr) {
+    return dict[attr] || "";
+  }
+
+  computeAttributeClass(problem, attr) {
+    return problem.indexOf(attr) === -1 ? "" : "problem";
+  }
+
+  computeImageClass(entityPicture) {
+    return entityPicture ? "has-plant-image" : "";
+  }
+
+  attributeClicked(ev) {
+    this.fire("hass-more-info", {
+      entityId: this.stateObj.attributes.sensors[ev.model.item],
+    });
+  }
+}
+
+customElements.define("ha-plant-card", HaPlantCard);

src/cards/ha-weather-card.js

@@ -0,0 +1,383 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import { computeStateName } from "../common/entity/compute_state_name";
+
+import "../components/ha-card";
+import "../components/ha-icon";
+
+import { EventsMixin } from "../mixins/events-mixin";
+import LocalizeMixin from "../mixins/localize-mixin";
+import { computeRTL } from "../common/util/compute_rtl";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+
+        .content {
+          padding: 0 20px 20px;
+        }
+
+        ha-icon {
+          color: var(--paper-item-icon-color);
+        }
+
+        .header {
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-headline_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          text-rendering: var(
+            --paper-font-common-expensive-kerning_-_text-rendering
+          );
+          opacity: var(--dark-primary-opacity);
+          padding: 24px 16px 16px;
+          display: flex;
+          align-items: baseline;
+        }
+
+        .name {
+          margin-left: 16px;
+          font-size: 16px;
+          color: var(--secondary-text-color);
+        }
+
+        :host([rtl]) .name {
+          margin-left: 0px;
+          margin-right: 16px;
+        }
+
+        .now {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+
+        .main {
+          display: flex;
+          align-items: center;
+          margin-right: 32px;
+        }
+
+        :host([rtl]) .main {
+          margin-right: 0px;
+        }
+
+        .main ha-icon {
+          --iron-icon-height: 72px;
+          --iron-icon-width: 72px;
+          margin-right: 8px;
+        }
+
+        :host([rtl]) .main ha-icon {
+          margin-right: 0px;
+        }
+
+        .main .temp {
+          font-size: 52px;
+          line-height: 1em;
+          position: relative;
+        }
+
+        :host([rtl]) .main .temp {
+          direction: ltr;
+          margin-right: 28px;
+        }
+
+        .main .temp span {
+          font-size: 24px;
+          line-height: 1em;
+          position: absolute;
+          top: 4px;
+        }
+
+        .measurand {
+          display: inline-block;
+        }
+
+        :host([rtl]) .measurand {
+          direction: ltr;
+        }
+
+        .forecast {
+          margin-top: 16px;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .forecast div {
+          flex: 0 0 auto;
+          text-align: center;
+        }
+
+        .forecast .icon {
+          margin: 4px 0;
+          text-align: center;
+        }
+
+        :host([rtl]) .forecast .temp {
+          direction: ltr;
+        }
+
+        .weekday {
+          font-weight: bold;
+        }
+
+        .attributes,
+        .templow,
+        .precipitation {
+          color: var(--secondary-text-color);
+        }
+
+        :host([rtl]) .precipitation {
+          direction: ltr;
+        }
+      </style>
+      <ha-card>
+        <div class="header">
+          [[computeState(stateObj.state, localize)]]
+          <div class="name">[[computeName(stateObj)]]</div>
+        </div>
+        <div class="content">
+          <div class="now">
+            <div class="main">
+              <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
+                <ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
+              </template>
+              <div class="temp">
+                [[stateObj.attributes.temperature]]<span
+                  >[[getUnit('temperature')]]</span
+                >
+              </div>
+            </div>
+            <div class="attributes">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.pressure)]]"
+              >
+                <div>
+                  [[localize('ui.card.weather.attributes.air_pressure')]]:
+                  <span class="measurand">
+                    [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
+                  </span>
+                </div>
+              </template>
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.humidity)]]"
+              >
+                <div>
+                  [[localize('ui.card.weather.attributes.humidity')]]:
+                  <span class="measurand"
+                    >[[stateObj.attributes.humidity]] %</span
+                  >
+                </div>
+              </template>
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.wind_speed)]]"
+              >
+                <div>
+                  [[localize('ui.card.weather.attributes.wind_speed')]]:
+                  <span class="measurand">
+                    [[getWindSpeed(stateObj.attributes.wind_speed)]]
+                  </span>
+                  [[getWindBearing(stateObj.attributes.wind_bearing, localize)]]
+                </div>
+              </template>
+            </div>
+          </div>
+          <template is="dom-if" if="[[forecast]]">
+            <div class="forecast">
+              <template is="dom-repeat" items="[[forecast]]">
+                <div>
+                  <div class="weekday">
+                    [[computeDate(item.datetime)]]<br />
+                    <template is="dom-if" if="[[!_showValue(item.templow)]]">
+                      [[computeTime(item.datetime)]]
+                    </template>
+                  </div>
+                  <template is="dom-if" if="[[_showValue(item.condition)]]">
+                    <div class="icon">
+                      <ha-icon
+                        icon="[[getWeatherIcon(item.condition)]]"
+                      ></ha-icon>
+                    </div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.temperature)]]">
+                    <div class="temp">
+                      [[item.temperature]] [[getUnit('temperature')]]
+                    </div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.templow)]]">
+                    <div class="templow">
+                      [[item.templow]] [[getUnit('temperature')]]
+                    </div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.precipitation)]]">
+                    <div class="precipitation">
+                      [[item.precipitation]] [[getUnit('precipitation')]]
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      config: Object,
+      stateObj: Object,
+      forecast: {
+        type: Array,
+        computed: "computeForecast(stateObj.attributes.forecast)",
+      },
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.cardinalDirections = [
+      "N",
+      "NNE",
+      "NE",
+      "ENE",
+      "E",
+      "ESE",
+      "SE",
+      "SSE",
+      "S",
+      "SSW",
+      "SW",
+      "WSW",
+      "W",
+      "WNW",
+      "NW",
+      "NNW",
+      "N",
+    ];
+    this.weatherIcons = {
+      "clear-night": "hass:weather-night",
+      cloudy: "hass:weather-cloudy",
+      exceptional: "hass:alert-circle-outline",
+      fog: "hass:weather-fog",
+      hail: "hass:weather-hail",
+      lightning: "hass:weather-lightning",
+      "lightning-rainy": "hass:weather-lightning-rainy",
+      partlycloudy: "hass:weather-partly-cloudy",
+      pouring: "hass:weather-pouring",
+      rainy: "hass:weather-rainy",
+      snowy: "hass:weather-snowy",
+      "snowy-rainy": "hass:weather-snowy-rainy",
+      sunny: "hass:weather-sunny",
+      windy: "hass:weather-windy",
+      "windy-variant": "hass:weather-windy-variant",
+    };
+  }
+
+  ready() {
+    this.addEventListener("click", this._onClick);
+    super.ready();
+  }
+
+  _onClick() {
+    this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
+  }
+
+  computeForecast(forecast) {
+    return forecast && forecast.slice(0, 5);
+  }
+
+  getUnit(measure) {
+    const lengthUnit = this.hass.config.unit_system.length || "";
+    switch (measure) {
+      case "air_pressure":
+        return lengthUnit === "km" ? "hPa" : "inHg";
+      case "length":
+        return lengthUnit;
+      case "precipitation":
+        return lengthUnit === "km" ? "mm" : "in";
+      default:
+        return this.hass.config.unit_system[measure] || "";
+    }
+  }
+
+  computeState(state, localize) {
+    return localize(`state.weather.${state}`) || state;
+  }
+
+  computeName(stateObj) {
+    return (this.config && this.config.name) || computeStateName(stateObj);
+  }
+
+  showWeatherIcon(condition) {
+    return condition in this.weatherIcons;
+  }
+
+  getWeatherIcon(condition) {
+    return this.weatherIcons[condition];
+  }
+
+  windBearingToText(degree) {
+    const degreenum = parseInt(degree);
+    if (isFinite(degreenum)) {
+      return this.cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
+    }
+    return degree;
+  }
+
+  getWindSpeed(speed) {
+    return `${speed} ${this.getUnit("length")}/h`;
+  }
+
+  getWindBearing(bearing, localize) {
+    if (bearing != null) {
+      const cardinalDirection = this.windBearingToText(bearing);
+      return `(${localize(
+        `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
+      ) || cardinalDirection})`;
+    }
+    return ``;
+  }
+
+  _showValue(item) {
+    return typeof item !== "undefined" && item !== null;
+  }
+
+  computeDate(data) {
+    const date = new Date(data);
+    return date.toLocaleDateString(this.hass.language, { weekday: "short" });
+  }
+
+  computeTime(data) {
+    const date = new Date(data);
+    return date.toLocaleTimeString(this.hass.language, { hour: "numeric" });
+  }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
+}
+customElements.define("ha-weather-card", HaWeatherCard);

src/cast/receiver_messages.ts

@@ -21,7 +21,6 @@ export interface ConnectMessage extends BaseCastMessage {
 export interface ShowLovelaceViewMessage extends BaseCastMessage {
   type: "show_lovelace_view";
   viewPath: string | number | null;
-  urlPath: string | null;
 }
 
 export interface ShowDemoMessage extends BaseCastMessage {
@@ -44,13 +43,11 @@ export const castSendAuth = (cast: CastManager, auth: Auth) =>
 
 export const castSendShowLovelaceView = (
   cast: CastManager,
-  viewPath: ShowLovelaceViewMessage["viewPath"],
-  urlPath?: string | null
+  viewPath: ShowLovelaceViewMessage["viewPath"]
 ) =>
   cast.sendMessage({
     type: "show_lovelace_view",
     viewPath,
-    urlPath: urlPath || null,
   });
 
 export const castSendShowDemo = (cast: CastManager) =>

src/cast/sender_messages.ts

@@ -8,7 +8,6 @@ export interface ReceiverStatusMessage extends BaseCastMessage {
   showDemo: boolean;
   hassUrl?: string;
   lovelacePath?: string | number | null;
-  urlPath?: string | null;
 }
 
 export type SenderMessage = ReceiverStatusMessage;

src/common/config/version.ts

@@ -1,11 +0,0 @@
-export const atLeastVersion = (
-  version: string,
-  major: number,
-  minor: number
-): boolean => {
-  const [haMajor, haMinor] = version.split(".", 2);
-  return (
-    Number(haMajor) > major ||
-    (Number(haMajor) === major && Number(haMinor) >= minor)
-  );
-};

src/common/const.ts

@@ -7,6 +7,9 @@
 /** Icon to use when no icon specified for domain. */
 export const DEFAULT_DOMAIN_ICON = "hass:bookmark";
 
+/** Panel to show when no panel is picked. */
+export const DEFAULT_PANEL = "lovelace";
+
 /** Domains that have a state card. */
 export const DOMAINS_WITH_CARD = [
   "climate",
@@ -41,7 +44,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "light",
   "lock",
   "media_player",
-  "person",
   "script",
   "sun",
   "timer",

src/common/datetime/check_options_support.ts

@@ -1,31 +0,0 @@
-// Check for support of native locale string options
-function checkToLocaleDateStringSupportsOptions() {
-  try {
-    new Date().toLocaleDateString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-function checkToLocaleTimeStringSupportsOptions() {
-  try {
-    new Date().toLocaleTimeString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-function checkToLocaleStringSupportsOptions() {
-  try {
-    new Date().toLocaleString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-export const toLocaleDateStringSupportsOptions = checkToLocaleDateStringSupportsOptions();
-export const toLocaleTimeStringSupportsOptions = checkToLocaleTimeStringSupportsOptions();
-export const toLocaleStringSupportsOptions = checkToLocaleStringSupportsOptions();

src/common/datetime/format_date.ts

@@ -1,11 +1,20 @@
 import fecha from "fecha";
-import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
-export const formatDate = toLocaleDateStringSupportsOptions
+// Check for support of native locale string options
+function toLocaleDateStringSupportsOptions() {
+  try {
+    new Date().toLocaleDateString("i");
+  } catch (e) {
+    return e.name === "RangeError";
+  }
+  return false;
+}
+
+export default toLocaleDateStringSupportsOptions()
   ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleDateString(locales, {
         year: "numeric",
         month: "long",
         day: "numeric",
       })
-  : (dateObj: Date) => fecha.format(dateObj, "longDate");
+  : (dateObj: Date) => fecha.format(dateObj, "mediumDate");

src/common/datetime/format_date_time.ts

@@ -1,7 +1,16 @@
 import fecha from "fecha";
-import { toLocaleStringSupportsOptions } from "./check_options_support";
 
-export const formatDateTime = toLocaleStringSupportsOptions
+// Check for support of native locale string options
+function toLocaleStringSupportsOptions() {
+  try {
+    new Date().toLocaleString("i");
+  } catch (e) {
+    return e.name === "RangeError";
+  }
+  return false;
+}
+
+export default toLocaleStringSupportsOptions()
   ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleString(locales, {
         year: "numeric",
@@ -10,24 +19,4 @@ export const formatDateTime = toLocaleStringSupportsOptions
         hour: "numeric",
         minute: "2-digit",
       })
-  : (dateObj: Date) =>
-      fecha.format(
-        dateObj,
-        `${fecha.masks.longDate}, ${fecha.masks.shortTime}`
-      );
-
-export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-  : (dateObj: Date) =>
-      fecha.format(
-        dateObj,
-        `${fecha.masks.longDate}, ${fecha.masks.mediumTime}`
-      );
+  : (dateObj: Date) => fecha.format(dateObj, "haDateTime");

src/common/datetime/format_time.ts

@@ -1,19 +1,19 @@
 import fecha from "fecha";
-import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 
-export const formatTime = toLocaleTimeStringSupportsOptions
+// Check for support of native locale string options
+function toLocaleTimeStringSupportsOptions() {
+  try {
+    new Date().toLocaleTimeString("i");
+  } catch (e) {
+    return e.name === "RangeError";
+  }
+  return false;
+}
+
+export default toLocaleTimeStringSupportsOptions()
   ? (dateObj: Date, locales: string) =>
       dateObj.toLocaleTimeString(locales, {
         hour: "numeric",
         minute: "2-digit",
       })
   : (dateObj: Date) => fecha.format(dateObj, "shortTime");
-
-export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-  : (dateObj: Date) => fecha.format(dateObj, "mediumTime");

src/common/dom/apply_themes_on_element.ts

@@ -1,10 +1,4 @@
 import { derivedStyles } from "../../resources/styles";
-import { HomeAssistant, Theme } from "../../types";
-
-interface ProcessedTheme {
-  keys: { [key: string]: "" };
-  styles: { [key: string]: string };
-}
 
 const hexToRgb = (hex: string): string | null => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -21,82 +15,67 @@ const hexToRgb = (hex: string): string | null => {
     : null;
 };
 
-let PROCESSED_THEMES: { [key: string]: ProcessedTheme } = {};
-
 /**
  * Apply a theme to an element by setting the CSS variables on it.
  *
  * element: Element to apply theme on.
  * themes: HASS Theme information
- * selectedTheme: selected theme.
+ * localTheme: selected theme.
+ * updateMeta: boolean if we should update the theme-color meta element.
  */
 export const applyThemesOnElement = (
   element,
-  themes: HomeAssistant["themes"],
-  selectedTheme?: string
+  themes,
+  localTheme,
+  updateMeta = false
 ) => {
-  const newTheme = selectedTheme
-    ? PROCESSED_THEMES[selectedTheme] || processTheme(selectedTheme, themes)
-    : undefined;
-
-  if (!element._themes && !newTheme) {
-    // No styles to reset, and no styles to set
-    return;
+  if (!element._themes) {
+    element._themes = {};
+  }
+  let themeName = themes.default_theme;
+  if (localTheme === "default" || (localTheme && themes.themes[localTheme])) {
+    themeName = localTheme;
+  }
+  const styles = { ...element._themes };
+  if (themeName !== "default") {
+    const theme = { ...derivedStyles, ...themes.themes[themeName] };
+    Object.keys(theme).forEach((key) => {
+      const prefixedKey = `--${key}`;
+      element._themes[prefixedKey] = "";
+      styles[prefixedKey] = theme[key];
+      if (key.startsWith("rgb")) {
+        return;
+      }
+      const rgbKey = `rgb-${key}`;
+      if (theme[rgbKey] !== undefined) {
+        return;
+      }
+      const prefixedRgbKey = `--${rgbKey}`;
+      element._themes[prefixedRgbKey] = "";
+      const rgbValue = hexToRgb(theme[key]);
+      if (rgbValue !== null) {
+        styles[prefixedRgbKey] = rgbValue;
+      }
+    });
   }
-
-  // Add previous set keys to reset them, and new theme
-  const styles = { ...element._themes, ...newTheme?.styles };
-  element._themes = newTheme?.keys;
-
-  // Set and/or reset styles
   if (element.updateStyles) {
     element.updateStyles(styles);
   } else if (window.ShadyCSS) {
-    // Implement updateStyles() method of Polymer elements
+    // implement updateStyles() method of Polymer elements
     window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ element, styles);
   }
-};
 
-const processTheme = (
-  themeName: string,
-  themes: HomeAssistant["themes"]
-): ProcessedTheme | undefined => {
-  if (!themes.themes[themeName]) {
+  if (!updateMeta) {
     return;
   }
-  const theme: Theme = {
-    ...derivedStyles,
-    ...themes.themes[themeName],
-  };
-  const styles = {};
-  const keys = {};
-  for (const key of Object.keys(theme)) {
-    const prefixedKey = `--${key}`;
-    const value = theme[key];
-    styles[prefixedKey] = value;
-    keys[prefixedKey] = "";
 
-    // Try to create a rgb value for this key if it is a hex color
-    if (!value.startsWith("#")) {
-      // Not a hex color
-      continue;
-    }
-    const rgbKey = `rgb-${key}`;
-    if (theme[rgbKey] !== undefined) {
-      // Theme has it's own rgb value
-      continue;
-    }
-    const rgbValue = hexToRgb(value);
-    if (rgbValue !== null) {
-      const prefixedRgbKey = `--${rgbKey}`;
-      styles[prefixedRgbKey] = rgbValue;
-      keys[prefixedRgbKey] = "";
+  const meta = document.querySelector("meta[name=theme-color]");
+  if (meta) {
+    if (!meta.hasAttribute("default-content")) {
+      meta.setAttribute("default-content", meta.getAttribute("content")!);
     }
+    const themeColor =
+      styles["--primary-color"] || meta.getAttribute("default-content");
+    meta.setAttribute("content", themeColor);
   }
-  PROCESSED_THEMES[themeName] = { styles, keys };
-  return { styles, keys };
-};
-
-export const invalidateThemeCache = () => {
-  PROCESSED_THEMES = {};
 };

src/common/dom/dynamic-element-directive.ts

@@ -4,7 +4,7 @@ export const dynamicElement = directive(
   (tag: string, properties?: { [key: string]: any }) => (part: Part): void => {
     if (!(part instanceof NodePart)) {
       throw new Error(
-        "dynamicElementDirective can only be used in content bindings"
+        "dynamicContentDirective can only be used in content bindings"
       );
     }
 

src/common/entity/compute_state_display.ts

@@ -1,8 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "./compute_state_domain";
-import { formatDateTime } from "../datetime/format_date_time";
-import { formatDate } from "../datetime/format_date";
-import { formatTime } from "../datetime/format_time";
+import formatDateTime from "../datetime/format_date_time";
+import formatDate from "../datetime/format_date";
+import formatTime from "../datetime/format_time";
 import { LocalizeFunc } from "../translations/localize";
 
 export const computeStateDisplay = (

src/common/entity/cover_icon.ts

@@ -4,58 +4,17 @@ import { domainIcon } from "./domain_icon";
 
 export const coverIcon = (state: HassEntity): string => {
   const open = state.state !== "closed";
-
   switch (state.attributes.device_class) {
     case "garage":
-      switch (state.state) {
-        case "opening":
-          return "hass:arrow-up-box";
-        case "closing":
-          return "hass:arrow-down-box";
-        case "closed":
-          return "hass:garage";
-        default:
-          return "hass:garage-open";
-      }
-    case "gate":
-      switch (state.state) {
-        case "opening":
-        case "closing":
-          return "hass:gate-arrow-right";
-        case "closed":
-          return "hass:gate";
-        default:
-          return "hass:gate-open";
-      }
+      return open ? "hass:garage-open" : "hass:garage";
     case "door":
       return open ? "hass:door-open" : "hass:door-closed";
-    case "damper":
-      return open ? "hass:circle" : "hass:circle-slice-8";
     case "shutter":
       return open ? "hass:window-shutter-open" : "hass:window-shutter";
     case "blind":
-    case "curtain":
-      switch (state.state) {
-        case "opening":
-          return "hass:arrow-up-box";
-        case "closing":
-          return "hass:arrow-down-box";
-        case "closed":
-          return "hass:blinds";
-        default:
-          return "hass:blinds-open";
-      }
+      return open ? "hass:blinds-open" : "hass:blinds";
     case "window":
-      switch (state.state) {
-        case "opening":
-          return "hass:arrow-up-box";
-        case "closing":
-          return "hass:arrow-down-box";
-        case "closed":
-          return "hass:window-closed";
-        default:
-          return "hass:window-open";
-      }
+      return open ? "hass:window-open" : "hass:window-closed";
     default:
       return domainIcon("cover", state.state);
   }

src/common/entity/domain_icon.ts

@@ -23,7 +23,7 @@ const fixedIcons = {
   homeassistant: "hass:home-assistant",
   homekit: "hass:home-automation",
   image_processing: "hass:image-filter-frames",
-  input_boolean: "hass:toggle-switch-outline",
+  input_boolean: "hass:drawing",
   input_datetime: "hass:calendar-clock",
   input_number: "hass:ray-vertex",
   input_select: "hass:format-list-bulleted",
@@ -77,22 +77,15 @@ export const domainIcon = (domain: string, state?: string): string => {
         : "hass:checkbox-marked-circle";
 
     case "cover":
-      switch (state) {
-        case "opening":
-          return "hass:arrow-up-box";
-        case "closing":
-          return "hass:arrow-down-box";
-        case "closed":
-          return "hass:window-closed";
-        default:
-          return "hass:window-open";
-      }
+      return state === "closed" ? "hass:window-closed" : "hass:window-open";
 
     case "lock":
       return state && state === "unlocked" ? "hass:lock-open" : "hass:lock";
 
     case "media_player":
-      return state && state === "playing" ? "hass:cast-connected" : "hass:cast";
+      return state && state !== "off" && state !== "idle"
+        ? "hass:cast-connected"
+        : "hass:cast";
 
     case "zwave":
       switch (state) {

src/common/search/search-input.ts

@@ -7,18 +7,14 @@ import {
   property,
 } from "lit-element";
 import { fireEvent } from "../dom/fire_event";
+import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "../../components/ha-icon";
-import { classMap } from "lit-html/directives/class-map";
+import "@material/mwc-button";
 
 @customElement("search-input")
 class SearchInput extends LitElement {
   @property() public filter?: string;
-  @property({ type: Boolean, attribute: "no-label-float" })
-  public noLabelFloat? = false;
-  @property({ type: Boolean, attribute: "no-underline" })
-  public noUnderline = false;
 
   public focus() {
     this.shadowRoot!.querySelector("paper-input")!.focus();
@@ -26,24 +22,18 @@ class SearchInput extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <style>
-        .no-underline {
-          --paper-input-container-underline: {
-            display: none;
-            height: 0;
-          }
-        }
-      </style>
       <div class="search-container">
         <paper-input
-          class=${classMap({ "no-underline": this.noUnderline })}
           autofocus
           label="Search"
           .value=${this.filter}
           @value-changed=${this._filterInputChanged}
-          .noLabelFloat=${this.noLabelFloat}
         >
-          <ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
+          <iron-icon
+            icon="hass:magnify"
+            slot="prefix"
+            class="prefix"
+          ></iron-icon>
           ${this.filter &&
             html`
               <paper-icon-button

src/common/style/icon_color_css.ts

@@ -1,6 +1,7 @@
 import { css } from "lit-element";
 
 export const iconColorCSS = css`
+  ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"],
   ha-icon[data-domain="alert"][data-state="on"],
   ha-icon[data-domain="automation"][data-state="on"],
   ha-icon[data-domain="binary_sensor"][data-state="on"],
@@ -11,7 +12,6 @@ export const iconColorCSS = css`
   ha-icon[data-domain="light"][data-state="on"],
   ha-icon[data-domain="input_boolean"][data-state="on"],
   ha-icon[data-domain="lock"][data-state="unlocked"],
-  ha-icon[data-domain="media_player"][data-state="on"],
   ha-icon[data-domain="media_player"][data-state="paused"],
   ha-icon[data-domain="media_player"][data-state="playing"],
   ha-icon[data-domain="script"][data-state="running"],
@@ -30,38 +30,6 @@ export const iconColorCSS = css`
     color: var(--heat-color, #ff8100);
   }
 
-  ha-icon[data-domain="climate"][data-state="drying"] {
-    color: var(--dry-color, #efbd07);
-  }
-
-  ha-icon[data-domain="alarm_control_panel"] {
-    color: var(--alarm-color-armed, var(--label-badge-red));
-  }
-
-  ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
-    color: var(--alarm-color-disarmed, var(--label-badge-green));
-  }
-
-  ha-icon[data-domain="alarm_control_panel"][data-state="pending"],
-  ha-icon[data-domain="alarm_control_panel"][data-state="arming"] {
-    color: var(--alarm-color-pending, var(--label-badge-yellow));
-    animation: pulse 1s infinite;
-  }
-
-  ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
-    color: var(--alarm-color-triggered, var(--label-badge-red));
-    animation: pulse 1s infinite;
-  }
-
-  @keyframes pulse {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
   ha-icon[data-domain="plant"][data-state="problem"],
   ha-icon[data-domain="zwave"][data-state="dead"] {
     color: var(--error-state-color, #db4437);

src/common/util/deep-equal.ts

@@ -1,107 +0,0 @@
-// From https://github.com/epoberezkin/fast-deep-equal
-// MIT License - Copyright (c) 2017 Evgeny Poberezkin
-export const deepEqual = (a: any, b: any): boolean => {
-  if (a === b) {
-    return true;
-  }
-
-  if (a && b && typeof a === "object" && typeof b === "object") {
-    if (a.constructor !== b.constructor) {
-      return false;
-    }
-
-    let i: number | [any, any];
-    let length: number;
-    if (Array.isArray(a)) {
-      length = a.length;
-      if (length !== b.length) {
-        return false;
-      }
-      for (i = length; i-- !== 0; ) {
-        if (!deepEqual(a[i], b[i])) {
-          return false;
-        }
-      }
-      return true;
-    }
-
-    if (a instanceof Map && b instanceof Map) {
-      if (a.size !== b.size) {
-        return false;
-      }
-      for (i of a.entries()) {
-        if (!b.has(i[0])) {
-          return false;
-        }
-      }
-      for (i of a.entries()) {
-        if (!deepEqual(i[1], b.get(i[0]))) {
-          return false;
-        }
-      }
-      return true;
-    }
-
-    if (a instanceof Set && b instanceof Set) {
-      if (a.size !== b.size) {
-        return false;
-      }
-      for (i of a.entries()) {
-        if (!b.has(i[0])) {
-          return false;
-        }
-      }
-      return true;
-    }
-
-    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      // @ts-ignore
-      length = a.length;
-      // @ts-ignore
-      if (length !== b.length) {
-        return false;
-      }
-      for (i = length; i-- !== 0; ) {
-        if (a[i] !== b[i]) {
-          return false;
-        }
-      }
-      return true;
-    }
-
-    if (a.constructor === RegExp) {
-      return a.source === b.source && a.flags === b.flags;
-    }
-    if (a.valueOf !== Object.prototype.valueOf) {
-      return a.valueOf() === b.valueOf();
-    }
-    if (a.toString !== Object.prototype.toString) {
-      return a.toString() === b.toString();
-    }
-
-    let keys: string[];
-    keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length) {
-      return false;
-    }
-    for (i = length; i-- !== 0; ) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
-        return false;
-      }
-    }
-
-    for (i = length; i-- !== 0; ) {
-      const key = keys[i];
-
-      if (!deepEqual(a[key], b[key])) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  // true if both NaN, false otherwise
-  return a !== a && b !== b;
-};

src/components/data-table/ha-data-table.ts

@@ -1,21 +1,27 @@
+import { repeat } from "lit-html/directives/repeat";
 import deepClone from "deep-clone-simple";
 
-import { classMap } from "lit-html/directives/class-map";
+import {
+  MDCDataTableAdapter,
+  MDCDataTableFoundation,
+} from "@material/data-table";
 
-import { scroll } from "lit-virtualizer";
+import { classMap } from "lit-html/directives/class-map";
 
 import {
   html,
   query,
+  queryAll,
   CSSResult,
   css,
   customElement,
   property,
   TemplateResult,
   PropertyValues,
-  LitElement,
 } from "lit-element";
 
+import { BaseElement } from "@material/mwc-base/base-element";
+
 // eslint-disable-next-line import/no-webpack-loader-syntax
 // @ts-ignore
 // tslint:disable-next-line: no-implicit-dependencies
@@ -29,8 +35,6 @@ import { HaCheckbox } from "../ha-checkbox";
 import { fireEvent } from "../../common/dom/fire_event";
 import { nextRender } from "../../common/util/render-status";
 import { debounce } from "../../common/util/debounce";
-import { styleMap } from "lit-html/directives/style-map";
-import { ifDefined } from "lit-html/directives/if-defined";
 
 declare global {
   // for fire event
@@ -46,7 +50,8 @@ export interface RowClickedEvent {
 }
 
 export interface SelectionChangedEvent {
-  value: string[];
+  id: string;
+  selected: boolean;
 }
 
 export interface SortingChangedEvent {
@@ -69,37 +74,33 @@ export interface DataTableSortColumnData {
 
 export interface DataTableColumnData extends DataTableSortColumnData {
   title: string;
-  type?: "numeric" | "icon" | "icon-button";
+  type?: "numeric" | "icon";
   template?: <T>(data: any, row: T) => TemplateResult | string;
-  width?: string;
-  maxWidth?: string;
-  grows?: boolean;
 }
 
 export interface DataTableRowData {
   [key: string]: any;
-  selectable?: boolean;
 }
 
 @customElement("ha-data-table")
-export class HaDataTable extends LitElement {
+export class HaDataTable extends BaseElement {
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
   @property({ type: Array }) public data: DataTableRowData[] = [];
   @property({ type: Boolean }) public selectable = false;
-  @property({ type: Boolean, attribute: "auto-height" })
-  public autoHeight = false;
   @property({ type: String }) public id = "id";
-  @property({ type: String }) public noDataText?: string;
   @property({ type: String }) public filter = "";
+  protected mdcFoundation!: MDCDataTableFoundation;
+  protected readonly mdcFoundationClass = MDCDataTableFoundation;
+  @query(".mdc-data-table") protected mdcRoot!: HTMLElement;
+  @queryAll(".mdc-data-table__row") protected rowElements!: HTMLElement[];
   @property({ type: Boolean }) private _filterable = false;
+  @property({ type: Boolean }) private _headerChecked = false;
+  @property({ type: Boolean }) private _headerIndeterminate = false;
+  @property({ type: Array }) private _checkedRows: string[] = [];
   @property({ type: String }) private _filter = "";
   @property({ type: String }) private _sortColumn?: string;
   @property({ type: String }) private _sortDirection: SortingDirection = null;
   @property({ type: Array }) private _filteredData: DataTableRowData[] = [];
-  @query("slot[name='header']") private _header!: HTMLSlotElement;
-  @query(".mdc-data-table__table") private _table!: HTMLDivElement;
-  private _checkableRowsCount?: number;
-  private _checkedRows: string[] = [];
   private _sortColumns: {
     [key: string]: DataTableSortColumnData;
   } = {};
@@ -110,25 +111,18 @@ export class HaDataTable extends LitElement {
     (value: string) => {
       this._filter = value;
     },
-    100,
+    200,
     false
   );
 
   public clearSelection(): void {
-    this._checkedRows = [];
-    this._checkedRowsChanged();
+    this._headerChecked = false;
+    this._headerIndeterminate = false;
+    this.mdcFoundation.handleHeaderRowCheckboxChange();
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
-    if (this._filteredData.length) {
-      // Force update of location of rows
-      this._filteredData = [...this._filteredData];
-    }
-  }
-
-  protected firstUpdated(properties: PropertyValues) {
-    super.firstUpdated(properties);
+  protected firstUpdated() {
+    super.firstUpdated();
     this._worker = sortFilterWorker();
   }
 
@@ -162,12 +156,6 @@ export class HaDataTable extends LitElement {
       this._debounceSearch(this.filter);
     }
 
-    if (properties.has("data")) {
-      this._checkableRowsCount = this.data.filter(
-        (row) => row.selectable !== false
-      ).length;
-    }
-
     if (
       properties.has("data") ||
       properties.has("columns") ||
@@ -182,7 +170,7 @@ export class HaDataTable extends LitElement {
   protected render() {
     return html`
       <div class="mdc-data-table">
-        <slot name="header" @slotchange=${this._calcTableHeight}>
+        <slot name="header">
           ${this._filterable
             ? html`
                 <div class="table-header">
@@ -193,171 +181,158 @@ export class HaDataTable extends LitElement {
               `
             : ""}
         </slot>
-        <div
-          class="mdc-data-table__table ${classMap({
-            "auto-height": this.autoHeight,
-          })}"
-          style=${styleMap({
-            height: this.autoHeight
-              ? `${(this._filteredData.length || 1) * 53 + 57}px`
-              : `calc(100% - ${this._header?.clientHeight}px)`,
-          })}
-        >
-          <div class="mdc-data-table__header-row">
-            ${this.selectable
-              ? html`
-                  <div
-                    class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
+        <table class="mdc-data-table__table">
+          <thead>
+            <tr class="mdc-data-table__header-row">
+              ${this.selectable
+                ? html`
+                    <th
+                      class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <ha-checkbox
+                        class="mdc-data-table__row-checkbox"
+                        @change=${this._handleHeaderRowCheckboxChange}
+                        .indeterminate=${this._headerIndeterminate}
+                        .checked=${this._headerChecked}
+                      >
+                      </ha-checkbox>
+                    </th>
+                  `
+                : ""}
+              ${Object.entries(this.columns).map((columnEntry) => {
+                const [key, column] = columnEntry;
+                const sorted = key === this._sortColumn;
+                const classes = {
+                  "mdc-data-table__header-cell--numeric": Boolean(
+                    column.type && column.type === "numeric"
+                  ),
+                  "mdc-data-table__header-cell--icon": Boolean(
+                    column.type && column.type === "icon"
+                  ),
+                  sortable: Boolean(column.sortable),
+                  "not-sorted": Boolean(column.sortable && !sorted),
+                };
+                return html`
+                  <th
+                    class="mdc-data-table__header-cell ${classMap(classes)}"
                     role="columnheader"
                     scope="col"
+                    @click=${this._handleHeaderClick}
+                    data-column-id="${key}"
                   >
-                    <ha-checkbox
-                      class="mdc-data-table__row-checkbox"
-                      @change=${this._handleHeaderRowCheckboxClick}
-                      .indeterminate=${this._checkedRows.length &&
-                        this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length ===
-                        this._checkableRowsCount}
-                    >
-                    </ha-checkbox>
-                  </div>
-                `
-              : ""}
-            ${Object.entries(this.columns).map((columnEntry) => {
-              const [key, column] = columnEntry;
-              const sorted = key === this._sortColumn;
-              const classes = {
-                "mdc-data-table__header-cell--numeric": Boolean(
-                  column.type === "numeric"
-                ),
-                "mdc-data-table__header-cell--icon": Boolean(
-                  column.type === "icon"
-                ),
-                "mdc-data-table__header-cell--icon-button": Boolean(
-                  column.type === "icon-button"
-                ),
-                sortable: Boolean(column.sortable),
-                "not-sorted": Boolean(column.sortable && !sorted),
-                grows: Boolean(column.grows),
-              };
-              return html`
-                <div
-                  class="mdc-data-table__header-cell ${classMap(classes)}"
-                  style=${column.width
-                    ? styleMap({
-                        [column.grows ? "minWidth" : "width"]: column.width,
-                        maxWidth: column.maxWidth || "",
-                      })
-                    : ""}
-                  role="columnheader"
-                  scope="col"
-                  @click=${this._handleHeaderClick}
-                  .columnId=${key}
+                    ${column.sortable
+                      ? html`
+                          <ha-icon
+                            .icon=${sorted && this._sortDirection === "desc"
+                              ? "hass:arrow-down"
+                              : "hass:arrow-up"}
+                          ></ha-icon>
+                        `
+                      : ""}
+                    <span>${column.title}</span>
+                  </th>
+                `;
+              })}
+            </tr>
+          </thead>
+          <tbody class="mdc-data-table__content">
+            ${repeat(
+              this._filteredData!,
+              (row: DataTableRowData) => row[this.id],
+              (row: DataTableRowData) => html`
+                <tr
+                  data-row-id="${row[this.id]}"
+                  @click=${this._handleRowClick}
+                  class="mdc-data-table__row"
                 >
-                  ${column.sortable
+                  ${this.selectable
                     ? html`
-                        <ha-icon
-                          .icon=${sorted && this._sortDirection === "desc"
-                            ? "hass:arrow-down"
-                            : "hass:arrow-up"}
-                        ></ha-icon>
+                        <td
+                          class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                        >
+                          <ha-checkbox
+                            class="mdc-data-table__row-checkbox"
+                            @change=${this._handleRowCheckboxChange}
+                            .checked=${this._checkedRows.includes(
+                              String(row[this.id])
+                            )}
+                          >
+                          </ha-checkbox>
+                        </td>
                       `
                     : ""}
-                  <span>${column.title}</span>
-                </div>
-              `;
-            })}
-          </div>
-          ${!this._filteredData.length
-            ? html`
-                <div class="mdc-data-table__content">
-                  <div class="mdc-data-table__row">
-                    <div class="mdc-data-table__cell grows center">
-                      ${this.noDataText || "No data"}
-                    </div>
-                  </div>
-                </div>
-              `
-            : html`
-                <div class="mdc-data-table__content scroller">
-                  ${scroll({
-                    items: this._filteredData,
-                    renderItem: (row: DataTableRowData) => html`
-                      <div
-                        .rowId="${row[this.id]}"
-                        @click=${this._handleRowClick}
-                        class="mdc-data-table__row ${classMap({
-                          "mdc-data-table__row--selected": this._checkedRows.includes(
-                            String(row[this.id])
+                  ${Object.entries(this.columns).map((columnEntry) => {
+                    const [key, column] = columnEntry;
+                    return html`
+                      <td
+                        class="mdc-data-table__cell ${classMap({
+                          "mdc-data-table__cell--numeric": Boolean(
+                            column.type && column.type === "numeric"
+                          ),
+                          "mdc-data-table__cell--icon": Boolean(
+                            column.type && column.type === "icon"
                           ),
                         })}"
-                        aria-selected=${ifDefined(
-                          this._checkedRows.includes(String(row[this.id]))
-                            ? true
-                            : undefined
-                        )}
-                        .selectable=${row.selectable !== false}
                       >
-                        ${this.selectable
-                          ? html`
-                              <div
-                                class="mdc-data-table__cell mdc-data-table__cell--checkbox"
-                              >
-                                <ha-checkbox
-                                  class="mdc-data-table__row-checkbox"
-                                  @change=${this._handleRowCheckboxClick}
-                                  .disabled=${row.selectable === false}
-                                  .checked=${this._checkedRows.includes(
-                                    String(row[this.id])
-                                  )}
-                                >
-                                </ha-checkbox>
-                              </div>
-                            `
-                          : ""}
-                        ${Object.entries(this.columns).map((columnEntry) => {
-                          const [key, column] = columnEntry;
-                          return html`
-                            <div
-                              class="mdc-data-table__cell ${classMap({
-                                "mdc-data-table__cell--numeric": Boolean(
-                                  column.type === "numeric"
-                                ),
-                                "mdc-data-table__cell--icon": Boolean(
-                                  column.type === "icon"
-                                ),
-                                "mdc-data-table__cell--icon-button": Boolean(
-                                  column.type === "icon-button"
-                                ),
-                                grows: Boolean(column.grows),
-                              })}"
-                              style=${column.width
-                                ? styleMap({
-                                    [column.grows
-                                      ? "minWidth"
-                                      : "width"]: column.width,
-                                    maxWidth: column.maxWidth
-                                      ? column.maxWidth
-                                      : "",
-                                  })
-                                : ""}
-                            >
-                              ${column.template
-                                ? column.template(row[key], row)
-                                : row[key]}
-                            </div>
-                          `;
-                        })}
-                      </div>
-                    `,
+                        ${column.template
+                          ? column.template(row[key], row)
+                          : row[key]}
+                      </td>
+                    `;
                   })}
-                </div>
-              `}
-        </div>
+                </tr>
+              `
+            )}
+          </tbody>
+        </table>
       </div>
     `;
   }
 
+  protected createAdapter(): MDCDataTableAdapter {
+    return {
+      addClassAtRowIndex: (rowIndex: number, cssClasses: string) => {
+        this.rowElements[rowIndex].classList.add(cssClasses);
+      },
+      getRowCount: () => this.data.length,
+      getRowElements: () => this.rowElements,
+      getRowIdAtIndex: (rowIndex: number) => this._getRowIdAtIndex(rowIndex),
+      getRowIndexByChildElement: (el: Element) =>
+        Array.prototype.indexOf.call(this.rowElements, el.closest("tr")),
+      getSelectedRowCount: () => this._checkedRows.length,
+      isCheckboxAtRowIndexChecked: (rowIndex: number) =>
+        this._checkedRows.includes(this._getRowIdAtIndex(rowIndex)),
+      isHeaderRowCheckboxChecked: () => this._headerChecked,
+      isRowsSelectable: () => true,
+      notifyRowSelectionChanged: () => undefined,
+      notifySelectedAll: () => undefined,
+      notifyUnselectedAll: () => undefined,
+      registerHeaderRowCheckbox: () => undefined,
+      registerRowCheckboxes: () => undefined,
+      removeClassAtRowIndex: (rowIndex: number, cssClasses: string) => {
+        this.rowElements[rowIndex].classList.remove(cssClasses);
+      },
+      setAttributeAtRowIndex: (
+        rowIndex: number,
+        attr: string,
+        value: string
+      ) => {
+        this.rowElements[rowIndex].setAttribute(attr, value);
+      },
+      setHeaderRowCheckboxChecked: (checked: boolean) => {
+        this._headerChecked = checked;
+      },
+      setHeaderRowCheckboxIndeterminate: (indeterminate: boolean) => {
+        this._headerIndeterminate = indeterminate;
+      },
+      setRowCheckboxCheckedAtIndex: (rowIndex: number, checked: boolean) => {
+        this._setRowChecked(this._getRowIdAtIndex(rowIndex), checked);
+      },
+    };
+  }
+
   private async _filterData() {
     const startTime = new Date().getTime();
     this.curRequest++;
@@ -385,10 +360,14 @@ export class HaDataTable extends LitElement {
     this._filteredData = data;
   }
 
+  private _getRowIdAtIndex(rowIndex: number): string {
+    return this.rowElements[rowIndex].getAttribute("data-row-id")!;
+  }
+
   private _handleHeaderClick(ev: Event) {
-    const columnId = ((ev.target as HTMLElement).closest(
-      ".mdc-data-table__header-cell"
-    ) as any).columnId;
+    const columnId = (ev.target as HTMLElement)
+      .closest("th")!
+      .getAttribute("data-column-id")!;
     if (!this.columns[columnId].sortable) {
       return;
     }
@@ -408,32 +387,19 @@ export class HaDataTable extends LitElement {
     });
   }
 
-  private _handleHeaderRowCheckboxClick(ev: Event) {
+  private _handleHeaderRowCheckboxChange(ev: Event) {
     const checkbox = ev.target as HaCheckbox;
-    if (checkbox.checked) {
-      this._checkedRows = this._filteredData
-        .filter((data) => data.selectable !== false)
-        .map((data) => data[this.id]);
-      this._checkedRowsChanged();
-    } else {
-      this._checkedRows = [];
-      this._checkedRowsChanged();
-    }
+    this._headerChecked = checkbox.checked;
+    this._headerIndeterminate = checkbox.indeterminate;
+    this.mdcFoundation.handleHeaderRowCheckboxChange();
   }
 
-  private _handleRowCheckboxClick(ev: Event) {
+  private _handleRowCheckboxChange(ev: Event) {
     const checkbox = ev.target as HaCheckbox;
-    const rowId = (checkbox.closest(".mdc-data-table__row") as any).rowId;
+    const rowId = checkbox.closest("tr")!.getAttribute("data-row-id");
 
-    if (checkbox.checked) {
-      if (this._checkedRows.includes(rowId)) {
-        return;
-      }
-      this._checkedRows = [...this._checkedRows, rowId];
-    } else {
-      this._checkedRows = this._checkedRows.filter((row) => row !== rowId);
-    }
-    this._checkedRowsChanged();
+    this._setRowChecked(rowId!, checkbox.checked);
+    this.mdcFoundation.handleRowCheckboxChange(ev);
   }
 
   private _handleRowClick(ev: Event) {
@@ -441,15 +407,26 @@ export class HaDataTable extends LitElement {
     if (target.tagName === "HA-CHECKBOX") {
       return;
     }
-    const rowId = (target.closest(".mdc-data-table__row") as any).rowId;
+    const rowId = target.closest("tr")!.getAttribute("data-row-id")!;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   }
 
-  private _checkedRowsChanged() {
-    // force scroller to update, change it's items
-    this._filteredData = [...this._filteredData];
+  private _setRowChecked(rowId: string, checked: boolean) {
+    if (checked) {
+      if (this._checkedRows.includes(rowId)) {
+        return;
+      }
+      this._checkedRows = [...this._checkedRows, rowId];
+    } else {
+      const index = this._checkedRows.indexOf(rowId);
+      if (index === -1) {
+        return;
+      }
+      this._checkedRows.splice(index, 1);
+    }
     fireEvent(this, "selection-changed", {
-      value: this._checkedRows,
+      id: rowId,
+      selected: checked,
     });
   }
 
@@ -457,20 +434,10 @@ export class HaDataTable extends LitElement {
     this._debounceSearch(ev.detail.value);
   }
 
-  private async _calcTableHeight() {
-    if (this.autoHeight) {
-      return;
-    }
-    await this.updateComplete;
-    this._table.style.height = `calc(100% - ${this._header.clientHeight}px)`;
-  }
-
   static get styles(): CSSResult {
     return css`
       /* default mdc styles, colors changed, without checkbox styles */
-      :host {
-        height: 100%;
-      }
+
       .mdc-data-table__content {
         font-family: Roboto, sans-serif;
         -moz-osx-font-smoothing: grayscale;
@@ -492,7 +459,7 @@ export class HaDataTable extends LitElement {
         display: inline-flex;
         flex-direction: column;
         box-sizing: border-box;
-        overflow: hidden;
+        overflow-x: auto;
       }
 
       .mdc-data-table__row--selected {
@@ -500,13 +467,12 @@ export class HaDataTable extends LitElement {
       }
 
       .mdc-data-table__row {
-        display: flex;
-        width: 100%;
-        height: 52px;
+        border-top-color: rgba(var(--rgb-primary-text-color), 0.12);
       }
 
-      .mdc-data-table__row ~ .mdc-data-table__row {
-        border-top: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+      .mdc-data-table__row {
+        border-top-width: 1px;
+        border-top-style: solid;
       }
 
       .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
@@ -523,29 +489,16 @@ export class HaDataTable extends LitElement {
 
       .mdc-data-table__header-row {
         height: 56px;
-        display: flex;
-        width: 100%;
-        border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
-        overflow-x: auto;
       }
 
-      .mdc-data-table__header-row::-webkit-scrollbar {
-        display: none;
+      .mdc-data-table__row {
+        height: 52px;
       }
 
       .mdc-data-table__cell,
       .mdc-data-table__header-cell {
         padding-right: 16px;
         padding-left: 16px;
-        align-self: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-shrink: 0;
-        box-sizing: border-box;
-      }
-
-      .mdc-data-table__cell.mdc-data-table__cell--icon {
-        overflow: initial;
       }
 
       .mdc-data-table__header-cell--checkbox,
@@ -554,7 +507,6 @@ export class HaDataTable extends LitElement {
         padding-left: 16px;
         /* @noflip */
         padding-right: 0;
-        width: 56px;
       }
       [dir="rtl"] .mdc-data-table__header-cell--checkbox,
       .mdc-data-table__header-cell--checkbox[dir="rtl"],
@@ -567,10 +519,10 @@ export class HaDataTable extends LitElement {
       }
 
       .mdc-data-table__table {
-        height: 100%;
         width: 100%;
         border: 0;
         white-space: nowrap;
+        border-collapse: collapse;
       }
 
       .mdc-data-table__cell {
@@ -599,49 +551,6 @@ export class HaDataTable extends LitElement {
         text-align: center;
       }
 
-      .mdc-data-table__header-cell--icon,
-      .mdc-data-table__cell--icon {
-        width: 54px;
-      }
-
-      .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
-        text-align: center;
-      }
-      .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
-      .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
-        text-align: left;
-      }
-
-      .mdc-data-table__cell--icon:first-child ha-icon {
-        margin-left: 8px;
-      }
-
-      .mdc-data-table__cell--icon:first-child state-badge {
-        margin-right: -8px;
-      }
-
-      .mdc-data-table__header-cell--icon-button,
-      .mdc-data-table__cell--icon-button {
-        width: 56px;
-        padding: 8px;
-      }
-
-      .mdc-data-table__header-cell--icon-button:first-child,
-      .mdc-data-table__cell--icon-button:first-child {
-        width: 64px;
-        padding-left: 16px;
-      }
-
-      .mdc-data-table__header-cell--icon-button:last-child,
-      .mdc-data-table__cell--icon-button:last-child {
-        width: 64px;
-        padding-right: 16px;
-      }
-
-      .mdc-data-table__cell--icon-button a {
-        color: var(--primary-text-color);
-      }
-
       .mdc-data-table__header-cell {
         font-family: Roboto, sans-serif;
         -moz-osx-font-smoothing: grayscale;
@@ -663,86 +572,48 @@ export class HaDataTable extends LitElement {
       .mdc-data-table__header-cell--numeric {
         text-align: right;
       }
-      .mdc-data-table__header-cell--numeric.sortable:hover,
-      .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
-        text-align: left;
-      }
       [dir="rtl"] .mdc-data-table__header-cell--numeric,
       .mdc-data-table__header-cell--numeric[dir="rtl"] {
         /* @noflip */
         text-align: left;
       }
 
-      /* custom from here */
-
-      :host {
-        display: block;
+      .mdc-data-table__header-cell--icon {
+        text-align: center;
       }
 
+      /* custom from here */
+
       .mdc-data-table {
         display: block;
-        border-width: var(--data-table-border-width, 1px);
-        height: 100%;
       }
       .mdc-data-table__header-cell {
         overflow: hidden;
-        position: relative;
       }
-      .mdc-data-table__header-cell span {
-        position: relative;
-        left: 0px;
-      }
-
       .mdc-data-table__header-cell.sortable {
         cursor: pointer;
       }
-      .mdc-data-table__header-cell > * {
-        transition: left 0.2s ease;
+      .mdc-data-table__header-cell.not-sorted:not(.mdc-data-table__header-cell--numeric):not(.mdc-data-table__header-cell--icon)
+        span {
+        position: relative;
+        left: -24px;
       }
-      .mdc-data-table__header-cell ha-icon {
-        top: -3px;
-        position: absolute;
+      .mdc-data-table__header-cell.not-sorted > * {
+        transition: left 0.2s ease 0s;
       }
       .mdc-data-table__header-cell.not-sorted ha-icon {
-        left: -20px;
+        left: -36px;
       }
-      .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
-      .mdc-data-table__header-cell.sortable.not-sorted:hover span {
-        left: 24px;
+      .mdc-data-table__header-cell.not-sorted:not(.mdc-data-table__header-cell--numeric):not(.mdc-data-table__header-cell--icon):hover
+        span {
+        left: 0px;
       }
-      .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
-      .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
-        left: 12px;
+      .mdc-data-table__header-cell:hover.not-sorted ha-icon {
+        left: 0px;
       }
       .table-header {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
       }
-      search-input {
-        position: relative;
-        top: 2px;
-      }
-      slot[name="header"] {
-        display: block;
-      }
-      .center {
-        text-align: center;
-      }
-      .secondary {
-        color: var(--secondary-text-color);
-      }
-      .scroller {
-        display: flex;
-        position: relative;
-        contain: strict;
-        height: calc(100% - 57px);
-      }
-      .mdc-data-table__table:not(.auto-height) .scroller {
-        overflow: auto;
-      }
-      .grows {
-        flex-grow: 1;
-        flex-shrink: 1;
-      }
     `;
   }
 }

src/components/device/ha-area-devices-picker.ts

@@ -23,7 +23,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
-  DeviceEntityLookup,
 } from "../../data/device_registry";
 import { compare } from "../../common/string/compare";
 import { PolymerChangedEvent } from "../../polymer-types";
@@ -31,6 +30,7 @@ import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
 } from "../../data/area_registry";
+import { DeviceEntityLookup } from "../../panels/config/devices/ha-devices-data-table";
 import {
   EntityRegistryEntry,
   subscribeEntityRegistry,

src/components/device/ha-device-picker.ts

@@ -22,7 +22,6 @@ import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
   computeDeviceName,
-  DeviceEntityLookup,
 } from "../../data/device_registry";
 import { compare } from "../../common/string/compare";
 import { PolymerChangedEvent } from "../../polymer-types";
@@ -30,6 +29,7 @@ import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
 } from "../../data/area_registry";
+import { DeviceEntityLookup } from "../../panels/config/devices/ha-devices-data-table";
 import {
   EntityRegistryEntry,
   subscribeEntityRegistry,

src/components/entity/ha-chart-base.js

@@ -6,7 +6,7 @@ import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 
-import { formatTime } from "../../common/datetime/format_time";
+import formatTime from "../../common/datetime/format_time";
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
 

src/components/entity/ha-entity-picker.ts

@@ -246,7 +246,7 @@ class HaEntityPicker extends LitElement {
       paper-input > paper-icon-button {
         width: 24px;
         height: 24px;
-        padding: 0px 2px;
+        padding: 2px;
         color: var(--secondary-text-color);
       }
       [hidden] {

src/components/ha-attributes.ts

@@ -10,9 +10,6 @@ import {
 import { HassEntity } from "home-assistant-js-websocket";
 
 import hassAttributeUtil from "../util/hass-attributes-util";
-import { until } from "lit-html/directives/until";
-
-let jsYamlPromise: Promise<typeof import("js-yaml")>;
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
@@ -35,7 +32,7 @@ class HaAttributes extends LitElement {
             <div class="data-entry">
               <div class="key">${attribute.replace(/_/g, " ")}</div>
               <div class="value">
-                ${this.formatAttribute(attribute)}
+                ${this.formatAttributeValue(attribute)}
               </div>
             </div>
           `
@@ -66,10 +63,6 @@ class HaAttributes extends LitElement {
         color: var(--secondary-text-color);
         text-align: right;
       }
-      pre {
-        font-family: inherit;
-        font-size: inherit;
-      }
     `;
   }
 
@@ -82,31 +75,18 @@ class HaAttributes extends LitElement {
     });
   }
 
-  private formatAttribute(attribute: string): string | TemplateResult {
+  private formatAttributeValue(attribute: string): string {
     if (!this.stateObj) {
       return "-";
     }
     const value = this.stateObj.attributes[attribute];
-    return this.formatAttributeValue(value);
-  }
-
-  private formatAttributeValue(value: any): string | TemplateResult {
     if (value === null) {
       return "-";
     }
-    if (
-      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
-      (!Array.isArray(value) && value instanceof Object)
-    ) {
-      if (!jsYamlPromise) {
-        jsYamlPromise = import(/* webpackChunkName: "js-yaml" */ "js-yaml");
-      }
-      const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
-      return html`
-        <pre>${until(yaml, "")}</pre>
-      `;
+    if (Array.isArray(value)) {
+      return value.join(", ");
     }
-    return Array.isArray(value) ? value.join(", ") : value;
+    return value instanceof Object ? JSON.stringify(value, null, 2) : value;
   }
 }
 

src/components/ha-camera-stream.ts

@@ -53,7 +53,7 @@ class HaCameraStream extends LitElement {
             <img
               @load=${this._elementResized}
               .src=${__DEMO__
-                ? this.stateObj!.attributes.entity_picture
+                ? `/api/camera_proxy_stream/${this.stateObj.entity_id}`
                 : computeMJPEGStreamUrl(this.stateObj)}
               .alt=${`Preview of the ${computeStateName(
                 this.stateObj

src/components/ha-card.ts

@@ -5,10 +5,8 @@ import {
   LitElement,
   property,
   TemplateResult,
-  customElement,
 } from "lit-element";
 
-@customElement("ha-card")
 class HaCard extends LitElement {
   @property() public header?: string;
 
@@ -72,8 +70,4 @@ class HaCard extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-card": HaCard;
-  }
-}
+customElements.define("ha-card", HaCard);

src/components/ha-cards.js

@@ -0,0 +1,374 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { timeOut } from "@polymer/polymer/lib/utils/async";
+import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import "../cards/ha-badges-card";
+import "../cards/ha-card-chooser";
+import "./ha-demo-badge";
+
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { splitByGroups } from "../common/entity/split_by_groups";
+import { getGroupEntities } from "../common/entity/get_group_entities";
+
+// mapping domain to size of the card.
+const DOMAINS_WITH_CARD = {
+  camera: 4,
+  history_graph: 4,
+  media_player: 3,
+  persistent_notification: 0,
+  plant: 3,
+  weather: 4,
+};
+
+// 4 types:
+// badges: 0 .. 10
+// before groups < 0
+// groups: X
+// rest: 100
+
+const PRIORITY = {
+  // before groups < 0
+  configurator: -20,
+  persistent_notification: -15,
+
+  // badges have priority >= 0
+  updater: 0,
+  sun: 1,
+  person: 2,
+  device_tracker: 3,
+  alarm_control_panel: 4,
+  timer: 5,
+  sensor: 6,
+  binary_sensor: 7,
+  mailbox: 8,
+};
+
+const getPriority = (domain) => (domain in PRIORITY ? PRIORITY[domain] : 100);
+
+const sortPriority = (domainA, domainB) => domainA.priority - domainB.priority;
+
+const entitySortBy = (entityA, entityB) => {
+  const nameA = (
+    entityA.attributes.friendly_name || entityA.entity_id
+  ).toLowerCase();
+  const nameB = (
+    entityB.attributes.friendly_name || entityB.entity_id
+  ).toLowerCase();
+
+  if (nameA < nameB) {
+    return -1;
+  }
+  if (nameA > nameB) {
+    return 1;
+  }
+  return 0;
+};
+
+const iterateDomainSorted = (collection, func) => {
+  Object.keys(collection)
+    .map((key) => collection[key])
+    .sort(sortPriority)
+    .forEach((domain) => {
+      domain.states.sort(entitySortBy);
+      func(domain);
+    });
+};
+
+class HaCards extends PolymerElement {
+  static get template() {
+    return html`
+      <style include="iron-flex iron-flex-factors"></style>
+      <style>
+        :host {
+          display: block;
+          padding: 4px 4px 0;
+          transform: translateZ(0);
+          position: relative;
+        }
+
+        .badges {
+          font-size: 85%;
+          text-align: center;
+          padding-top: 16px;
+        }
+
+        .column {
+          max-width: 500px;
+          overflow-x: hidden;
+        }
+
+        ha-card-chooser {
+          display: block;
+          margin: 4px 4px 8px;
+        }
+
+        @media (max-width: 500px) {
+          :host {
+            padding-left: 0;
+            padding-right: 0;
+          }
+
+          ha-card-chooser {
+            margin-left: 0;
+            margin-right: 0;
+          }
+        }
+
+        @media (max-width: 599px) {
+          .column {
+            max-width: 600px;
+          }
+        }
+      </style>
+
+      <div id="main">
+        <template is="dom-if" if="[[cards.badges.length]]">
+          <div class="badges">
+            <template is="dom-if" if="[[cards.demo]]">
+              <ha-demo-badge></ha-demo-badge>
+            </template>
+
+            <ha-badges-card
+              states="[[cards.badges]]"
+              hass="[[hass]]"
+            ></ha-badges-card>
+          </div>
+        </template>
+
+        <div class="horizontal layout center-justified">
+          <template is="dom-repeat" items="[[cards.columns]]" as="column">
+            <div class="column flex-1">
+              <template is="dom-repeat" items="[[column]]" as="card">
+                <ha-card-chooser card-data="[[card]]"></ha-card-chooser>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+
+      columns: {
+        type: Number,
+        value: 2,
+      },
+
+      states: Object,
+
+      viewVisible: {
+        type: Boolean,
+        value: false,
+      },
+
+      orderedGroupEntities: Array,
+
+      cards: Object,
+    };
+  }
+
+  static get observers() {
+    return ["updateCards(columns, states, viewVisible, orderedGroupEntities)"];
+  }
+
+  updateCards(columns, states, viewVisible, orderedGroupEntities) {
+    if (!viewVisible) {
+      if (this.$.main.parentNode) {
+        this.$.main._parentNode = this.$.main.parentNode;
+        this.$.main.parentNode.removeChild(this.$.main);
+      }
+      return;
+    }
+    if (!this.$.main.parentNode && this.$.main._parentNode) {
+      this.$.main._parentNode.appendChild(this.$.main);
+    }
+    this._debouncer = Debouncer.debounce(
+      this._debouncer,
+      timeOut.after(10),
+      () => {
+        // Things might have changed since it got scheduled.
+        if (this.viewVisible) {
+          this.cards = this.computeCards(columns, states, orderedGroupEntities);
+        }
+      }
+    );
+  }
+
+  emptyCards() {
+    return {
+      demo: false,
+      badges: [],
+      columns: [],
+    };
+  }
+
+  computeCards(columns, states, orderedGroupEntities) {
+    const hass = this.hass;
+
+    const cards = this.emptyCards();
+
+    const entityCount = [];
+    for (let i = 0; i < columns; i++) {
+      cards.columns.push([]);
+      entityCount.push(0);
+    }
+
+    // Find column with < 5 entities, else column with lowest count
+    function getIndex(size) {
+      let minIndex = 0;
+      for (let i = 0; i < entityCount.length; i++) {
+        if (entityCount[i] < 5) {
+          minIndex = i;
+          break;
+        }
+        if (entityCount[i] < entityCount[minIndex]) {
+          minIndex = i;
+        }
+      }
+
+      entityCount[minIndex] += size;
+
+      return minIndex;
+    }
+
+    function addEntitiesCard(name, entities, groupEntity) {
+      if (entities.length === 0) return;
+
+      const owncard = [];
+      const other = [];
+
+      let size = 0;
+
+      entities.forEach((entity) => {
+        const domain = computeStateDomain(entity);
+
+        if (
+          domain in DOMAINS_WITH_CARD &&
+          !entity.attributes.custom_ui_state_card
+        ) {
+          owncard.push(entity);
+          size += DOMAINS_WITH_CARD[domain];
+        } else {
+          other.push(entity);
+          size++;
+        }
+      });
+
+      // Add 1 to the size if we're rendering entities card
+      size += other.length > 0;
+
+      const curIndex = getIndex(size);
+
+      if (other.length > 0) {
+        cards.columns[curIndex].push({
+          hass: hass,
+          cardType: "entities",
+          states: other,
+          groupEntity: groupEntity || false,
+        });
+      }
+
+      owncard.forEach((entity) => {
+        cards.columns[curIndex].push({
+          hass: hass,
+          cardType: computeStateDomain(entity),
+          stateObj: entity,
+        });
+      });
+    }
+
+    const splitted = splitByGroups(states);
+    if (orderedGroupEntities) {
+      splitted.groups.sort(
+        (gr1, gr2) =>
+          orderedGroupEntities[gr1.entity_id] -
+          orderedGroupEntities[gr2.entity_id]
+      );
+    } else {
+      splitted.groups.sort(
+        (gr1, gr2) => gr1.attributes.order - gr2.attributes.order
+      );
+    }
+
+    const badgesColl = {};
+    const beforeGroupColl = {};
+    const afterGroupedColl = {};
+
+    Object.keys(splitted.ungrouped).forEach((key) => {
+      const state = splitted.ungrouped[key];
+      const domain = computeStateDomain(state);
+
+      if (domain === "a") {
+        cards.demo = true;
+        return;
+      }
+
+      const priority = getPriority(domain);
+      let coll;
+
+      if (priority < 0) {
+        coll = beforeGroupColl;
+      } else if (priority < 10) {
+        coll = badgesColl;
+      } else {
+        coll = afterGroupedColl;
+      }
+
+      if (!(domain in coll)) {
+        coll[domain] = {
+          domain: domain,
+          priority: priority,
+          states: [],
+        };
+      }
+
+      coll[domain].states.push(state);
+    });
+
+    if (orderedGroupEntities) {
+      Object.keys(badgesColl)
+        .map((key) => badgesColl[key])
+        .forEach((domain) => {
+          cards.badges.push.apply(cards.badges, domain.states);
+        });
+
+      cards.badges.sort(
+        (e1, e2) =>
+          orderedGroupEntities[e1.entity_id] -
+          orderedGroupEntities[e2.entity_id]
+      );
+    } else {
+      iterateDomainSorted(badgesColl, (domain) => {
+        cards.badges.push.apply(cards.badges, domain.states);
+      });
+    }
+
+    iterateDomainSorted(beforeGroupColl, (domain) => {
+      addEntitiesCard(domain.domain, domain.states);
+    });
+
+    splitted.groups.forEach((groupState) => {
+      const entities = getGroupEntities(states, groupState);
+      addEntitiesCard(
+        groupState.entity_id,
+        Object.keys(entities).map((key) => entities[key]),
+        groupState
+      );
+    });
+
+    iterateDomainSorted(afterGroupedColl, (domain) => {
+      addEntitiesCard(domain.domain, domain.states);
+    });
+
+    // Remove empty columns
+    cards.columns = cards.columns.filter((val) => val.length > 0);
+
+    return cards;
+  }
+}
+customElements.define("ha-cards", HaCards);

src/components/ha-checkbox.ts

@@ -9,7 +9,7 @@ const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
 
 @customElement("ha-checkbox")
 export class HaCheckbox extends MwcCheckbox {
-  public firstUpdated() {
+  protected firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }

src/components/ha-chips.ts

@@ -8,7 +8,7 @@ import {
   customElement,
   unsafeCSS,
 } from "lit-element";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
+
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import { fireEvent } from "../common/dom/fire_event";
@@ -33,27 +33,22 @@ export class HaChips extends LitElement {
         ${this.items.map(
           (item, idx) =>
             html`
-              <div class="mdc-chip" .index=${idx} @click=${this._handleClick}>
-                <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
-                <span role="gridcell">
-                  <span
-                    role="button"
-                    tabindex="0"
-                    class="mdc-chip__primary-action"
-                  >
-                    <span class="mdc-chip__text">${item}</span>
-                  </span>
-                </span>
-              </div>
+              <button
+                class="mdc-chip"
+                .index=${idx}
+                @click=${this._handleClick}
+              >
+                <span class="mdc-chip__text">${item}</span>
+              </button>
             `
         )}
       </div>
     `;
   }
 
-  private _handleClick(ev): void {
+  private _handleClick(ev) {
     fireEvent(this, "chip-clicked", {
-      index: ev.currentTarget.index,
+      index: ev.target.closest("button").index,
     });
   }
 

src/components/ha-cover-controls.js

@@ -19,7 +19,7 @@ class HaCoverControls extends PolymerElement {
       <div class="state">
         <paper-icon-button
           aria-label="Open cover"
-          icon="[[computeOpenIcon(stateObj)]]"
+          icon="hass:arrow-up"
           on-click="onOpenTap"
           invisible$="[[!entityObj.supportsOpen]]"
           disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
@@ -32,7 +32,7 @@ class HaCoverControls extends PolymerElement {
         ></paper-icon-button>
         <paper-icon-button
           aria-label="Close cover"
-          icon="[[computeCloseIcon(stateObj)]]"
+          icon="hass:arrow-down"
           on-click="onCloseTap"
           invisible$="[[!entityObj.supportsClose]]"
           disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
@@ -60,26 +60,6 @@ class HaCoverControls extends PolymerElement {
     return new CoverEntity(hass, stateObj);
   }
 
-  computeOpenIcon(stateObj) {
-    switch (stateObj.attributes.device_class) {
-      case "awning":
-      case "gate":
-        return "hass:arrow-expand-horizontal";
-      default:
-        return "hass:arrow-up";
-    }
-  }
-
-  computeCloseIcon(stateObj) {
-    switch (stateObj.attributes.device_class) {
-      case "awning":
-      case "gate":
-        return "hass:arrow-collapse-horizontal";
-      default:
-        return "hass:arrow-down";
-    }
-  }
-
   computeOpenDisabled(stateObj, entityObj) {
     var assumedState = stateObj.attributes.assumed_state === true;
     return (entityObj.isFullyOpen || entityObj.isOpening) && !assumedState;

src/components/ha-dialog.ts

@@ -1,23 +1,12 @@
-import { customElement, CSSResult, css, html } from "lit-element";
-import "@polymer/paper-icon-button/paper-icon-button";
+import { customElement, CSSResult, css } from "lit-element";
 import "@material/mwc-dialog";
 import { style } from "@material/mwc-dialog/mwc-dialog-css";
 // tslint:disable-next-line
 import { Dialog } from "@material/mwc-dialog";
-import { Constructor, HomeAssistant } from "../types";
+import { Constructor } from "../types";
 // tslint:disable-next-line
 const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
 
-export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
-  ${title}
-  <paper-icon-button
-    aria-label=${hass.localize("ui.dialogs.generic.close")}
-    icon="hass:close"
-    dialogAction="close"
-    class="close_button"
-  ></paper-icon-button>
-`;
-
 @customElement("ha-dialog")
 export class HaDialog extends MwcDialog {
   protected static get styles(): CSSResult[] {
@@ -30,15 +19,6 @@ export class HaDialog extends MwcDialog {
         .mdc-dialog__container {
           align-items: var(--vertial-align-dialog, center);
         }
-        .mdc-dialog__title::before {
-          display: block;
-          height: 20px;
-        }
-        .close_button {
-          position: absolute;
-          right: 16px;
-          top: 12px;
-        }
       `,
     ];
   }

src/components/ha-fab.ts

@@ -1,6 +1,6 @@
 import { classMap } from "lit-html/directives/class-map";
 import { html, customElement } from "lit-element";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
+import { ripple } from "@material/mwc-ripple/ripple-directive.js";
 
 import "@material/mwc-fab";
 import { Constructor } from "../types";

src/components/ha-form/ha-form-integer.ts

@@ -5,8 +5,6 @@ import {
   property,
   TemplateResult,
   query,
-  CSSResult,
-  css,
 } from "lit-element";
 import {
   HaFormElement,
@@ -21,14 +19,13 @@ import "@polymer/paper-input/paper-input";
 // tslint:disable-next-line
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
-import { HaCheckbox } from "../ha-checkbox";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
   @property() public schema!: HaFormIntegerSchema;
-  @property() public data?: HaFormIntegerData;
-  @property() public label?: string;
-  @property() public suffix?: string;
+  @property() public data!: HaFormIntegerData;
+  @property() public label!: string;
+  @property() public suffix!: string;
   @query("paper-input ha-paper-slider") private _input?: HTMLElement;
 
   public focus() {
@@ -42,31 +39,20 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       ? html`
           <div>
             ${this.label}
-            <div class="flex">
-              ${this.schema.optional && this.schema.default === undefined
-                ? html`
-                    <ha-checkbox
-                      @change=${this._handleCheckboxChange}
-                      .checked=${this.data !== undefined}
-                    ></ha-checkbox>
-                  `
-                : ""}
-              <ha-paper-slider
-                pin=""
-                .value=${this._value}
-                .min=${this.schema.valueMin}
-                .max=${this.schema.valueMax}
-                .disabled=${this.data === undefined}
-                @value-changed=${this._valueChanged}
-              ></ha-paper-slider>
-            </div>
+            <ha-paper-slider
+              pin=""
+              .value=${this._value}
+              .min=${this.schema.valueMin}
+              .max=${this.schema.valueMax}
+              @value-changed=${this._valueChanged}
+            ></ha-paper-slider>
           </div>
         `
       : html`
           <paper-input
             type="number"
             .label=${this.label}
-            .value=${this._value}
+            .value=${this.data}
             .required=${this.schema.required}
             .autoValidate=${this.schema.required}
             @value-changed=${this._valueChanged}
@@ -75,14 +61,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
   }
 
   private get _value() {
-    return this.data || this.schema.default || 0;
-  }
-
-  private _handleCheckboxChange(ev: Event) {
-    const checked = (ev.target as HaCheckbox).checked;
-    fireEvent(this, "value-changed", {
-      value: checked ? this._value : undefined,
-    });
+    return this.data || 0;
   }
 
   private _valueChanged(ev: Event) {
@@ -96,14 +75,6 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       value,
     });
   }
-
-  static get styles(): CSSResult {
-    return css`
-      .flex {
-        display: flex;
-      }
-    `;
-  }
 }
 
 declare global {

src/components/ha-form/ha-form-multi_select.ts

@@ -1,158 +0,0 @@
-import "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-menu-button/paper-menu-button";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-ripple/paper-ripple";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-  CSSResult,
-  css,
-} from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import {
-  HaFormElement,
-  HaFormMultiSelectData,
-  HaFormMultiSelectSchema,
-} from "./ha-form";
-
-@customElement("ha-form-multi_select")
-export class HaFormMultiSelect extends LitElement implements HaFormElement {
-  @property() public schema!: HaFormMultiSelectSchema;
-  @property() public data!: HaFormMultiSelectData;
-  @property() public label!: string;
-  @property() public suffix!: string;
-  @property() private _init = false;
-  @query("paper-menu-button") private _input?: HTMLElement;
-
-  public focus(): void {
-    if (this._input) {
-      this._input.focus();
-    }
-  }
-
-  protected render(): TemplateResult {
-    const options = Array.isArray(this.schema.options)
-      ? this.schema.options
-      : Object.entries(this.schema.options!);
-
-    const data = this.data || [];
-    return html`
-      <paper-menu-button horizontal-align="right" vertical-offset="8">
-        <div class="dropdown-trigger" slot="dropdown-trigger">
-          <paper-ripple></paper-ripple>
-          <paper-input
-            id="input"
-            type="text"
-            readonly
-            value=${data
-              .map((value) => this.schema.options![value] || value)
-              .join(", ")}
-            label=${this.label}
-            input-role="button"
-            input-aria-haspopup="listbox"
-            autocomplete="off"
-          >
-            <iron-icon
-              icon="paper-dropdown-menu:arrow-drop-down"
-              suffix
-              slot="suffix"
-            ></iron-icon>
-          </paper-input>
-        </div>
-        <paper-listbox
-          multi
-          slot="dropdown-content"
-          attr-for-selected="item-value"
-          .selectedValues=${data}
-          @selected-items-changed=${this._valueChanged}
-          @iron-select=${this._onSelect}
-        >
-          ${// TS doesn't work with union array types https://github.com/microsoft/TypeScript/issues/36390
-          // @ts-ignore
-          options.map((item: string | [string, string]) => {
-            const value = this._optionValue(item);
-            return html`
-              <paper-icon-item .itemValue=${value}>
-                <paper-checkbox
-                  .checked=${data.includes(value)}
-                  slot="item-icon"
-                ></paper-checkbox>
-                ${this._optionLabel(item)}
-              </paper-icon-item>
-            `;
-          })}
-        </paper-listbox>
-      </paper-menu-button>
-    `;
-  }
-
-  protected firstUpdated() {
-    this.updateComplete.then(() => {
-      const input = (this.shadowRoot?.querySelector("paper-input")
-        ?.inputElement as any)?.inputElement;
-      if (input) {
-        input.style.textOverflow = "ellipsis";
-      }
-    });
-  }
-
-  private _optionValue(item: string | string[]): string {
-    return Array.isArray(item) ? item[0] : item;
-  }
-
-  private _optionLabel(item: string | string[]): string {
-    return Array.isArray(item) ? item[1] || item[0] : item;
-  }
-
-  private _onSelect(ev: Event) {
-    ev.stopPropagation();
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    if (!ev.detail.value || !this._init) {
-      // ignore first call because that is the init of the component
-      this._init = true;
-      return;
-    }
-
-    fireEvent(
-      this,
-      "value-changed",
-      {
-        value: ev.detail.value.map((element) => element.itemValue),
-      },
-      { bubbles: false }
-    );
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      paper-menu-button {
-        display: block;
-        padding: 0;
-        --paper-item-icon-width: 34px;
-      }
-      paper-ripple {
-        top: 12px;
-        left: 0px;
-        bottom: 8px;
-        right: 0px;
-      }
-      paper-input {
-        text-overflow: ellipsis;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-form-multi_select": HaFormMultiSelect;
-  }
-}

src/components/ha-form/ha-form-select.ts

@@ -5,8 +5,6 @@ import {
   property,
   TemplateResult,
   query,
-  CSSResult,
-  css,
 } from "lit-element";
 import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -38,10 +36,8 @@ export class HaFormSelect extends LitElement implements HaFormElement {
           .selected=${this.data}
           @selected-item-changed=${this._valueChanged}
         >
-          ${// TS doesn't work with union array types https://github.com/microsoft/TypeScript/issues/36390
-          // @ts-ignore
-          this.schema.options!.map(
-            (item: string | [string, string]) => html`
+          ${this.schema.options!.map(
+            (item) => html`
               <paper-item .itemValue=${this._optionValue(item)}>
                 ${this._optionLabel(item)}
               </paper-item>
@@ -52,12 +48,12 @@ export class HaFormSelect extends LitElement implements HaFormElement {
     `;
   }
 
-  private _optionValue(item: string | [string, string]) {
+  private _optionValue(item) {
     return Array.isArray(item) ? item[0] : item;
   }
 
-  private _optionLabel(item: string | [string, string]) {
-    return Array.isArray(item) ? item[1] || item[0] : item;
+  private _optionLabel(item) {
+    return Array.isArray(item) ? item[1] : item;
   }
 
   private _valueChanged(ev: CustomEvent) {
@@ -68,14 +64,6 @@ export class HaFormSelect extends LitElement implements HaFormElement {
       value: ev.detail.value.itemValue,
     });
   }
-
-  static get styles(): CSSResult {
-    return css`
-      paper-dropdown-menu {
-        display: block;
-      }
-    `;
-  }
 }
 
 declare global {

src/components/ha-form/ha-form.ts

@@ -12,7 +12,6 @@ import "./ha-form-integer";
 import "./ha-form-float";
 import "./ha-form-boolean";
 import "./ha-form-select";
-import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";
 import { fireEvent } from "../../common/dom/fire_event";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
@@ -23,7 +22,6 @@ export type HaFormSchema =
   | HaFormFloatSchema
   | HaFormBooleanSchema
   | HaFormSelectSchema
-  | HaFormMultiSelectSchema
   | HaFormTimeSchema;
 
 export interface HaFormBaseSchema {
@@ -43,12 +41,7 @@ export interface HaFormIntegerSchema extends HaFormBaseSchema {
 
 export interface HaFormSelectSchema extends HaFormBaseSchema {
   type: "select";
-  options?: string[] | Array<[string, string]>;
-}
-
-export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
-  type: "multi_select";
-  options?: { [key: string]: string } | string[] | Array<[string, string]>;
+  options?: string[];
 }
 
 export interface HaFormFloatSchema extends HaFormBaseSchema {
@@ -78,7 +71,6 @@ export type HaFormData =
   | HaFormFloatData
   | HaFormBooleanData
   | HaFormSelectData
-  | HaFormMultiSelectData
   | HaFormTimeData;
 
 export type HaFormStringData = string;
@@ -86,7 +78,6 @@ export type HaFormIntegerData = number;
 export type HaFormFloatData = number;
 export type HaFormBooleanData = boolean;
 export type HaFormSelectData = string;
-export type HaFormMultiSelectData = string[];
 export interface HaFormTimeData {
   hours?: number;
   minutes?: number;
@@ -95,7 +86,7 @@ export interface HaFormTimeData {
 
 export interface HaFormElement extends LitElement {
   schema: HaFormSchema;
-  data?: HaFormDataContainer | HaFormData;
+  data: HaFormDataContainer | HaFormData;
   label?: string;
   suffix?: string;
 }