Add move data disk

.devcontainer/devcontainer.json

@@ -16,9 +16,6 @@
     "runem.lit-plugin",
     "ms-python.vscode-pylance"
   ],
-  "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
-  },
   "settings": {
     "terminal.integrated.shell.linux": "/bin/bash",
     "files.eol": "\n",

.eslintrc.json

@@ -1,10 +1,9 @@
 {
   "extends": [
-    "airbnb-base",
     "airbnb-typescript/base",
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
-    "plugin:lit/all",
+    "plugin:lit/recommended",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
@@ -29,7 +28,6 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "__SUPERVISOR__": false,
     "Polymer": true
   },
   "env": {
@@ -111,8 +109,7 @@
       }
     ],
     "unused-imports/no-unused-imports": "error",
-    "lit/attribute-value-entities": "off",
-    "lit/no-template-map": "off"
+    "lit/attribute-value-entities": "off"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

.github/workflows/ci.yaml

@@ -12,7 +12,7 @@ on:
 
 env:
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=6144
+  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   lint:
@@ -30,7 +30,7 @@ jobs:
         env:
           CI: true
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
       - name: Run eslint
         run: yarn run lint:eslint
       - name: Run tsc
@@ -53,10 +53,8 @@ jobs:
         run: yarn install
         env:
           CI: true
-      - name: Build resources
-        run: ./node_modules/.bin/gulp build-translations build-locale-data
-      - name: Run Tests
-        run: yarn run test
+      - name: Run Mocha
+        run: yarn run mocha
   build:
     runs-on: ubuntu-latest
     needs: [lint, test]

.github/workflows/demo.yaml

@@ -7,7 +7,7 @@ on:
 
 env:
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=6144
+  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   deploy:

.github/workflows/netflify.yml

@@ -15,5 +15,5 @@ jobs:
       - name: Trigger Demo build
         run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_DEMO_DEV_BUILD_HOOK }}
 
-      - name: Trigger Design build
-        run: curl -X POST -d "NIGHTLY" https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_GALLERY_DEV_BUILD_HOOK }}
+      - name: Trigger Gallery build
+        run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_GALLERY_DEV_BUILD_HOOK }}

.github/workflows/release.yaml

@@ -8,7 +8,7 @@ on:
 env:
   PYTHON_VERSION: 3.8
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=6144
+  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   release:
@@ -41,7 +41,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
-          python3 -m pip install twine build
+          python3 -m pip install twine
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
 

.gitignore

@@ -3,6 +3,7 @@
 
 # build
 build
+build-translations/*
 hass_frontend/*
 dist
 

.mocharc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  require: "test-mocha/testconf.js",
+  timeout: 10000,
+};

.prettierignore

@@ -1,4 +1,5 @@
 build
+build-translations/*
 translations/*
 node_modules/*
 hass_frontend/*

.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch

@@ -1,10 +1,11 @@
-diff --git a/polyfillLoaders/EventTarget.js b/polyfillLoaders/EventTarget.js
-index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
---- a/polyfillLoaders/EventTarget.js
-+++ b/polyfillLoaders/EventTarget.js
-@@ -6,16 +6,15 @@
- let _ET;
- let ET;
+diff --git a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
+index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc32e26b8d 100644
+--- a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
++++ b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
+@@ -1,14 +1,15 @@
+-let _ET, ET;
++let _ET;
++let ET;
  export default async function EventTarget() {
 -    return ET || init();
 +  return ET || init();
@@ -26,4 +27,3 @@ index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c960
 +  }
 +  return (ET = _ET);
  }
- //# sourceMappingURL=EventTarget.js.map

.yarn/patches/@material/mwc-icon-button/remove-icon.patch

@@ -1,12 +0,0 @@
-diff --git a/mwc-icon-button-base.js b/mwc-icon-button-base.js
-index 45cdaab93ccc0a6daaaaabc01266dcdc32e46bfd..b3ea5b541597308d85f86ce6c23fd00785fda835 100644
---- a/mwc-icon-button-base.js
-+++ b/mwc-icon-button-base.js
-@@ -63,7 +63,6 @@ export class IconButtonBase extends LitElement {
-         @touchend="${this.handleRippleDeactivate}"
-         @touchcancel="${this.handleRippleDeactivate}"
-     >${this.renderRipple()}
--    <i class="material-icons">${this.icon}</i>
-     <span
-       ><slot></slot
-     ></span>

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-2.4.2.cjs

MANIFEST.in

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

README.md

@@ -2,7 +2,7 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)

build-scripts/bundle.js

@@ -10,7 +10,7 @@ module.exports.ignorePackages = ({ latestBuild }) => [
 ];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
+module.exports.emptyPackages = ({ latestBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,15 +28,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       ),
     // This polyfill is loaded in workers to support ES5, filter it out.
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
-    // Icons in supervisor conflict with icons in HA so we don't load.
-    isHassioBuild &&
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
-      ),
-    isHassioBuild &&
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
-      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
@@ -44,7 +35,6 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
-  __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
   "process.env.NODE_ENV": JSON.stringify(
@@ -92,7 +82,6 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     // Only support the syntax, Webpack will handle it.
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-top-level-await",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
@@ -174,7 +163,6 @@ module.exports.config = {
   cast({ isProdBuild, latestBuild }) {
     const entry = {
       launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
-      media: path.resolve(paths.cast_dir, "src/media/entrypoint.ts"),
     };
 
     if (latestBuild) {
@@ -205,10 +193,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
-      isHassioBuild: true,
-      defineOverlay: {
-        __SUPERVISOR__: true,
-      },
     };
   },
 
@@ -221,9 +205,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      defineOverlay: {
-        __DEMO__: true,
-      },
     };
   },
 };

build-scripts/env.js

@@ -26,11 +26,11 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
-      .match(/version\W+=\W(\d{8}\.\d)/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+      .match(/\d{8}\.\d+/);
     if (!version) {
       throw Error("Version not found");
     }
-    return version[1];
+    return version[0];
   },
 };

build-scripts/gulp/app.js

@@ -5,7 +5,6 @@ const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
-require("./locale-data.js");
 require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
@@ -27,8 +26,7 @@ gulp.task(
       "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations",
-      "build-locale-data"
+      "build-translations"
     ),
     "copy-static-app",
     env.useWDS()
@@ -46,7 +44,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-app",
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests

build-scripts/gulp/cast.js

@@ -18,7 +18,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
     "gen-index-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
@@ -33,7 +33,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/clean.js

@@ -31,6 +31,6 @@ gulp.task("clean-hassio", () =>
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", () =>
-    del([paths.gallery_output_root, paths.gallery_build, paths.build_dir])
+    del([paths.gallery_output_root, paths.build_dir])
   )
 );

build-scripts/gulp/demo.js

@@ -20,12 +20,7 @@ gulp.task(
     },
     "clean-demo",
     "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "gen-index-demo-dev",
-      "build-translations",
-      "build-locale-data"
-    ),
+    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
     "copy-static-demo",
     env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
@@ -40,7 +35,7 @@ gulp.task(
     "clean-demo",
     // Cast needs to be backwards compatible and older HA has no translations
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/entry-html.js

@@ -154,15 +154,6 @@ gulp.task("gen-index-cast-dev", (done) => {
     contentReceiver
   );
 
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: "/frontend_latest/media.js",
-    es5MediaJS: "/frontend_es5/media.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
-
   const contentFAQ = renderCastTemplate("launcher-faq", {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
@@ -201,15 +192,6 @@ gulp.task("gen-index-cast-prod", (done) => {
     contentReceiver
   );
 
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: latestManifest["media.js"],
-    es5MediaJS: es5Manifest["media.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
-
   const contentFAQ = renderCastTemplate("launcher-faq", {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],

build-scripts/gulp/gallery.js

@@ -1,11 +1,7 @@
-/* eslint-disable */
 // Run demo develop mode
 const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
-const { marked } = require("marked");
-const glob = require("glob");
-const yaml = require("js-yaml");
 
 const env = require("../env");
 const paths = require("../paths");
@@ -19,129 +15,26 @@ require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
 
-gulp.task("gather-gallery-pages", async function gatherPages() {
-  const pageDir = path.resolve(paths.gallery_dir, "src/pages");
-  const files = glob.sync(path.resolve(pageDir, "**/*"));
+gulp.task("gather-gallery-demos", async function gatherDemos() {
+  const files = await fs.promises.readdir(
+    path.resolve(paths.gallery_dir, "src/demos")
+  );
 
-  const galleryBuild = path.resolve(paths.gallery_dir, "build");
-  fs.mkdirSync(galleryBuild, { recursive: true });
-
-  let content = "export const PAGES = {\n";
-
-  const processed = new Set();
+  let content = "export const DEMOS = {\n";
 
   for (const file of files) {
-    if (fs.lstatSync(file).isDirectory()) {
-      continue;
-    }
-    const pageId = file.substring(pageDir.length + 1, file.lastIndexOf("."));
-
-    if (processed.has(pageId)) {
-      continue;
-    }
-    processed.add(pageId);
-
-    const [category, name] = pageId.split("/", 2);
-
-    const demoFile = path.resolve(pageDir, `${pageId}.ts`);
-    const descriptionFile = path.resolve(pageDir, `${pageId}.markdown`);
-    const hasDemo = fs.existsSync(demoFile);
-    let hasDescription = fs.existsSync(descriptionFile);
-    let metadata = {};
-    if (hasDescription) {
-      let descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
-
-      if (descriptionContent.startsWith("---")) {
-        const metadataEnd = descriptionContent.indexOf("---", 3);
-        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
-        descriptionContent = descriptionContent
-          .substring(metadataEnd + 3)
-          .trim();
+    const demoId = path.basename(file, ".ts");
+    const demoPath = "../src/demos/" + demoId;
+    content += `  "${demoId}": () => import("${demoPath}"),\n`;
   }
 
-      // If description is just metadata
-      if (descriptionContent === "") {
-        hasDescription = false;
-      } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
-        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
+  content += "};";
+
+  const galleryBuild = path.resolve(paths.gallery_dir, "build");
+
+  fs.mkdirSync(galleryBuild, { recursive: true });
   fs.writeFileSync(
-          path.resolve(galleryBuild, `${pageId}-description.ts`),
-          `
-          import {html} from "lit";
-          export default html\`${descriptionContent}\`
-          `
-        );
-      }
-    }
-    content += `  "${pageId}": {
-      metadata: ${JSON.stringify(metadata)},
-      ${
-        hasDescription
-          ? `description: () => import("./${pageId}-description").then(m => m.default),`
-          : ""
-      }
-      ${hasDemo ? `demo: () => import("../src/pages/${pageId}")` : ""}
-
-    },\n`;
-  }
-
-  content += "};\n";
-
-  // Generate sidebar
-  const sidebarPath = path.resolve(paths.gallery_dir, "sidebar.js");
-  // To make watch work during development
-  delete require.cache[sidebarPath];
-  const sidebar = require(sidebarPath);
-
-  const pagesToProcess = {};
-  for (const key of processed) {
-    const [category, page] = key.split("/", 2);
-    if (!(category in pagesToProcess)) {
-      pagesToProcess[category] = new Set();
-    }
-    pagesToProcess[category].add(page);
-  }
-
-  for (const group of Object.values(sidebar)) {
-    const toProcess = pagesToProcess[group.category];
-    delete pagesToProcess[group.category];
-
-    if (!toProcess) {
-      console.error("Unknown category", group.category);
-      if (!group.pages) {
-        group.pages = [];
-      }
-      continue;
-    }
-
-    // Any pre-defined groups will not be sorted.
-    if (group.pages) {
-      for (const page of group.pages) {
-        if (!toProcess.delete(page)) {
-          console.error("Found unreferenced demo", page);
-        }
-      }
-    } else {
-      group.pages = [];
-    }
-    for (const page of Array.from(toProcess).sort()) {
-      group.pages.push(page);
-    }
-  }
-
-  for (const [category, pages] of Object.entries(pagesToProcess)) {
-    sidebar.push({
-      category,
-      header: category,
-      pages: Array.from(pages).sort(),
-    });
-  }
-
-  content += `export const SIDEBAR = ${JSON.stringify(sidebar, null, 2)};\n`;
-
-  fs.writeFileSync(
-    path.resolve(galleryBuild, "import-pages.ts"),
+    path.resolve(galleryBuild, "import-demos.ts"),
     content,
     "utf-8"
   );
@@ -158,25 +51,11 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "build-locale-data",
-      "gather-gallery-pages"
+      "gather-gallery-demos"
     ),
     "copy-static-gallery",
     "gen-index-gallery-dev",
-    gulp.parallel(
-      env.useRollup()
-        ? "rollup-dev-server-gallery"
-        : "webpack-dev-server-gallery",
-      async function watchMarkdownFiles() {
-        gulp.watch(
-          [
-            path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
-            path.resolve(paths.gallery_dir, "sidebar.js"),
-          ],
-          gulp.series("gather-gallery-pages")
-        );
-      }
-    )
+    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
   )
 );
 
@@ -191,8 +70,7 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "build-locale-data",
-      "gather-gallery-pages"
+      "gather-gallery-demos"
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",

build-scripts/gulp/gather-static.js

@@ -22,18 +22,11 @@ function copyTranslations(staticDir) {
 
   // Translation output
   fs.copySync(
-    polyPath("build/translations/output"),
+    polyPath("build-translations/output"),
     staticPath("translations")
   );
 }
 
-function copyLocaleData(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-
-  // Locale data output
-  fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
-}
-
 function copyMdiIcons(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
@@ -79,11 +72,6 @@ function copyFonts(staticDir) {
   );
 }
 
-function copyQrScannerWorker(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
-}
-
 function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
@@ -96,11 +84,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-locale-data", async () => {
-  const staticDir = paths.app_output_static;
-  copyLocaleData(staticDir);
-});
-
 gulp.task("copy-translations-app", async () => {
   const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
@@ -111,11 +94,6 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-locale-data-supervisor", async () => {
-  const staticDir = paths.hassio_output_static;
-  copyLocaleData(staticDir);
-});
-
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
@@ -125,14 +103,10 @@ gulp.task("copy-static-app", async () => {
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
-  copyLocaleData(staticDir);
   copyMdiIcons(staticDir);
 
   // Panel assets
   copyMapPanel(staticDir);
-
-  // Qr Scanner assets
-  copyQrScannerWorker(staticDir);
 });
 
 gulp.task("copy-static-demo", async () => {
@@ -149,7 +123,6 @@ gulp.task("copy-static-demo", async () => {
   copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
   copyTranslations(paths.demo_output_static);
-  copyLocaleData(paths.demo_output_static);
   copyMdiIcons(paths.demo_output_static);
 });
 
@@ -164,7 +137,6 @@ gulp.task("copy-static-cast", async () => {
   copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
   copyTranslations(paths.cast_output_static);
-  copyLocaleData(paths.cast_output_static);
   copyMdiIcons(paths.cast_output_static);
 });
 
@@ -180,6 +152,5 @@ gulp.task("copy-static-gallery", async () => {
   copyMapPanel(paths.gallery_output_static);
   copyFonts(paths.gallery_output_static);
   copyTranslations(paths.gallery_output_static);
-  copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
 });

build-scripts/gulp/gen-icons-json.js

@@ -22,40 +22,17 @@ const getMeta = () => {
     const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
       encoding,
     });
-    return {
-      path: svg.match(/ d="([^"]+)"/)[1],
-      name: icon.name,
-      tags: icon.tags,
-      aliases: icon.aliases,
-    };
+    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
   });
 };
 
 const addRemovedMeta = (meta) => {
   const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
   const removed = JSON.parse(file);
-  const removedMeta = removed.map((removeIcon) => ({
-    path: removeIcon.path,
-    name: removeIcon.name,
-    tags: [],
-    aliases: [],
-  }));
-  const combinedMeta = [...meta, ...removedMeta];
+  const combinedMeta = [...meta, ...removed];
   return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
 };
 
-const homeAutomationTag = "Home Automation";
-
-const orderMeta = (meta) => {
-  const homeAutomationMeta = meta.filter((icon) =>
-    icon.tags.includes(homeAutomationTag)
-  );
-  const otherMeta = meta.filter(
-    (icon) => !icon.tags.includes(homeAutomationTag)
-  );
-  return [...homeAutomationMeta, ...otherMeta];
-};
-
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -100,10 +77,8 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = getMeta();
-
-  const metaAndRemoved = addRemovedMeta(meta);
-  const split = splitBySize(metaAndRemoved);
+  const meta = addRemovedMeta(getMeta());
+  const split = splitBySize(meta);
 
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
@@ -141,18 +116,5 @@ gulp.task("gen-icons-json", (done) => {
     JSON.stringify({ version: package.version, parts })
   );
 
-  fs.writeFileSync(
-    path.resolve(OUTPUT_DIR, "iconList.json"),
-    JSON.stringify(
-      orderMeta(meta).map((icon) => ({
-        name: icon.name,
-        keywords: [
-          ...icon.tags.map((t) => t.toLowerCase().replace(/\s\/\s/g, " ")),
-          ...icon.aliases,
-        ],
-      }))
-    )
-  );
-
   done();
 });

build-scripts/gulp/hassio.js

@@ -1,6 +1,9 @@
 const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
 
 const env = require("../env");
+const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
@@ -17,11 +20,10 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
+    "gen-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -33,10 +35,9 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
+    "gen-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/locale-data.js

@@ -1,74 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const del = require("del");
-const path = require("path");
-const gulp = require("gulp");
-const fs = require("fs");
-const paths = require("../paths");
-
-const outDir = "build/locale-data";
-
-gulp.task("clean-locale-data", () => del([outDir]));
-
-gulp.task("ensure-locale-data-build-dir", (done) => {
-  if (!fs.existsSync(outDir)) {
-    fs.mkdirSync(outDir, { recursive: true });
-  }
-  done();
-});
-
-const modules = {
-  "intl-relativetimeformat": "RelativeTimeFormat",
-  "intl-datetimeformat": "DateTimeFormat",
-  "intl-numberformat": "NumberFormat",
-};
-
-gulp.task("create-locale-data", (done) => {
-  const translationMeta = JSON.parse(
-    fs.readFileSync(
-      path.join(paths.translations_src, "translationMetadata.json")
-    )
-  );
-  Object.entries(modules).forEach(([module, className]) => {
-    Object.keys(translationMeta).forEach((lang) => {
-      try {
-        const localeData = String(
-          fs.readFileSync(
-            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
-          )
-        )
-          .replace(
-            new RegExp(
-              `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
-              "im"
-            ),
-            ""
-          )
-          .replace(/\)\s*}/im, "");
-        // make sure we have valid JSON
-        JSON.parse(localeData);
-        if (!fs.existsSync(path.join(outDir, module))) {
-          fs.mkdirSync(path.join(outDir, module), { recursive: true });
-        }
-        fs.writeFileSync(
-          path.join(outDir, `${module}/${lang}.json`),
-          localeData
-        );
-      } catch (e) {
-        if (e.code !== "MODULE_NOT_FOUND") {
-          throw e;
-        }
-      }
-    });
-    done();
-  });
-});
-
-gulp.task(
-  "build-locale-data",
-  gulp.series(
-    "clean-locale-data",
-    "ensure-locale-data-build-dir",
-    "create-locale-data"
-  )
-);

build-scripts/gulp/translations.js

@@ -7,7 +7,7 @@ const source = require("vinyl-source-stream");
 const vinylBuffer = require("vinyl-buffer");
 const gulp = require("gulp");
 const fs = require("fs");
-const flatmap = require("gulp-flatmap");
+const foreach = require("gulp-foreach");
 const merge = require("gulp-merge-json");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
@@ -17,7 +17,7 @@ const paths = require("../paths");
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
-const workDir = "build/translations";
+const workDir = "build-translations";
 const fullDir = workDir + "/full";
 const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
@@ -121,7 +121,7 @@ gulp.task("clean-translations", () => del([workDir]));
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
-    fs.mkdirSync(workDir, { recursive: true });
+    fs.mkdirSync(workDir);
   }
   done();
 });
@@ -183,7 +183,7 @@ gulp.task("build-merged-translations", () =>
     })
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
-      flatmap((stream, file) => {
+      foreach((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
@@ -336,14 +336,6 @@ gulp.task("build-translation-fragment-supervisor", () =>
   gulp
     .src(fullDir + "/*.json")
     .pipe(transform((data) => data.supervisor))
-    .pipe(
-      rename((filePath) => {
-        // In dev we create the file with the fake hash in the filename
-        if (!env.isProdBuild()) {
-          filePath.basename += "-dev";
-        }
-      })
-    )
     .pipe(gulp.dest(workDir + "/supervisor"))
 );
 

build-scripts/gulp/webpack.js

@@ -35,29 +35,26 @@ const isWsl =
  *   listenHost?: string
  * }}
  */
-const runDevServer = async ({
+const runDevServer = ({
   compiler,
   contentBase,
   port,
   listenHost = "localhost",
-}) => {
-  const server = new WebpackDevServer(
-    {
+}) =>
+  new WebpackDevServer(compiler, {
     open: true,
-      host: listenHost,
-      port,
-      static: {
-        directory: contentBase,
-        watch: true,
-      },
-    },
-    compiler
-  );
-
-  await server.start();
+    watchContentBase: true,
+    contentBase,
+  }).listen(port, listenHost, (err) => {
+    if (err) {
+      throw err;
+    }
     // Server listening
-  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
-};
+    log(
+      "[webpack-dev-server]",
+      `Project is running at http://localhost:${port}`
+    );
+  });
 
 const doneHandler = (done) => (err, stats) => {
   if (err) {
@@ -110,13 +107,13 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () =>
+gulp.task("webpack-dev-server-demo", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
     contentBase: paths.demo_output_root,
     port: 8090,
-  })
-);
+  });
+});
 
 gulp.task("webpack-prod-demo", () =>
   prodBuild(
@@ -126,15 +123,15 @@ gulp.task("webpack-prod-demo", () =>
   )
 );
 
-gulp.task("webpack-dev-server-cast", () =>
+gulp.task("webpack-dev-server-cast", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-  })
-);
+  });
+});
 
 gulp.task("webpack-prod-cast", () =>
   prodBuild(
@@ -151,7 +148,7 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
+  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
 
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
@@ -167,15 +164,14 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () =>
+gulp.task("webpack-dev-server-gallery", () => {
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
     contentBase: paths.gallery_output_root,
     port: 8100,
-    listenHost: "0.0.0.0",
-  })
-);
+  });
+});
 
 gulp.task("webpack-prod-gallery", () =>
   prodBuild(

build-scripts/paths.js

@@ -26,7 +26,6 @@ module.exports = {
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 
   gallery_dir: path.resolve(__dirname, "../gallery"),
-  gallery_build: path.resolve(__dirname, "../gallery/build"),
   gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
   gallery_output_latest: path.resolve(
     __dirname,

build-scripts/webpack.js

@@ -6,7 +6,6 @@ const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
 const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -30,7 +29,6 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
-  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -76,7 +74,6 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -118,9 +115,7 @@ const createWebpackConfig = ({
         },
       }),
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -130,13 +125,6 @@ const createWebpackConfig = ({
       alias: {
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
-        "lit/directives/until$": "lit/directives/until.js",
-        "lit/directives/class-map$": "lit/directives/class-map.js",
-        "lit/directives/style-map$": "lit/directives/style-map.js",
-        "lit/directives/if-defined$": "lit/directives/if-defined.js",
-        "lit/directives/guard$": "lit/directives/guard.js",
-        "lit/directives/cache$": "lit/directives/cache.js",
-        "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
       },
     },
@@ -154,9 +142,6 @@ const createWebpackConfig = ({
       // To silence warning in worker plugin
       globalObject: "self",
     },
-    experiments: {
-      topLevelAwait: true,
-    },
   };
 };
 

cast/src/html/media.html.template

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-    <style>
-      body {
-        --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-        --logo-repeat: no-repeat;
-        --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-        --theme-hue: 200;
-        --progress-color: #03a9f4;
-        --splash-image: url('https://home-assistant.io/images/cast/splash.png');
-        --splash-size: cover;
-        --background-color: #41bdf5;
-      }
-    </style>
-    <script>
-      var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
-      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-      s.parentNode.insertBefore(g,s)}(document,'script'));
-    </script>
-  </head>
-  <body>
-    <%= renderTemplate('_js_base') %>
-
-    <cast-media-player></cast-media-player>
-
-    <script>
-      import("<%= latestMediaJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5MediaJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5MediaJS %>");
-        <% } %>
-      }
-    </script>
-  </body>
-</html>

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import { mdiCast, mdiCastConnected } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
@@ -18,7 +17,6 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
-import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
@@ -75,7 +73,7 @@ class HcCast extends LitElement {
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                  <ha-icon icon="hass:cast"></ha-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -113,7 +111,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
+                  <ha-icon icon="hass:cast-connected"></ha-icon>
                   Manage
                 </mwc-button>
               `
@@ -193,7 +191,7 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (err: any) {
+    } catch (err) {
       alert("Unable to log out!");
     }
   }
@@ -235,7 +233,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button ha-svg-icon {
+      mwc-button ha-icon {
         margin-right: 8px;
         height: 18px;
       }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import { mdiCastConnected, mdiCast } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   Auth,
@@ -20,7 +19,7 @@ import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -128,11 +127,11 @@ export class HcConnect extends LitElement {
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <ha-svg-icon
-                .path=${this.castManager.castState === "CONNECTED"
-                  ? mdiCastConnected
-                  : mdiCast}
-              ></ha-svg-icon>
+              <ha-icon
+                .icon=${this.castManager.castState === "CONNECTED"
+                  ? "hass:cast-connected"
+                  : "hass:cast"}
+              ></ha-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -213,7 +212,7 @@ export class HcConnect extends LitElement {
     let url: URL;
     try {
       url = new URL(value);
-    } catch (err: any) {
+    } catch (err) {
       this.error = "Invalid URL";
       return;
     }
@@ -241,7 +240,7 @@ export class HcConnect extends LitElement {
     try {
       this.loading = true;
       auth = await getAuth(options);
-    } catch (err: any) {
+    } catch (err) {
       if (init === "saved-tokens" && err === ERR_CANNOT_CONNECT) {
         this.cannotConnect = true;
         return;
@@ -260,7 +259,7 @@ export class HcConnect extends LitElement {
 
     try {
       conn = await createConnection({ auth });
-    } catch (err: any) {
+    } catch (err) {
       // In case of saved tokens, silently solve problems.
       if (init === "saved-tokens") {
         if (err === ERR_CANNOT_CONNECT) {
@@ -286,7 +285,7 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (err: any) {
+    } catch (err) {
       alert("Unable to log out!");
     }
   }
@@ -308,7 +307,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button ha-svg-icon {
+      mwc-button ha-icon {
         margin-left: 8px;
       }
 

cast/src/media/entrypoint.ts

@@ -1,22 +0,0 @@
-const castContext = cast.framework.CastReceiverContext.getInstance();
-
-const playerManager = castContext.getPlayerManager();
-
-playerManager.setMessageInterceptor(
-  cast.framework.messages.MessageType.LOAD,
-  (loadRequestData) => {
-    const media = loadRequestData.media;
-    // Special handling if it came from Google Assistant
-    if (media.entity) {
-      media.contentId = media.entity;
-      media.streamType = cast.framework.messages.StreamType.LIVE;
-      media.contentType = "application/vnd.apple.mpegurl";
-      // @ts-ignore
-      media.hlsVideoSegmentFormat =
-        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
-    }
-    return loadRequestData;
-  }
-);
-
-castContext.start();

cast/src/receiver/entrypoint.ts

@@ -8,9 +8,6 @@ import { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
-lovelaceController.addEventListener("cast-view-changed", (ev) => {
-  playDummyMedia(ev.detail.title);
-});
 
 const mediaPlayer = document.createElement("cast-media-player");
 mediaPlayer.style.display = "none";
@@ -31,31 +28,6 @@ const setTouchControlsVisibility = (visible: boolean) => {
   }
 };
 
-let timeOut: number | undefined;
-
-const playDummyMedia = (viewTitle?: string) => {
-  const loadRequestData = new cast.framework.messages.LoadRequestData();
-  loadRequestData.autoplay = true;
-  loadRequestData.media = new cast.framework.messages.MediaInformation();
-  loadRequestData.media.contentId =
-    "https://cast.home-assistant.io/images/google-nest-hub.png";
-  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
-  const metadata = new cast.framework.messages.GenericMediaMetadata();
-  metadata.title = viewTitle;
-  loadRequestData.media.metadata = metadata;
-
-  loadRequestData.requestId = 0;
-  playerManager.load(loadRequestData);
-  if (timeOut) {
-    clearTimeout(timeOut);
-    timeOut = undefined;
-  }
-  if (castContext.getDeviceCapabilities().touch_input_supported) {
-    timeOut = window.setTimeout(() => playDummyMedia(viewTitle), 540000); // repeat every 9 minutes to keep it active (gets deactivated after 10 minutes)
-  }
-};
-
 const showLovelaceController = () => {
   mediaPlayer.style.display = "none";
   lovelaceController.style.display = "initial";
@@ -79,7 +51,6 @@ const showMediaPlayer = () => {
       --progress-color: #03a9f4;
       --splash-image: url('https://home-assistant.io/images/cast/splash.png');
       --splash-size: cover;
-      --background-color: #41bdf5;
     }
     `;
     document.head.appendChild(style);
@@ -92,6 +63,22 @@ options.customNamespaces = {
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
+// The docs say we need to set options.touchScreenOptimizeApp = true
+// https://developers.google.com/cast/docs/caf_receiver/customize_ui#accessing_ui_controls
+// This doesn't work.
+// @ts-ignore
+options.touchScreenOptimizedApp = true;
+
+// The class reference say we can set a uiConfig in options to set it
+// https://developers.google.com/cast/docs/reference/caf_receiver/cast.framework.CastReceiverOptions#uiConfig
+// This doesn't work either.
+// @ts-ignore
+options.uiConfig = new cast.framework.ui.UiConfig();
+// @ts-ignore
+options.uiConfig.touchScreenOptimizedApp = true;
+
+castContext.setInactivityTimeout(86400); // 1 day
+
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
@@ -116,12 +103,6 @@ const playerManager = castContext.getPlayerManager();
 playerManager.setMessageInterceptor(
   cast.framework.messages.MessageType.LOAD,
   (loadRequestData) => {
-    if (
-      loadRequestData.media.contentId ===
-      "https://cast.home-assistant.io/images/google-nest-hub.png"
-    ) {
-      return loadRequestData;
-    }
     // We received a play media command, hide Lovelace and show media player
     showMediaPlayer();
     const media = loadRequestData.media;

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

@@ -1,15 +1,11 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { customElement, property } from "lit/decorators";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
-(window as any).loadCardHelpers = () =>
-  import("../../../../src/panels/lovelace/custom-card-helpers");
-
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -18,9 +14,7 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  @property() public urlPath: string | null = null;
-
-  @query("hui-view") private _huiView?: HTMLElement;
+  public urlPath?: string | null;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;
@@ -36,7 +30,7 @@ class HcLovelace extends LitElement {
       config: this.lovelaceConfig,
       rawConfig: this.lovelaceConfig,
       editMode: false,
-      urlPath: this.urlPath,
+      urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
       locale: this.hass.locale,
@@ -60,32 +54,17 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
-        const dashboardTitle = this.lovelaceConfig.title || this.urlPath;
-
-        const viewTitle =
-          this.lovelaceConfig.views[index].title ||
-          this.lovelaceConfig.views[index].path;
-
-        fireEvent(this, "cast-view-changed", {
-          title:
-            dashboardTitle || viewTitle
-              ? `${dashboardTitle || ""}${
-                  dashboardTitle && viewTitle ? ": " : ""
-                }${viewTitle || ""}`
-              : undefined,
-        });
-
         const configBackground =
           this.lovelaceConfig.views[index].background ||
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          this._huiView!.style.setProperty(
+          (this.shadowRoot!.querySelector(
+            "hui-view"
+          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
-        } else {
-          this._huiView!.style.removeProperty("--lovelace-background");
         }
       }
     }
@@ -118,22 +97,12 @@ class HcLovelace extends LitElement {
       :host > * {
         flex: 1;
       }
-      hui-view {
-        background: var(--lovelace-background, var(--primary-background-color));
-      }
     `;
   }
 }
 
-export interface CastViewChanged {
-  title: string | undefined;
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     "hc-lovelace": HcLovelace;
   }
-  interface HASSDomEvents {
-    "cast-view-changed": CastViewChanged;
-  }
 }

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

@@ -13,11 +13,7 @@ import {
   ShowDemoMessage,
   ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import {
-  ReceiverErrorCode,
-  ReceiverErrorMessage,
-  ReceiverStatusMessage,
-} from "../../../../src/cast/sender_messages";
+import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
@@ -44,10 +40,10 @@ export class HcMain extends HassElement {
 
   @state() private _error?: string;
 
-  @state() private _urlPath?: string | null;
-
   private _unsubLovelace?: UnsubscribeFunc;
 
+  private _urlPath?: string | null;
+
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
       this._handleConnectMessage(msg);
@@ -72,10 +68,8 @@ export class HcMain extends HassElement {
       !this._lovelaceConfig ||
       this._lovelacePath === null ||
       // Guard against part of HA not being loaded yet.
-      !this.hass ||
-      !this.hass.states ||
-      !this.hass.config ||
-      !this.hass.services
+      (this.hass &&
+        (!this.hass.states || !this.hass.config || !this.hass.services))
     ) {
       return html`
         <hc-launch-screen
@@ -113,7 +107,6 @@ export class HcMain extends HassElement {
         this._sendStatus();
       }
     });
-    this.addEventListener("dialog-closed", this._dialogClosed);
   }
 
   private _sendStatus(senderId?: string) {
@@ -125,7 +118,7 @@ export class HcMain extends HassElement {
 
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
-      status.lovelacePath = this._lovelacePath;
+      status.lovelacePath = this._lovelacePath!;
       status.urlPath = this._urlPath;
     }
 
@@ -138,30 +131,6 @@ export class HcMain extends HassElement {
     }
   }
 
-  private _sendError(
-    error_code: number,
-    error_message: string,
-    senderId?: string
-  ) {
-    const error: ReceiverErrorMessage = {
-      type: "receiver_error",
-      error_code,
-      error_message,
-    };
-
-    if (senderId) {
-      this.sendMessage(senderId, error);
-    } else {
-      for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, error);
-      }
-    }
-  }
-
-  private _dialogClosed = () => {
-    document.body.setAttribute("style", "overflow-y: auto !important");
-  };
-
   private async _handleGetStatusMessage(msg: GetStatusMessage) {
     this._sendStatus(msg.senderId!);
   }
@@ -179,19 +148,15 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-    } catch (err: any) {
-      const errorMessage = this._getErrorMessage(err);
-      this._error = errorMessage;
-      this._sendError(err, errorMessage);
+    } catch (err) {
+      this._error = this._getErrorMessage(err);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
-    } catch (err: any) {
-      const errorMessage = this._getErrorMessage(err);
-      this._error = errorMessage;
-      this._sendError(err, errorMessage);
+    } catch (err) {
+      this._error = this._getErrorMessage(err);
       return;
     }
     if (this.hass) {
@@ -203,29 +168,24 @@ export class HcMain extends HassElement {
   }
 
   private async _handleShowLovelaceMessage(msg: ShowLovelaceViewMessage) {
-    this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
     if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
-      this._sendError(ReceiverErrorCode.NOT_CONNECTED, this._error);
       return;
     }
-    this._error = undefined;
     if (msg.urlPath === "lovelace") {
       msg.urlPath = null;
     }
-    this._lovelacePath = msg.viewPath;
     if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
       this._urlPath = msg.urlPath;
-      this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass.connection);
+        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
+        : getLegacyLovelaceCollection(this.hass!.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -233,17 +193,9 @@ export class HcMain extends HassElement {
         this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
-      } catch (err: any) {
-        if (
-          atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
-          err.code !== "config_not_found"
-        ) {
+      } catch (err) {
         // eslint-disable-next-line
         console.log("Error fetching Lovelace configuration", err, msg);
-          this._error = `Error fetching Lovelace configuration: ${err.message}`;
-          this._sendError(ReceiverErrorCode.FETCH_CONFIG_FAILED, this._error);
-          return;
-        }
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
         await this._generateLovelaceConfig();
@@ -258,6 +210,8 @@ export class HcMain extends HassElement {
         loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
       }
     }
+    this._showDemo = false;
+    this._lovelacePath = msg.viewPath;
 
     this._sendStatus();
   }
@@ -278,7 +232,7 @@ export class HcMain extends HassElement {
   }
 
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
-    castContext.setApplicationState(lovelaceConfig.title || "");
+    castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;
   }
 

demo/src/custom-cards/cast-demo-row.ts

@@ -1,4 +1,3 @@
-import { mdiTelevision } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -28,7 +27,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
       return html``;
     }
     return html`
-      <ha-svg-icon .path=${mdiTelevision}></ha-svg-icon>
+      <ha-icon icon="hademo:television"></ha-icon>
       <div class="flex">
         <div class="name">Show Chromecast interface</div>
         <google-cast-launcher></google-cast-launcher>
@@ -73,7 +72,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
         display: flex;
         align-items: center;
       }
-      ha-svg-icon {
+      ha-icon {
         padding: 8px;
         color: var(--paper-item-icon-color);
       }

demo/src/custom-cards/ha-demo-card.ts

@@ -44,7 +44,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                     (conf) => html`
                       ${conf.name}
                       <small>
-                        <a target="_blank" href=${conf.authorUrl}>
+                        <a target="_blank" href="${conf.authorUrl}">
                           ${this.hass.localize(
                             "ui.panel.page-demo.cards.demo.demo_by",
                             "name",
@@ -94,7 +94,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     this._switching = true;
     try {
       await setDemoConfig(this.hass, this.lovelace!, index);
-    } catch (err: any) {
+    } catch (err) {
       alert("Failed to switch config :-(");
     } finally {
       this._switching = false;

demo/src/entrypoint.ts

@@ -2,3 +2,8 @@ import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./ha-demo";
+
+/* polyfill for paper-dropdown */
+setTimeout(() => {
+  import("web-animations-js/web-animations-next-lite.min");
+}, 1000);

demo/src/stubs/area_registry.ts

@@ -1,7 +0,0 @@
-import { AreaRegistryEntry } from "../../../src/data/area_registry";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockAreaRegistry = (
-  hass: MockHomeAssistant,
-  data: AreaRegistryEntry[] = []
-) => hass.mockWS("config/area_registry/list", () => data);

demo/src/stubs/device_registry.ts

@@ -1,7 +0,0 @@
-import { DeviceRegistryEntry } from "../../../src/data/device_registry";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockDeviceRegistry = (
-  hass: MockHomeAssistant,
-  data: DeviceRegistryEntry[] = []
-) => hass.mockWS("config/device_registry/list", () => data);

demo/src/stubs/energy.ts

@@ -82,9 +82,6 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
     ],
   }));
   hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
-  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
-    start: period === "month" ? 250 : period === "day" ? 10 : 2,
-  }));
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
   hass.mockWS(

demo/src/stubs/entity_registry.ts

@@ -1,7 +0,0 @@
-import { EntityRegistryEntry } from "../../../src/data/entity_registry";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockEntityRegistry = (
-  hass: MockHomeAssistant,
-  data: EntityRegistryEntry[] = []
-) => hass.mockWS("config/entity_registry/list", () => data);

demo/src/stubs/hassio_supervisor.ts

@@ -1,59 +0,0 @@
-import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
-  hass.config.components.push("hassio");
-  hass.mockWS("supervisor/api", (msg) => {
-    if (msg.endpoint === "/supervisor/info") {
-      const data: HassioSupervisorInfo = {
-        version: "2021.10.dev0805",
-        version_latest: "2021.10.dev0806",
-        update_available: true,
-        channel: "dev",
-        arch: "aarch64",
-        supported: true,
-        healthy: true,
-        ip_address: "172.30.32.2",
-        wait_boot: 5,
-        timezone: "America/Los_Angeles",
-        logging: "info",
-        debug: false,
-        debug_block: false,
-        diagnostics: true,
-        addons: [
-          {
-            name: "Visual Studio Code",
-            slug: "a0d7b954_vscode",
-            description:
-              "Fully featured VSCode experience, to edit your HA config in the browser, including auto-completion!",
-            state: "started",
-            version: "3.6.2",
-            version_latest: "3.6.2",
-            update_available: false,
-            repository: "a0d7b954",
-            icon: true,
-            logo: true,
-          },
-          {
-            name: "Z-Wave JS",
-            slug: "core_zwave_js",
-            description:
-              "Control a ZWave network with Home Assistant Z-Wave JS",
-            state: "started",
-            version: "0.1.45",
-            version_latest: "0.1.45",
-            update_available: false,
-            repository: "core",
-            icon: true,
-            logo: true,
-          },
-        ] as any,
-        addons_repositories: [
-          "https://github.com/hassio-addons/repository",
-        ] as any,
-      };
-      return data;
-    }
-    return Promise.reject(`${msg.method} ${msg.endpoint} is not implemented`);
-  });
-};

demo/src/stubs/history.ts

@@ -1,10 +1,4 @@
-import {
-  addDays,
-  addHours,
-  addMonths,
-  differenceInHours,
-  endOfDay,
-} from "date-fns";
+import { addHours, differenceInHours, endOfDay } from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -76,7 +70,6 @@ const generateMeanStatistics = (
   id: string,
   start: Date,
   end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
 ) => {
@@ -91,7 +84,6 @@ const generateMeanStatistics = (
     statistics.push({
       statistic_id: id,
       start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
       mean,
       min: mean - Math.random() * maxDiff,
       max: mean + Math.random() * maxDiff,
@@ -100,12 +92,7 @@ const generateMeanStatistics = (
       sum: null,
     });
     lastVal = mean;
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
+    currentDate = addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -114,7 +101,6 @@ const generateSumStatistics = (
   id: string,
   start: Date,
   end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
 ) => {
@@ -129,7 +115,6 @@ const generateSumStatistics = (
     statistics.push({
       statistic_id: id,
       start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
       mean: null,
       min: null,
       max: null,
@@ -137,12 +122,7 @@ const generateSumStatistics = (
       state: initValue + sum,
       sum,
     });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
+    currentDate = addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -151,7 +131,6 @@ const generateCurvedStatistics = (
   id: string,
   start: Date,
   end: Date,
-  _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,
   metered: boolean
@@ -170,7 +149,6 @@ const generateCurvedStatistics = (
     statistics.push({
       statistic_id: id,
       start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
       mean: null,
       min: null,
       max: null,
@@ -189,38 +167,11 @@ const generateCurvedStatistics = (
 
 const statisticsFunctions: Record<
   string,
-  (
-    id: string,
-    start: Date,
-    end: Date,
-    period: "5minute" | "hour" | "day" | "month"
-  ) => StatisticValue[]
+  (id: string, start: Date, end: Date) => StatisticValue[]
 > = {
-  "sensor.energy_consumption_tarif_1": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
+  "sensor.energy_consumption_tarif_1": (id: string, start: Date, end: Date) => {
     const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(
-      id,
-      start,
-      morningEnd,
-      period,
-      0,
-      0.7
-    );
+    const morningLow = generateSumStatistics(id, start, morningEnd, 0, 0.7);
     const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
     const morningFinalVal = morningLow.length
       ? morningLow[morningLow.length - 1].sum!
@@ -229,7 +180,6 @@ const statisticsFunctions: Record<
       id,
       morningEnd,
       eveningStart,
-      period,
       morningFinalVal,
       0
     );
@@ -237,71 +187,39 @@ const statisticsFunctions: Record<
       id,
       eveningStart,
       end,
-      period,
       morningFinalVal,
       0.7
     );
     return [...morningLow, ...empty, ...eveningLow];
   },
-  "sensor.energy_consumption_tarif_2": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
+  "sensor.energy_consumption_tarif_2": (id: string, start: Date, end: Date) => {
     const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
     const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
     const highTarif = generateSumStatistics(
       id,
       morningEnd,
       eveningStart,
-      period,
       0,
       0.3
     );
     const highTarifFinalVal = highTarif.length
       ? highTarif[highTarif.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
+    const morning = generateSumStatistics(id, start, morningEnd, 0, 0);
     const evening = generateSumStatistics(
       id,
       eveningStart,
       end,
-      period,
       highTarifFinalVal,
       0
     );
     return [...morning, ...highTarif, ...evening];
   },
-  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
-    generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (
-    id,
-    start,
-    end,
-    period = "hour"
-  ) => generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
+  "sensor.energy_production_tarif_1": (id, start, end) =>
+    generateSumStatistics(id, start, end, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (id, start, end) =>
+    generateSumStatistics(id, start, end, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end) => {
     const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
     const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
@@ -309,7 +227,6 @@ const statisticsFunctions: Record<
       id,
       productionStart,
       productionEnd,
-      period,
       0,
       0.15,
       true
@@ -317,43 +234,18 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
+    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
     const evening = generateSumStatistics(
       id,
       productionEnd,
       dayEnd,
-      period,
       productionFinalVal,
       0
     );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      1
-    );
+    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 1);
     return [...morning, ...production, ...evening, ...rest];
   },
-  "sensor.solar_production": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
+  "sensor.solar_production": (id, start, end) => {
     const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
     const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
@@ -361,7 +253,6 @@ const statisticsFunctions: Record<
       id,
       productionStart,
       productionEnd,
-      period,
       0,
       0.3,
       true
@@ -369,32 +260,19 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
+    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
     const evening = generateSumStatistics(
       id,
       productionEnd,
       dayEnd,
-      period,
       productionFinalVal,
       0
     );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      2
-    );
+    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 2);
     return [...morning, ...production, ...evening, ...rest];
   },
+  "sensor.grid_fossil_fuel_percentage": (id, start, end) =>
+    generateMeanStatistics(id, start, end, 35, 1.3),
 };
 
 export const mockHistory = (mockHass: MockHomeAssistant) => {
@@ -469,7 +347,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockWS("history/list_statistic_ids", () => []);
   mockHass.mockWS(
     "history/statistics_during_period",
-    ({ statistic_ids, start_time, end_time, period }, hass) => {
+    ({ statistic_ids, start_time, end_time }, hass) => {
       const start = new Date(start_time);
       const end = end_time ? new Date(end_time) : new Date();
 
@@ -477,7 +355,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
 
       statistic_ids.forEach((id: string) => {
         if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end, period);
+          statistics[id] = statisticsFunctions[id](id, start, end);
         } else {
           const entityState = hass.states[id];
           const state = entityState ? Number(entityState.state) : 1;
@@ -487,7 +365,6 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
                   id,
                   start,
                   end,
-                  period,
                   state,
                   state * (state > 80 ? 0.01 : 0.05)
                 )
@@ -495,7 +372,6 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
                   id,
                   start,
                   end,
-                  period,
                   state,
                   state * (state > 80 ? 0.05 : 0.1)
                 );

demo/src/stubs/lovelace.ts

@@ -23,9 +23,9 @@ customElements.whenDefined("hui-view").then(() => {
   // eslint-disable-next-line
   const HUIView = customElements.get("hui-view");
   // Patch HUI-VIEW to make the lovelace object available to the demo card
-  const oldCreateCard = HUIView!.prototype.createCardElement;
+  const oldCreateCard = HUIView.prototype.createCardElement;
 
-  HUIView!.prototype.createCardElement = function (config) {
+  HUIView.prototype.createCardElement = function (config) {
     const el = oldCreateCard.call(this, config);
     if (el.tagName === "HA-DEMO-CARD") {
       (el as HADemoCard).lovelace = this.lovelace;

gallery/script/netlify_build_gallery

@@ -1,35 +0,0 @@
-#!/bin/bash
-
-TARGET_LABEL="needs design preview"
-
-if [[ "$NETLIFY" != "true" ]]; then
-  echo "This script can only be run on Netlify"
-  exit 1
-fi
-
-function createStatus() {
-  state="$1"
-  description="$2"
-  target_url="$3"
-  curl -X POST -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
-    "https://api.github.com/repos/home-assistant/frontend/statuses/$COMMIT_REF" \
-    -d '{"state": "'"${state}"'", "context": "Netlify/Design Preview Build", "description": "'"$description"'", "target_url":  "'"$target_url"'"}'
-}
-
-
-if [[ "${PULL_REQUEST}" == "true" ]]; then
-  if [[ "$(curl -sSLf -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
-    "https://api.github.com/repos/home-assistant/frontend/pulls/${REVIEW_ID}" | jq '.labels[].name' -r)" =~ "$TARGET_LABEL" ]]; then
-    createStatus "pending" "Building design preview" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
-    gulp build-gallery
-    if [ $? -eq 0 ]; then
-      createStatus "success" "Build complete" "$DEPLOY_URL"
-    else
-      createStatus "error" "Build failed" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
-    fi
-  else
-    createStatus "success" "Build was not requested by PR label"
-  fi
-elif [[ "$INCOMING_HOOK_BODY" == "NIGHTLY" ]]; then
-  gulp build-gallery
-fi

gallery/sidebar.js

@@ -1,47 +0,0 @@
-module.exports = [
-  {
-    // This section has no header and so all page links are shown directly in the sidebar
-    category: "concepts",
-    pages: ["home"],
-  },
-
-  {
-    category: "lovelace",
-    // Label for in the sidebar
-    header: "Lovelace",
-    // Specify order of pages. Any pages in the category folder but not listed here will
-    // automatically be added after the pages listed here.
-    pages: ["introduction"],
-  },
-  {
-    category: "automation",
-    header: "Automation",
-    pages: [
-      "editor-trigger",
-      "editor-condition",
-      "editor-action",
-      "trace",
-      "trace-timeline",
-    ],
-  },
-  {
-    category: "components",
-    header: "Components",
-  },
-  {
-    category: "more-info",
-    header: "More Info dialogs",
-  },
-  {
-    category: "misc",
-    header: "Miscelaneous",
-  },
-  {
-    category: "user-test",
-    header: "User Tests",
-  },
-  {
-    category: "design.home-assistant.io",
-    header: "Design Documentation",
-  },
-];

gallery/src/components/demo-black-white-row.ts

@@ -1,140 +0,0 @@
-import { Button } from "@material/mwc-button";
-import { html, LitElement, css, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-card";
-
-@customElement("demo-black-white-row")
-class DemoBlackWhiteRow extends LitElement {
-  @property() title!: string;
-
-  @property() value!: any;
-
-  @property() disabled = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="row">
-        <div class="content light">
-          <ha-card .header=${this.title}>
-            <div class="card-content">
-              <slot name="light"></slot>
-            </div>
-            <div class="card-actions">
-              <mwc-button
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
-                Submit
-              </mwc-button>
-            </div>
-          </ha-card>
-        </div>
-        <div class="content dark">
-          <ha-card .header=${this.title}>
-            <div class="card-content">
-              <slot name="dark"></slot>
-            </div>
-            <div class="card-actions">
-              <mwc-button
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
-                Submit
-              </mwc-button>
-            </div>
-          </ha-card>
-          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
-        </div>
-      </div>
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
-      default_theme: "default",
-      default_dark_theme: "default",
-      themes: {},
-      darkMode: true,
-      theme: "default",
-    });
-  }
-
-  handleSubmit(ev) {
-    const content = (ev.target as Button).closest(".content")!;
-    fireEvent(this, "submitted" as any, {
-      slot: content.classList.contains("light") ? "light" : "dark",
-    });
-  }
-
-  static styles = css`
-    .row {
-      display: flex;
-    }
-    .content {
-      padding: 50px 0;
-      background-color: var(--primary-background-color);
-    }
-    .light {
-      flex: 1;
-      padding-left: 50px;
-      padding-right: 50px;
-      box-sizing: border-box;
-    }
-    .light ha-card {
-      margin-left: auto;
-    }
-    .dark {
-      display: flex;
-      flex: 1;
-      padding-left: 50px;
-      box-sizing: border-box;
-      flex-wrap: wrap;
-    }
-    ha-card {
-      width: 400px;
-    }
-    pre {
-      width: 300px;
-      margin: 0 16px 0;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    .card-actions {
-      display: flex;
-      flex-direction: row-reverse;
-      border-top: none;
-    }
-    @media only screen and (max-width: 1500px) {
-      .light {
-        flex: initial;
-      }
-    }
-    @media only screen and (max-width: 1000px) {
-      .light,
-      .dark {
-        padding: 16px;
-      }
-      .row,
-      .dark {
-        flex-direction: column;
-      }
-      ha-card {
-        margin: 0 auto;
-        width: 100%;
-        max-width: 400px;
-      }
-      pre {
-        margin: 16px auto;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-black-white-row": DemoBlackWhiteRow;
-  }
-}

gallery/src/components/demo-card.js

@@ -0,0 +1,129 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { load } from "js-yaml";
+import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
+
+class DemoCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .root {
+          display: flex;
+        }
+        h2 {
+          margin: 0 0 20px;
+          color: var(--primary-color);
+        }
+        h2 small {
+          font-size: 0.5em;
+          color: var(--primary-text-color);
+        }
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
+        pre {
+          width: 400px;
+          margin: 0 16px;
+          overflow: auto;
+          color: var(--primary-text-color);
+        }
+        @media only screen and (max-width: 800px) {
+          .root {
+            flex-direction: column;
+          }
+          pre {
+            margin: 16px 0;
+          }
+        }
+      </style>
+      <h2>
+        [[config.heading]]
+        <template is="dom-if" if="[[_size]]">
+          <small>(size [[_size]])</small>
+        </template>
+      </h2>
+      <div class="root">
+        <div id="card"></div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_trim(config.config)]]</pre>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+      showConfig: Boolean,
+      _size: {
+        type: Number,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+  }
+
+  _configChanged(config) {
+    const card = this.$.card;
+    while (card.lastChild) {
+      card.removeChild(card.lastChild);
+    }
+
+    const el = this._createCardElement(load(config.config)[0]);
+    card.appendChild(el);
+    this._getSize(el);
+  }
+
+  async _getSize(el) {
+    await customElements.whenDefined(el.localName);
+
+    if (!("getCardSize" in el)) {
+      this._size = undefined;
+      return;
+    }
+    this._size = await el.getCardSize();
+  }
+
+  _createCardElement(cardConfig) {
+    const element = createCardElement(cardConfig);
+    if (this.hass) {
+      element.hass = this.hass;
+    }
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        ev.stopPropagation();
+        this._rebuildCard(element, cardConfig);
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  _rebuildCard(cardElToReplace, config) {
+    const newCardEl = this._createCardElement(config);
+    cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace);
+  }
+
+  _hassChanged(hass) {
+    const card = this.$.card.lastChild;
+    if (card) card.hass = hass;
+  }
+
+  _trim(config) {
+    return config.trim();
+  }
+}
+
+customElements.define("demo-card", DemoCard);

gallery/src/components/demo-card.ts

@@ -1,129 +0,0 @@
-import { load } from "js-yaml";
-import { html, css, LitElement, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
-import { HomeAssistant } from "../../../src/types";
-
-export interface DemoCardConfig {
-  heading: string;
-  config: string;
-}
-
-@customElement("demo-card")
-class DemoCard extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public config!: DemoCardConfig;
-
-  @property() public showConfig = false;
-
-  @state() private _size?: number;
-
-  @query("#card") private _card!: HTMLElement;
-
-  render() {
-    return html`
-      <h2>
-        ${this.config.heading}
-        ${this._size !== undefined
-          ? html`<small>(size ${this._size})</small>`
-          : ""}
-      </h2>
-      <div class="root">
-        <div id="card"></div>
-        ${this.showConfig ? html`<pre>${this.config.config.trim()}</pre>` : ""}
-      </div>
-    `;
-  }
-
-  updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("config")) {
-      const card = this._card;
-      while (card.lastChild) {
-        card.removeChild(card.lastChild);
-      }
-
-      const el = this._createCardElement((load(this.config.config) as any)[0]);
-      card.appendChild(el);
-      this._getSize(el);
-    }
-
-    if (changedProps.has("hass")) {
-      const card = this._card.lastChild;
-      if (card) {
-        (card as any).hass = this.hass;
-      }
-    }
-  }
-
-  async _getSize(el) {
-    await customElements.whenDefined(el.localName);
-
-    if (!("getCardSize" in el)) {
-      this._size = undefined;
-      return;
-    }
-    this._size = await el.getCardSize();
-  }
-
-  _createCardElement(cardConfig) {
-    const element = createCardElement(cardConfig);
-    if (this.hass) {
-      element.hass = this.hass;
-    }
-    element.addEventListener(
-      "ll-rebuild",
-      (ev) => {
-        ev.stopPropagation();
-        this._rebuildCard(element, cardConfig);
-      },
-      { once: true }
-    );
-    return element;
-  }
-
-  _rebuildCard(cardElToReplace, config) {
-    const newCardEl = this._createCardElement(config);
-    cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace);
-  }
-
-  static styles = css`
-    .root {
-      display: flex;
-    }
-    h2 {
-      margin: 0 0 20px;
-      color: var(--primary-color);
-    }
-    h2 small {
-      font-size: 0.5em;
-      color: var(--primary-text-color);
-    }
-    #card {
-      max-width: 400px;
-      width: 100vw;
-    }
-    pre {
-      width: 400px;
-      margin: 0 16px;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    @media only screen and (max-width: 800px) {
-      .root {
-        flex-direction: column;
-      }
-      pre {
-        margin: 16px 0;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-card": DemoCard;
-  }
-}

gallery/src/components/demo-cards.js

@@ -0,0 +1,83 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+import "./demo-card";
+
+class DemoCards extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
+        .cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        demo-card {
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
+        }
+        ha-formfield {
+          margin-right: 16px;
+        }
+      </style>
+      <app-toolbar>
+        <div class="filters">
+          <ha-formfield label="Show config">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
+        </div>
+      </app-toolbar>
+      <div id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[configs]]">
+            <demo-card
+              config="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-card>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      configs: Object,
+      hass: Object,
+      _showConfig: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
+}
+
+customElements.define("demo-cards", DemoCards);

gallery/src/components/demo-cards.ts

@@ -1,91 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { html, css, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-import { HomeAssistant } from "../../../src/types";
-import "./demo-card";
-import type { DemoCardConfig } from "./demo-card";
-
-@customElement("demo-cards")
-class DemoCards extends LitElement {
-  @property() public configs!: DemoCardConfig[];
-
-  @property() public hass!: HomeAssistant;
-
-  @state() private _showConfig = false;
-
-  @query("#container") private _container!: HTMLElement;
-
-  render() {
-    return html`
-      <app-toolbar>
-        <div class="filters">
-          <ha-formfield label="Show config">
-            <ha-switch
-              .checked=${this._showConfig}
-              @change=${this._showConfigToggled}
-            >
-            </ha-switch>
-          </ha-formfield>
-          <ha-formfield label="Dark theme">
-            <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
-          </ha-formfield>
-        </div>
-      </app-toolbar>
-      <div id="container">
-        <div class="cards">
-          ${this.configs.map(
-            (config) => html`
-              <demo-card
-                .config=${config}
-                .showConfig=${this._showConfig}
-                .hass=${this.hass}
-              ></demo-card>
-            `
-          )}
-        </div>
-      </div>
-    `;
-  }
-
-  _showConfigToggled(ev) {
-    this._showConfig = ev.target.checked;
-  }
-
-  _darkThemeToggled(ev) {
-    applyThemesOnElement(this._container, { themes: {} } as any, "default", {
-      dark: ev.target.checked,
-    });
-  }
-
-  static styles = css`
-    .cards {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-    demo-card {
-      margin: 16px 16px 32px;
-    }
-    app-toolbar {
-      background-color: var(--light-primary-color);
-    }
-    .filters {
-      margin-left: 60px;
-    }
-    ha-formfield {
-      margin-right: 16px;
-    }
-    #container {
-      background-color: var(--primary-background-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-cards": DemoCards;
-  }
-}

gallery/src/components/page-description.ts

@@ -1,46 +0,0 @@
-import { html, css } from "lit";
-import { customElement, property } from "lit/decorators";
-import { until } from "lit/directives/until";
-import { HaMarkdown } from "../../../src/components/ha-markdown";
-import { PAGES } from "../../build/import-pages";
-
-@customElement("page-description")
-class PageDescription extends HaMarkdown {
-  @property() public page!: string;
-
-  render() {
-    if (!PAGES[this.page].description) {
-      return html``;
-    }
-    return html`
-      ${until(
-        PAGES[this.page]
-          .description()
-          .then((content) => html`<div class="root">${content}</div>`),
-        ""
-      )}
-    `;
-  }
-
-  static styles = [
-    HaMarkdown.styles,
-    css`
-      .root {
-        max-width: 800px;
-        margin: 0 auto;
-      }
-      .root > *:first-child {
-        margin-top: 0;
-      }
-      .root > *:last-child {
-        margin-bottom: 0;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "page-description": PageDescription;
-  }
-}

gallery/src/demos/demo-automation-describe-action.ts

@@ -1,22 +1,12 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { describeAction } from "../../../../src/data/script_i18n";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
+import "../../../src/components/ha-card";
+import { describeAction } from "../../../src/data/script_i18n";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
 
-const ENTITIES = [
-  getEntity("scene", "kitchen_morning", "scening", {
-    friendly_name: "Kitchen Morning",
-  }),
-  getEntity("media_player", "kitchen", "playing", {
-    friendly_name: "Sonos Kitchen",
-  }),
-];
-
-const ACTIONS = [
+const actions = [
   { wait_template: "{{ true }}", alias: "Something with an alias" },
   { delay: "0:05" },
   { wait_template: "{{ true }}" },
@@ -29,20 +19,8 @@ const ACTIONS = [
     device_id: "abcdefgh",
     domain: "plex",
     entity_id: "media_player.kitchen",
-    type: "turn_on",
   },
   { scene: "scene.kitchen_morning" },
-  {
-    service: "scene.turn_on",
-    target: { entity_id: "scene.kitchen_morning" },
-    metadata: {},
-  },
-  {
-    service: "media_player.play_media",
-    target: { entity_id: "media_player.kitchen" },
-    data: { media_content_id: "", media_content_type: "" },
-    metadata: { title: "Happy Song" },
-  },
   {
     wait_for_trigger: [
       {
@@ -74,7 +52,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     }
     return html`
       <ha-card header="Actions">
-        ${ACTIONS.map(
+        ${actions.map(
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
@@ -90,7 +68,6 @@ export class DemoAutomationDescribeAction extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.addEntities(ENTITIES);
   }
 
   static get styles() {

gallery/src/demos/demo-automation-describe-condition.ts

@@ -1,8 +1,8 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { describeCondition } from "../../../../src/data/automation_i18n";
+import "../../../src/components/ha-card";
+import { describeCondition } from "../../../src/data/automation_i18n";
 
 const conditions = [
   { condition: "and" },

gallery/src/demos/demo-automation-describe-trigger.ts

@@ -1,8 +1,8 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { describeTrigger } from "../../../../src/data/automation_i18n";
+import "../../../src/components/ha-card";
+import { describeTrigger } from "../../../src/data/automation_i18n";
 
 const triggers = [
   { platform: "state" },

gallery/src/demos/demo-automation-trace-timeline.ts

@@ -1,13 +1,12 @@
-/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-script-graph";
-import "../../../../src/components/trace/hat-trace-timeline";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
-import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
-import { DemoTrace } from "../../data/traces/types";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { mockDemoTrace } from "../data/traces/mock-demo-trace";
+import { DemoTrace } from "../data/traces/types";
 
 const traces: DemoTrace[] = [
   mockDemoTrace({ state: "running" }),

gallery/src/demos/demo-automation-trace.ts

@@ -1,14 +1,13 @@
-/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-script-graph";
-import "../../../../src/components/trace/hat-trace-timeline";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
 import { customElement, property, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
-import { DemoTrace } from "../../data/traces/types";
-import { basicTrace } from "../../data/traces/basic_trace";
-import { motionLightTrace } from "../../data/traces/motion-light-trace";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { DemoTrace } from "../data/traces/types";
+import { basicTrace } from "../data/traces/basic_trace";
+import { motionLightTrace } from "../data/traces/motion-light-trace";
 
 const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 

gallery/src/demos/demo-ha-alert.ts

@@ -1,19 +1,15 @@
-import "@material/mwc-button/mwc-button";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-logo-svg";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-card";
 
 const alerts: {
   title?: string;
   description: string | TemplateResult;
   type: "info" | "warning" | "error" | "success";
   dismissable?: boolean;
+  action?: string;
   rtl?: boolean;
-  iconSlot?: TemplateResult;
-  actionSlot?: TemplateResult;
 }[] = [
   {
     title: "Test info alert",
@@ -77,35 +73,13 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    action: "restart",
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
-  },
-  {
-    title: "Slotted icon",
-    description: "Alert with slotted icon",
-    type: "warning",
-    iconSlot: html`<span slot="icon" class="image">
-      <ha-logo-svg></ha-logo-svg>
-    </span>`,
-  },
-  {
-    title: "Slotted image",
-    description: "Alert with slotted image",
-    type: "warning",
-    iconSlot: html`<span slot="icon" class="image"
-      ><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
-    /></span>`,
-  },
-  {
-    title: "Slotted action",
-    description: "Alert with slotted action",
-    type: "info",
-    actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
+    action: "save",
   },
   {
     description: "Dismissable information (RTL)",
@@ -117,7 +91,7 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action (RTL)",
     type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    action: "restart",
     rtl: true,
   },
   {
@@ -128,83 +102,42 @@ const alerts: {
   },
 ];
 
-@customElement("demo-components-ha-alert")
+@customElement("demo-ha-alert")
 export class DemoHaAlert extends LitElement {
   protected render(): TemplateResult {
     return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-alert ${mode} demo">
-              <div class="card-content">
+      <ha-card header="ha-alert demo">
         ${alerts.map(
           (alert) => html`
             <ha-alert
               .title=${alert.title || ""}
               .alertType=${alert.type}
               .dismissable=${alert.dismissable || false}
+              .actionText=${alert.action || ""}
               .rtl=${alert.rtl || false}
             >
-                      ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
+              ${alert.description}
             </ha-alert>
           `
         )}
-              </div>
       </ha-card>
-          </div>
-        `
-      )}
     `;
   }
 
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
-      default_theme: "default",
-      default_dark_theme: "default",
-      themes: {},
-      darkMode: true,
-      theme: "default",
-    });
-  }
-
   static get styles() {
     return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
       ha-card {
+        max-width: 600px;
         margin: 24px auto;
       }
-      ha-alert {
-        display: block;
-        margin: 24px 0;
-      }
       .condition {
         padding: 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
-      .image {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-      img {
-        max-height: 24px;
-        width: 24px;
-      }
-      mwc-button {
-        --mdc-theme-primary: var(--primary-text-color);
+      span {
+        margin-right: 16px;
       }
     `;
   }
@@ -212,6 +145,6 @@ export class DemoHaAlert extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-components-ha-alert": DemoHaAlert;
+    "demo-ha-alert": DemoHaAlert;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -70,7 +70,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-alarm-panel-card")
+@customElement("demo-hui-alarm-panel-card")
 class DemoAlarmPanelEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -89,6 +89,6 @@ class DemoAlarmPanelEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-alarm-panel-card": DemoAlarmPanelEntity;
+    "demo-hui-alarm-panel-card": DemoAlarmPanelEntity;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "controller_1", "on", {
@@ -52,7 +52,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-conditional-card")
+@customElement("demo-hui-conditional-card")
 class DemoConditional extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -71,6 +71,6 @@ class DemoConditional extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-conditional-card": DemoConditional;
+    "demo-hui-conditional-card": DemoConditional;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -11,10 +11,10 @@ const ENTITIES = [
   getEntity("group", "kitchen", "on", {
     entity_id: ["light.bed_light"],
     order: 8,
-    friendly_name: "Kitchen Group",
+    friendly_name: "Kitchen",
   }),
   getEntity("lock", "kitchen_door", "locked", {
-    friendly_name: "Kitchen Lock",
+    friendly_name: "Kitchen Door",
   }),
   getEntity("cover", "kitchen_window", "open", {
     friendly_name: "Kitchen Window",
@@ -22,7 +22,7 @@ const ENTITIES = [
   }),
   getEntity("scene", "romantic_lights", "scening", {
     entity_id: ["light.bed_light", "light.ceiling_lights"],
-    friendly_name: "Romantic Scene",
+    friendly_name: "Romantic lights",
   }),
   getEntity("device_tracker", "demo_paulus", "home", {
     source_type: "gps",
@@ -50,51 +50,15 @@ const ENTITIES = [
     friendly_name: "Ecobee",
     supported_features: 1014,
   }),
-  getEntity("input_number", "number", 5, {
+  getEntity("input_number", "noise_allowance", 5, {
     min: 0,
     max: 10,
     step: 1,
     mode: "slider",
     unit_of_measurement: "dB",
-    friendly_name: "Number",
+    friendly_name: "Allowed Noise",
     icon: "mdi:bell-ring",
   }),
-  getEntity("input_boolean", "toggle", "on", {
-    friendly_name: "Toggle",
-  }),
-  getEntity("input_datetime", "date_and_time", "2022-01-10 00:00:00", {
-    has_date: true,
-    has_time: true,
-    editable: true,
-    year: 2022,
-    month: 1,
-    day: 10,
-    hour: 0,
-    minute: 0,
-    second: 0,
-    timestamp: 1641801600,
-    friendly_name: "Date and Time",
-  }),
-  getEntity("input_select", "dropdown", "Soda", {
-    friendly_name: "Dropdown",
-    options: ["Soda", "Beer", "Wine"],
-  }),
-  getEntity("input_text", "text", "Inspiration", {
-    friendly_name: "Text",
-    mode: "text",
-  }),
-  getEntity("timer", "timer", "idle", {
-    friendly_name: "Timer",
-    duration: "0:05:00",
-  }),
-  getEntity("counter", "counter", "3", {
-    friendly_name: "Counter",
-    initial: 0,
-    step: 1,
-    minimum: 0,
-    maximum: 10,
-  }),
-
   getEntity("light", "unavailable", "unavailable", {
     friendly_name: "Bed Light",
   }),
@@ -106,7 +70,7 @@ const ENTITIES = [
     supported_features: 11,
   }),
   getEntity("scene", "unavailable", "unavailable", {
-    friendly_name: "Romantic Scene",
+    friendly_name: "Romantic lights",
   }),
   getEntity("device_tracker", "unavailable", "unavailable", {
     friendly_name: "Paulus",
@@ -141,22 +105,7 @@ const CONFIGS = [
     - light.bed_light
     - light.non_existing
     - climate.ecobee
-    - input_number.number
-    `,
-  },
-  {
-    heading: "Helpers",
-    config: `
-- type: entities
-  title: Helpers
-  entities:
-    - entity: input_boolean.toggle
-    - entity: input_datetime.date_and_time
-    - entity: input_number.number
-    - entity: input_select.dropdown
-    - entity: input_text.text
-    - entity: timer.timer
-    - entity: counter.counter
+    - input_number.noise_allowance
     `,
   },
   {
@@ -171,7 +120,7 @@ const CONFIGS = [
     - lock.kitchen_door
     - light.bed_light
     - climate.ecobee
-    - input_number.number
+    - input_number.noise_allowance
   title: Random group
     `,
   },
@@ -187,7 +136,7 @@ const CONFIGS = [
     - lock.kitchen_door
     - light.bed_light
     - climate.ecobee
-    - input_number.number
+    - input_number.noise_allowance
   title: Random group
   show_header_toggle: false
     `,
@@ -234,7 +183,7 @@ const CONFIGS = [
       icon: mdi:alarm-light
       name: Bed Light Custom Icon
     - climate.ecobee
-    - input_number.number
+    - input_number.noise_allowance
   title: Random group
   show_header_toggle: false
     `,
@@ -267,7 +216,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-entities-card")
+@customElement("demo-hui-entities-card")
 class DemoEntities extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -286,6 +235,6 @@ class DemoEntities extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-entities-card": DemoEntities;
+    "demo-hui-entities-card": DemoEntities;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -68,7 +68,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-entity-button-card")
+@customElement("demo-hui-entity-button-card")
 class DemoButtonEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -87,6 +87,6 @@ class DemoButtonEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-entity-button-card": DemoButtonEntity;
+    "demo-hui-entity-button-card": DemoButtonEntity;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("device_tracker", "demo_paulus", "work", {
@@ -109,7 +109,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-entity-filter-card")
+@customElement("demo-hui-entity-filter-card")
 class DemoEntityFilter extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -128,6 +128,6 @@ class DemoEntityFilter extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-entity-filter-card": DemoEntityFilter;
+    "demo-hui-entity-filter-card": DemoEntityFilter;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("sensor", "brightness", "12", {}),
@@ -106,7 +106,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-gauge-card")
+@customElement("demo-hui-gauge-card")
 class DemoGaugeEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -125,6 +125,6 @@ class DemoGaugeEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-gauge-card": DemoGaugeEntity;
+    "demo-hui-gauge-card": DemoGaugeEntity;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("device_tracker", "demo_paulus", "home", {
@@ -209,7 +209,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-glance-card")
+@customElement("demo-hui-glance-card")
 class DemoGlanceEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -228,6 +228,6 @@ class DemoGlanceEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-glance-card": DemoGlanceEntity;
+    "demo-hui-glance-card": DemoGlanceEntity;
   }
 }

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

@@ -1,9 +1,9 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { mockHistory } from "../../../../demo/src/stubs/history";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { mockHistory } from "../../../demo/src/stubs/history";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "kitchen_lights", "on", {
@@ -199,7 +199,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-grid-and-stack-card")
+@customElement("demo-hui-grid-and-stack-card")
 class DemoStack extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -219,6 +219,6 @@ class DemoStack extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-grid-and-stack-card": DemoStack;
+    "demo-hui-grid-and-stack-card": DemoStack;
   }
 }

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

@@ -1,7 +1,6 @@
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, query } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
@@ -37,22 +36,15 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-iframe-card")
+@customElement("demo-hui-iframe-card")
 class DemoIframe extends LitElement {
-  @query("demo-cards") private _demos!: HTMLElement;
-
   protected render(): TemplateResult {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    provideHass(this._demos);
-  }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-iframe-card": DemoIframe;
+    "demo-hui-iframe-card": DemoIframe;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -62,7 +62,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-light-card")
+@customElement("demo-hui-light-card")
 class DemoLightEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -81,6 +81,6 @@ class DemoLightEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-light-card": DemoLightEntity;
+    "demo-hui-light-card": DemoLightEntity;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("device_tracker", "demo_paulus", "not_home", {
@@ -160,7 +160,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-map-card")
+@customElement("demo-hui-map-card")
 class DemoMap extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -179,6 +179,6 @@ class DemoMap extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-map-card": DemoMap;
+    "demo-hui-map-card": DemoMap;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { mockTemplate } from "../../../../demo/src/stubs/template";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { mockTemplate } from "../../../demo/src/stubs/template";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
@@ -253,7 +253,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-markdown-card")
+@customElement("demo-hui-markdown-card")
 class DemoMarkdown extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -272,6 +272,6 @@ class DemoMarkdown extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-markdown-card": DemoMarkdown;
+    "demo-hui-markdown-card": DemoMarkdown;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
-import { createMediaPlayerEntities } from "../../data/media_players";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createMediaPlayerEntities } from "../data/media_players";
 
 const CONFIGS = [
   {
@@ -157,7 +157,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-media-control-card")
+@customElement("demo-hui-media-control-card")
 class DemoHuiMediaControlCard extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -176,6 +176,6 @@ class DemoHuiMediaControlCard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-media-control-card": DemoHuiMediaControlCard;
+    "demo-hui-media-control-card": DemoHuiMediaControlCard;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
-import { createMediaPlayerEntities } from "../../data/media_players";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createMediaPlayerEntities } from "../data/media_players";
 
 const CONFIGS = [
   {
@@ -54,7 +54,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-media-player-row")
+@customElement("demo-hui-media-player-row")
 class DemoHuiMediaPlayerRow extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -73,6 +73,6 @@ class DemoHuiMediaPlayerRow extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-media-player-rows": DemoHuiMediaPlayerRow;
+    "demo-hui-media-player-row": DemoHuiMediaPlayerRow;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -124,7 +124,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-picture-elements-card")
+@customElement("demo-hui-picture-elements-card")
 class DemoPictureElements extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -143,6 +143,6 @@ class DemoPictureElements extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-picture-elements-card": DemoPictureElements;
+    "demo-hui-picture-elements-card": DemoPictureElements;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "kitchen_lights", "on", {
@@ -79,7 +79,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-picture-entity-card")
+@customElement("demo-hui-picture-entity-card")
 class DemoPictureEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -98,6 +98,6 @@ class DemoPictureEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-picture-entity-card": DemoPictureEntity;
+    "demo-hui-picture-entity-card": DemoPictureEntity;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("switch", "decorative_lights", "on", {
@@ -120,7 +120,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-picture-glance-card")
+@customElement("demo-hui-picture-glance-card")
 class DemoPictureGlance extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -139,6 +139,6 @@ class DemoPictureGlance extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-picture-glance-card": DemoPictureGlance;
+    "demo-hui-picture-glance-card": DemoPictureGlance;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
-import { createPlantEntities } from "../../data/plants";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createPlantEntities } from "../data/plants";
 
 const CONFIGS = [
   {
@@ -29,7 +29,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-plant-card")
+@customElement("demo-hui-plant-card")
 export class DemoPlantEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -48,6 +48,6 @@ export class DemoPlantEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-plant-card": DemoPlantEntity;
+    "demo-hui-plant-card": DemoPlantEntity;
   }
 }

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

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const CONFIGS = [
   {
@@ -19,7 +19,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-shopping-list-card")
+@customElement("demo-hui-shopping-list-card")
 class DemoShoppingListEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -44,6 +44,6 @@ class DemoShoppingListEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-shopping-list-card": DemoShoppingListEntity;
+    "demo-hui-shopping-list-card": DemoShoppingListEntity;
   }
 }

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-cards";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("climate", "ecobee", "auto", {
@@ -73,7 +73,7 @@ const CONFIGS = [
   },
 ];
 
-@customElement("demo-lovelace-thermostat-card")
+@customElement("demo-hui-thermostat-card")
 class DemoThermostatEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -92,6 +92,6 @@ class DemoThermostatEntity extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-thermostat-card": DemoThermostatEntity;
+    "demo-hui-thermostat-card": DemoThermostatEntity;
   }
 }

gallery/src/demos/demo-integration-card.ts

@@ -1,22 +1,22 @@
 import { html, css, LitElement, TemplateResult } from "lit";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-switch";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
 
 import { classMap } from "lit/directives/class-map";
 import { customElement, property, state } from "lit/decorators";
-import { IntegrationManifest } from "../../../../src/data/integration";
+import { IntegrationManifest } from "../../../src/data/integration";
 
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
-import "../../../../src/panels/config/integrations/ha-integration-card";
-import "../../../../src/panels/config/integrations/ha-ignored-config-entry-card";
-import "../../../../src/panels/config/integrations/ha-config-flow-card";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import "../../../src/panels/config/integrations/ha-integration-card";
+import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
+import "../../../src/panels/config/integrations/ha-config-flow-card";
 import type {
   ConfigEntryExtended,
   DataEntryFlowProgressExtended,
-} from "../../../../src/panels/config/integrations/ha-config-integrations";
-import { DeviceRegistryEntry } from "../../../../src/data/device_registry";
-import { EntityRegistryEntry } from "../../../../src/data/entity_registry";
+} from "../../../src/panels/config/integrations/ha-config-integrations";
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
 
 const createConfigEntry = (
   title: string,
@@ -29,7 +29,6 @@ const createConfigEntry = (
   source: "zeroconf",
   state: "loaded",
   supports_options: false,
-  supports_remove_device: false,
   supports_unload: true,
   disabled_by: null,
   pref_disable_new_entities: false,
@@ -188,7 +187,6 @@ const createEntityRegistryEntries = (
     device_id: "mock-device-id",
     area_id: null,
     disabled_by: null,
-    entity_category: null,
     entity_id: "binary_sensor.updater",
     name: null,
     icon: null,
@@ -207,18 +205,16 @@ const createDeviceRegistryEntries = (
     model: "Mock Device",
     name: "Tag Reader",
     sw_version: null,
-    hw_version: "1.0.0",
     id: "mock-device-id",
     identifiers: [],
     via_device_id: null,
     area_id: null,
     name_by_user: null,
     disabled_by: null,
-    configuration_url: null,
   },
 ];
 
-@customElement("demo-misc-integration-card")
+@customElement("demo-integration-card")
 export class DemoIntegrationCard extends LitElement {
   @property({ attribute: false }) hass?: HomeAssistant;
 
@@ -353,6 +349,6 @@ export class DemoIntegrationCard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-misc-integration-card": DemoIntegrationCard;
+    "demo-integration-card": DemoIntegrationCard;
   }
 }

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

@@ -1,19 +1,19 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import "../../../../src/components/ha-card";
+import "../../../src/components/ha-card";
 import {
   LightColorModes,
   SUPPORT_EFFECT,
   SUPPORT_FLASH,
   SUPPORT_TRANSITION,
-} from "../../../../src/data/light";
-import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
+} from "../../../src/data/light";
+import "../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../src/fake_data/entity";
 import {
   MockHomeAssistant,
   provideHass,
-} from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-more-infos";
+} from "../../../src/fake_data/provide_hass";
+import "../components/demo-more-infos";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {

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

@@ -1,14 +1,15 @@
 import "@material/mwc-button";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { ActionHandlerEvent } from "../../../../src/data/lovelace";
-import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
+import "../../../src/components/ha-card";
+import { ActionHandlerEvent } from "../../../src/data/lovelace";
+import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
 
-@customElement("demo-misc-util-long-press")
+@customElement("demo-util-long-press")
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {
     return html`
+      ${this.renderStyle()}
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
@@ -40,7 +41,9 @@ export class DemoUtilLongPress extends LitElement {
     area.scrollTop = area.scrollHeight;
   }
 
-  static styles = css`
+  private renderStyle() {
+    return html`
+      <style>
         ha-card {
           width: 200px;
           margin: calc(42vh - 140px) auto;
@@ -57,5 +60,7 @@ export class DemoUtilLongPress extends LitElement {
         textarea {
           height: 50px;
         }
+      </style>
     `;
+  }
 }

gallery/src/ha-gallery.js

@@ -0,0 +1,229 @@
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../src/components/ha-card";
+import "../../src/components/ha-icon";
+import "../../src/components/ha-icon-button";
+import "../../src/managers/notification-manager";
+import "../../src/styles/polymer-ha-style";
+// eslint-disable-next-line import/extensions
+import { DEMOS } from "../build/import-demos";
+
+class HaGallery extends PolymerElement {
+  static get template() {
+    return html`
+      <style include="iron-positioning ha-style">
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        app-header-layout {
+          min-height: 100vh;
+        }
+        ha-icon-button.invisible {
+          visibility: hidden;
+        }
+
+        .pickers {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          align-items: start;
+        }
+
+        .pickers ha-card {
+          width: 400px;
+          display: block;
+          margin: 16px 8px;
+        }
+
+        .pickers ha-card:last-child {
+          margin-bottom: 16px;
+        }
+
+        .intro {
+          margin: -1em 0;
+        }
+
+        p a {
+          color: var(--primary-color);
+        }
+
+        a {
+          color: var(--primary-text-color);
+          text-decoration: none;
+        }
+      </style>
+
+      <app-header-layout>
+        <app-header slot="header" fixed>
+          <app-toolbar>
+            <ha-icon-button
+              icon="hass:arrow-left"
+              on-click="_backTapped"
+              class$="[[_computeHeaderButtonClass(_demo)]]"
+            ></ha-icon-button>
+            <div main-title>
+              [[_withDefault(_demo, "Home Assistant Gallery")]]
+            </div>
+          </app-toolbar>
+        </app-header>
+
+        <div class="content">
+          <div id="demo"></div>
+          <template is="dom-if" if="[[!_demo]]">
+            <div class="pickers">
+              <ha-card header="Lovelace Card Demos">
+                <div class="card-content intro">
+                  <p>
+                    Lovelace has many different cards. Each card allows the user
+                    to tell a different story about what is going on in their
+                    house. These cards are very customizable, as no household is
+                    the same.
+                  </p>
+
+                  <p>
+                    This gallery helps our developers and designers to see all
+                    the different states that each card can be in.
+                  </p>
+
+                  <p>
+                    Check
+                    <a href="https://www.home-assistant.io/lovelace"
+                      >the official website</a
+                    >
+                    for instructions on how to get started with Lovelace.
+                  </p>
+                </div>
+                <template is="dom-repeat" items="[[_lovelaceDemos]]">
+                  <a href="#[[item]]">
+                    <paper-item>
+                      <paper-item-body>{{ item }}</paper-item-body>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
+                    </paper-item>
+                  </a>
+                </template>
+              </ha-card>
+
+              <ha-card header="Other Demos">
+                <div class="card-content intro"></div>
+                <template is="dom-repeat" items="[[_restDemos]]">
+                  <a href="#[[item]]">
+                    <paper-item>
+                      <paper-item-body>{{ item }}</paper-item-body>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
+                    </paper-item>
+                  </a>
+                </template>
+              </ha-card>
+            </div>
+          </template>
+        </div>
+      </app-header-layout>
+      <notification-manager
+        hass="[[_fakeHass]]"
+        id="notifications"
+      ></notification-manager>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _fakeHass: {
+        type: Object,
+        // Just enough for computeRTL
+        value: {
+          language: "en",
+          translationMetadata: {
+            translations: {},
+          },
+        },
+      },
+      _demo: {
+        type: String,
+        value: document.location.hash.substr(1),
+        observer: "_demoChanged",
+      },
+      _demos: {
+        type: Array,
+        value: Object.keys(DEMOS),
+      },
+      _lovelaceDemos: {
+        type: Array,
+        computed: "_computeLovelace(_demos)",
+      },
+      _restDemos: {
+        type: Array,
+        computed: "_computeRest(_demos)",
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+
+    this.addEventListener("show-notification", (ev) =>
+      this.$.notifications.showDialog({ message: ev.detail.message })
+    );
+
+    this.addEventListener("alert-dismissed-clicked", () =>
+      this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
+    );
+
+    this.addEventListener("alert-action-clicked", () =>
+      this.$.notifications.showDialog({ message: "Alert action clicked" })
+    );
+
+    this.addEventListener("hass-more-info", (ev) => {
+      if (ev.detail.entityId) {
+        this.$.notifications.showDialog({
+          message: `Showing more info for ${ev.detail.entityId}`,
+        });
+      }
+    });
+
+    window.addEventListener("hashchange", () => {
+      this._demo = document.location.hash.substr(1);
+    });
+  }
+
+  _withDefault(value, def) {
+    return value || def;
+  }
+
+  _demoChanged(demo) {
+    const root = this.$.demo;
+
+    while (root.lastChild) root.removeChild(root.lastChild);
+
+    if (demo) {
+      DEMOS[demo]();
+      const el = document.createElement(demo);
+      root.appendChild(el);
+    }
+  }
+
+  _computeHeaderButtonClass(demo) {
+    return demo ? "" : "invisible";
+  }
+
+  _backTapped() {
+    document.location.hash = "";
+  }
+
+  _computeLovelace(demos) {
+    return demos.filter((demo) => demo.includes("hui"));
+  }
+
+  _computeRest(demos) {
+    return demos.filter((demo) => !demo.includes("hui"));
+  }
+}
+
+customElements.define("ha-gallery", HaGallery);

gallery/src/ha-gallery.ts

@@ -1,257 +0,0 @@
-import { mdiMenu } from "@mdi/js";
-import "@material/mwc-drawer";
-import "@material/mwc-top-app-bar-fixed";
-import { html, css, LitElement, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
-import { haStyle } from "../../src/resources/styles";
-import { PAGES, SIDEBAR } from "../build/import-pages";
-import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
-import "./components/page-description";
-
-const GITHUB_DEMO_URL =
-  "https://github.com/home-assistant/frontend/blob/dev/gallery/src/pages/";
-
-const FAKE_HASS = {
-  // Just enough for computeRTL for notification-manager
-  language: "en",
-  translationMetadata: {
-    translations: {},
-  },
-};
-
-@customElement("ha-gallery")
-class HaGallery extends LitElement {
-  @property() private _page =
-    document.location.hash.substring(1) ||
-    `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;
-
-  @query("notification-manager")
-  private _notifications!: HTMLElementTagNameMap["notification-manager"];
-
-  @query("mwc-drawer")
-  private _drawer!: HTMLElementTagNameMap["mwc-drawer"];
-
-  private _narrow = window.matchMedia("(max-width: 600px)").matches;
-
-  render() {
-    const sidebar: unknown[] = [];
-
-    for (const group of SIDEBAR) {
-      const links: unknown[] = [];
-
-      for (const page of group.pages!) {
-        const key = `${group.category}/${page}`;
-        const active = this._page === key;
-        const title = PAGES[key].metadata.title || page;
-        links.push(html`
-          <a ?active=${active} href=${`#${group.category}/${page}`}>${title}</a>
-        `);
-      }
-
-      sidebar.push(
-        group.header
-          ? html`
-              <details>
-                <summary class="section">${group.header}</summary>
-                ${links}
-              </details>
-            `
-          : links
-      );
-    }
-
-    return html`
-      <mwc-drawer
-        hasHeader
-        .open=${!this._narrow}
-        .type=${this._narrow ? "modal" : "dismissible"}
-      >
-        <span slot="title">Home Assistant Design</span>
-        <!-- <span slot="subtitle">subtitle</span> -->
-        <div class="sidebar">${sidebar}</div>
-        <div slot="appContent">
-          <mwc-top-app-bar-fixed>
-            <ha-icon-button
-              slot="navigationIcon"
-              @click=${this._menuTapped}
-              .path=${mdiMenu}
-            ></ha-icon-button>
-
-            <div slot="title">
-              ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
-            </div>
-          </mwc-top-app-bar-fixed>
-          <div class="content">
-            ${PAGES[this._page].description
-              ? html`
-                  <page-description .page=${this._page}></page-description>
-                `
-              : ""}
-            ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
-          </div>
-          <div class="page-footer">
-            ${PAGES[this._page].description ||
-            Object.keys(PAGES[this._page].metadata).length > 0
-              ? html`
-                  <a
-                    href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                    target="_blank"
-                  >
-                    Edit text
-                  </a>
-                `
-              : ""}
-            ${PAGES[this._page].demo
-              ? html`
-                  <a
-                    href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                    target="_blank"
-                  >
-                    Edit demo
-                  </a>
-                `
-              : ""}
-          </div>
-        </div>
-      </mwc-drawer>
-      <notification-manager
-        .hass=${FAKE_HASS}
-        id="notifications"
-      ></notification-manager>
-    `;
-  }
-
-  firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-
-    this.addEventListener("show-notification", (ev) =>
-      this._notifications.showDialog({ message: ev.detail.message })
-    );
-    this.addEventListener("alert-dismissed-clicked", () =>
-      this._notifications.showDialog({ message: "Alert dismissed clicked" })
-    );
-    this.addEventListener("hass-more-info", (ev) => {
-      if (ev.detail.entityId) {
-        this._notifications.showDialog({
-          message: `Showing more info for ${ev.detail.entityId}`,
-        });
-      }
-    });
-
-    document.location.hash = this._page;
-
-    window.addEventListener("hashchange", () => {
-      this._page = document.location.hash.substring(1);
-      if (this._narrow) {
-        this._drawer.open = false;
-      }
-    });
-  }
-
-  updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("_page")) {
-      return;
-    }
-
-    if (PAGES[this._page].demo) {
-      PAGES[this._page].demo();
-    }
-
-    const menuItem = this.shadowRoot!.querySelector(
-      `a[href="#${this._page}"]`
-    )!;
-    // Make sure section is expanded
-    if (menuItem.parentElement instanceof HTMLDetailsElement) {
-      menuItem.parentElement.open = true;
-    }
-  }
-
-  _menuTapped() {
-    this._drawer.open = !this._drawer.open;
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      :host {
-        -ms-user-select: initial;
-        -webkit-user-select: initial;
-        -moz-user-select: initial;
-      }
-
-      .sidebar {
-        padding: 4px;
-      }
-
-      .sidebar details {
-        margin-top: 1em;
-        margin-left: 1em;
-      }
-
-      .sidebar summary {
-        cursor: pointer;
-        font-weight: bold;
-        margin-bottom: 8px;
-      }
-
-      .sidebar a {
-        color: var(--primary-text-color);
-        display: block;
-        padding: 4px 12px;
-        text-decoration: none;
-        position: relative;
-      }
-
-      .sidebar a[active]::before {
-        border-radius: 4px;
-        position: absolute;
-        top: 0;
-        right: 2px;
-        bottom: 0;
-        left: 2px;
-        pointer-events: none;
-        content: "";
-        transition: opacity 15ms linear;
-        will-change: opacity;
-        background-color: var(--sidebar-selected-icon-color);
-        opacity: 0.12;
-      }
-
-      div[slot="appContent"] {
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-        background: var(--primary-background-color);
-      }
-
-      .content {
-        flex: 1;
-      }
-
-      page-description {
-        margin: 16px;
-      }
-
-      .page-footer {
-        text-align: center;
-        margin: 16px 0;
-        padding-top: 16px;
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
-      }
-
-      .page-footer a {
-        display: inline-block;
-        margin: 0 8px;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-gallery": HaGallery;
-  }
-}

gallery/src/html/index.html.template

@@ -7,7 +7,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#2157BC" />
-    <title>Home Assistant Design</title>
+    <title>HAGallery</title>
 
     <script type="module" src="<%= latestGalleryJS %>"></script>
     <style>

gallery/src/pages/automation/describe-action.markdown

@@ -1,3 +0,0 @@
----
-title: Describe Action
----

gallery/src/pages/automation/describe-condition.markdown

@@ -1,3 +0,0 @@
----
-title: Describe Condition
----

gallery/src/pages/automation/describe-trigger.markdown

@@ -1,3 +0,0 @@
----
-title: Describe Trigger
----

gallery/src/pages/automation/editor-action.markdown

@@ -1,3 +0,0 @@
----
-title: Actions
----

gallery/src/pages/automation/editor-action.ts

@@ -1,91 +0,0 @@
-/* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
-import { customElement, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import "../../../../src/panels/config/automation/action/ha-automation-action";
-import { HaChooseAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-choose";
-import { HaDelayAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-delay";
-import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
-import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
-import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
-import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-activate_scene";
-import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
-import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
-import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
-import { Action } from "../../../../src/data/script";
-import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
-
-const SCHEMAS: { name: string; actions: Action[] }[] = [
-  { name: "Event", actions: [HaEventAction.defaultConfig] },
-  { name: "Device", actions: [HaDeviceAction.defaultConfig] },
-  { name: "Service", actions: [HaServiceAction.defaultConfig] },
-  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
-  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
-  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
-  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
-  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
-  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
-  { name: "Choose", actions: [HaChooseAction.defaultConfig] },
-  { name: "Variables", actions: [{ variables: { hello: "1" } }] },
-];
-
-@customElement("demo-automation-editor-action")
-class DemoHaAutomationEditorAction extends LitElement {
-  @state() private hass!: HomeAssistant;
-
-  private data: any = SCHEMAS.map((info) => info.actions);
-
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
-    mockHassioSupervisor(hass);
-  }
-
-  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
-    return html`
-      ${SCHEMAS.map(
-        (info, sampleIdx) => html`
-          <demo-black-white-row
-            .title=${info.name}
-            .value=${this.data[sampleIdx]}
-          >
-            ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-automation-action
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .actions=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    @value-changed=${valueChanged}
-                  ></ha-automation-action>
-                `
-            )}
-          </demo-black-white-row>
-        `
-      )}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
-  }
-}

gallery/src/pages/automation/editor-condition.markdown

@@ -1,3 +0,0 @@
----
-title: Conditions
----

gallery/src/pages/automation/editor-condition.ts

@@ -1,127 +0,0 @@
-/* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
-import { customElement, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { Condition } from "../../../../src/data/automation";
-import "../../../../src/panels/config/automation/condition/ha-automation-condition";
-import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
-import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
-import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
-import { HaStateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
-import { HaSunCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
-import { HaTemplateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
-import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
-import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
-import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
-
-const SCHEMAS: { name: string; conditions: Condition[] }[] = [
-  {
-    name: "State",
-    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
-  },
-  {
-    name: "Numeric State",
-    conditions: [
-      { condition: "numeric_state", ...HaNumericStateCondition.defaultConfig },
-    ],
-  },
-  {
-    name: "Sun",
-    conditions: [{ condition: "sun", ...HaSunCondition.defaultConfig }],
-  },
-  {
-    name: "Zone",
-    conditions: [{ condition: "zone", ...HaZoneCondition.defaultConfig }],
-  },
-  {
-    name: "Time",
-    conditions: [{ condition: "time", ...HaTimeCondition.defaultConfig }],
-  },
-  {
-    name: "Template",
-    conditions: [
-      { condition: "template", ...HaTemplateCondition.defaultConfig },
-    ],
-  },
-  {
-    name: "Device",
-    conditions: [{ condition: "device", ...HaDeviceCondition.defaultConfig }],
-  },
-  {
-    name: "And",
-    conditions: [{ condition: "and", ...HaLogicalCondition.defaultConfig }],
-  },
-  {
-    name: "Or",
-    conditions: [{ condition: "or", ...HaLogicalCondition.defaultConfig }],
-  },
-  {
-    name: "Not",
-    conditions: [{ condition: "not", ...HaLogicalCondition.defaultConfig }],
-  },
-  {
-    name: "Trigger",
-    conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
-  },
-];
-
-@customElement("demo-automation-editor-condition")
-class DemoHaAutomationEditorCondition extends LitElement {
-  @state() private hass!: HomeAssistant;
-
-  private data: any = SCHEMAS.map((info) => info.conditions);
-
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
-    mockHassioSupervisor(hass);
-  }
-
-  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
-    return html`
-      ${SCHEMAS.map(
-        (info, sampleIdx) => html`
-          <demo-black-white-row
-            .title=${info.name}
-            .value=${this.data[sampleIdx]}
-          >
-            ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-automation-condition
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .conditions=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    @value-changed=${valueChanged}
-                  ></ha-automation-condition>
-                `
-            )}
-          </demo-black-white-row>
-        `
-      )}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
-  }
-}