Bumped version to 20210729.0

* Fix calculations

* max.. not min...

.eslintrc.json

@@ -28,64 +28,58 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "Polymer": true
   },
   "env": {
     "browser": true,
     "es6": true
   },
   "rules": {
-    "class-methods-use-this": 0,
-    "new-cap": 0,
-    "prefer-template": 0,
-    "object-shorthand": 0,
-    "func-names": 0,
-    "prefer-arrow-callback": 0,
-    "no-underscore-dangle": 0,
-    "strict": 0,
-    "prefer-spread": 0,
-    "no-plusplus": 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,
-    "no-nested-ternary": 0,
-    "prefer-destructuring": 0,
+    "class-methods-use-this": "off",
+    "new-cap": "off",
+    "prefer-template": "off",
+    "object-shorthand": "off",
+    "func-names": "off",
+    "no-underscore-dangle": "off",
+    "strict": "off",
+    "no-plusplus": "off",
+    "no-bitwise": "error",
+    "comma-dangle": "off",
+    "vars-on-top": "off",
+    "no-continue": "off",
+    "no-param-reassign": "off",
+    "no-multi-assign": "off",
+    "no-console": "error",
+    "radix": "off",
+    "no-alert": "off",
+    "no-nested-ternary": "off",
+    "prefer-destructuring": "off",
     "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": 0,
-    "import/order": 0,
-    "import/prefer-default-export": 0,
-    "import/no-unresolved": 0,
-    "import/no-cycle": 0,
+    "prefer-promise-reject-errors": "off",
+    "import/prefer-default-export": "off",
+    "import/no-default-export": "off",
+    "import/no-unresolved": "off",
+    "import/no-cycle": "off",
     "import/extensions": [
-      2,
+      "error",
       "ignorePackages",
       { "ts": "never", "js": "never" }
     ],
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-    "object-curly-newline": 0,
-    "default-case": 0,
-    "wc/no-self-class": 0,
-    "no-shadow": 0,
-    "@typescript-eslint/camelcase": 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-module-boundary-types": 0,
+    "object-curly-newline": "off",
+    "default-case": "off",
+    "wc/no-self-class": "off",
+    "no-shadow": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-shadow": ["error"],
     "@typescript-eslint/naming-convention": [
-      0,
+      "off",
       {
         "selector": "default",
         "format": ["camelCase", "snake_case"],
@@ -103,8 +97,20 @@
         "format": ["PascalCase"]
       }
     ],
-    "lit/attribute-value-entities": 0
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "unused-imports/no-unused-imports": "error",
+    "lit/attribute-value-entities": "off"
   },
-  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
+  "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"
 }

.github/workflows/ci.yaml

@@ -10,26 +10,21 @@ on:
       - dev
       - master
 
+env:
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=4096
+
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
@@ -42,51 +37,35 @@ jobs:
         run: yarn run lint:types
       - name: Run prettier
         run: yarn run lint:prettier
+      - name: Check for duplicate dependencies
+        run: yarn dedupe --check
   test:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
           CI: true
       - name: Run Mocha
-        run: npm run mocha
+        run: yarn run mocha
   build:
     runs-on: ubuntu-latest
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
@@ -101,20 +80,11 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/demo.yaml

@@ -4,26 +4,22 @@ on:
   push:
     branches:
       - dev
+
+env:
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=4096
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/release.yaml

@@ -6,9 +6,9 @@ on:
       - published
 
 env:
-  WHEELS_TAG: 3.8-alpine3.12
   PYTHON_VERSION: 3.8
-  NODE_VERSION: 12.1
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   release:
@@ -30,7 +30,15 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
 
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
           python3 -m pip install twine
@@ -64,6 +72,9 @@ jobs:
     strategy:
       matrix:
         arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.8-alpine3.12"
+          - "3.9-alpine3.13"
     steps:
       - name: Download requirements.txt
         uses: actions/download-artifact@v2
@@ -73,7 +84,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@master
         with:
-          tag: ${{ env.WHEELS_TAG }}
+          tag: ${{ matrix.tag }}
           arch: ${{ matrix.arch }}
           wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/translations.yaml

@@ -1,8 +1,6 @@
 name: Translations
 
 on:
-  schedule:
-    - cron: "30 0 * * *"
   push:
     branches:
       - dev
@@ -10,7 +8,7 @@ on:
       - src/translations/en.json
 
 env:
-  NODE_VERSION: 12
+  NODE_VERSION: 14
 
 jobs:
   upload:
@@ -20,46 +18,8 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v2
 
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
       - name: Upload Translations
         run: |
           export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
 
           ./script/translations_upload_base
-
-  download:
-    name: Download
-    needs: upload
-    if: github.event_name == 'schedule'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v2
-
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Download Translations
-        run: |
-          export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
-
-          npm install
-          ./script/translations_download
-
-      - name: Initialize git
-        uses: home-assistant/actions/helpers/git-init@master
-        with:
-          name: GitHub Action
-          email: github-action@users.noreply.github.com
-
-      - name: Update translation
-        run: |
-          git add translations
-          git commit -am "Translation update"
-          git push

.gitignore

@@ -1,10 +1,23 @@
+.DS_Store
+.reify-cache
+
+# build
 build
 build-translations/*
-node_modules/*
-npm-debug.log
-.DS_Store
 hass_frontend/*
-.reify-cache
+dist
+
+# yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+node_modules/*
+yarn-error.log
+npm-debug.log
 
 # Python stuff
 *.py[cod]
@@ -14,11 +27,8 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
@@ -31,9 +41,8 @@ src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
 
 # Home Assistant config

.mocharc.cjs

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

.nvmrc

@@ -1 +1 @@
-12.1
+14

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

@@ -0,0 +1,29 @@
+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();
+ }
+ async function init() {
+-    _ET = window.EventTarget;
+-    try {
+-        new _ET();
+-    }
+-    catch (_a) {
+-        _ET = (await import('event-target-shim')).EventTarget;
+-    }
+-    return (ET = _ET);
++  _ET = window.EventTarget;
++  try {
++    new _ET();
++  } catch (_a) {
++    _ET = (await import("event-target-shim")).default.EventTarget;
++  }
++  return (ET = _ET);
+ }

.yarn/patches/@polymer/polymer/pr-5569.patch

@@ -0,0 +1,34 @@
+diff --git a/lib/legacy/class.js b/lib/legacy/class.js
+index aee2511be1cd9bf900ee552bc98190c1631c57c0..f2f499d68bf52034cac9c28307c99e8ce6b8417d 100644
+--- a/lib/legacy/class.js
++++ b/lib/legacy/class.js
+@@ -304,17 +304,23 @@ function GenerateClassFromInfo(info, Base, behaviors) {
+       // only proceed if the generated class' prototype has not been registered.
+       const generatedProto = PolymerGenerated.prototype;
+       if (!generatedProto.hasOwnProperty(JSCompiler_renameProperty('__hasRegisterFinished', generatedProto))) {
+-        generatedProto.__hasRegisterFinished = true;
++        // make sure legacy lifecycle is called on the *element*'s prototype
++        // and not the generated class prototype; if the element has been
++        // extended, these are *not* the same.
++        const proto = Object.getPrototypeOf(this);
++        // Only set flag when generated prototype itself is registered,
++        // as this element may be extended from, and needs to run `registered`
++        // on all behaviors on the subclass as well.
++        if (proto === generatedProto) {
++          generatedProto.__hasRegisterFinished = true;
++        }
+         // ensure superclass is registered first.
+         super._registered();
+         // copy properties onto the generated class lazily if we're optimizing,
+-        if (legacyOptimizations) {
++        if (legacyOptimizations && !Object.hasOwnProperty(generatedProto, '__hasCopiedProperties')) {
++          generatedProto.__hasCopiedProperties = true;
+           copyPropertiesToProto(generatedProto);
+         }
+-        // make sure legacy lifecycle is called on the *element*'s prototype
+-        // and not the generated class prototype; if the element has been
+-        // extended, these are *not* the same.
+-        const proto = Object.getPrototypeOf(this);
+         let list = lifecycle.beforeRegister;
+         if (list) {
+           for (let i=0; i < list.length; i++) {

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-2.4.2.cjs

build-scripts/babel-plugins/inline-constants-plugin.js

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+
+// Currently only supports CommonJS modules, as require is synchronous. `import` would need babel running asynchronous.
+module.exports = function inlineConstants(babel, options, cwd) {
+  const t = babel.types;
+
+  if (!Array.isArray(options.modules)) {
+    throw new TypeError(
+      "babel-plugin-inline-constants: expected a `modules` array to be passed"
+    );
+  }
+
+  if (options.resolveExtensions && !Array.isArray(options.resolveExtensions)) {
+    throw new TypeError(
+      "babel-plugin-inline-constants: expected `resolveExtensions` to be an array"
+    );
+  }
+
+  const ignoreModuleNotFound = options.ignoreModuleNotFound;
+  const resolveExtensions = options.resolveExtensions;
+
+  const hasRelativeModules = options.modules.some(
+    (module) => module.startsWith(".") || module.startsWith("/")
+  );
+
+  const modules = Object.fromEntries(
+    options.modules.map((module) => {
+      const absolute = module.startsWith(".")
+        ? require.resolve(module, { paths: [cwd] })
+        : module;
+      // eslint-disable-next-line import/no-dynamic-require
+      return [absolute, require(absolute)];
+    })
+  );
+
+  const toLiteral = (value) => {
+    if (typeof value === "string") {
+      return t.stringLiteral(value);
+    }
+
+    if (typeof value === "number") {
+      return t.numericLiteral(value);
+    }
+
+    if (typeof value === "boolean") {
+      return t.booleanLiteral(value);
+    }
+
+    if (value === null) {
+      return t.nullLiteral();
+    }
+
+    throw new Error(
+      "babel-plugin-inline-constants: cannot handle non-literal `" + value + "`"
+    );
+  };
+
+  const resolveAbsolute = (value, state, resolveExtensionIndex) => {
+    if (!state.filename) {
+      throw new TypeError(
+        "babel-plugin-inline-constants: expected a `filename` to be set for files"
+      );
+    }
+
+    if (resolveExtensions && resolveExtensionIndex !== undefined) {
+      value += resolveExtensions[resolveExtensionIndex];
+    }
+
+    try {
+      return require.resolve(value, { paths: [path.dirname(state.filename)] });
+    } catch (error) {
+      if (
+        error.code === "MODULE_NOT_FOUND" &&
+        resolveExtensions &&
+        (resolveExtensionIndex === undefined ||
+          resolveExtensionIndex < resolveExtensions.length - 1)
+      ) {
+        const resolveExtensionIdx = (resolveExtensionIndex || -1) + 1;
+        return resolveAbsolute(value, state, resolveExtensionIdx);
+      }
+
+      if (error.code === "MODULE_NOT_FOUND" && ignoreModuleNotFound) {
+        return undefined;
+      }
+      throw error;
+    }
+  };
+
+  const importDeclaration = (p, state) => {
+    if (p.node.type !== "ImportDeclaration") {
+      return;
+    }
+    const absolute =
+      hasRelativeModules && p.node.source.value.startsWith(".")
+        ? resolveAbsolute(p.node.source.value, state)
+        : p.node.source.value;
+
+    if (!absolute || !(absolute in modules)) {
+      return;
+    }
+
+    const module = modules[absolute];
+
+    for (const specifier of p.node.specifiers) {
+      if (
+        specifier.type === "ImportDefaultSpecifier" &&
+        specifier.local &&
+        specifier.local.type === "Identifier"
+      ) {
+        if (!("default" in module)) {
+          throw new Error(
+            "babel-plugin-inline-constants: cannot access default export from `" +
+              p.node.source.value +
+              "`"
+          );
+        }
+
+        const variableValue = toLiteral(module.default);
+        const variable = t.variableDeclarator(
+          t.identifier(specifier.local.name),
+          variableValue
+        );
+
+        p.insertBefore({
+          type: "VariableDeclaration",
+          kind: "const",
+          declarations: [variable],
+        });
+      } else if (
+        specifier.type === "ImportSpecifier" &&
+        specifier.imported &&
+        specifier.imported.type === "Identifier" &&
+        specifier.local &&
+        specifier.local.type === "Identifier"
+      ) {
+        if (!(specifier.imported.name in module)) {
+          throw new Error(
+            "babel-plugin-inline-constants: cannot access `" +
+              specifier.imported.name +
+              "` from `" +
+              p.node.source.value +
+              "`"
+          );
+        }
+
+        const variableValue = toLiteral(module[specifier.imported.name]);
+        const variable = t.variableDeclarator(
+          t.identifier(specifier.local.name),
+          variableValue
+        );
+
+        p.insertBefore({
+          type: "VariableDeclaration",
+          kind: "const",
+          declarations: [variable],
+        });
+      } else {
+        throw new Error("Cannot handle specifier `" + specifier.type + "`");
+      }
+    }
+    p.remove();
+  };
+
+  return {
+    visitor: {
+      ImportDeclaration: importDeclaration,
+    },
+  };
+};

build-scripts/bundle.js

@@ -5,8 +5,6 @@ const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
 module.exports.ignorePackages = ({ latestBuild }) => [
-  // Bloats bundle and it's not used.
-  path.resolve(require.resolve("moment"), "../locale"),
   // Part of yaml.js and only used for !!js functions that we don't use
   require.resolve("esprima"),
 ];
@@ -20,7 +18,8 @@ module.exports.emptyPackages = ({ latestBuild }) =>
     require.resolve("@polymer/paper-styles/default-theme.js"),
     // Loads stuff from a CDN
     require.resolve("@polymer/font-roboto/roboto.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Compatibility not needed for latest builds
     latestBuild &&
       // wrapped in require.resolve so it blows up if file no longer exists
@@ -52,17 +51,29 @@ module.exports.terserOptions = (latestBuild) => ({
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
+  compact: false,
   presets: [
     !latestBuild && [
       "@babel/preset-env",
       {
         useBuiltIns: "entry",
-        corejs: "3.6",
+        corejs: "3.15",
+        bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
   ].filter(Boolean),
   plugins: [
+    [
+      path.resolve(
+        paths.polymer_dir,
+        "build-scripts/babel-plugins/inline-constants-plugin.js"
+      ),
+      {
+        modules: ["@mdi/js"],
+        ignoreModuleNotFound: true,
+      },
+    ],
     // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
     !latestBuild && [
       "@babel/plugin-proposal-object-rest-spread",
@@ -75,16 +86,16 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     "@babel/plugin-proposal-nullish-coalescing-operator",
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
     ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
     ["@babel/plugin-proposal-class-properties", { loose: true }],
   ].filter(Boolean),
+  exclude: [
+    // \\ for Windows, / for Mac OS and Linux
+    /node_modules[\\/]core-js/,
+    /node_modules[\\/]webpack[\\/]buildin/,
+  ],
 });
 
-// Are already ES5, cause warnings when babelified.
-module.exports.babelExclude = () => [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
-
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 

build-scripts/gulp/app.js

@@ -47,8 +47,8 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-app",
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
-    ...// Don't compress running tests
-    (env.isTest() ? [] : ["compress-app"]),
+    // Don't compress running tests
+    ...(env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/entry-html.js

@@ -302,15 +302,23 @@ gulp.task("gen-index-hassio-prod", async () => {
 
 function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
   fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
   fs.writeFileSync(
     path.resolve(paths.hassio_output_root, "entrypoint.js"),
     `
-try {
-  new Function("import('${latestEntrypoint}')")();
-} catch (err) {
+function loadES5() {
   var el = document.createElement('script');
   el.src = '${es5Entrypoint}';
   document.body.appendChild(el);
+}
+if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
+    loadES5();
+} else {
+  try {
+    new Function("import('${latestEntrypoint}')")();
+  } catch (err) {
+    loadES5();
+  }
 }
   `,
     { encoding: "utf-8" }

build-scripts/gulp/gather-static.js

@@ -2,7 +2,6 @@
 
 const gulp = require("gulp");
 const path = require("path");
-const cpx = require("cpx");
 const fs = require("fs-extra");
 const paths = require("../paths");
 
@@ -62,9 +61,12 @@ function copyLoaderJS(staticDir) {
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
-  cpx.copySync(
-    npmPath("roboto-fontface/fonts/roboto/*.woff2"),
-    staticPath("fonts/roboto")
+  fs.copySync(
+    npmPath("roboto-fontface/fonts/roboto/"),
+    staticPath("fonts/roboto/"),
+    {
+      filter: (src) => !src.includes(".") || src.endsWith(".woff2"),
+    }
   );
 }
 

build-scripts/gulp/webpack.js

@@ -1,4 +1,5 @@
 // Tasks to run webpack.
+const fs = require("fs");
 const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
@@ -18,6 +19,13 @@ const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: false }),
 ];
 
+const isWsl =
+  fs.existsSync("/proc/version") &&
+  fs
+    .readFileSync("/proc/version", "utf-8")
+    .toLocaleLowerCase()
+    .includes("microsoft");
+
 /**
  * @param {{
  *   compiler: import("webpack").Compiler,
@@ -78,8 +86,15 @@ const prodBuild = (conf) =>
 
 gulp.task("webpack-watch-app", () => {
   // This command will run forever because we don't close compiler
-  webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    { ignored: /build-translations/ },
+  webpack(
+    process.env.ES5
+      ? bothBuilds(createAppConfig, { isProdBuild: false })
+      : createAppConfig({ isProdBuild: false, latestBuild: true })
+  ).watch(
+    {
+      ignored: /build-translations/,
+      poll: isWsl,
+    },
     doneHandler()
   );
   gulp.watch(
@@ -137,7 +152,7 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({ ignored: /build-translations/ }, doneHandler());
+  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
 
   gulp.watch(
     path.join(paths.translations_src, "en.json"),

build-scripts/rollup.js

@@ -52,16 +52,11 @@ const createRollupConfig = ({
         browser: true,
         rootDir: paths.polymer_dir,
       }),
-      commonjs({
-        namedExports: {
-          "js-yaml": ["safeDump", "safeLoad"],
-        },
-      }),
+      commonjs(),
       json(),
       babel({
         ...bundle.babelOptions({ latestBuild }),
         extensions,
-        exclude: bundle.babelExclude(),
         babelHelpers: isWDS ? "inline" : "bundled",
       }),
       string({

build-scripts/webpack.js

@@ -47,15 +47,18 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
-            options: bundle.babelOptions({ latestBuild }),
+            options: {
+              ...bundle.babelOptions({ latestBuild }),
+              cacheDirectory: !isProdBuild,
+              cacheCompression: false,
+            },
           },
         },
         {
           test: /\.css$/,
-          use: "raw-loader",
+          type: "asset/source",
         },
       ],
     },
@@ -67,6 +70,8 @@ const createWebpackConfig = ({
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
+      moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
+      chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
       new WebpackManifestPlugin({
@@ -113,15 +118,6 @@ 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-labs/virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
-          )
-        ),
-        path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
-      ),
       !isProdBuild && new LogStartCompilePlugin(),
     ].filter(Boolean),
     resolve: {
@@ -134,15 +130,13 @@ const createWebpackConfig = ({
     },
     output: {
       filename: ({ chunk }) => {
-        if (!isProdBuild || dontHash.has(chunk.name)) {
+        if (!isProdBuild || isStatsBuild || dontHash.has(chunk.name)) {
           return `${chunk.name}.js`;
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
       chunkFilename:
-        isProdBuild && !isStatsBuild
-          ? "chunk.[chunkhash].js"
-          : "[name].chunk.js",
+        isProdBuild && !isStatsBuild ? "[chunkhash:8].js" : "[id].chunk.js",
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin

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

@@ -139,7 +139,7 @@
           Your authentication credentials or Home Assistant url are never sent
           to the Cloud. You can validate this behavior in
           <a
-            href="https://github.com/home-assistant/home-assistant-polymer/tree/dev/cast"
+            href="https://github.com/home-assistant/frontend/tree/dev/cast"
             target="_blank"
             >the source code</a
           >.

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -5,8 +5,8 @@ import {
 import { castContext } from "../cast_context";
 
 export const castDemoLovelace: () => LovelaceConfig = () => {
-  const touchSupported = castContext.getDeviceCapabilities()
-    .touch_input_supported;
+  const touchSupported =
+    castContext.getDeviceCapabilities().touch_input_supported;
   return {
     views: [
       {

demo/src/configs/arsaboo/lovelace.ts

@@ -113,8 +113,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {
@@ -196,8 +195,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {
@@ -277,8 +275,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {
@@ -315,8 +312,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {

demo/src/configs/demo-configs.ts

@@ -12,9 +12,8 @@ export const demoConfigs: Array<() => Promise<DemoConfig>> = [
 // eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfigIndex = 0;
 // eslint-disable-next-line import/no-mutable-exports
-export let selectedDemoConfig: Promise<DemoConfig> = demoConfigs[
-  selectedDemoConfigIndex
-]();
+export let selectedDemoConfig: Promise<DemoConfig> =
+  demoConfigs[selectedDemoConfigIndex]();
 
 export const setDemoConfig = async (
   hass: MockHomeAssistant,

demo/src/configs/teachingbirds/entities.ts

@@ -980,8 +980,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         icon: "mdi:account-off",
         custom_ui_state_card: "state-card-custom-ui",
         templates: {
-          icon:
-            "if (state === 'on') return 'mdi:account'; else if (state === 'off') return 'mdi:account-off';\n",
+          icon: "if (state === 'on') return 'mdi:account'; else if (state === 'off') return 'mdi:account-off';\n",
           icon_color:
             "if (state === 'on') return 'rgb(56, 150, 56)'; else if (state === 'off') return 'rgb(249, 251, 255)';\n",
         },
@@ -1005,8 +1004,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         icon: "mdi:account-multiple-minus",
         custom_ui_state_card: "state-card-custom-ui",
         templates: {
-          icon:
-            "if (state === 'on') return 'mdi:account-group'; else if (state === 'off') return 'mdi:account-multiple-minus';\n",
+          icon: "if (state === 'on') return 'mdi:account-group'; else if (state === 'off') return 'mdi:account-multiple-minus';\n",
           icon_color:
             "if (state === 'on') return 'rgb(56, 150, 56)'; else if (state === 'off') return 'rgb(249, 251, 255)';\n",
         },

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

@@ -19,7 +19,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @state() private _switching?: boolean;
+  @state() private _switching = false;
 
   private _hidden = localStorage.hide_demo_card;
 
@@ -27,12 +27,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return this._hidden ? 0 : 2;
   }
 
-  public setConfig(
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    config: LovelaceCardConfig
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-  ) {}
+  public setConfig(_config: LovelaceCardConfig) {}
 
   protected render(): TemplateResult {
     if (this._hidden) {

demo/src/entrypoint.ts

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

demo/src/stubs/history.ts

@@ -67,14 +67,7 @@ const incrementalUnits = ["clients", "queries", "ads"];
 export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockAPI(
     new RegExp("history/period/.+"),
-    (
-      hass,
-      // @ts-ignore
-      method,
-      path,
-      // @ts-ignore
-      parameters
-    ) => {
+    (hass, _method, path, _parameters) => {
       const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
       const entities = params.filter_entity_id.split(",");
 
@@ -95,7 +88,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
         const numberState = Number(state.state);
 
         if (isNaN(numberState)) {
-          // eslint-disable-next-line
+          // eslint-disable-next-line no-console
           console.log(
             "Ignoring state with unparsable state but with a unit",
             entityId,

demo/src/stubs/lovelace.ts

@@ -10,10 +10,9 @@ export const mockLovelace = (
   localizePromise: Promise<LocalizeFunc>
 ) => {
   hass.mockWS("lovelace/config", () =>
-    Promise.all([
-      selectedDemoConfig,
-      localizePromise,
-    ]).then(([config, localize]) => config.lovelace(localize))
+    Promise.all([selectedDemoConfig, localizePromise]).then(
+      ([config, localize]) => config.lovelace(localize)
+    )
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());

gallery/src/components/demo-card.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {
@@ -80,7 +80,7 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = this._createCardElement(safeLoad(config.config)[0]);
+    const el = this._createCardElement(load(config.config)[0]);
     card.appendChild(el);
     this._getSize(el);
   }

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

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -56,7 +56,7 @@ export class DemoAutomationDescribeAction extends LitElement {
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

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

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -26,7 +26,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
           (conf) => html`
             <div class="condition">
               <span>${describeCondition(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

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

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -29,7 +29,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
           (conf) => html`
             <div class="trigger">
               <span>${describeTrigger(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

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

@@ -2,12 +2,12 @@ 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 { 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 { customElement, property, state } from "lit/decorators";
 
 const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 

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

@@ -2,6 +2,8 @@ import { html, css, LitElement, TemplateResult } from "lit";
 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 { provideHass } from "../../../src/fake_data/provide_hass";
@@ -15,8 +17,6 @@ import type {
 } from "../../../src/panels/config/integrations/ha-config-integrations";
 import { DeviceRegistryEntry } from "../../../src/data/device_registry";
 import { EntityRegistryEntry } from "../../../src/data/entity_registry";
-import { classMap } from "lit/directives/class-map";
-import { customElement, property, state } from "lit/decorators";
 
 const createConfigEntry = (
   title: string,
@@ -28,10 +28,11 @@ const createConfigEntry = (
   title,
   source: "zeroconf",
   state: "loaded",
-  connection_class: "local_push",
   supports_options: false,
   supports_unload: true,
   disabled_by: null,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
   reason: null,
   ...override,
 });
@@ -64,6 +65,9 @@ const configPanelEntry = createConfigEntry("Config Panel", {
 const optionsFlowEntry = createConfigEntry("Options Flow", {
   supports_options: true,
 });
+const disabledPollingEntry = createConfigEntry("Disabled Polling", {
+  pref_disable_polling: true,
+});
 const setupErrorEntry = createConfigEntry("Setup Error", {
   state: "setup_error",
 });
@@ -136,6 +140,7 @@ const configEntries: Array<{
   { items: [loadedEntry] },
   { items: [configPanelEntry] },
   { items: [optionsFlowEntry] },
+  { items: [disabledPollingEntry] },
   { items: [nameAsDomainEntry] },
   { items: [longNameEntry] },
   { items: [longNonBreakingNameEntry] },

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

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import {
   css,
   CSSResultGroup,
@@ -11,7 +11,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
@@ -27,6 +27,7 @@ import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -38,6 +39,13 @@ import { hassioStyle } from "../../resources/hassio-style";
 
 const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
 
+const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
+  new Type("!secret", {
+    kind: "scalar",
+    construct: (data) => `!secret ${data}`,
+  }),
+]);
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -125,6 +133,7 @@ class HassioAddonConfig extends LitElement {
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
+                .yamlSchema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
           ${!this._yamlMode ||
@@ -259,6 +268,9 @@ class HassioAddonConfig extends LitElement {
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
+    const options: Record<string, unknown> = this._yamlMode
+      ? this._editor?.value
+      : this._options;
     const eventdata = {
       success: true,
       response: undefined,
@@ -269,8 +281,16 @@ class HassioAddonConfig extends LitElement {
     this._error = undefined;
 
     try {
+      const validation = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug,
+        options
+      );
+      if (!validation.valid) {
+        throw Error(validation.message);
+      }
       await setHassioAddonOption(this.hass, this.addon.slug, {
-        options: this._yamlMode ? this._editor?.value : this._options,
+        options,
       });
 
       this._configHasChanged = false;
@@ -308,10 +328,6 @@ class HassioAddonConfig extends LitElement {
           color: var(--error-color);
           margin-top: 16px;
         }
-        iron-autogrow-textarea {
-          width: 100%;
-          font-family: var(--code-font-family, monospace);
-        }
         .syntaxerror {
           color: var(--error-color);
         }

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -2,6 +2,7 @@ import "../../../../src/components/ha-card";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
+import { customElement, property, state } from "lit/decorators";
 import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
@@ -12,7 +13,6 @@ import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import { customElement, property, state } from "lit/decorators";
 
 @customElement("hassio-addon-documentation-tab")
 class HassioAddonDocumentationDashboard extends LitElement {

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

@@ -892,10 +892,19 @@ class HassioAddonInfo extends LitElement {
 
   private async _openChangelog(): Promise<void> {
     try {
-      const content = await fetchHassioAddonChangelog(
-        this.hass,
-        this.addon.slug
-      );
+      let content = await fetchHassioAddonChangelog(this.hass, this.addon.slug);
+      if (
+        content.includes(`# ${this.addon.version}`) &&
+        content.includes(`# ${this.addon.version_latest}`)
+      ) {
+        const newcontent = content.split(`# ${this.addon.version}`)[0];
+        if (newcontent.includes(`# ${this.addon.version_latest}`)) {
+          // Only change the content if the new version still exist
+          // if the changelog does not have the newests version on top
+          // this will not be true, and we don't modify the content
+          content = newcontent;
+        }
+      }
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("addon.dashboard.changelog"),
         content,

hassio/src/components/hassio-upload-snapshot.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";

hassio/src/components/supervisor-formfield-label.ts

@@ -29,7 +29,6 @@ class SupervisorFormfieldLabel extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        cursor: pointer;
         display: flex;
         align-items: center;
       }

hassio/src/components/supervisor-metric.ts

@@ -64,6 +64,7 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        flex-shrink: 0;
       }
     `;
   }

hassio/src/components/supervisor-snapshot-content.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { formatDate } from "../../../src/common/datetime/format_date";
 import { formatDateTime } from "../../../src/common/datetime/format_date_time";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-radio";
@@ -44,6 +45,9 @@ const _computeFolders = (folders): CheckboxItem[] => {
   if (folders.includes("share")) {
     list.push({ slug: "share", name: "Share", checked: false });
   }
+  if (folders.includes("media")) {
+    list.push({ slug: "media", name: "Media", checked: false });
+  }
   if (folders.includes("addons/local")) {
     list.push({ slug: "addons/local", name: "Local add-ons", checked: false });
   }
@@ -64,6 +68,8 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorSnapshotContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property() public localize?: LocalizeFunc;
+
   @property({ attribute: false }) public supervisor?: Supervisor;
 
   @property({ attribute: false }) public snapshot?: HassioSnapshotDetail;
@@ -78,10 +84,14 @@ export class SupervisorSnapshotContent extends LitElement {
 
   @property({ type: Boolean }) public snapshotHasPassword = false;
 
+  @property({ type: Boolean }) public onboarding = false;
+
   @property() public snapshotName = "";
 
   @property() public snapshotPassword = "";
 
+  @property() public confirmSnapshotPassword = "";
+
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
     if (!this.hasUpdated) {
@@ -101,8 +111,12 @@ export class SupervisorSnapshotContent extends LitElement {
     }
   }
 
+  private _localize = (string: string) =>
+    this.supervisor?.localize(`snapshot.${string}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${string}`);
+
   protected render(): TemplateResult {
-    if (!this.supervisor) {
+    if (!this.onboarding && !this.supervisor) {
       return html``;
     }
     const foldersSection =
@@ -114,14 +128,16 @@ export class SupervisorSnapshotContent extends LitElement {
       ${this.snapshot
         ? html`<div class="details">
             ${this.snapshot.type === "full"
-              ? this.supervisor.localize("snapshot.full_snapshot")
-              : this.supervisor.localize("snapshot.partial_snapshot")}
+              ? this._localize("full_snapshot")
+              : this._localize("partial_snapshot")}
             (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
-            ${formatDateTime(new Date(this.snapshot.date), this.hass.locale)}
+            ${this.hass
+              ? formatDateTime(new Date(this.snapshot.date), this.hass.locale)
+              : this.snapshot.date}
           </div>`
         : html`<paper-input
             name="snapshotName"
-            .label=${this.supervisor.localize("snapshot.name")}
+            .label=${this.supervisor?.localize("snapshot.name") || "Name"}
             .value=${this.snapshotName}
             @value-changed=${this._handleTextValueChanged}
           >
@@ -129,13 +145,11 @@ export class SupervisorSnapshotContent extends LitElement {
       ${!this.snapshot || this.snapshot.type === "full"
         ? html`<div class="sub-header">
               ${!this.snapshot
-                ? this.supervisor.localize("snapshot.type")
-                : this.supervisor.localize("snapshot.select_type")}
+                ? this._localize("type")
+                : this._localize("select_type")}
             </div>
             <div class="snapshot-types">
-              <ha-formfield
-                .label=${this.supervisor.localize("snapshot.full_snapshot")}
-              >
+              <ha-formfield .label=${this._localize("full_snapshot")}>
                 <ha-radio
                   @change=${this._handleRadioValueChanged}
                   value="full"
@@ -144,9 +158,7 @@ export class SupervisorSnapshotContent extends LitElement {
                 >
                 </ha-radio>
               </ha-formfield>
-              <ha-formfield
-                .label=${this.supervisor!.localize("snapshot.partial_snapshot")}
-              >
+              <ha-formfield .label=${this._localize("partial_snapshot")}>
                 <ha-radio
                   @change=${this._handleRadioValueChanged}
                   value="partial"
@@ -157,9 +169,9 @@ export class SupervisorSnapshotContent extends LitElement {
               </ha-formfield>
             </div>`
         : ""}
-      ${this.snapshot && this.snapshotType === "partial"
-        ? html`
-            ${this.snapshot.homeassistant
+      ${this.snapshotType === "partial"
+        ? html`<div class="partial-picker">
+            ${this.snapshot && this.snapshot.homeassistant
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
@@ -179,15 +191,11 @@ export class SupervisorSnapshotContent extends LitElement {
                   </ha-formfield>
                 `
               : ""}
-          `
-        : ""}
-      ${this.snapshotType === "partial"
-        ? html`
             ${foldersSection?.templates.length
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor.localize("snapshot.folders")}
+                      .label=${this._localize("folders")}
                       .iconPath=${mdiFolder}
                     >
                     </supervisor-formfield-label>`}
@@ -207,7 +215,7 @@ export class SupervisorSnapshotContent extends LitElement {
               ? html`
                   <ha-formfield
                     .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor.localize("snapshot.addons")}
+                      .label=${this._localize("addons")}
                       .iconPath=${mdiPuzzle}
                     >
                     </supervisor-formfield-label>`}
@@ -223,29 +231,44 @@ export class SupervisorSnapshotContent extends LitElement {
                   <div class="section-content">${addonsSection.templates}</div>
                 `
               : ""}
-          `
+          </div> `
+        : ""}
+      ${this.snapshotType === "partial" &&
+      (!this.snapshot || this.snapshotHasPassword)
+        ? html`<hr />`
         : ""}
       ${!this.snapshot
         ? html`<ha-formfield
-            .label=${this.supervisor.localize("snapshot.password_protection")}
+            class="password"
+            .label=${this._localize("password_protection")}
           >
             <ha-checkbox
               .checked=${this.snapshotHasPassword}
               @change=${this._toggleHasPassword}
             >
-            </ha-checkbox
-          ></ha-formfield>`
+            </ha-checkbox>
+          </ha-formfield>`
         : ""}
       ${this.snapshotHasPassword
         ? html`
             <paper-input
-              .label=${this.supervisor.localize("snapshot.password")}
+              .label=${this._localize("password")}
               type="password"
               name="snapshotPassword"
               .value=${this.snapshotPassword}
               @value-changed=${this._handleTextValueChanged}
             >
             </paper-input>
+            ${!this.snapshot
+              ? html` <paper-input
+                  .label=${this.supervisor?.localize("confirm_password")}
+                  type="password"
+                  name="confirmSnapshotPassword"
+                  .value=${this.confirmSnapshotPassword}
+                  @value-changed=${this._handleTextValueChanged}
+                >
+                </paper-input>`
+              : ""}
           `
         : ""}
     `;
@@ -253,21 +276,24 @@ export class SupervisorSnapshotContent extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-checkbox {
-        --mdc-checkbox-touch-target-size: 16px;
+      .partial-picker ha-formfield {
         display: block;
-        margin: 4px 12px 8px 0;
       }
-      ha-formfield {
-        display: contents;
+      .partial-picker ha-checkbox {
+        --mdc-checkbox-touch-target-size: 32px;
+      }
+      .partial-picker {
+        display: block;
+        margin: 0px -6px;
       }
       supervisor-formfield-label {
         display: inline-flex;
         align-items: center;
       }
-      paper-input[type="password"] {
-        display: block;
-        margin: 4px 0 4px 16px;
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
       }
       .details {
         color: var(--secondary-text-color);
@@ -275,13 +301,15 @@ export class SupervisorSnapshotContent extends LitElement {
       .section-content {
         display: flex;
         flex-direction: column;
-        margin-left: 16px;
+        margin-left: 30px;
       }
-      .security {
-        margin-top: 16px;
+      ha-formfield.password {
+        display: block;
+        margin: 0 -14px -16px;
       }
       .snapshot-types {
         display: flex;
+        margin-left: -13px;
       }
       .sub-header {
         margin-top: 8px;
@@ -300,6 +328,9 @@ export class SupervisorSnapshotContent extends LitElement {
 
     if (this.snapshotHasPassword) {
       data.password = this.snapshotPassword;
+      if (!this.snapshot) {
+        data.confirm_password = this.confirmSnapshotPassword;
+      }
     }
 
     if (this.snapshotType === "full") {
@@ -331,7 +362,7 @@ export class SupervisorSnapshotContent extends LitElement {
     const addons =
       section === "addons"
         ? new Map(
-            this.supervisor!.addon.addons.map((item) => [item.slug, item])
+            this.supervisor?.addon.addons.map((item) => [item.slug, item])
           )
         : undefined;
     let checkedItems = 0;
@@ -341,6 +372,7 @@ export class SupervisorSnapshotContent extends LitElement {
           .label=${item.name}
           .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
           .imageUrl=${section === "addons" &&
+          !this.onboarding &&
           atLeastVersion(this.hass.config.version, 0, 105) &&
           addons?.get(item.slug)?.icon
             ? `/api/hassio/addons/${item.slug}/icon`

hassio/src/dashboard/hassio-update.ts

@@ -86,7 +86,7 @@ export class HassioUpdate extends LitElement {
             "hassio/supervisor/update",
             `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
           )}
-          ${this.supervisor.host.features.includes("hassos")
+          ${this.supervisor.host.features.includes("haos")
             ? this._renderUpdateCard(
                 "Operating System",
                 "os",

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -0,0 +1,194 @@
+import { mdiClose } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/common/search/search-input";
+import { compare } from "../../../../src/common/string/compare";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-expansion-panel";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { dump } from "../../../../src/resources/js-yaml-dump";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
+
+const _filterDevices = memoizeOne(
+  (showAdvanced: boolean, hardware: HassioHardwareInfo, filter: string) =>
+    hardware.devices
+      .filter(
+        (device) =>
+          (showAdvanced ||
+            ["tty", "gpio", "input"].includes(device.subsystem)) &&
+          (device.by_id?.toLowerCase().includes(filter) ||
+            device.name.toLowerCase().includes(filter) ||
+            device.dev_path.toLocaleLowerCase().includes(filter) ||
+            JSON.stringify(device.attributes)
+              .toLocaleLowerCase()
+              .includes(filter))
+      )
+      .sort((a, b) => compare(a.name, b.name))
+);
+
+@customElement("dialog-hassio-hardware")
+class HassioHardwareDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: HassioHardwareDialogParams;
+
+  @state() private _filter?: string;
+
+  public showDialog(params: HassioHardwareDialogParams) {
+    this._dialogParams = params;
+  }
+
+  public closeDialog() {
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+
+    const devices = _filterDevices(
+      this.hass.userData?.showAdvanced || false,
+      this._dialogParams.hardware,
+      (this._filter || "").toLowerCase()
+    );
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${true}
+      >
+        <div class="header" slot="heading">
+          <h2>
+            ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
+          </h2>
+          <mwc-icon-button dialogAction="close">
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          </mwc-icon-button>
+          <search-input
+            autofocus
+            no-label-float
+            .filter=${this._filter}
+            @value-changed=${this._handleSearchChange}
+            .label=${this._dialogParams.supervisor.localize(
+              "dialog.hardware.search"
+            )}
+          >
+          </search-input>
+        </div>
+
+        ${devices.map(
+          (device) =>
+            html`<ha-expansion-panel
+              .header=${device.name}
+              .secondary=${device.by_id || undefined}
+              outlined
+            >
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.subsystem"
+                  )}:
+                </span>
+                <span>${device.subsystem}</span>
+              </div>
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.device_path"
+                  )}:
+                </span>
+                <code>${device.dev_path}</code>
+              </div>
+              ${device.by_id
+                ? html` <div class="device-property">
+                    <span>
+                      ${this._dialogParams!.supervisor.localize(
+                        "dialog.hardware.id"
+                      )}:
+                    </span>
+                    <code>${device.by_id}</code>
+                  </div>`
+                : ""}
+              <div class="attributes">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.attributes"
+                  )}:
+                </span>
+                <pre>${dump(device.attributes, { indent: 2 })}</pre>
+              </div>
+            </ha-expansion-panel>`
+        )}
+      </ha-dialog>
+    `;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        mwc-icon-button {
+          position: absolute;
+          right: 16px;
+          top: 10px;
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        h2 {
+          margin: 18px 42px 0 18px;
+          color: var(--primary-text-color);
+        }
+
+        ha-expansion-panel {
+          margin: 4px 0;
+        }
+        pre,
+        code {
+          background-color: var(--markdown-code-background-color, none);
+          border-radius: 3px;
+        }
+        pre {
+          padding: 16px;
+          overflow: auto;
+          line-height: 1.45;
+          font-family: var(--code-font-family, monospace);
+        }
+        code {
+          font-size: 85%;
+          padding: 0.2em 0.4em;
+        }
+        search-input {
+          margin: 0 16px;
+          display: block;
+        }
+        .device-property {
+          display: flex;
+          justify-content: space-between;
+        }
+        .attributes {
+          margin-top: 12px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-hardware": HassioHardwareDialog;
+  }
+}

hassio/src/dialogs/hardware/show-dialog-hassio-hardware.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioHardwareDialogParams {
+  supervisor: Supervisor;
+  hardware: HassioHardwareInfo;
+}
+
+export const showHassioHardwareDialog = (
+  element: HTMLElement,
+  dialogParams: HassioHardwareDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-hardware",
+    dialogImport: () => import("./dialog-hassio-hardware"),
+    dialogParams,
+  });
+};

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -61,10 +61,6 @@ class HassioMarkdownDialog extends LitElement {
         app-toolbar [main-title] {
           margin-left: 16px;
         }
-        paper-checkbox {
-          display: block;
-          margin: 4px;
-        }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-paper-dialog {
             max-height: 100%;

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -41,7 +41,8 @@ const IP_VERSIONS = ["ipv4", "ipv6"];
 @customElement("dialog-hassio-network")
 export class DialogHassioNetwork
   extends LitElement
-  implements HassDialog<HassioNetworkDialogParams> {
+  implements HassDialog<HassioNetworkDialogParams>
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
@@ -107,7 +108,7 @@ export class DialogHassioNetwork
             </mwc-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html` <mwc-tab-bar
+            ? html`<mwc-tab-bar
                 .activeIndex=${this._curTabIndex}
                 @MDCTabBar:activated=${this._handleTabActivated}
                 >${this._interfaces.map(
@@ -492,7 +493,7 @@ export class DialogHassioNetwork
   }
 
   private _handleRadioValueChangedAp(ev: CustomEvent): void {
-    const value = ((ev.target as any).value as string) as
+    const value = (ev.target as any).value as string as
       | "open"
       | "wep"
       | "wpa-psk";

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -45,7 +45,7 @@ class HassioRegistriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -161,9 +161,9 @@ class HassioRegistriesDialog extends LitElement {
 
   public focus(): void {
     this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
+      (
+        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+      )?.focus()
     );
   }
 
@@ -244,9 +244,6 @@ class HassioRegistriesDialog extends LitElement {
         mwc-list-item span[slot="secondary"] {
           color: var(--secondary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -67,7 +67,7 @@ class HassioRepositoriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -150,9 +150,6 @@ class HassioRepositoriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
         ha-circular-progress {
           display: block;
           margin: 32px;
@@ -164,9 +161,9 @@ class HassioRepositoriesDialog extends LitElement {
 
   public focus() {
     this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
+      (
+        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+      )?.focus()
     );
   }
 

hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts

@@ -48,7 +48,8 @@ class HassioCreateSnapshotDialog extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
+        scrimClickAction
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this._dialogParams.supervisor.localize("snapshot.create_snapshot")
@@ -94,16 +95,25 @@ class HassioCreateSnapshotDialog extends LitElement {
     this._creatingSnapshot = true;
 
     this._error = "";
-    if (
-      this._snapshotContent.snapshotHasPassword &&
-      !this._snapshotContent.snapshotPassword.length
-    ) {
+    if (snapshotDetails.password && !snapshotDetails.password.length) {
       this._error = this._dialogParams!.supervisor.localize(
         "snapshot.enter_password"
       );
       this._creatingSnapshot = false;
       return;
     }
+    if (
+      snapshotDetails.password &&
+      snapshotDetails.password !== snapshotDetails.confirm_password
+    ) {
+      this._error = this._dialogParams!.supervisor.localize(
+        "snapshot.passwords_not_matching"
+      );
+      this._creatingSnapshot = false;
+      return;
+    }
+
+    delete snapshotDetails.confirm_password;
 
     try {
       if (this._snapshotContent.snapshotType === "full") {

hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts

@@ -12,7 +12,8 @@ import { HassioSnapshotUploadDialogParams } from "./show-dialog-snapshot-upload"
 @customElement("dialog-hassio-snapshot-upload")
 export class DialogHassioSnapshotUpload
   extends LitElement
-  implements HassDialog<HassioSnapshotUploadDialogParams> {
+  implements HassDialog<HassioSnapshotUploadDialogParams>
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: HassioSnapshotUploadDialogParams;

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -1,12 +1,13 @@
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical } from "@mdi/js";
+import { mdiClose, mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { slugify } from "../../../../src/common/string/slugify";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
-import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -21,6 +22,7 @@ import {
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-snapshot-content";
 import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
@@ -28,7 +30,8 @@ import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
 @customElement("dialog-hassio-snapshot")
 class HassioSnapshotDialog
   extends LitElement
-  implements HassDialog<HassioSnapshotDialogParams> {
+  implements HassDialog<HassioSnapshotDialogParams>
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _error?: string;
@@ -63,15 +66,26 @@ class HassioSnapshotDialog
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
-        .heading=${createCloseHeading(this.hass, this._computeName)}
+        scrimClickAction
+        @closed=${this.closeDialog}
+        .heading=${true}
       >
+        <div slot="heading">
+          <ha-header-bar>
+            <span slot="title">${this._snapshot.name}</span>
+            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>
+          </ha-header-bar>
+        </div>
         ${this._restoringSnapshot
           ? html` <ha-circular-progress active></ha-circular-progress>`
           : html`<supervisor-snapshot-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}
               .snapshot=${this._snapshot}
+              .onboarding=${this._dialogParams.onboarding || false}
+              .localize=${this._dialogParams.localize}
             >
             </supervisor-snapshot-content>`}
         ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
@@ -84,18 +98,20 @@ class HassioSnapshotDialog
           Restore
         </mwc-button>
 
-        <ha-button-menu
-          fixed
-          slot="primaryAction"
-          @action=${this._handleMenuAction}
-          @closing=${(ev: Event) => ev.stopPropagation()}
-        >
-          <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-          </mwc-icon-button>
-          <mwc-list-item>Download Snapshot</mwc-list-item>
-          <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
-        </ha-button-menu>
+        ${!this._dialogParams.onboarding
+          ? html`<ha-button-menu
+              fixed
+              slot="primaryAction"
+              @action=${this._handleMenuAction}
+              @closed=${(ev: Event) => ev.stopPropagation()}
+            >
+              <mwc-icon-button slot="trigger" alt="menu">
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-list-item>Download Snapshot</mwc-list-item>
+              <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
+            </ha-button-menu>`
+          : ""}
       </ha-dialog>
     `;
   }
@@ -112,6 +128,12 @@ class HassioSnapshotDialog
           display: block;
           text-align: center;
         }
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+          display: block;
+        }
       `,
     ];
   }
@@ -276,8 +298,7 @@ class HassioSnapshotDialog
     if (window.location.href.includes("ui.nabu.casa")) {
       const confirm = await showConfirmationDialog(this, {
         title: "Potential slow download",
-        text:
-          "Downloading snapshots over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
+        text: "Downloading snapshots over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
         confirmText: "continue",
         dismissText: "cancel",
       });
@@ -286,13 +307,11 @@ class HassioSnapshotDialog
       }
     }
 
-    const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
-    const a = document.createElement("a");
-    a.href = signedPath.path;
-    a.download = `Hass_io_${name}.tar`;
-    this.shadowRoot!.appendChild(a);
-    a.click();
-    this.shadowRoot!.removeChild(a);
+    fileDownload(
+      this,
+      signedPath.path,
+      `home_assistant_snapshot_${slugify(this._computeName)}.tar`
+    );
   }
 
   private get _computeName() {

hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot.ts

@@ -1,4 +1,5 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { LocalizeFunc } from "../../../../src/common/translations/localize";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 export interface HassioSnapshotDialogParams {
@@ -6,6 +7,7 @@ export interface HassioSnapshotDialogParams {
   onDelete?: () => void;
   onboarding?: boolean;
   supervisor?: Supervisor;
+  localize?: LocalizeFunc;
 }
 
 export const showHassioSnapshotDialog = (

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -49,9 +49,9 @@ class DialogSupervisorUpdate extends LitElement {
 
   public focus(): void {
     this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
+      (
+        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+      )?.focus()
     );
   }
 
@@ -158,8 +158,8 @@ class DialogSupervisorUpdate extends LitElement {
     } catch (err) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
+        this._action = null;
       }
-      this._action = null;
       return;
     }
 

hassio/src/hassio-main.ts

@@ -103,27 +103,25 @@ export class HassioMain extends SupervisorBaseElement {
 
   private _applyTheme() {
     let themeName: string;
-    let themeSettings:
-      | Partial<HomeAssistant["selectedThemeSettings"]>
-      | undefined;
+    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedThemeSettings?.theme ||
+        this.hass.selectedTheme?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      themeSettings = this.hass.selectedThemeSettings;
+      themeSettings = this.hass.selectedTheme;
       if (themeSettings?.dark === undefined) {
         themeSettings = {
-          ...this.hass.selectedThemeSettings,
+          ...this.hass.selectedTheme,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedThemeSettings as unknown) as string) ||
+        (this.hass.selectedTheme as unknown as string) ||
         this.hass.themes.default_theme;
     }
 

hassio/src/hassio-my-redirect.ts

@@ -1,19 +1,19 @@
-import { html, LitElement, TemplateResult } from "lit";
 import { sanitizeUrl } from "@braintree/sanitize-url";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { navigate } from "../../src/common/navigate";
 import {
   createSearchParam,
   extractSearchParamsObject,
 } from "../../src/common/url/search-params";
+import { Supervisor } from "../../src/data/supervisor/supervisor";
 import "../../src/layouts/hass-error-screen";
 import {
   ParamType,
   Redirect,
   Redirects,
 } from "../../src/panels/my/ha-panel-my";
-import { navigate } from "../../src/common/navigate";
 import { HomeAssistant, Route } from "../../src/types";
-import { Supervisor } from "../../src/data/supervisor/supervisor";
-import { customElement, property, state } from "lit/decorators";
 
 const REDIRECTS: Redirects = {
   supervisor: {

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -97,16 +97,23 @@ class HassioIngressView extends LitElement {
             title: requestedAddon,
           });
           await nextRender();
-          history.back();
+          navigate("/hassio/store", { replace: true });
           return;
         }
-        if (!addonInfo.ingress) {
+        if (!addonInfo.version) {
+          await showAlertDialog(this, {
+            text: this.supervisor.localize("my.error_addon_not_installed"),
+            title: addonInfo.name,
+          });
+          await nextRender();
+          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
+        } else if (!addonInfo.ingress) {
           await showAlertDialog(this, {
             text: this.supervisor.localize("my.error_addon_no_ingress"),
             title: addonInfo.name,
           });
           await nextRender();
-          history.back();
+          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
         } else {
           navigate(`/hassio/ingress/${addonInfo.slug}`, { replace: true });
         }

hassio/src/snapshots/hassio-snapshots.ts

@@ -1,15 +1,17 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
+  css,
   CSSResultGroup,
   html,
   LitElement,
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import relativeTime from "../../../src/common/datetime/relative_time";
@@ -17,18 +19,25 @@ import { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   fetchHassioSnapshots,
   friendlyFolderName,
   HassioSnapshot,
   reloadHassioSnapshots,
+  removeSnapshot,
 } from "../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-tabs-subpage-data-table";
+import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showHassioCreateSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-create-snapshot";
@@ -49,10 +58,15 @@ export class HassioSnapshots extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  private _firstUpdatedCalled = false;
+  @state() private _selectedSnapshots: string[] = [];
 
   @state() private _snapshots?: HassioSnapshot[] = [];
 
+  @query("hass-tabs-subpage-data-table", true)
+  private _dataTable!: HaTabsSubpageDataTable;
+
+  private _firstUpdatedCalled = false;
+
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass && this._firstUpdatedCalled) {
@@ -153,7 +167,9 @@ export class HassioSnapshots extends LitElement {
         .data=${this._snapshotData(this._snapshots || [])}
         id="slug"
         @row-click=${this._handleRowClicked}
+        @selection-changed=${this._handleSelectionChanged}
         clickable
+        selectable
         hasFab
         main-page
         supervisor
@@ -176,6 +192,45 @@ export class HassioSnapshots extends LitElement {
             : ""}
         </ha-button-menu>
 
+        ${this._selectedSnapshots.length
+          ? html`<div
+              class=${classMap({
+                "header-toolbar": this.narrow,
+                "table-header": !this.narrow,
+              })}
+              slot="header"
+            >
+              <p class="selected-txt">
+                ${this.supervisor.localize("snapshot.selected", {
+                  number: this._selectedSnapshots.length,
+                })}
+              </p>
+              <div class="header-btns">
+                ${!this.narrow
+                  ? html`
+                      <mwc-button
+                        @click=${this._deleteSelected}
+                        class="warning"
+                      >
+                        ${this.supervisor.localize("snapshot.delete_selected")}
+                      </mwc-button>
+                    `
+                  : html`
+                      <mwc-icon-button
+                        id="delete-btn"
+                        class="warning"
+                        @click=${this._deleteSelected}
+                      >
+                        <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                      </mwc-icon-button>
+                      <paper-tooltip animation-delay="0" for="delete-btn">
+                        ${this.supervisor.localize("snapshot.delete_selected")}
+                      </paper-tooltip>
+                    `}
+              </div>
+            </div> `
+          : ""}
+
         <ha-fab
           slot="fab"
           @click=${this._createSnapshot}
@@ -199,6 +254,12 @@ export class HassioSnapshots extends LitElement {
     }
   }
 
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selectedSnapshots = ev.detail.value;
+  }
+
   private _showUploadSnapshotDialog() {
     showSnapshotUploadDialog(this, {
       showSnapshot: (slug: string) =>
@@ -216,6 +277,35 @@ export class HassioSnapshots extends LitElement {
     this._snapshots = await fetchHassioSnapshots(this.hass);
   }
 
+  private async _deleteSelected() {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.supervisor.localize("snapshot.delete_snapshot_title"),
+      text: this.supervisor.localize("snapshot.delete_snapshot_text", {
+        number: this._selectedSnapshots.length,
+      }),
+      confirmText: this.supervisor.localize("snapshot.delete_snapshot_confirm"),
+    });
+
+    if (!confirm) {
+      return;
+    }
+
+    try {
+      await Promise.all(
+        this._selectedSnapshots.map((slug) => removeSnapshot(this.hass, slug))
+      );
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.supervisor.localize("snapshot.failed_to_delete"),
+        text: extractApiErrorMessage(err),
+      });
+      return;
+    }
+    await reloadHassioSnapshots(this.hass);
+    this._snapshots = await fetchHassioSnapshots(this.hass);
+    this._dataTable.clearSelection();
+  }
+
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const slug = ev.detail.id;
     showHassioSnapshotDialog(this, {
@@ -244,7 +334,45 @@ export class HassioSnapshots extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyle, hassioStyle];
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .table-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 58px;
+          border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        }
+        .header-toolbar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: var(--secondary-text-color);
+          position: relative;
+          top: -4px;
+        }
+        .selected-txt {
+          font-weight: bold;
+          padding-left: 16px;
+          color: var(--primary-text-color);
+        }
+        .table-header .selected-txt {
+          margin-top: 20px;
+        }
+        .header-toolbar .selected-txt {
+          font-size: 16px;
+        }
+        .header-toolbar .header-btns {
+          margin-right: -12px;
+        }
+        .header-btns > mwc-button,
+        .header-btns > mwc-icon-button {
+          margin: 8px;
+        }
+      `,
+    ];
   }
 }
 

hassio/src/supervisor-base-element.ts

@@ -86,10 +86,8 @@ export class SupervisorBaseElement extends urlSyncMixin(
         const unsubs = Object.keys(this._unsubs);
         for (const collection of Object.keys(this._collections)) {
           if (!unsubs.includes(collection)) {
-            this._unsubs[collection] = this._collections[
-              collection
-            ].subscribe((data) =>
-              this._updateSupervisor({ [collection]: data })
+            this._unsubs[collection] = this._collections[collection].subscribe(
+              (data) => this._updateSupervisor({ [collection]: data })
             );
           }
         }

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

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { safeDump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -41,8 +40,8 @@ import {
   roundWithOneDecimal,
 } from "../../../src/util/calculate";
 import "../components/supervisor-metric";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
+import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-host-info")
@@ -114,7 +113,7 @@ class HassioHostInfo extends LitElement {
                   `
                 : ""}
             </ha-settings-row>
-            ${!this.supervisor.host.features.includes("hassos")
+            ${!this.supervisor.host.features.includes("haos")
               ? html`<ha-settings-row>
                   <span slot="heading">
                     ${this.supervisor.localize("system.host.docker_version")}
@@ -191,7 +190,7 @@ class HassioHostInfo extends LitElement {
             <mwc-list-item>
               ${this.supervisor.localize("system.host.hardware")}
             </mwc-list-item>
-            ${this.supervisor.host.features.includes("hassos")
+            ${this.supervisor.host.features.includes("haos")
               ? html`<mwc-list-item>
                   ${this.supervisor.localize("system.host.import_from_usb")}
                 </mwc-list-item>`
@@ -229,20 +228,19 @@ class HassioHostInfo extends LitElement {
   }
 
   private async _showHardware(): Promise<void> {
+    let hardware;
     try {
-      const content = await fetchHassioHardwareInfo(this.hass);
-      showHassioMarkdownDialog(this, {
-        title: this.supervisor.localize("system.host.hardware"),
-        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
-      });
+      hardware = await fetchHassioHardwareInfo(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
+      await showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_get_hardware_list"
         ),
         text: extractApiErrorMessage(err),
       });
+      return;
     }
+    showHassioHardwareDialog(this, { supervisor: this.supervisor, hardware });
   }
 
   private async _hostReboot(ev: CustomEvent): Promise<void> {

lint-staged.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  "*.ts": () => "tsc -p tsconfig.json",
-  "*.{js,ts}": "eslint --fix",
+  "*.{js,ts}": 'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
   "!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
 };

package.json

@@ -16,13 +16,13 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
+    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
     "test": "yarn run lint && yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.0",
+    "@braintree/sanitize-url": "^5.0.1",
     "@codemirror/commands": "^0.18.0",
     "@codemirror/gutter": "^0.18.0",
     "@codemirror/highlight": "^0.18.0",
@@ -35,107 +35,104 @@
     "@codemirror/text": "^0.18.0",
     "@codemirror/view": "^0.18.0",
     "@formatjs/intl-getcanonicallocales": "^1.5.10",
-    "@formatjs/intl-locale": "^2.4.24",
-    "@formatjs/intl-pluralrules": "^4.0.18",
+    "@formatjs/intl-locale": "^2.4.28",
+    "@formatjs/intl-pluralrules": "^4.0.22",
     "@fullcalendar/common": "5.1.0",
     "@fullcalendar/core": "5.1.0",
     "@fullcalendar/daygrid": "5.1.0",
     "@fullcalendar/interaction": "5.1.0",
     "@fullcalendar/list": "5.1.0",
-    "@lit-labs/virtualizer": "^0.6.0",
-    "@material/chips": "=12.0.0-canary.1a8d06483.0",
-    "@material/mwc-button": "canary",
-    "@material/mwc-checkbox": "canary",
-    "@material/mwc-circular-progress": "canary",
-    "@material/mwc-dialog": "canary",
-    "@material/mwc-fab": "canary",
-    "@material/mwc-formfield": "canary",
-    "@material/mwc-icon-button": "canary",
-    "@material/mwc-list": "canary",
-    "@material/mwc-menu": "canary",
-    "@material/mwc-radio": "canary",
-    "@material/mwc-ripple": "canary",
-    "@material/mwc-switch": "canary",
-    "@material/mwc-tab": "canary",
-    "@material/mwc-tab-bar": "canary",
-    "@material/top-app-bar": "=12.0.0-canary.1a8d06483.0",
+    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
+    "@material/chips": "12.0.0-canary.22d29cbb4.0",
+    "@material/data-table": "12.0.0-canary.22d29cbb4.0",
+    "@material/mwc-button": "0.22.1",
+    "@material/mwc-checkbox": "0.22.1",
+    "@material/mwc-circular-progress": "0.22.1",
+    "@material/mwc-dialog": "0.22.1",
+    "@material/mwc-fab": "0.22.1",
+    "@material/mwc-formfield": "0.22.1",
+    "@material/mwc-icon-button": "0.22.1",
+    "@material/mwc-linear-progress": "0.22.1",
+    "@material/mwc-list": "0.22.1",
+    "@material/mwc-menu": "0.22.1",
+    "@material/mwc-radio": "0.22.1",
+    "@material/mwc-ripple": "0.22.1",
+    "@material/mwc-switch": "0.22.1",
+    "@material/mwc-tab": "0.22.1",
+    "@material/mwc-tab-bar": "0.22.1",
+    "@material/top-app-bar": "12.0.0-canary.22d29cbb4.0",
     "@mdi/js": "5.9.55",
     "@mdi/svg": "5.9.55",
-    "@polymer/app-layout": "^3.0.2",
-    "@polymer/app-storage": "^3.0.2",
-    "@polymer/iron-autogrow-textarea": "^3.0.1",
+    "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
-    "@polymer/iron-image": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-label": "^3.0.1",
-    "@polymer/iron-overlay-behavior": "^3.0.2",
+    "@polymer/iron-overlay-behavior": "^3.0.3",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
     "@polymer/paper-dialog-scrollable": "^3.0.1",
-    "@polymer/paper-dropdown-menu": "^3.0.1",
-    "@polymer/paper-input": "^3.0.1",
+    "@polymer/paper-dropdown-menu": "^3.2.0",
+    "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
-    "@polymer/paper-menu-button": "^3.0.1",
+    "@polymer/paper-menu-button": "^3.1.0",
     "@polymer/paper-progress": "^3.0.1",
     "@polymer/paper-radio-button": "^3.0.1",
     "@polymer/paper-radio-group": "^3.0.1",
-    "@polymer/paper-ripple": "^3.0.1",
+    "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-styles": "^3.0.1",
-    "@polymer/paper-tabs": "^3.0.1",
+    "@polymer/paper-tabs": "^3.1.0",
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
-    "@polymer/polymer": "3.1.0",
+    "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.2",
-    "@vaadin/vaadin-combo-box": "^5.0.10",
-    "@vaadin/vaadin-date-picker": "^4.0.7",
+    "@vaadin/vaadin-combo-box": "^20.0.1",
+    "@vaadin/vaadin-date-picker": "^20.0.1",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.2.0",
-    "@webcomponents/webcomponentsjs": "^2.2.7",
-    "chart.js": "^2.9.4",
-    "chartjs-chart-timeline": "^0.4.0",
-    "comlink": "^4.3.0",
-    "core-js": "^3.6.5",
-    "cropperjs": "^1.5.7",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
+    "chart.js": "^3.3.2",
+    "comlink": "^4.3.1",
+    "core-js": "^3.15.2",
+    "cropperjs": "^1.5.11",
+    "date-fns": "^2.22.1",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.3",
-    "home-assistant-js-websocket": "^5.10.0",
-    "idb-keyval": "^3.2.0",
-    "intl-messageformat": "^9.6.13",
-    "js-yaml": "^3.13.1",
+    "hls.js": "^1.0.7",
+    "home-assistant-js-websocket": "^5.11.1",
+    "idb-keyval": "^5.0.5",
+    "intl-messageformat": "^9.6.16",
+    "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.0.0-rc.2",
     "lit-vaadin-helpers": "^0.1.3",
-    "marked": "2.0.0",
+    "marked": "^2.0.5",
     "mdn-polyfills": "^5.16.0",
-    "memoize-one": "^5.0.2",
+    "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.1",
     "punycode": "^2.1.1",
     "qrcode": "^1.4.4",
-    "regenerator-runtime": "^0.13.2",
+    "regenerator-runtime": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.10.2",
     "superstruct": "^0.15.2",
-    "tinykeys": "^1.1.1",
+    "tinykeys": "^1.1.3",
     "tsparticles": "^1.19.2",
     "unfetch": "^4.1.0",
-    "vis-data": "^7.1.1",
+    "vis-data": "^7.1.2",
     "vis-network": "^8.5.4",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
     "workbox-cacheable-response": "^6.1.5",
@@ -147,17 +144,17 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-external-helpers": "^7.12.13",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.13.15",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-external-helpers": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.14.0",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-typescript": "^7.14.5",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
@@ -165,38 +162,35 @@
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@types/chai": "^4.1.7",
-    "@types/chromecast-caf-receiver": "^5.0.11",
+    "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/js-yaml": "^3.12.1",
+    "@types/js-yaml": "^4.0.1",
     "@types/leaflet": "^1.7.0",
     "@types/leaflet-draw": "^1.0.3",
-    "@types/marked": "^1.2.2",
-    "@types/memoize-one": "4.1.0",
-    "@types/mocha": "^7.0.2",
-    "@types/resize-observer-browser": "^0.1.3",
+    "@types/marked": "^2.0.3",
+    "@types/mocha": "^8.2.2",
     "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/parser": "^4.28.3",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
-    "babel-loader": "^8.1.0",
-    "chai": "^4.2.0",
-    "cpx": "^1.5.0",
+    "babel-loader": "^8.2.2",
+    "chai": "^4.3.4",
     "del": "^4.0.0",
-    "eslint": "^7.25.0",
+    "eslint": "^7.30.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-lit": "^1.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-lit": "^1.5.1",
     "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-unused-imports": "^1.1.2",
     "eslint-plugin-wc": "^1.3.0",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
     "gulp-foreach": "^0.1.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
@@ -204,43 +198,41 @@
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.0.1",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
-    "mocha": "^7.2.0",
+    "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
-    "prettier": "^2.0.4",
-    "raw-loader": "^2.0.0",
+    "prettier": "^2.3.2",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "serve": "^11.3.0",
-    "sinon": "^7.3.1",
+    "serve": "^11.3.2",
+    "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.1.4",
     "ts-lit-plugin": "^1.2.1",
-    "ts-mocha": "^7.0.0",
-    "typescript": "^4.2.4",
+    "ts-mocha": "^8.0.0",
+    "typescript": "^4.3.5",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^5.24.1",
-    "webpack-cli": "^4.5.0",
+    "webpack": "^5.43.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
-    "webpack-manifest-plugin": "^3.0.0",
+    "webpack-manifest-plugin": "^3.1.1",
     "workbox-build": "^6.1.5"
   },
-  "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
-  "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",
+  "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
+    "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "@polymer/polymer": "3.1.0",
     "lit-html": "2.0.0-rc.3",
     "lit-element": "3.0.0-rc.2"
   },

script/core

@@ -9,12 +9,6 @@ if [ -z "${DEVCONTAINER}" ]; then
   exit 1
 fi
 
-if [ ! -z "${CODESPACES}" ]; then
-  WORKSPACE="/root/workspace/frontend"
-else
-  WORKSPACE="/workspaces/frontend"
-fi
-
 if [ -z $(which hass) ]; then
   echo "Installing Home Asstant core from dev."
   python3 -m pip install --upgrade \
@@ -22,9 +16,9 @@ if [ -z $(which hass) ]; then
     git+git://github.com/home-assistant/home-assistant.git@dev
 fi
 
-if [ ! -d "${WORKSPACE}/config" ]; then
+if [ ! -d "/workspaces/frontend/config" ]; then
   echo "Creating default configuration."
-  mkdir -p "${WORKSPACE}/config";
+  mkdir -p "/workspaces/frontend/config";
   hass --script ensure_config -c config
   echo "demo:
 
@@ -32,24 +26,24 @@ logger:
   default: info
   logs:
     homeassistant.components.frontend: debug
-" >> "${WORKSPACE}/config/configuration.yaml"
+" >> /workspaces/frontend/config/configuration.yaml
 
   if [ ! -z "${HASSIO}" ]; then
   echo "
 # frontend:
-#   development_repo: ${WORKSPACE}
+#   development_repo: /workspaces/frontend
 
 hassio:
-  development_repo: ${WORKSPACE}" >> "${WORKSPACE}/config/configuration.yaml"
+  development_repo: /workspaces/frontend" >> /workspaces/frontend/config/configuration.yaml
   else
   echo "
 frontend:
-  development_repo: ${WORKSPACE}
+  development_repo: /workspaces/frontend
 
 # hassio:
-#   development_repo: ${WORKSPACE}" >> "${WORKSPACE}/config/configuration.yaml"
+#   development_repo: /workspaces/frontend" >> /workspaces/frontend/config/configuration.yaml
   fi
 
 fi
 
-hass -c "${WORKSPACE}/config"
+hass -c /workspaces/frontend/config

setup.py

@@ -2,9 +2,9 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210518.0",
+    version="20210729.0",
     description="The Home Assistant frontend",
-    url="https://github.com/home-assistant/home-assistant-polymer",
+    url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",
     author_email="hello@home-assistant.io",
     license="Apache-2.0",

src/auth/ha-auth-flow.ts

@@ -7,6 +7,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
+import "./ha-password-manager-polyfill";
 import { property, state } from "lit/decorators";
 import "../components/ha-form/ha-form";
 import "../components/ha-markdown";
@@ -20,7 +21,7 @@ import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 type State = "loading" | "error" | "step";
 
 class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
-  @property() public authProvider?: AuthProvider;
+  @property({ attribute: false }) public authProvider?: AuthProvider;
 
   @property() public clientId?: string;
 
@@ -37,7 +38,15 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   @state() private _errorMessage?: string;
 
   protected render() {
-    return html` <form>${this._renderForm()}</form> `;
+    return html`
+      <form>${this._renderForm()}</form>
+      <ha-password-manager-polyfill
+        .step=${this._step}
+        .stepData=${this._stepData}
+        @form-submitted=${this._handleSubmit}
+        @value-changed=${this._stepDataChanged}
+      ></ha-password-manager-polyfill>
+    `;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -231,11 +240,17 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     await this.updateComplete;
     // 100ms to give all the form elements time to initialize.
     setTimeout(() => {
-      const form = this.shadowRoot!.querySelector("ha-form");
+      const form = this.renderRoot.querySelector("ha-form");
       if (form) {
         (form as any).focus();
       }
     }, 100);
+
+    setTimeout(() => {
+      this.renderRoot.querySelector(
+        "ha-password-manager-polyfill"
+      )!.boundingRect = this.getBoundingClientRect();
+    }, 500);
   }
 
   private _stepDataChanged(ev: CustomEvent) {
@@ -329,3 +344,9 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   }
 }
 customElements.define("ha-auth-flow", HaAuthFlow);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-auth-flow": HaAuthFlow;
+  }
+}

src/auth/ha-password-manager-polyfill.ts

@@ -0,0 +1,110 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { HaFormSchema } from "../components/ha-form/ha-form";
+import { DataEntryFlowStep } from "../data/data_entry_flow";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-password-manager-polyfill": HaPasswordManagerPolyfill;
+  }
+  interface HASSDomEvents {
+    "form-submitted": undefined;
+  }
+}
+
+const ENABLED_HANDLERS = [
+  "homeassistant",
+  "legacy_api_password",
+  "command_line",
+];
+
+@customElement("ha-password-manager-polyfill")
+export class HaPasswordManagerPolyfill extends LitElement {
+  @property({ attribute: false }) public step?: DataEntryFlowStep;
+
+  @property({ attribute: false }) public stepData: any;
+
+  @property({ attribute: false }) public boundingRect?: DOMRect;
+
+  protected createRenderRoot() {
+    // Add under document body so the element isn't placed inside any shadow roots
+    return document.body;
+  }
+
+  private get styles() {
+    return `
+    .password-manager-polyfill {
+      position: absolute;
+      top: ${this.boundingRect?.y || 148}px;
+      left: calc(50% - ${(this.boundingRect?.width || 360) / 2}px);
+      width: ${this.boundingRect?.width || 360}px;
+      opacity: 0;
+      z-index: -1;
+    }
+    .password-manager-polyfill input {
+      width: 100%;
+      height: 62px;
+      padding: 0;
+      border: 0;
+    }
+    .password-manager-polyfill input[type="submit"] {
+      width: 0;
+      height: 0;
+    }
+  `;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      this.step &&
+      this.step.type === "form" &&
+      this.step.step_id === "init" &&
+      ENABLED_HANDLERS.includes(this.step.handler[0])
+    ) {
+      return html`
+        <form
+          class="password-manager-polyfill"
+          aria-hidden="true"
+          @submit=${this._handleSubmit}
+        >
+          ${this.step.data_schema.map((input) => this.render_input(input))}
+          <input type="submit" />
+          <style>
+            ${this.styles}
+          </style>
+        </form>
+      `;
+    }
+    return html``;
+  }
+
+  private render_input(schema: HaFormSchema): TemplateResult | string {
+    const inputType = schema.name.includes("password") ? "password" : "text";
+    if (schema.type !== "string") {
+      return "";
+    }
+    return html`
+      <input
+        tabindex="-1"
+        .id=${schema.name}
+        .type=${inputType}
+        .value=${this.stepData[schema.name] || ""}
+        @input=${this._valueChanged}
+      />
+    `;
+  }
+
+  private _handleSubmit(ev: Event) {
+    ev.preventDefault();
+    fireEvent(this, "form-submitted");
+  }
+
+  private _valueChanged(ev: Event) {
+    const target = ev.target! as HTMLInputElement;
+    this.stepData = { ...this.stepData, [target.id]: target.value };
+    fireEvent(this, "value-changed", {
+      value: this.stepData,
+    });
+  }
+}

src/common/color/colors.ts

@@ -0,0 +1,63 @@
+export const COLORS = [
+  "#377eb8",
+  "#984ea3",
+  "#00d2d5",
+  "#ff7f00",
+  "#af8d00",
+  "#7f80cd",
+  "#b3e900",
+  "#c42e60",
+  "#a65628",
+  "#f781bf",
+  "#8dd3c7",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#fccde5",
+  "#bc80bd",
+  "#ffed6f",
+  "#c4eaff",
+  "#cf8c00",
+  "#1b9e77",
+  "#d95f02",
+  "#e7298a",
+  "#e6ab02",
+  "#a6761d",
+  "#0097ff",
+  "#00d067",
+  "#f43600",
+  "#4ba93b",
+  "#5779bb",
+  "#927acc",
+  "#97ee3f",
+  "#bf3947",
+  "#9f5b00",
+  "#f48758",
+  "#8caed6",
+  "#f2b94f",
+  "#eff26e",
+  "#e43872",
+  "#d9b100",
+  "#9d7a00",
+  "#698cff",
+  "#d9d9d9",
+  "#00d27e",
+  "#d06800",
+  "#009f82",
+  "#c49200",
+  "#cbe8ff",
+  "#fecddf",
+  "#c27eb6",
+  "#8cd2ce",
+  "#c4b8d9",
+  "#f883b0",
+  "#a49100",
+  "#f48800",
+  "#27d0df",
+  "#a04a9b",
+];
+
+export function getColorByIndex(index: number) {
+  return COLORS[index % COLORS.length];
+}

src/common/color/rgb.ts

@@ -1,4 +1,4 @@
-const luminosity = (rgb: [number, number, number]): number => {
+export const luminosity = (rgb: [number, number, number]): number => {
   // http://www.w3.org/TR/WCAG20/#relativeluminancedef
   const lum: [number, number, number] = [0, 0, 0];
   for (let i = 0; i < rgb.length; i++) {

src/common/const.ts

@@ -42,6 +42,7 @@ export const FIXED_DOMAIN_ICONS = {
   remote: "hass:remote",
   scene: "hass:palette",
   script: "hass:script-text",
+  select: "hass:format-list-bulleted",
   sensor: "hass:eye",
   simple_alarm: "hass:bell",
   sun: "hass:white-balance-sunny",
@@ -58,10 +59,11 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   current: "hass:current-ac",
   carbon_dioxide: "mdi:molecule-co2",
   carbon_monoxide: "mdi:molecule-co",
-  energy: "hass:flash",
+  energy: "hass:lightning-bolt",
   humidity: "hass:water-percent",
   illuminance: "hass:brightness-5",
   temperature: "hass:thermometer",
+  monetary: "mdi:cash",
   pressure: "hass:gauge",
   power: "hass:flash",
   power_factor: "hass:angle-acute",
@@ -83,6 +85,7 @@ export const DOMAINS_WITH_CARD = [
   "number",
   "scene",
   "script",
+  "select",
   "timer",
   "vacuum",
   "water_heater",
@@ -121,6 +124,7 @@ export const DOMAINS_HIDE_MORE_INFO = [
   "input_text",
   "number",
   "scene",
+  "select",
 ];
 
 /** Domains that should have the history hidden in the more info dialog. */

src/common/datetime/check_options_support.ts

@@ -26,6 +26,9 @@ function checkToLocaleStringSupportsOptions() {
   return false;
 }
 
-export const toLocaleDateStringSupportsOptions = checkToLocaleDateStringSupportsOptions();
-export const toLocaleTimeStringSupportsOptions = checkToLocaleTimeStringSupportsOptions();
-export const toLocaleStringSupportsOptions = checkToLocaleStringSupportsOptions();
+export const toLocaleDateStringSupportsOptions =
+  checkToLocaleDateStringSupportsOptions();
+export const toLocaleTimeStringSupportsOptions =
+  checkToLocaleTimeStringSupportsOptions();
+export const toLocaleStringSupportsOptions =
+  checkToLocaleStringSupportsOptions();

src/common/datetime/format_date.ts

@@ -17,6 +17,19 @@ export const formatDate = toLocaleDateStringSupportsOptions
       formatDateMem(locale).format(dateObj)
   : (dateObj: Date) => format(dateObj, "longDate");
 
+const formatDateShortMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      day: "numeric",
+      month: "short",
+    })
+);
+
+export const formatDateShort = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateShortMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "shortDate");
+
 const formatDateWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {

src/common/decorators/local-storage.ts

@@ -82,67 +82,71 @@ class Storage {
 
 const storage = new Storage();
 
-export const LocalStorage = (
-  storageKey?: string,
-  property?: boolean,
-  propertyOptions?: PropertyDeclaration
-): any => (clsElement: ClassElement) => {
-  const key = String(clsElement.key);
-  storageKey = storageKey || String(clsElement.key);
-  const initVal = clsElement.initializer ? clsElement.initializer() : undefined;
+export const LocalStorage =
+  (
+    storageKey?: string,
+    property?: boolean,
+    propertyOptions?: PropertyDeclaration
+  ): any =>
+  (clsElement: ClassElement) => {
+    const key = String(clsElement.key);
+    storageKey = storageKey || String(clsElement.key);
+    const initVal = clsElement.initializer
+      ? clsElement.initializer()
+      : undefined;
 
-  storage.addFromStorage(storageKey);
+    storage.addFromStorage(storageKey);
 
-  const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
-    storage.subscribeChanges(storageKey!, (oldValue) => {
-      el.requestUpdate(clsElement.key, oldValue);
-    });
+    const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
+      storage.subscribeChanges(storageKey!, (oldValue) => {
+        el.requestUpdate(clsElement.key, oldValue);
+      });
 
-  const getValue = (): any =>
-    storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal;
+    const getValue = (): any =>
+      storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal;
 
-  const setValue = (el: ReactiveElement, value: any) => {
-    let oldValue: unknown | undefined;
-    if (property) {
-      oldValue = getValue();
-    }
-    storage.setValue(storageKey!, value);
-    if (property) {
-      el.requestUpdate(clsElement.key, oldValue);
-    }
-  };
-
-  return {
-    kind: "method",
-    placement: "prototype",
-    key: clsElement.key,
-    descriptor: {
-      set(this: ReactiveElement, value: unknown) {
-        setValue(this, value);
-      },
-      get() {
-        return getValue();
-      },
-      enumerable: true,
-      configurable: true,
-    },
-    finisher(cls: typeof ReactiveElement) {
+    const setValue = (el: ReactiveElement, value: any) => {
+      let oldValue: unknown | undefined;
       if (property) {
-        const connectedCallback = cls.prototype.connectedCallback;
-        const disconnectedCallback = cls.prototype.disconnectedCallback;
-        cls.prototype.connectedCallback = function () {
-          connectedCallback.call(this);
-          this[`__unbsubLocalStorage${key}`] = subscribe(this);
-        };
-        cls.prototype.disconnectedCallback = function () {
-          disconnectedCallback.call(this);
-          this[`__unbsubLocalStorage${key}`]();
-        };
-        cls.createProperty(clsElement.key, {
-          noAccessor: true,
-          ...propertyOptions,
-        });
+        oldValue = getValue();
       }
-    },
+      storage.setValue(storageKey!, value);
+      if (property) {
+        el.requestUpdate(clsElement.key, oldValue);
+      }
+    };
+
+    return {
+      kind: "method",
+      placement: "prototype",
+      key: clsElement.key,
+      descriptor: {
+        set(this: ReactiveElement, value: unknown) {
+          setValue(this, value);
+        },
+        get() {
+          return getValue();
+        },
+        enumerable: true,
+        configurable: true,
+      },
+      finisher(cls: typeof ReactiveElement) {
+        if (property) {
+          const connectedCallback = cls.prototype.connectedCallback;
+          const disconnectedCallback = cls.prototype.disconnectedCallback;
+          cls.prototype.connectedCallback = function () {
+            connectedCallback.call(this);
+            this[`__unbsubLocalStorage${key}`] = subscribe(this);
+          };
+          cls.prototype.disconnectedCallback = function () {
+            disconnectedCallback.call(this);
+            this[`__unbsubLocalStorage${key}`]();
+          };
+          cls.createProperty(clsElement.key, {
+            noAccessor: true,
+            ...propertyOptions,
+          });
+        }
+      },
+    };
   };
-};

src/common/decorators/restore-scroll.ts

@@ -1,33 +1,33 @@
 import type { LitElement } from "lit";
 import type { ClassElement } from "../../types";
 
-export const restoreScroll = (selector: string): any => (
-  element: ClassElement
-) => ({
-  kind: "method",
-  placement: "prototype",
-  key: element.key,
-  descriptor: {
-    set(this: LitElement, value: number) {
-      this[`__${String(element.key)}`] = value;
+export const restoreScroll =
+  (selector: string): any =>
+  (element: ClassElement) => ({
+    kind: "method",
+    placement: "prototype",
+    key: element.key,
+    descriptor: {
+      set(this: LitElement, value: number) {
+        this[`__${String(element.key)}`] = value;
+      },
+      get(this: LitElement) {
+        return this[`__${String(element.key)}`];
+      },
+      enumerable: true,
+      configurable: true,
     },
-    get(this: LitElement) {
-      return this[`__${String(element.key)}`];
-    },
-    enumerable: true,
-    configurable: true,
-  },
-  finisher(cls: typeof LitElement) {
-    const connectedCallback = cls.prototype.connectedCallback;
-    cls.prototype.connectedCallback = function () {
-      connectedCallback.call(this);
-      if (this[element.key]) {
-        const target = this.renderRoot.querySelector(selector);
-        if (!target) {
-          return;
+    finisher(cls: typeof LitElement) {
+      const connectedCallback = cls.prototype.connectedCallback;
+      cls.prototype.connectedCallback = function () {
+        connectedCallback.call(this);
+        if (this[element.key]) {
+          const target = this.renderRoot.querySelector(selector);
+          if (!target) {
+            return;
+          }
+          target.scrollTop = this[element.key];
         }
-        target.scrollTop = this[element.key];
-      }
-    };
-  },
-});
+      };
+    },
+  });

src/common/dom/apply_themes_on_element.ts

@@ -31,7 +31,7 @@ export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeSettings?: Partial<HomeAssistant["selectedThemeSettings"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
 ) => {
   let cacheKey = selectedTheme;
   let themeRules: Partial<ThemeVars> = {};
@@ -39,7 +39,7 @@ export const applyThemesOnElement = (
   if (themeSettings) {
     if (themeSettings.dark) {
       cacheKey = `${cacheKey}__dark`;
-      themeRules = darkStyles;
+      themeRules = { ...darkStyles };
     }
 
     if (selectedTheme === "default") {

src/common/dom/setup-leaflet-map.ts

@@ -6,8 +6,7 @@ export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
   mapElement: HTMLElement,
-  darkMode?: boolean,
-  draw = false
+  darkMode?: boolean
 ): Promise<[Map, LeafletModuleType, TileLayer]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -17,10 +16,6 @@ export const setupLeafletMap = async (
     .default as LeafletModuleType;
   Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";
 
-  if (draw) {
-    await import("leaflet-draw");
-  }
-
   const map = Leaflet.map(mapElement);
   const style = document.createElement("link");
   style.setAttribute("href", "/static/images/leaflet/leaflet.css");

src/common/dom/speech-recognition.ts

@@ -1,14 +1,7 @@
-/* eslint-disable */
-// @ts-ignore
 export const SpeechRecognition =
-  // @ts-ignore
   window.SpeechRecognition || window.webkitSpeechRecognition;
-// @ts-ignore
 export const SpeechGrammarList =
-  // @ts-ignore
   window.SpeechGrammarList || window.webkitSpeechGrammarList;
-// @ts-ignore
 export const SpeechRecognitionEvent =
-  // @ts-ignore
+  // @ts-expect-error
   window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
-/* eslint-enable */

src/common/entity/compute_state_display.ts

@@ -21,6 +21,16 @@ export const computeStateDisplay = (
   }
 
   if (stateObj.attributes.unit_of_measurement) {
+    if (stateObj.attributes.device_class === "monetary") {
+      try {
+        return formatNumber(compareState, locale, {
+          style: "currency",
+          currency: stateObj.attributes.unit_of_measurement,
+        });
+      } catch (_err) {
+        // fallback to default
+      }
+    }
     return `${formatNumber(compareState, locale)} ${
       stateObj.attributes.unit_of_measurement
     }`;
@@ -29,37 +39,61 @@ export const computeStateDisplay = (
   const domain = computeStateDomain(stateObj);
 
   if (domain === "input_datetime") {
-    let date: Date;
-    if (!stateObj.attributes.has_time) {
+    if (state) {
+      // If trying to display an explicit state, need to parse the explict state to `Date` then format.
+      // Attributes aren't available, we have to use `state`.
+      try {
+        const components = state.split(" ");
+        if (components.length === 2) {
+          // Date and time.
+          return formatDateTime(new Date(components.join("T")), locale);
+        }
+        if (components.length === 1) {
+          if (state.includes("-")) {
+            // Date only.
+            return formatDate(new Date(`${state}T00:00`), locale);
+          }
+          if (state.includes(":")) {
+            // Time only.
+            const now = new Date();
+            return formatTime(
+              new Date(`${now.toISOString().split("T")[0]}T${state}`),
+              locale
+            );
+          }
+        }
+        return state;
+      } catch {
+        // Formatting methods may throw error if date parsing doesn't go well,
+        // just return the state string in that case.
+        return state;
+      }
+    } else {
+      // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
+      let date: Date;
+      if (!stateObj.attributes.has_time) {
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day
+        );
+        return formatDate(date, locale);
+      }
+      if (!stateObj.attributes.has_date) {
+        date = new Date();
+        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
+        return formatTime(date, locale);
+      }
+
       date = new Date(
         stateObj.attributes.year,
         stateObj.attributes.month - 1,
-        stateObj.attributes.day
-      );
-      return formatDate(date, locale);
-    }
-    if (!stateObj.attributes.has_date) {
-      const now = new Date();
-      date = new Date(
-        // Due to bugs.chromium.org/p/chromium/issues/detail?id=797548
-        // don't use artificial 1970 year.
-        now.getFullYear(),
-        now.getMonth(),
-        now.getDay(),
+        stateObj.attributes.day,
         stateObj.attributes.hour,
         stateObj.attributes.minute
       );
-      return formatTime(date, locale);
+      return formatDateTime(date, locale);
     }
-
-    date = new Date(
-      stateObj.attributes.year,
-      stateObj.attributes.month - 1,
-      stateObj.attributes.day,
-      stateObj.attributes.hour,
-      stateObj.attributes.minute
-    );
-    return formatDateTime(date, locale);
   }
 
   if (domain === "humidifier") {

src/common/entity/domain_icon.ts

@@ -43,7 +43,17 @@ export const domainIcon = (
         : "hass:air-humidifier";
 
     case "lock":
-      return compareState === "unlocked" ? "hass:lock-open" : "hass:lock";
+      switch (compareState) {
+        case "unlocked":
+          return "hass:lock-open";
+        case "jammed":
+          return "hass:lock-alert";
+        case "locking":
+        case "unlocking":
+          return "hass:lock-clock";
+        default:
+          return "hass:lock";
+      }
 
     case "media_player":
       return compareState === "playing" ? "hass:cast-connected" : "hass:cast";
@@ -89,8 +99,6 @@ export const domainIcon = (
   }
 
   // eslint-disable-next-line
-  console.warn(
-    "Unable to find icon for domain " + domain + " (" + stateObj + ")"
-  );
+  console.warn(`Unable to find icon for domain ${domain}`);
   return DEFAULT_DOMAIN_ICON;
 };

src/common/entity/state_icon.ts

@@ -4,7 +4,7 @@ import { DEFAULT_DOMAIN_ICON } from "../const";
 import { computeDomain } from "./compute_domain";
 import { domainIcon } from "./domain_icon";
 
-export const stateIcon = (state: HassEntity) => {
+export const stateIcon = (state?: HassEntity) => {
   if (!state) {
     return DEFAULT_DOMAIN_ICON;
   }

src/common/number/clamp.ts

@@ -0,0 +1,2 @@
+export const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);

src/common/number/round.ts

@@ -0,0 +1,2 @@
+export const round = (value: number, precision = 2): number =>
+  Math.round(value * 10 ** precision) / 10 ** precision;

src/common/search/search-input.ts

@@ -1,9 +1,16 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../components/ha-svg-icon";
 import { fireEvent } from "../dom/fire_event";
 
@@ -27,18 +34,11 @@ class SearchInput extends LitElement {
     this.shadowRoot!.querySelector("paper-input")!.focus();
   }
 
+  @query("paper-input", true) private _input!: PaperInputElement;
+
   protected render(): TemplateResult {
     return html`
-      <style>
-        .no-underline:not(.focused) {
-          --paper-input-container-underline: {
-            display: none;
-            height: 0;
-          }
-        }
-      </style>
       <paper-input
-        class=${classMap({ "no-underline": this.noUnderline })}
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
         .value=${this.filter}
@@ -62,6 +62,19 @@ class SearchInput extends LitElement {
     `;
   }
 
+  protected updated(changedProps: PropertyValues) {
+    if (
+      changedProps.has("noUnderline") &&
+      (this.noUnderline || changedProps.get("noUnderline") !== undefined)
+    ) {
+      (
+        this._input.inputElement!.parentElement!.shadowRoot!.querySelector(
+          "div.unfocused-line"
+        ) as HTMLElement
+      ).style.display = this.noUnderline ? "none" : "block";
+    }
+  }
+
   private async _filterChanged(value: string) {
     fireEvent(this, "value-changed", { value: String(value) });
   }

src/common/string/escape_regexp.ts

@@ -0,0 +1,2 @@
+export const escapeRegExp = (text: string): string =>
+  text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");

src/common/string/filter/filter.ts

@@ -92,7 +92,7 @@ function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
   return word[pos] !== wordLow[pos];
 }
 
-function isPatternInWord(
+export function isPatternInWord(
   patternLow: string,
   patternPos: number,
   patternLen: number,
@@ -121,7 +121,7 @@ enum Arrow {
 }
 
 /**
- * An array representating a fuzzy match.
+ * An array representing a fuzzy match.
  *
  * 0. the score
  * 1. the offset at which matching started

src/common/string/filter/sequence-matching.ts

@@ -5,7 +5,7 @@ import { fuzzyScore } from "./filter";
  *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
  *
  * @param {string} filter - Sequence of letters to check for
- * @param {string} word - Word to check for sequence
+ * @param {ScorableTextItem} item - Item against whose strings will be checked
  *
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */

src/common/string/format_number.ts

@@ -1,5 +1,22 @@
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 
+export const numberFormatToLocale = (
+  localeOptions: FrontendLocaleData
+): string | string[] | undefined => {
+  switch (localeOptions.number_format) {
+    case NumberFormat.comma_decimal:
+      return ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
+    case NumberFormat.decimal_comma:
+      return ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
+    case NumberFormat.space_comma:
+      return ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
+    case NumberFormat.system:
+      return undefined;
+    default:
+      return localeOptions.language;
+  }
+};
+
 /**
  * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
  *
@@ -9,27 +26,12 @@ import { FrontendLocaleData, NumberFormat } from "../../data/translation";
  */
 export const formatNumber = (
   num: string | number,
-  locale?: FrontendLocaleData,
+  localeOptions?: FrontendLocaleData,
   options?: Intl.NumberFormatOptions
 ): string => {
-  let format: string | string[] | undefined;
-
-  switch (locale?.number_format) {
-    case NumberFormat.comma_decimal:
-      format = ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
-      break;
-    case NumberFormat.decimal_comma:
-      format = ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
-      break;
-    case NumberFormat.space_comma:
-      format = ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
-      break;
-    case NumberFormat.system:
-      format = undefined;
-      break;
-    default:
-      format = locale?.language;
-  }
+  const locale = localeOptions
+    ? numberFormatToLocale(localeOptions)
+    : undefined;
 
   // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
   Number.isNaN =
@@ -39,13 +41,13 @@ export const formatNumber = (
     };
 
   if (
+    localeOptions?.number_format !== NumberFormat.none &&
     !Number.isNaN(Number(num)) &&
-    Intl &&
-    locale?.number_format !== NumberFormat.none
+    Intl
   ) {
     try {
       return new Intl.NumberFormat(
-        format,
+        locale,
         getDefaultFormatOptions(num, options)
       ).format(Number(num));
     } catch (error) {

src/common/string/is_date.ts

@@ -0,0 +1,11 @@
+// https://regex101.com/r/kc5C14/2
+const regExpString = "^\\d{4}-(0[1-9]|1[0-2])-([12]\\d|0[1-9]|3[01])";
+
+const regExp = new RegExp(regExpString + "$");
+// 2nd expression without the "end of string" enforced, so it can be used
+// to just verify the start of a string and then based on that result e.g.
+// check for a full timestamp string efficiently.
+const regExpNoStringEnd = new RegExp(regExpString);
+
+export const isDate = (input: string, allowCharsAfterDate = false): boolean =>
+  allowCharsAfterDate ? regExpNoStringEnd.test(input) : regExp.test(input);

src/common/string/is_timestamp.ts

@@ -0,0 +1,12 @@
+// https://stackoverflow.com/a/14322189/1947205
+// Changes:
+// 1. Do not allow a plus or minus at the start.
+// 2. Enforce that we have a "T" or a blank after the date portion
+//    to ensure we have a timestamp and not only a date.
+// 3. Disallow dates based on week number.
+// 4. Disallow dates only consisting of a year.
+// https://regex101.com/r/kc5C14/3
+const regexp =
+  /^\d{4}-(0[1-9]|1[0-2])-([12]\d|0[1-9]|3[01])[T| ](((([01]\d|2[0-3])((:?)[0-5]\d)?|24:?00)([.,]\d+(?!:))?)(\8[0-5]\d([.,]\d+)?)?([zZ]|([+-])([01]\d|2[0-3]):?([0-5]\d)?)?)$/;
+
+export const isTimestamp = (input: string): boolean => regexp.test(input);

src/common/structs/is-custom-type.ts

@@ -0,0 +1,6 @@
+import { refine, string } from "superstruct";
+
+const isCustomType = (value: string) => value.startsWith("custom:");
+
+export const customType = () =>
+  refine(string(), "custom element type", isCustomType);

src/common/structs/is-entity-id.ts

@@ -1,11 +1,6 @@
 import { refine, string } from "superstruct";
 
-const isEntityId = (value: string): boolean => {
-  if (!value.includes(".")) {
-    return false;
-  }
-  return true;
-};
+const isEntityId = (value: string): boolean => value.includes(".");
 
 export const entityId = () =>
   refine(string(), "entity ID (domain.entity)", isEntityId);

src/common/structs/is-icon.ts

@@ -1,10 +1,5 @@
 import { refine, string } from "superstruct";
 
-const isIcon = (value: string) => {
-  if (!value.includes(":")) {
-    return false;
-  }
-  return true;
-};
+const isIcon = (value: string) => value.includes(":");
 
 export const icon = () => refine(string(), "icon (mdi:icon-name)", isIcon);

src/common/style/icon_color_css.ts

@@ -29,31 +29,28 @@ export const iconColorCSS = css`
   }
 
   ha-icon[data-domain="climate"][data-state="cooling"] {
-    color: var(--cool-color, #2b9af9);
+    color: var(--cool-color, var(--state-climate-cool-color));
   }
 
   ha-icon[data-domain="climate"][data-state="heating"] {
-    color: var(--heat-color, #ff8100);
+    color: var(--heat-color, var(--state-climate-heat-color));
   }
 
   ha-icon[data-domain="climate"][data-state="drying"] {
-    color: var(--dry-color, #efbd07);
+    color: var(--dry-color, var(--state-climate-dry-color));
   }
 
   ha-icon[data-domain="alarm_control_panel"] {
     color: var(--alarm-color-armed, var(--label-badge-red));
   }
-
   ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
     color: var(--alarm-color-disarmed, var(--label-badge-green));
   }
-
   ha-icon[data-domain="alarm_control_panel"][data-state="pending"],
   ha-icon[data-domain="alarm_control_panel"][data-state="arming"] {
     color: var(--alarm-color-pending, var(--label-badge-yellow));
     animation: pulse 1s infinite;
   }
-
   ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
     color: var(--alarm-color-triggered, var(--label-badge-red));
     animation: pulse 1s infinite;
@@ -73,11 +70,11 @@ export const iconColorCSS = css`
 
   ha-icon[data-domain="plant"][data-state="problem"],
   ha-icon[data-domain="zwave"][data-state="dead"] {
-    color: var(--error-state-color, #db4437);
+    color: var(--state-icon-error-color);
   }
 
   /* Color the icon if unavailable */
   ha-icon[data-state="unavailable"] {
-    color: var(--state-icon-unavailable-color);
+    color: var(--state-unavailable-color);
   }
 `;

src/common/translations/localize.ts

@@ -1,4 +1,4 @@
-import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources } from "../../types";
 
@@ -86,11 +86,15 @@ export const computeLocalize = async (
       | undefined;
 
     if (!translatedMessage) {
-      translatedMessage = new IntlMessageFormat(
-        translatedValue,
-        language,
-        formats
-      );
+      try {
+        translatedMessage = new IntlMessageFormat(
+          translatedValue,
+          language,
+          formats
+        );
+      } catch (err) {
+        return "Translation error: " + err.message;
+      }
       cache._localizationCache[messageKey] = translatedMessage;
     }
 

src/common/util/debounce.ts

@@ -4,29 +4,25 @@
 // be triggered. The function will be called after it stops being called for
 // N milliseconds. If `immediate` is passed, trigger the function on the
 // leading edge, instead of the trailing.
-// eslint-disable-next-line: ban-types
-export const debounce = <T extends (...args) => unknown>(
-  func: T,
-  wait,
+
+export const debounce = <T extends any[]>(
+  func: (...args: T) => void,
+  wait: number,
   immediate = false
-): T => {
-  let timeout;
-  // @ts-ignore
-  return function (...args) {
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this;
+) => {
+  let timeout: number | undefined;
+  return (...args: T): void => {
     const later = () => {
-      timeout = null;
+      timeout = undefined;
       if (!immediate) {
-        func.apply(context, args);
+        func(...args);
       }
     };
     const callNow = immediate && !timeout;
     clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
+    timeout = window.setTimeout(later, wait);
     if (callNow) {
-      func.apply(context, args);
+      func(...args);
     }
   };
 };

src/common/util/promise-timeout.ts

@@ -0,0 +1,10 @@
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
+  const timeout = new Promise((_resolve, reject) => {
+    setTimeout(() => {
+      reject(`Timed out in ${ms} ms.`);
+    }, ms);
+  });
+
+  // Returns a race between our timeout and the passed in promise
+  return Promise.race([promise, timeout]);
+};

src/common/util/throttle.ts

@@ -5,32 +5,20 @@
 // as much as it can, without ever going more than once per `wait` duration;
 // but if you'd like to disable the execution on the leading edge, pass
 // `false for leading`. To disable execution on the trailing edge, ditto.
-export const throttle = <T extends (...args) => unknown>(
-  func: T,
+export const throttle = <T extends any[]>(
+  func: (...args: T) => void,
   wait: number,
   leading = true,
   trailing = true
-): T => {
+) => {
   let timeout: number | undefined;
   let previous = 0;
-  let context: any;
-  let args: any;
-  const later = () => {
-    previous = leading === false ? 0 : Date.now();
-    timeout = undefined;
-    func.apply(context, args);
-    if (!timeout) {
-      context = null;
-      args = null;
-    }
-  };
-  // @ts-ignore
-  return function (...argmnts) {
-    // @ts-ignore
-    // @typescript-eslint/no-this-alias
-    context = this;
-    args = argmnts;
-
+  return (...args: T): void => {
+    const later = () => {
+      previous = leading === false ? 0 : Date.now();
+      timeout = undefined;
+      func(...args);
+    };
     const now = Date.now();
     if (!previous && leading === false) {
       previous = now;
@@ -42,7 +30,7 @@ export const throttle = <T extends (...args) => unknown>(
         timeout = undefined;
       }
       previous = now;
-      func.apply(context, args);
+      func(...args);
     } else if (!timeout && trailing !== false) {
       timeout = window.setTimeout(later, remaining);
     }

src/components/buttons/ha-call-service-button.js

@@ -64,18 +64,18 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
     this.hass
       .callService(this.domain, this.service, this.serviceData)
       .then(
-        function () {
+        () => {
           el.progress = false;
           el.$.progress.actionSuccess();
           eventData.success = true;
         },
-        function () {
+        () => {
           el.progress = false;
           el.$.progress.actionError();
           eventData.success = false;
         }
       )
-      .then(function () {
+      .then(() => {
         el.fire("hass-service-called", eventData);
       });
   }