Update src/dialogs/template-editor/ha-template-editor.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.devcontainer/Dockerfile

@@ -0,0 +1,13 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.9
+
+ENV \
+  DEBIAN_FRONTEND=noninteractive \
+  DEVCONTAINER=true \
+  PATH=$PATH:./node_modules/.bin
+
+# Install nvm
+COPY .nvmrc /tmp/.nvmrc
+RUN \
+  su vscode -c \
+    "source /usr/local/share/nvm/nvm.sh && nvm install $(cat /tmp/.nvmrc) 2>&1"

.devcontainer/devcontainer.json

@@ -0,0 +1,31 @@
+{
+  "name": "Home Assistant Frontend",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
+  "appPort": 8123,
+  "context": "..",
+  "postCreateCommand": "script/bootstrap",
+  "extensions": [
+    "github.vscode-pull-request-github",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "runem.lit-plugin",
+    "ms-python.vscode-pylance"
+  ],
+  "settings": {
+    "terminal.integrated.shell.linux": "/bin/bash",
+    "files.eol": "\n",
+    "editor.tabSize": 2,
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "files.trimTrailingWhitespace": true
+  }
+}

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "plugin:@typescript-eslint/recommended",
     "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
     "prettier",
@@ -45,16 +45,16 @@
     "func-names": 0,
     "prefer-arrow-callback": 0,
     "no-underscore-dangle": 0,
-    "no-var": 0,
     "strict": 0,
     "prefer-spread": 0,
     "no-plusplus": 0,
-    "no-bitwise": 0,
+    "no-bitwise": 2,
     "comma-dangle": 0,
     "vars-on-top": 0,
     "no-continue": 0,
     "no-param-reassign": 0,
     "no-multi-assign": 0,
+    "no-console": 2,
     "radix": 0,
     "no-alert": 0,
     "no-return-await": 0,
@@ -75,13 +75,16 @@
     "object-curly-newline": 0,
     "default-case": 0,
     "wc/no-self-class": 0,
+    "no-shadow": 0,
     "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/explicit-function-return-type": 0
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-shadow": ["error"]
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Developer tools -> Info.
+  Home Assistant frontend: Configuration -> Info.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,26 +0,0 @@
----
-name: Request a feature for the UI, Frontend or Lovelace
-about: Request an new feature for the Home Assistant frontend.
-labels: feature request
----
-
-<!--
-  DO NOT DELETE ANY TEXT from this template!
-  Otherwise, your request may be closed without comment.
--->
-
-## The request
-
-<!--
-  Describe to our maintainers, the feature you would like to be added.
-  Please be clear and concise and, if possible, provide a screenshot or mockup.
--->
-
-## The alternatives
-
-<!--
-  Are you currently using, or have you considered alternatives?
-  If so, could you please describe those?
--->
-
-## Additional information

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Request a feature for the UI, Frontend or Lovelace
+    url: https://github.com/home-assistant/frontend/discussions/category_choices
+    about: Request an new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues with the backend repository.

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,8 +18,8 @@
 <!--
   Describe the big picture of your changes here to communicate to the
   maintainers why we should accept this pull request. If it fixes a bug
-  or resolves a feature request, be sure to link to that issue in the
-  additional information section.
+  or resolves a feature request, be sure to link to that issue or discussion
+  in the additional information section.
 -->
 
 ## Type of change
@@ -56,7 +56,7 @@
 -->
 
 - This PR fixes or closes issue: fixes #
-- This PR is related to issue:
+- This PR is related to issue or discussion:
 - Link to documentation pull request:
 
 ## Checklist

.github/lock.yml

@@ -1,27 +0,0 @@
-# Configuration for Lock Threads - https://github.com/dessant/lock-threads
-
-# Number of days of inactivity before a closed issue or pull request is locked
-daysUntilLock: 1
-
-# Skip issues and pull requests created before a given timestamp. Timestamp must
-# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
-skipCreatedBefore: 2020-01-01
-
-# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
-exemptLabels: []
-
-# Label to add before locking, such as `outdated`. Set to `false` to disable
-lockLabel: false
-
-# Comment to post before locking. Set to `false` to disable
-lockComment: false
-
-# Assign `resolved` as the reason for locking. Set to `false` to disable
-setLockReason: false
-
-# Limit to only `issues` or `pulls`
-only: pulls
-
-# Optionally, specify configuration settings just for `issues` or `pulls`
-issues:
-  daysUntilLock: 30

.github/stale.yml

@@ -1,56 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-
-# Number of days of inactivity before an Issue or Pull Request becomes stale
-daysUntilStale: 90
-
-# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
-# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
-daysUntilClose: 7
-
-# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
-onlyLabels: []
-
-# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
-exemptLabels:
-  - feature request
-  - Help wanted
-  - to do
-
-# Set to true to ignore issues in a project (defaults to false)
-exemptProjects: true
-
-# Set to true to ignore issues in a milestone (defaults to false)
-exemptMilestones: true
-
-# Set to true to ignore issues with an assignee (defaults to false)
-exemptAssignees: false
-
-# Label to use when marking as stale
-staleLabel: stale
-
-# Comment to post when marking as stale. Set to `false` to disable
-markComment: >
-  There hasn't been any activity on this issue recently. Due to the high number
-  of incoming GitHub notifications, we have to clean some of the old issues,
-  as many of them have already been resolved with the latest updates.
-
-  Please make sure to update to the latest Home Assistant version and check
-  if that solves the issue. Let us know if that works for you by adding a
-  comment 👍
-
-  This issue now has been marked as stale and will be closed if no further
-  activity occurs. Thank you for your contributions.
-
-# Comment to post when removing the stale label.
-# unmarkComment: >
-#   Your comment here.
-
-# Comment to post when closing a stale Issue or Pull Request.
-# closeComment: >
-#   Your comment here.
-
-# Limit the number of actions per hour, from 1-30. Default is 30
-limitPerRun: 30
-
-# Limit to only `issues` or `pulls`
-only: issues

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,60 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [dev, master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [dev]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/lock.yml

@@ -0,0 +1,20 @@
+name: Lock
+
+# yamllint disable-line rule:truthy
+on:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v2.0.1
+        with:
+          github-token: ${{ github.token }}
+          issue-lock-inactive-days: "30"
+          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-lock-reason: ""
+          pr-lock-inactive-days: "1"
+          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-lock-reason: ""

.github/workflows/stale.yml

@@ -0,0 +1,42 @@
+name: Stale
+
+# yamllint disable-line rule:truthy
+on:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 90 days stale policy
+        uses: actions/stale@v3.0.13
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-stale: 90
+          days-before-close: 7
+          operations-per-run: 25
+          remove-stale-when-updated: true
+          stale-issue-label: "stale"
+          exempt-issue-labels: "no-stale,Help%20wanted,help-wanted,feature-request,feature%20request"
+          stale-issue-message: >
+            There hasn't been any activity on this issue recently. Due to the
+            high number of incoming GitHub notifications, we have to clean some
+            of the old issues, as many of them have already been resolved with
+            the latest updates.
+
+            Please make sure to update to the latest Home Assistant version and
+            check if that solves the issue. Let us know if that works for you by
+            adding a comment 👍
+
+            This issue has now been marked as stale and will be closed if no
+            further activity occurs. Thank you for your contributions.
+
+          stale-pr-label: "stale"
+          exempt-pr-labels: "no-stale"
+          stale-pr-message: >
+            There hasn't been any activity on this pull request recently. This
+            pull request has been automatically marked as stale because of that
+            and will be closed if no further activity occurs within 7 days.
+
+            Thank you for your contributions.

.gitignore

@@ -23,6 +23,8 @@ dist
 # vscode
 .vscode/*
 !.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/tasks.json
 
 # Cast dev settings
 src/cast/dev_const.ts
@@ -33,3 +35,6 @@ yarn-error.log
 
 #asdf
 .tool-versions
+
+# Home Assistant config
+/config

.vscode/launch.json

@@ -0,0 +1,44 @@
+{
+  // https://github.com/microsoft/vscode-js-debug/blob/master/OPTIONS.md
+  "configurations": [
+    {
+      "name": "Debug Frontend",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8123/",
+      "webRoot": "${workspaceFolder}/hass_frontend",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Frontend",
+      "outFiles": [
+        "${workspaceFolder}/hass_frontend/frontend_latest/*.js"
+      ]
+    },
+    {
+      "name": "Debug Gallery",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8100/",
+      "webRoot": "${workspaceFolder}/gallery/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Gallery"
+    },
+    {
+      "name": "Debug Demo",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8090/",
+      "webRoot": "${workspaceFolder}/demo/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Demo"
+    },
+    {
+      "name": "Debug Cast",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8080/",
+      "webRoot": "${workspaceFolder}/cast/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Cast"
+    },
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,208 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Develop Frontend",
+      "type": "gulp",
+      "task": "develop-app",
+      // Sync changes here to other tasks until issue resolved
+      // https://github.com/Microsoft/vscode/issues/61497
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Supervisor panel",
+      "type": "gulp",
+      "task": "develop-hassio",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Gallery",
+      "type": "gulp",
+      "task": "develop-gallery",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Demo",
+      "type": "gulp",
+      "task": "develop-demo",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Cast",
+      "type": "gulp",
+      "task": "develop-cast",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Run HA Core in devcontainer",
+      "type": "shell",
+      "command": "script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Run HA Core for Supervisor in devcontainer",
+      "type": "shell",
+      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    }
+  ],
+  "inputs": [
+    {
+      "id": "supervisorHost",
+      "type": "promptString",
+      "description": "The IP of the Supervisor host running the Remote API proxy add-on"
+    },
+    {
+      "id": "supervisorToken",
+      "type": "promptString",
+      "description": "The token for the Remote API proxy add-on"
+    }
+  ]
+}

README.md

@@ -26,4 +26,4 @@ A complete guide can be found at the following [link](https://www.home-assistant
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
-We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.

build-scripts/bundle.js

@@ -52,7 +52,13 @@ module.exports.terserOptions = (latestBuild) => ({
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
   presets: [
-    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
+    !latestBuild && [
+      require("@babel/preset-env").default,
+      {
+        useBuiltIns: "entry",
+        corejs: "3.6",
+      },
+    ],
     require("@babel/preset-typescript").default,
   ].filter(Boolean),
   plugins: [
@@ -62,7 +68,8 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       { loose: true, useBuiltIns: true },
     ],
     // Only support the syntax, Webpack will handle it.
-    "@babel/syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     [

build-scripts/gulp/entry-html.js

@@ -265,7 +265,10 @@ gulp.task("gen-index-gallery-prod", (done) => {
 });
 
 gulp.task("gen-index-hassio-dev", async () => {
-  writeHassioEntrypoint("entrypoint.js", "entrypoints.js");
+  writeHassioEntrypoint(
+    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
+    `${paths.hassio_publicPath}/frontend_es5/entrypoint.js`
+  );
 });
 
 gulp.task("gen-index-hassio-prod", async () => {
@@ -289,10 +292,10 @@ function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
     path.resolve(paths.hassio_output_root, "entrypoint.js"),
     `
 try {
-  new Function("import('${paths.hassio_publicPath}/frontend_latest/${latestEntrypoint}')")();
+  new Function("import('${latestEntrypoint}')")();
 } catch (err) {
   var el = document.createElement('script');
-  el.src = '${paths.hassio_publicPath}/frontend_es5/${es5Entrypoint}';
+  el.src = '${es5Entrypoint}';
   document.body.appendChild(el);
 }
   `,

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

@@ -11,6 +11,7 @@ const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
 const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
 const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
+const REMOVED_ICONS_PATH = path.resolve(__dirname, "../removedIcons.json");
 
 const encoding = "utf8";
 
@@ -25,6 +26,13 @@ const getMeta = () => {
   });
 };
 
+const addRemovedMeta = (meta) => {
+  const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
+  const removed = JSON.parse(file);
+  const combinedMeta = [...meta, ...removed];
+  return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
+};
+
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -69,7 +77,7 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = getMeta();
+  const meta = addRemovedMeta(getMeta());
   const split = splitBySize(meta);
 
   if (!fs.existsSync(OUTPUT_DIR)) {

build-scripts/gulp/translations.js

@@ -7,7 +7,6 @@ const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
 const merge = require("gulp-merge-json");
-const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
 const { mapFiles } = require("../util");
@@ -301,7 +300,6 @@ gulp.task("build-flattened-translations", function () {
         return flatten(data);
       })
     )
-    .pipe(minify())
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {

build-scripts/gulp/webpack.js

@@ -18,6 +18,14 @@ const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: false }),
 ];
 
+/**
+ * @param {{
+ *   compiler: import("webpack").Compiler,
+ *   contentBase: string,
+ *   port: number,
+ *   listenHost?: string
+ * }}
+ */
 const runDevServer = ({
   compiler,
   contentBase,
@@ -33,7 +41,10 @@ const runDevServer = ({
       throw err;
     }
     // Server listening
-    log("[webpack-dev-server]", `http://localhost:${port}`);
+    log(
+      "[webpack-dev-server]",
+      `Project is running at http://localhost:${port}`
+    );
   });
 
 const handler = (done) => (err, stats) => {
@@ -45,12 +56,12 @@ const handler = (done) => (err, stats) => {
     return;
   }
 
-  log(`Build done @ ${new Date().toLocaleTimeString()}`);
-
   if (stats.hasErrors() || stats.hasWarnings()) {
-    log.warn(stats.toString("minimal"));
+    console.log(stats.toString("minimal"));
   }
 
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
+
   if (done) {
     done();
   }

build-scripts/paths.js

@@ -1,4 +1,4 @@
-var path = require("path");
+const path = require("path");
 
 module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),

build-scripts/removedIcons.json

@@ -0,0 +1 @@
+[]

build-scripts/webpack.js

@@ -2,9 +2,23 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
-const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
+const log = require("fancy-log");
+
+class LogStartCompilePlugin {
+  ignoredFirst = false;
+
+  apply(compiler) {
+    compiler.hooks.beforeCompile.tap("LogStartCompilePlugin", () => {
+      if (!this.ignoredFirst) {
+        this.ignoredFirst = true;
+        return;
+      }
+      log("Changes detected. Starting compilation");
+    });
+  }
+}
 
 const createWebpackConfig = ({
   entry,
@@ -30,7 +44,7 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.js$|\.ts$/,
+          test: /\.m?js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
@@ -46,16 +60,13 @@ const createWebpackConfig = ({
     optimization: {
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
           extractComments: true,
-          sourceMap: true,
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
     },
     plugins: [
-      new WorkerPlugin(),
       new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -99,7 +110,17 @@ const createWebpackConfig = ({
         new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-    ],
+      // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
+      new webpack.NormalModuleReplacementPlugin(
+        new RegExp(
+          require.resolve(
+            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          )
+        ),
+        path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
+      ),
+      !isProdBuild && new LogStartCompilePlugin(),
+    ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
     },
@@ -110,6 +131,22 @@ const createWebpackConfig = ({
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
+      environment: {
+        // The environment supports arrow functions ('() => { ... }').
+        arrowFunction: latestBuild,
+        // The environment supports BigInt as literal (123n).
+        bigIntLiteral: false,
+        // The environment supports const and let for variable declarations.
+        const: latestBuild,
+        // The environment supports destructuring ('{ a, b } = obj').
+        destructuring: latestBuild,
+        // The environment supports an async import() function to import EcmaScript modules.
+        dynamicImport: latestBuild,
+        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+        forOf: latestBuild,
+        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+        module: latestBuild,
+      },
       chunkFilename:
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"

cast/src/html/launcher-faq.html.template

@@ -212,13 +212,8 @@
           Chromecast is a technology developed by Google, and is available on:
         </p>
         <ul>
-          <li>Google Chrome (all platforms except on iOS)</li>
-          <li>
-            Microsoft Edge (all platforms,
-            <a href="https://www.microsoftedgeinsider.com" target="_blank"
-              >dev and canary builds only</a
-            >)
-          </li>
+          <li>Google Chrome (all platforms except iOS)</li>
+          <li>Microsoft Edge (all platforms)</li>
         </ul>
       </div>
 

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,4 @@
+import "../../../src/resources/safari-14-attachshadow-patch";
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";

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

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../../src/cast/cast_manager";
@@ -28,7 +29,7 @@ import {
   getLovelaceCollection,
   LovelaceConfig,
 } from "../../../../src/data/lovelace";
-import "../../../../src/layouts/loading-screen";
+import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
 import "@material/mwc-button/mwc-button";
@@ -41,13 +42,13 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @property() private askWrite = false;
+  @internalProperty() private askWrite = false;
 
-  @property() private lovelaceConfig?: LovelaceConfig | null;
+  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html` <loading-screen></loading-screen>> `;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
     }
 
     const error =

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

@@ -17,8 +17,8 @@ import {
   customElement,
   html,
   LitElement,
-  property,
   TemplateResult,
+  internalProperty,
 } from "lit-element";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
@@ -27,7 +27,7 @@ import {
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
 import "../../../../src/components/ha-icon";
-import "../../../../src/layouts/loading-screen";
+import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
 
@@ -60,19 +60,19 @@ const INTRO = html`
 
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
-  @property() private loading = false;
+  @internalProperty() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @property() private cannotConnect = false;
+  @internalProperty() private cannotConnect = false;
 
-  @property() private error?: string | TemplateResult;
+  @internalProperty() private error?: string | TemplateResult;
 
-  @property() private auth?: Auth;
+  @internalProperty() private auth?: Auth;
 
-  @property() private connection?: Connection;
+  @internalProperty() private connection?: Connection;
 
-  @property() private castManager?: CastManager | null;
+  @internalProperty() private castManager?: CastManager | null;
 
   private openDemo = false;
 
@@ -98,7 +98,7 @@ export class HcConnect extends LitElement {
     }
 
     if (this.castManager === undefined || this.loading) {
-      return html` <loading-screen></loading-screen> `;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen> `;
     }
 
     if (this.castManager === null) {

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

@@ -30,7 +30,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <div class="card-header">
+          <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </div>
+          </h1>
           <slot></slot>
         </div>
       </ha-card>

cast/src/receiver/entrypoint.ts

@@ -6,13 +6,60 @@ import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
 
-const controller = new HcMain();
-document.body.append(controller);
+const lovelaceController = new HcMain();
+document.body.append(lovelaceController);
+
+const mediaPlayer = document.createElement("cast-media-player");
+mediaPlayer.style.display = "none";
+document.body.append(mediaPlayer);
+const playerStylesAdded = false;
+
+let controls: HTMLElement | null;
+
+const setTouchControlsVisibility = (visible: boolean) => {
+  if (!castContext.getDeviceCapabilities().touch_input_supported) {
+    return;
+  }
+  controls =
+    controls ||
+    (document.body.querySelector("touch-controls") as HTMLElement | null);
+  if (controls) {
+    controls.style.display = visible ? "initial" : "none";
+  }
+};
+
+const showLovelaceController = () => {
+  mediaPlayer.style.display = "none";
+  lovelaceController.style.display = "initial";
+  document.body.setAttribute("style", "overflow-y: auto !important");
+  setTouchControlsVisibility(false);
+};
+
+const showMediaPlayer = () => {
+  lovelaceController.style.display = "none";
+  mediaPlayer.style.display = "initial";
+  document.body.removeAttribute("style");
+  setTouchControlsVisibility(true);
+  if (!playerStylesAdded) {
+    const style = document.createElement("style");
+    style.innerHTML = `
+    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;
+    }
+    `;
+    document.head.appendChild(style);
+  }
+};
 
 const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // @ts-ignore
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
@@ -30,13 +77,61 @@ options.uiConfig = new cast.framework.ui.UiConfig();
 // @ts-ignore
 options.uiConfig.touchScreenOptimizedApp = true;
 
+castContext.setInactivityTimeout(86400); // 1 day
+
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
+    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+    if (
+      playerManager.getPlayerState() !==
+      cast.framework.messages.PlayerState.IDLE
+    ) {
+      playerManager.stop();
+    } else {
+      showLovelaceController();
+    }
     const msg = ev.data;
     msg.senderId = ev.senderId;
-    controller.processIncomingMessage(msg);
+    lovelaceController.processIncomingMessage(msg);
+  }
+);
+
+const playerManager = castContext.getPlayerManager();
+
+playerManager.setMessageInterceptor(
+  cast.framework.messages.MessageType.LOAD,
+  (loadRequestData) => {
+    // We received a play media command, hide Lovelace and show media player
+    showMediaPlayer();
+    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;
+  }
+);
+
+playerManager.addEventListener(
+  cast.framework.events.EventType.MEDIA_STATUS,
+  (event) => {
+    if (
+      event.mediaStatus?.playerState ===
+        cast.framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.idleReason &&
+      event.mediaStatus?.idleReason !==
+        cast.framework.messages.IdleReason.INTERRUPTED
+    ) {
+      // media finished or stopped, return to default Lovelace
+      showLovelaceController();
+    }
   }
 );
 

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

@@ -1,4 +1,10 @@
-import { customElement, html, property, TemplateResult } from "lit-element";
+import {
+  customElement,
+  html,
+  property,
+  internalProperty,
+  TemplateResult,
+} from "lit-element";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
@@ -13,9 +19,9 @@ import "./hc-lovelace";
 
 @customElement("hc-demo")
 class HcDemo extends HassElement {
-  @property() public lovelacePath!: string;
+  @property({ attribute: false }) public lovelacePath!: string;
 
-  @property() private _lovelaceConfig?: LovelaceConfig;
+  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {

cast/src/receiver/layout/hc-launch-screen.ts

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public error?: string;
 

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

@@ -9,19 +9,20 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
-import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public lovelaceConfig!: LovelaceConfig;
+  @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig;
 
   @property() public viewPath?: string | number;
 
+  public urlPath?: string | null;
+
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -35,6 +36,7 @@ class HcLovelace extends LitElement {
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
       editMode: false,
+      urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
       language: "en",
@@ -42,22 +44,13 @@ class HcLovelace extends LitElement {
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return this.lovelaceConfig.views[index].panel
-      ? html`
-          <hui-panel-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .config=${this.lovelaceConfig.views[index]}
-          ></hui-panel-view>
-        `
-      : html`
-          <hui-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .index=${index}
-            columns="2"
-          ></hui-view>
-        `;
+    return html`
+      <hui-view
+        .hass=${this.hass}
+        .lovelace=${lovelace}
+        .index=${index}
+      ></hui-view>
+    `;
   }
 
   protected updated(changedProps) {
@@ -73,7 +66,7 @@ class HcLovelace extends LitElement {
 
         if (configBackground) {
           (this.shadowRoot!.querySelector(
-            "hui-view, hui-panel-view"
+            "hui-view"
           ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground

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

@@ -3,7 +3,12 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { customElement, html, property, TemplateResult } from "lit-element";
+import {
+  customElement,
+  html,
+  internalProperty,
+  TemplateResult,
+} from "lit-element";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,
@@ -31,13 +36,13 @@ let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
-  @property() private _showDemo = false;
+  @internalProperty() private _showDemo = false;
 
-  @property() private _lovelaceConfig?: LovelaceConfig;
+  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
 
-  @property() private _lovelacePath: string | number | null = null;
+  @internalProperty() private _lovelacePath: string | number | null = null;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
 
@@ -82,6 +87,7 @@ export class HcMain extends HassElement {
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
+        .urlPath=${this._urlPath}
         @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;
@@ -210,9 +216,7 @@ export class HcMain extends HassElement {
     }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
-    if (castContext.getDeviceCapabilities().touch_input_supported) {
-      this._breakFree();
-    }
+
     this._sendStatus();
   }
 
@@ -235,9 +239,6 @@ export class HcMain extends HassElement {
       this._showDemo = true;
       this._lovelacePath = "overview";
       this._sendStatus();
-      if (castContext.getDeviceCapabilities().touch_input_supported) {
-        this._breakFree();
-      }
     });
   }
 
@@ -258,14 +259,6 @@ export class HcMain extends HassElement {
     }
   }
 
-  private _breakFree() {
-    const controls = document.body.querySelector("touch-controls");
-    if (controls) {
-      controls.remove();
-    }
-    document.body.setAttribute("style", "overflow-y: auto !important");
-  }
-
   private sendMessage(senderId: string, response: any) {
     castContext.sendCustomMessage(CAST_NS, senderId, response);
   }

demo/src/configs/teachingbirds/lovelace.ts

@@ -7,205 +7,183 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
       cards: [
         { type: "custom:ha-demo-card" },
         {
+          type: "grid",
+          columns: 4,
           cards: [
             {
-              cards: [
+              image: "/assets/teachingbirds/isa_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "more-info",
+              },
+              entity: "sensor.presence_isa",
+            },
+            {
+              image: "/assets/teachingbirds/Stefan_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "more-info",
+              },
+              entity: "sensor.presence_stefan",
+            },
+            {
+              image: "/assets/teachingbirds/background_square.png",
+              elements: [
                 {
-                  image: "/assets/teachingbirds/isa_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
+                  state_image: {
+                    on: "/assets/teachingbirds/radiator_on.jpg",
+                    off: "/assets/teachingbirds/radiator_off.jpg",
+                  },
+                  type: "image",
+                  style: {
+                    width: "100%",
+                    top: "50%",
+                    left: "50%",
+                  },
                   tap_action: {
                     action: "more-info",
                   },
-                  entity: "sensor.presence_isa",
+                  entity: "switch.stefan_radiator_3",
                 },
                 {
-                  image: "/assets/teachingbirds/Stefan_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
-                  tap_action: {
-                    action: "more-info",
+                  style: {
+                    top: "90%",
+                    left: "50%",
                   },
-                  entity: "sensor.presence_stefan",
-                },
-                {
-                  image: "/assets/teachingbirds/background_square.png",
-                  elements: [
-                    {
-                      state_image: {
-                        on: "/assets/teachingbirds/radiator_on.jpg",
-                        off: "/assets/teachingbirds/radiator_off.jpg",
-                      },
-                      type: "image",
-                      style: {
-                        width: "100%",
-                        top: "50%",
-                        left: "50%",
-                      },
-                      tap_action: {
-                        action: "more-info",
-                      },
-                      entity: "switch.stefan_radiator_3",
-                    },
-                    {
-                      style: {
-                        top: "90%",
-                        left: "50%",
-                      },
-                      type: "state-label",
-                      entity: "sensor.temperature_stefan",
-                    },
-                  ],
-                  type: "picture-elements",
-                },
-                {
-                  image: "/assets/teachingbirds/background_square.png",
-                  elements: [
-                    {
-                      style: {
-                        "--mdc-icon-size": "100%",
-                        top: "50%",
-                        left: "50%",
-                      },
-                      type: "icon",
-                      tap_action: {
-                        action: "navigate",
-                        navigation_path: "/lovelace/home_info",
-                      },
-                      icon: "mdi:car",
-                    },
-                  ],
-                  type: "picture-elements",
-                },
-              ],
-              type: "horizontal-stack",
-            },
-            {
-              cards: [
-                {
-                  show_name: false,
-                  type: "picture-entity",
-                  name: "Alarm",
-                  image: "/assets/teachingbirds/House_square.jpg",
-                  entity: "alarm_control_panel.house",
-                },
-                {
-                  name: "Roomba",
-                  image: "/assets/teachingbirds/roomba_square.jpg",
-                  show_name: false,
-                  type: "picture-entity",
-                  state_image: {
-                    "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
-                  },
-                  entity: "input_select.roomba_mode",
-                },
-                {
-                  show_name: false,
-                  type: "picture-entity",
-                  state_image: {
-                    Mail: "/assets/teachingbirds/mailbox_square.jpg",
-                    "Package and mail":
-                      "/assets/teachingbirds/mailbox_square.jpg",
-                    Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
-                    Package: "/assets/teachingbirds/mailbox_square.jpg",
-                  },
-                  entity: "sensor.mailbox",
-                },
-                {
-                  show_name: false,
-                  state_image: {
-                    "Put out": "/assets/teachingbirds/trash_square.jpg",
-                    "Take in": "/assets/teachingbirds/trash_square.jpg",
-                  },
-                  type: "picture-entity",
-                  image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
-                  entity: "sensor.trash_status",
-                },
-              ],
-              type: "horizontal-stack",
-            },
-            {
-              cards: [
-                {
-                  state_image: {
-                    Idle: "/assets/teachingbirds/washer_square.jpg",
-                    Running: "/assets/teachingbirds/laundry_running_square.jpg",
-                    Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
-                  },
-                  entity: "input_select.washing_machine_status",
-                  type: "picture-entity",
-                  show_name: false,
-                  name: "Washer",
-                },
-                {
-                  state_image: {
-                    Idle: "/assets/teachingbirds/dryer_square.jpg",
-                    Running: "/assets/teachingbirds/clothes_drying_square.jpg",
-                    Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
-                  },
-                  entity: "input_select.dryer_status",
-                  type: "picture-entity",
-                  show_name: false,
-                  name: "Dryer",
-                },
-                {
-                  image: "/assets/teachingbirds/guests_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
-                  tap_action: {
-                    action: "toggle",
-                  },
-                  entity: "input_boolean.guest_mode",
-                },
-                {
-                  image: "/assets/teachingbirds/cleaning_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
-                  tap_action: {
-                    action: "toggle",
-                  },
-                  entity: "input_boolean.cleaning_day",
-                },
-              ],
-              type: "horizontal-stack",
-            },
-          ],
-          type: "vertical-stack",
-        },
-        {
-          type: "vertical-stack",
-          cards: [
-            {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_bedroom",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "S's room",
+                  type: "state-label",
                   entity: "sensor.temperature_stefan",
                 },
               ],
-              type: "horizontal-stack",
+              type: "picture-elements",
             },
             {
-              cards: [
+              image: "/assets/teachingbirds/background_square.png",
+              elements: [
                 {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_passage",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "Laundry",
-                  entity: "sensor.temperature_downstairs_bathroom",
+                  style: {
+                    "--mdc-icon-size": "100%",
+                    top: "50%",
+                    left: "50%",
+                  },
+                  type: "icon",
+                  tap_action: {
+                    action: "navigate",
+                    navigation_path: "/lovelace/home_info",
+                  },
+                  icon: "mdi:car",
                 },
               ],
-              type: "horizontal-stack",
+              type: "picture-elements",
+            },
+
+            {
+              show_name: false,
+              type: "picture-entity",
+              name: "Alarm",
+              image: "/assets/teachingbirds/House_square.jpg",
+              entity: "alarm_control_panel.house",
+            },
+            {
+              name: "Roomba",
+              image: "/assets/teachingbirds/roomba_square.jpg",
+              show_name: false,
+              type: "picture-entity",
+              state_image: {
+                "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
+              },
+              entity: "input_select.roomba_mode",
+            },
+            {
+              show_name: false,
+              type: "picture-entity",
+              state_image: {
+                Mail: "/assets/teachingbirds/mailbox_square.jpg",
+                "Package and mail": "/assets/teachingbirds/mailbox_square.jpg",
+                Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
+                Package: "/assets/teachingbirds/mailbox_square.jpg",
+              },
+              entity: "sensor.mailbox",
+            },
+            {
+              show_name: false,
+              state_image: {
+                "Put out": "/assets/teachingbirds/trash_square.jpg",
+                "Take in": "/assets/teachingbirds/trash_square.jpg",
+              },
+              type: "picture-entity",
+              image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
+              entity: "sensor.trash_status",
+            },
+
+            {
+              state_image: {
+                Idle: "/assets/teachingbirds/washer_square.jpg",
+                Running: "/assets/teachingbirds/laundry_running_square.jpg",
+                Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
+              },
+              entity: "input_select.washing_machine_status",
+              type: "picture-entity",
+              show_name: false,
+              name: "Washer",
+            },
+            {
+              state_image: {
+                Idle: "/assets/teachingbirds/dryer_square.jpg",
+                Running: "/assets/teachingbirds/clothes_drying_square.jpg",
+                Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
+              },
+              entity: "input_select.dryer_status",
+              type: "picture-entity",
+              show_name: false,
+              name: "Dryer",
+            },
+            {
+              image: "/assets/teachingbirds/guests_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "toggle",
+              },
+              entity: "input_boolean.guest_mode",
+            },
+            {
+              image: "/assets/teachingbirds/cleaning_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "toggle",
+              },
+              entity: "input_boolean.cleaning_day",
+            },
+          ],
+        },
+        {
+          type: "grid",
+          columns: 2,
+          cards: [
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_bedroom",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "S's room",
+              entity: "sensor.temperature_stefan",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_passage",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "Laundry",
+              entity: "sensor.temperature_downstairs_bathroom",
             },
           ],
         },

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

@@ -4,7 +4,7 @@ import {
   customElement,
   html,
   LitElement,
-  property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types";
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
 
-  @property() private _castManager?: CastManager | null;
+  @internalProperty() private _castManager?: CastManager | null;
 
   public setConfig(_config: CastConfig): void {
     // No config possible.
@@ -52,7 +52,6 @@ class CastDemoRow extends LitElement implements LovelaceRow {
         });
         mgr.castContext.addEventListener(
           // eslint-disable-next-line no-undef
-          // @ts-ignore
           cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
           (ev) => {
             // On Android, opening a new session always results in SESSION_RESUMED.

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

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { until } from "lit-html/directives/until";
@@ -21,11 +22,11 @@ import {
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
-  @property() public lovelace?: Lovelace;
+  @property({ attribute: false }) public lovelace?: Lovelace;
 
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @property() private _switching?: boolean;
+  @internalProperty() private _switching?: boolean;
 
   private _hidden = localStorage.hide_demo_card;
 

demo/src/entrypoint.ts

@@ -1,3 +1,4 @@
+import "../../src/resources/safari-14-attachshadow-patch";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

demo/src/stubs/template.ts

@@ -6,4 +6,11 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       body: { message: "Template dev tool does not work in the demo." },
     })
   );
+  hass.mockWS("render_template", (msg, onChange) => {
+    onChange!({
+      result: msg.template,
+      listeners: { all: false, domains: [], entities: [], time: false },
+    });
+    return () => {};
+  });
 };

gallery/src/components/demo-cards.js

@@ -5,11 +5,16 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
 import "../../../src/components/ha-formfield";
 import "./demo-card";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 
 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;
@@ -24,6 +29,9 @@ class DemoCards extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
+        ha-formfield {
+          margin-right: 16px;
+        }
       </style>
       <app-toolbar>
         <div class="filters">
@@ -31,16 +39,21 @@ class DemoCards extends PolymerElement {
             <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 class="cards">
-        <template is="dom-repeat" items="[[configs]]">
-          <demo-card
-            config="[[item]]"
-            show-config="[[_showConfig]]"
-            hass="[[hass]]"
-          ></demo-card>
-        </template>
+      <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>
     `;
   }
@@ -59,6 +72,12 @@ class DemoCards extends PolymerElement {
   _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-more-info.js

@@ -2,8 +2,8 @@ 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/dialogs/more-info/controls/more-info-content";
 import "../../../src/state-summary/state-card-content";
+import "../../../src/dialogs/more-info/more-info-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {
@@ -16,15 +16,12 @@ class DemoMoreInfo extends PolymerElement {
 
         ha-card {
           width: 333px;
+          padding: 20px 24px;
         }
 
         state-card-content {
           display: block;
-          padding: 16px;
-        }
-
-        more-info-content {
-          padding: 0 16px;
+          margin-bottom: 16px;
         }
 
         pre {