Add move data disk

.eslintrc.json

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

.github/workflows/ci.yaml

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

.github/workflows/demo.yaml

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

.github/workflows/release.yaml

@@ -8,7 +8,7 @@ on:
 env:
   PYTHON_VERSION: 3.8
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=6144
+  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   release:

.gitignore

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

.mocharc.cjs

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

.prettierignore

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

.yarnrc.yml

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

build-scripts/bundle.js

@@ -35,7 +35,6 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
-  __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
   "process.env.NODE_ENV": JSON.stringify(
@@ -83,7 +82,6 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     // Only support the syntax, Webpack will handle it.
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-top-level-await",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
@@ -195,9 +193,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
-      defineOverlay: {
-        __SUPERVISOR__: true,
-      },
     };
   },
 

build-scripts/gulp/app.js

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

build-scripts/gulp/cast.js

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

build-scripts/gulp/demo.js

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

build-scripts/gulp/gallery.js

@@ -51,7 +51,6 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "build-locale-data",
       "gather-gallery-demos"
     ),
     "copy-static-gallery",
@@ -71,7 +70,6 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "build-locale-data",
       "gather-gallery-demos"
     ),
     "copy-static-gallery",

build-scripts/gulp/gather-static.js

@@ -22,18 +22,11 @@ function copyTranslations(staticDir) {
 
   // Translation output
   fs.copySync(
-    polyPath("build/translations/output"),
+    polyPath("build-translations/output"),
     staticPath("translations")
   );
 }
 
-function copyLocaleData(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-
-  // Locale data output
-  fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
-}
-
 function copyMdiIcons(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
@@ -91,11 +84,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-locale-data", async () => {
-  const staticDir = paths.app_output_static;
-  copyLocaleData(staticDir);
-});
-
 gulp.task("copy-translations-app", async () => {
   const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
@@ -106,11 +94,6 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-locale-data-supervisor", async () => {
-  const staticDir = paths.hassio_output_static;
-  copyLocaleData(staticDir);
-});
-
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
@@ -120,7 +103,6 @@ gulp.task("copy-static-app", async () => {
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
-  copyLocaleData(staticDir);
   copyMdiIcons(staticDir);
 
   // Panel assets
@@ -141,7 +123,6 @@ gulp.task("copy-static-demo", async () => {
   copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
   copyTranslations(paths.demo_output_static);
-  copyLocaleData(paths.demo_output_static);
   copyMdiIcons(paths.demo_output_static);
 });
 
@@ -156,7 +137,6 @@ gulp.task("copy-static-cast", async () => {
   copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
   copyTranslations(paths.cast_output_static);
-  copyLocaleData(paths.cast_output_static);
   copyMdiIcons(paths.cast_output_static);
 });
 
@@ -172,6 +152,5 @@ gulp.task("copy-static-gallery", async () => {
   copyMapPanel(paths.gallery_output_static);
   copyFonts(paths.gallery_output_static);
   copyTranslations(paths.gallery_output_static);
-  copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
 });

build-scripts/gulp/hassio.js

@@ -1,6 +1,9 @@
 const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
 
 const env = require("../env");
+const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
@@ -21,8 +24,6 @@ gulp.task(
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -37,8 +38,6 @@ gulp.task(
     "gen-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
-    "build-locale-data",
-    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/locale-data.js

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

build-scripts/gulp/translations.js

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

build-scripts/gulp/webpack.js

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

build-scripts/webpack.js

@@ -6,7 +6,6 @@ const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
 const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -75,7 +74,6 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -127,13 +125,6 @@ const createWebpackConfig = ({
       alias: {
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
-        "lit/directives/until$": "lit/directives/until.js",
-        "lit/directives/class-map$": "lit/directives/class-map.js",
-        "lit/directives/style-map$": "lit/directives/style-map.js",
-        "lit/directives/if-defined$": "lit/directives/if-defined.js",
-        "lit/directives/guard$": "lit/directives/guard.js",
-        "lit/directives/cache$": "lit/directives/cache.js",
-        "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
       },
     },
@@ -151,9 +142,6 @@ const createWebpackConfig = ({
       // To silence warning in worker plugin
       globalObject: "self",
     },
-    experiments: {
-      topLevelAwait: true,
-    },
   };
 };
 

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

@@ -191,7 +191,7 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (err: any) {
+    } catch (err) {
       alert("Unable to log out!");
     }
   }

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

@@ -212,7 +212,7 @@ export class HcConnect extends LitElement {
     let url: URL;
     try {
       url = new URL(value);
-    } catch (err: any) {
+    } catch (err) {
       this.error = "Invalid URL";
       return;
     }
@@ -240,7 +240,7 @@ export class HcConnect extends LitElement {
     try {
       this.loading = true;
       auth = await getAuth(options);
-    } catch (err: any) {
+    } catch (err) {
       if (init === "saved-tokens" && err === ERR_CANNOT_CONNECT) {
         this.cannotConnect = true;
         return;
@@ -259,7 +259,7 @@ export class HcConnect extends LitElement {
 
     try {
       conn = await createConnection({ auth });
-    } catch (err: any) {
+    } catch (err) {
       // In case of saved tokens, silently solve problems.
       if (init === "saved-tokens") {
         if (err === ERR_CANNOT_CONNECT) {
@@ -285,7 +285,7 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (err: any) {
+    } catch (err) {
       alert("Unable to log out!");
     }
   }

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

@@ -148,14 +148,14 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-    } catch (err: any) {
+    } catch (err) {
       this._error = this._getErrorMessage(err);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
-    } catch (err: any) {
+    } catch (err) {
       this._error = this._getErrorMessage(err);
       return;
     }
@@ -193,7 +193,7 @@ export class HcMain extends HassElement {
         this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
-      } catch (err: any) {
+      } catch (err) {
         // eslint-disable-next-line
         console.log("Error fetching Lovelace configuration", err, msg);
         // Generate a Lovelace config.

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

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

demo/src/stubs/lovelace.ts

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

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

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";

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

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";

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

@@ -107,21 +107,19 @@ export class DemoHaAlert extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card header="ha-alert demo">
-        <div class="card-content">
-          ${alerts.map(
-            (alert) => html`
-              <ha-alert
-                .title=${alert.title || ""}
-                .alertType=${alert.type}
-                .dismissable=${alert.dismissable || false}
-                .actionText=${alert.action || ""}
-                .rtl=${alert.rtl || false}
-              >
-                ${alert.description}
-              </ha-alert>
-            `
-          )}
-        </div>
+        ${alerts.map(
+          (alert) => html`
+            <ha-alert
+              .title=${alert.title || ""}
+              .alertType=${alert.type}
+              .dismissable=${alert.dismissable || false}
+              .actionText=${alert.action || ""}
+              .rtl=${alert.rtl || false}
+            >
+              ${alert.description}
+            </ha-alert>
+          `
+        )}
       </ha-card>
     `;
   }
@@ -132,10 +130,6 @@ export class DemoHaAlert extends LitElement {
         max-width: 600px;
         margin: 24px auto;
       }
-      ha-alert {
-        display: block;
-        margin: 24px 0;
-      }
       .condition {
         padding: 16px;
         display: flex;

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

@@ -1,212 +0,0 @@
-/* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, css, html } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../src/components/ha-form/ha-form";
-import "../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import type { HaFormSchema } from "../../../src/components/ha-form/ha-form";
-
-const SCHEMAS: {
-  title: string;
-  translations?: Record<string, string>;
-  error?: Record<string, string>;
-  schema: HaFormSchema[];
-}[] = [
-  {
-    title: "Authentication",
-    translations: {
-      username: "Username",
-      password: "Password",
-      invalid_login: "Invalid login",
-    },
-    error: {
-      base: "invalid_login",
-    },
-    schema: [
-      {
-        type: "string",
-        name: "username",
-        required: true,
-      },
-      {
-        type: "string",
-        name: "password",
-        required: true,
-      },
-    ],
-  },
-
-  {
-    title: "One of each",
-    schema: [
-      {
-        type: "constant",
-        value: "Constant Value",
-        name: "constant",
-        required: true,
-      },
-      {
-        type: "boolean",
-        name: "bool",
-        optional: true,
-        default: false,
-      },
-      {
-        type: "integer",
-        name: "int",
-        optional: true,
-        default: 10,
-      },
-      {
-        type: "string",
-        name: "string",
-        optional: true,
-        default: "Default",
-      },
-      {
-        type: "select",
-        options: [
-          ["default", "default"],
-          ["other", "other"],
-        ],
-        name: "select",
-        optional: true,
-        default: "default",
-      },
-      {
-        type: "multi_select",
-        options: {
-          default: "Default",
-          other: "Other",
-        },
-        name: "multi",
-        optional: true,
-        default: ["default"],
-      },
-    ],
-  },
-  {
-    title: "Multi select",
-    schema: [
-      {
-        type: "multi_select",
-        options: {
-          default: "Default",
-          other: "Other",
-        },
-        name: "multi",
-        optional: true,
-        default: ["default"],
-      },
-      {
-        type: "multi_select",
-        options: {
-          default: "Default",
-          other: "Other",
-          uno: "mas",
-          one: "more",
-          and: "another_one",
-          option: "1000",
-        },
-        name: "multi",
-        optional: true,
-        default: ["default"],
-      },
-    ],
-  },
-];
-
-@customElement("demo-ha-form")
-class DemoHaForm extends LitElement {
-  private lightModeData: any = [];
-
-  private darkModeData: any = [];
-
-  protected render(): TemplateResult {
-    return html`
-      ${SCHEMAS.map((info, idx) => {
-        const translations = info.translations || {};
-        const computeLabel = (schema) =>
-          translations[schema.name] || schema.name;
-        const computeError = (error) => translations[error] || error;
-
-        return [
-          [this.lightModeData, "light"],
-          [this.darkModeData, "dark"],
-        ].map(
-          ([data, type]) => html`
-            <div class="row" data-type=${type}>
-              <ha-card .header=${info.title}>
-                <div class="card-content">
-                  <ha-form
-                    .data=${data[idx]}
-                    .schema=${info.schema}
-                    .error=${info.error}
-                    .computeError=${computeError}
-                    .computeLabel=${computeLabel}
-                    @value-changed=${(e) => {
-                      data[idx] = e.detail.value;
-                      this.requestUpdate();
-                    }}
-                  ></ha-form>
-                </div>
-              </ha-card>
-              <pre>${JSON.stringify(data[idx], undefined, 2)}</pre>
-            </div>
-          `
-        );
-      })}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this.shadowRoot!.querySelectorAll("[data-type=dark]").forEach((el) => {
-      applyThemesOnElement(
-        el,
-        {
-          default_theme: "default",
-          default_dark_theme: "default",
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
-    });
-  }
-
-  static styles = css`
-    .row {
-      margin: 0 auto;
-      max-width: 800px;
-      display: flex;
-      padding: 50px;
-      background-color: var(--primary-background-color);
-    }
-    ha-card {
-      width: 100%;
-      max-width: 384px;
-    }
-    pre {
-      width: 400px;
-      margin: 0 16px;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    @media only screen and (max-width: 800px) {
-      .row {
-        flex-direction: column;
-      }
-      pre {
-        margin: 16px 0;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-ha-form": DemoHaForm;
-  }
-}

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
@@ -9,6 +9,7 @@ import { actionHandler } from "../../../src/panels/lovelace/common/directives/ac
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {
     return html`
+      ${this.renderStyle()}
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
@@ -40,22 +41,26 @@ export class DemoUtilLongPress extends LitElement {
     area.scrollTop = area.scrollHeight;
   }
 
-  static styles = css`
-    ha-card {
-      width: 200px;
-      margin: calc(42vh - 140px) auto;
-      padding: 8px;
-      text-align: center;
-    }
-    ha-card:first-of-type {
-      margin-top: 16px;
-    }
-    ha-card:last-of-type {
-      margin-bottom: 16px;
-    }
+  private renderStyle() {
+    return html`
+      <style>
+        ha-card {
+          width: 200px;
+          margin: calc(42vh - 140px) auto;
+          padding: 8px;
+          text-align: center;
+        }
+        ha-card:first-of-type {
+          margin-top: 16px;
+        }
+        ha-card:last-of-type {
+          margin-bottom: 16px;
+        }
 
-    textarea {
-      height: 50px;
-    }
-  `;
+        textarea {
+          height: 50px;
+        }
+      </style>
+    `;
+  }
 }

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

@@ -4,7 +4,6 @@ import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import {
   HassioAddonInfo,
@@ -33,7 +32,7 @@ class HassioAddonRepositoryEl extends LitElement {
         return filterAndSort(addons, filter);
       }
       return addons.sort((a, b) =>
-        caseInsensitiveStringCompare(a.name, b.name)
+        a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
       );
     }
   );

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

@@ -259,7 +259,7 @@ class HassioAddonConfig extends LitElement {
         path: "options",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.common.update_available",
         "error",
@@ -300,7 +300,7 @@ class HassioAddonConfig extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",

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

@@ -89,9 +89,9 @@ class HassioAddonNetwork extends LitElement {
                     <td>
                       <paper-input
                         @value-changed=${this._configChanged}
-                        placeholder=${this.supervisor.localize(
+                        placeholder="${this.supervisor.localize(
                           "addon.configuration.network.disabled"
-                        )}
+                        )}"
                         .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
@@ -171,7 +171,7 @@ class HassioAddonNetwork extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_reset",
         "error",
@@ -207,7 +207,7 @@ class HassioAddonNetwork extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",

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

@@ -79,7 +79,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.hass,
         this.addon!.slug
       );
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.documentation.get_logs",
         "error",

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

@@ -222,7 +222,7 @@ class HassioAddonDashboard extends LitElement {
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
-    } catch (err: any) {
+    } catch (err) {
       this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;
     }

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

@@ -123,18 +123,18 @@ class HassioAddonInfo extends LitElement {
               <div class="card-content">
                 <hassio-card-content
                   .hass=${this.hass}
-                  .title=${this.supervisor.localize(
+                  .title="${this.supervisor.localize(
                     "addon.dashboard.new_update_available",
                     "name",
                     this.addon.name,
                     "version",
                     this.addon.version_latest
-                  )}
-                  .description=${this.supervisor.localize(
+                  )}"
+                  .description="${this.supervisor.localize(
                     "common.running_version",
                     "version",
                     this.addon.version
-                  )}
+                  )}"
                   icon=${mdiArrowUpBoldCircle}
                   iconClass="update"
                 ></hassio-card-content>
@@ -254,7 +254,7 @@ class HassioAddonInfo extends LitElement {
             ${this.supervisor.localize(
               "addon.dashboard.visit_addon_page",
               "name",
-              html`<a href=${this.addon.url!} target="_blank" rel="noreferrer"
+              html`<a href="${this.addon.url!}" target="_blank" rel="noreferrer"
                 >${this.addon.name}</a
               >`
             )}
@@ -297,11 +297,10 @@ class HassioAddonInfo extends LitElement {
                   })}
                   @click=${this._showMoreInfo}
                   id="rating"
+                  .value=${this.addon.rating}
                   label="rating"
                   description=""
-                >
-                  ${this.addon.rating}
-                </ha-label-badge>
+                ></ha-label-badge>
                 ${this.addon.host_network
                   ? html`
                       <ha-label-badge
@@ -438,10 +437,10 @@ class HassioAddonInfo extends LitElement {
               ${this.addon.version
                 ? html`
                     <div
-                      class=${classMap({
+                      class="${classMap({
                         "addon-options": true,
                         started: this.addon.state === "started",
-                      })}
+                      })}"
                     >
                       <ha-settings-row ?three-line=${this.narrow}>
                         <span slot="heading">
@@ -797,7 +796,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -819,7 +818,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -841,7 +840,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -863,7 +862,7 @@ class HassioAddonInfo extends LitElement {
         path: "security",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -885,7 +884,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -913,7 +912,7 @@ class HassioAddonInfo extends LitElement {
         title: this.supervisor.localize("addon.dashboard.changelog"),
         content,
       });
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "addon.dashboard.action_error.get_changelog"
@@ -935,7 +934,7 @@ class HassioAddonInfo extends LitElement {
         path: "install",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.install"),
         text: extractApiErrorMessage(err),
@@ -956,7 +955,7 @@ class HassioAddonInfo extends LitElement {
         path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.stop"),
         text: extractApiErrorMessage(err),
@@ -977,7 +976,7 @@ class HassioAddonInfo extends LitElement {
         path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.restart"),
         text: extractApiErrorMessage(err),
@@ -1036,7 +1035,7 @@ class HassioAddonInfo extends LitElement {
         button.progress = false;
         return;
       }
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: "Failed to validate addon configuration",
         text: extractApiErrorMessage(err),
@@ -1054,7 +1053,7 @@ class HassioAddonInfo extends LitElement {
         path: "start",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
@@ -1092,7 +1091,7 @@ class HassioAddonInfo extends LitElement {
         path: "uninstall",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "addon.dashboard.action_error.uninstall"

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -71,7 +71,7 @@ class HassioAddonLogs extends LitElement {
     this._error = undefined;
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "addon.logs.get_logs",
         "error",

hassio/src/backups/hassio-backups.ts

@@ -14,7 +14,7 @@ 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";
+import relativeTime from "../../../src/common/datetime/relative_time";
 import { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import {
   DataTableColumnContainer,
@@ -133,7 +133,7 @@ export class HassioBackups extends LitElement {
         filterable: true,
         sortable: true,
         template: (entry: string) =>
-          relativeTime(new Date(entry), this.hass.locale),
+          relativeTime(new Date(entry), this.hass.localize),
       },
       secondary: {
         title: "",
@@ -294,7 +294,7 @@ export class HassioBackups extends LitElement {
       await Promise.all(
         this._selectedBackups.map((slug) => removeBackup(this.hass, slug))
       );
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("backup.failed_to_delete"),
         text: extractApiErrorMessage(err),

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

@@ -1,6 +1,7 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-relative-time";
 import "../../../src/components/ha-svg-icon";
 import { HomeAssistant } from "../../../src/types";
 
@@ -18,6 +19,8 @@ class HassioCardContent extends LitElement {
 
   @property() public topbarClass?: string;
 
+  @property() public datetime?: string;
+
   @property() public iconTitle?: string;
 
   @property() public iconClass?: string;
@@ -34,7 +37,7 @@ class HassioCardContent extends LitElement {
       ${this.iconImage
         ? html`
             <div class="icon_image ${this.iconClass}">
-              <img src=${this.iconImage} .title=${this.iconTitle} />
+              <img src="${this.iconImage}" .title=${this.iconTitle} />
               <div></div>
             </div>
           `
@@ -53,6 +56,15 @@ class HassioCardContent extends LitElement {
             /* treat as available when undefined */
             this.available === false ? " (Not available)" : ""
           }
+          ${this.datetime
+            ? html`
+                <ha-relative-time
+                  .hass=${this.hass}
+                  class="addition"
+                  .datetime=${this.datetime}
+                ></ha-relative-time>
+              `
+            : undefined}
         </div>
       </div>
     `;
@@ -94,6 +106,9 @@ class HassioCardContent extends LitElement {
         height: 2.4em;
         line-height: 1.2em;
       }
+      ha-relative-time {
+        display: block;
+      }
       .icon_image img {
         max-height: 40px;
         max-width: 40px;

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

@@ -70,7 +70,7 @@ export class HassioUploadBackup extends LitElement {
     try {
       const backup = await uploadBackup(this.hass, file);
       fireEvent(this, "backup-uploaded", { backup: backup.data });
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: "Upload failed",
         text: extractApiErrorMessage(err),

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

@@ -181,7 +181,9 @@ export class SupervisorBackupContent extends LitElement {
                   >
                     <ha-checkbox
                       .checked=${this.homeAssistant}
-                      @click=${this.toggleHomeAssistant}
+                      @click=${() => {
+                        this.homeAssistant = !this.homeAssistant;
+                      }}
                     >
                     </ha-checkbox>
                   </ha-formfield>
@@ -270,10 +272,6 @@ export class SupervisorBackupContent extends LitElement {
     `;
   }
 
-  private toggleHomeAssistant() {
-    this.homeAssistant = !this.homeAssistant;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       .partial-picker ha-formfield {

hassio/src/components/supervisor-metric.ts

@@ -20,10 +20,10 @@ class SupervisorMetric extends LitElement {
       <div slot="description" .title=${this.tooltip ?? ""}>
         <span class="value"> ${roundedValue} % </span>
         <ha-bar
-          class=${classMap({
+          class="${classMap({
             "target-warning": roundedValue > 50,
             "target-critical": roundedValue > 85,
-          })}
+          })}"
           .value=${this.value}
         ></ha-bar>
       </div>

hassio/src/dashboard/hassio-addons.ts

@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
+import { stringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
@@ -33,7 +33,7 @@ class HassioAddons extends LitElement {
                 </ha-card>
               `
             : this.supervisor.supervisor.addons
-                .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
+                .sort((a, b) => stringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
                     <ha-card .addon=${addon} @click=${this._addonTapped}>

hassio/src/dashboard/hassio-update.ts

@@ -136,7 +136,7 @@ export class HassioUpdate extends LitElement {
           </ha-settings-row>
         </div>
         <div class="card-actions">
-          <a href=${releaseNotesUrl} target="_blank" rel="noreferrer">
+          <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
             <mwc-button>
               ${this.supervisor.localize("common.release_notes")}
             </mwc-button>
@@ -206,7 +206,7 @@ export class HassioUpdate extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: item.key,
       });
-    } catch (err: any) {
+    } catch (err) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {

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

@@ -28,7 +28,6 @@ import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
 import { atLeastVersion } from "../../../../src/common/config/version";
-import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 
 @customElement("dialog-hassio-backup")
 class HassioBackupDialog
@@ -108,7 +107,7 @@ class HassioBackupDialog
               fixed
               slot="primaryAction"
               @action=${this._handleMenuAction}
-              @closed=${stopPropagation}
+              @closed=${(ev: Event) => ev.stopPropagation()}
             >
               <mwc-icon-button slot="trigger" alt="menu">
                 <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
@@ -312,7 +311,7 @@ class HassioBackupDialog
             : "snapshots"
         }/${this._backup!.slug}/download`
       );
-    } catch (err: any) {
+    } catch (err) {
       await showAlertDialog(this, {
         text: extractApiErrorMessage(err),
       });

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

@@ -127,7 +127,7 @@ class HassioCreateBackupDialog extends LitElement {
 
       this._dialogParams!.onCreate();
       this.closeDialog();
-    } catch (err: any) {
+    } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
     this._creatingBackup = false;

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

@@ -1,180 +0,0 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-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/components/ha-circular-progress";
-import "../../../../src/components/ha-markdown";
-import {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
-import {
-  DatadiskList,
-  listDatadisks,
-  moveDatadisk,
-} from "../../../../src/data/hassio/host";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import { HomeAssistant } from "../../../../src/types";
-import { HassioDatatiskDialogParams } from "./show-dialog-hassio-datadisk";
-
-const calculateMoveTime = memoizeOne((supervisor: Supervisor): number => {
-  const speed = supervisor.host.disk_life_time !== "" ? 30 : 10;
-  const moveTime = (supervisor.host.disk_used * 1000) / 60 / speed;
-  const rebootTime = (supervisor.host.startup_time * 4) / 60;
-  return Math.ceil((moveTime + rebootTime) / 10) * 10;
-});
-
-@customElement("dialog-hassio-datadisk")
-class HassioDatadiskDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private dialogParams?: HassioDatatiskDialogParams;
-
-  @state() private selectedDevice?: string;
-
-  @state() private devices?: DatadiskList["devices"];
-
-  @state() private moving = false;
-
-  public showDialog(params: HassioDatatiskDialogParams) {
-    this.dialogParams = params;
-    listDatadisks(this.hass).then((data) => {
-      this.devices = data.devices;
-    });
-  }
-
-  public closeDialog(): void {
-    this.dialogParams = undefined;
-    this.selectedDevice = undefined;
-    this.devices = undefined;
-    this.moving = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this.dialogParams) {
-      return html``;
-    }
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        .heading=${this.moving
-          ? this.dialogParams.supervisor.localize("dialog.datadisk_move.moving")
-          : this.dialogParams.supervisor.localize("dialog.datadisk_move.title")}
-        @closed=${this.closeDialog}
-        ?hideActions=${this.moving}
-      >
-        ${this.moving
-          ? html` <ha-circular-progress alt="Moving" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.moving_desc"
-                )}
-              </p>`
-          : html` ${this.devices?.length
-                ? html`
-                    ${this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.description",
-                      {
-                        current_path: this.dialogParams.supervisor.os.data_disk,
-                        time: calculateMoveTime(this.dialogParams.supervisor),
-                      }
-                    )}
-                    <br /><br />
-
-                    <paper-dropdown-menu
-                      .label=${this.dialogParams.supervisor.localize(
-                        "dialog.datadisk_move.select_device"
-                      )}
-                      @value-changed=${this._select_device}
-                    >
-                      <paper-listbox slot="dropdown-content">
-                        ${this.devices.map(
-                          (device) => html`<paper-item>${device}</paper-item>`
-                        )}
-                      </paper-listbox>
-                    </paper-dropdown-menu>
-                  `
-                : this.devices === undefined
-                ? this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.loading_devices"
-                  )
-                : this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.no_devices"
-                  )}
-
-              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.cancel"
-                )}
-              </mwc-button>
-
-              <mwc-button
-                .disabled=${!this.selectedDevice}
-                slot="primaryAction"
-                @click=${this._moveDatadisk}
-              >
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.move"
-                )}
-              </mwc-button>`}
-      </ha-dialog>
-    `;
-  }
-
-  private _select_device(event) {
-    this.selectedDevice = event.detail.value;
-  }
-
-  private async _moveDatadisk() {
-    this.moving = true;
-    try {
-      await moveDatadisk(this.hass, this.selectedDevice!);
-    } catch (err: any) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        showAlertDialog(this, {
-          title: this.dialogParams!.supervisor.localize(
-            "system.host.failed_to_move"
-          ),
-          text: extractApiErrorMessage(err),
-        });
-        this.closeDialog();
-      }
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        paper-dropdown-menu {
-          width: 100%;
-        }
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-datadisk": HassioDatadiskDialog;
-  }
-}

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

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

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

@@ -287,7 +287,7 @@ export class DialogHassioNetwork
         this.hass,
         this._interface.interface
       );
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: "Failed to scan for accesspoints",
         text: extractApiErrorMessage(err),
@@ -448,7 +448,7 @@ export class DialogHassioNetwork
         this._interface!.interface,
         interfaceOptions
       );
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.network.failed_to_change"),
         text: extractApiErrorMessage(err),

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

@@ -190,7 +190,7 @@ class HassioRegistriesDialog extends LitElement {
       await addHassioDockerRegistry(this.hass, data);
       await this._loadRegistries();
       this._addingRegistry = false;
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.registries.failed_to_add"),
         text: extractApiErrorMessage(err),
@@ -204,7 +204,7 @@ class HassioRegistriesDialog extends LitElement {
     try {
       await removeHassioDockerRegistry(this.hass, entry.registry);
       await this._loadRegistries();
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.registries.failed_to_remove"),
         text: extractApiErrorMessage(err),

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

@@ -9,7 +9,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -58,7 +57,7 @@ class HassioRepositoriesDialog extends LitElement {
   private _filteredRepositories = memoizeOne((repos: HassioAddonRepository[]) =>
     repos
       .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
-      .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
+      .sort((a, b) => (a.name < b.name ? -1 : 1))
   );
 
   protected render(): TemplateResult {
@@ -186,7 +185,7 @@ class HassioRepositoriesDialog extends LitElement {
       this._repositories = addonsinfo.repositories;
 
       fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    } catch (err: any) {
+    } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
   }
@@ -208,7 +207,7 @@ class HassioRepositoriesDialog extends LitElement {
       await this._loadData();
 
       input.value = "";
-    } catch (err: any) {
+    } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
     this._processing = false;
@@ -230,7 +229,7 @@ class HassioRepositoriesDialog extends LitElement {
         addons_repositories: newRepositories,
       });
       await this._loadData();
-    } catch (err: any) {
+    } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
   }

hassio/src/dialogs/suggestAddonRestart.ts

@@ -26,7 +26,7 @@ export const suggestAddonRestart = async (
   if (confirmed) {
     try {
       await restartHassioAddon(hass, addon.slug);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(element, {
         title: supervisor.localize(
           "common.failed_to_restart_name",

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

@@ -148,7 +148,7 @@ class DialogSupervisorUpdate extends LitElement {
           this.hass,
           this._dialogParams!.backupParams
         );
-      } catch (err: any) {
+      } catch (err) {
         this._error = extractApiErrorMessage(err);
         this._action = null;
         return;
@@ -158,7 +158,7 @@ class DialogSupervisorUpdate extends LitElement {
     this._action = "update";
     try {
       await this._dialogParams!.updateHandler!();
-    } catch (err: any) {
+    } catch (err) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
         this._action = null;

hassio/src/hassio-my-redirect.ts

@@ -87,7 +87,7 @@ class HassioMyRedirect extends LitElement {
     let url: string;
     try {
       url = this._createRedirectUrl(redirect);
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize("my.error");
       return;
     }

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

@@ -91,7 +91,7 @@ class HassioIngressView extends LitElement {
       if (requestedAddon) {
         try {
           addonInfo = await fetchHassioAddonInfo(this.hass, requestedAddon);
-        } catch (err: any) {
+        } catch (err) {
           await showAlertDialog(this, {
             text: extractApiErrorMessage(err),
             title: requestedAddon,
@@ -145,7 +145,7 @@ class HassioIngressView extends LitElement {
 
     try {
       addon = await fetchHassioAddonInfo(this.hass, addonSlug);
-    } catch (err: any) {
+    } catch (err) {
       await showAlertDialog(this, {
         text: "Unable to fetch add-on info to start Ingress",
         title: "Supervisor",
@@ -179,7 +179,7 @@ class HassioIngressView extends LitElement {
 
     try {
       session = await createSessionPromise;
-    } catch (err: any) {
+    } catch (err) {
       await showAlertDialog(this, {
         text: "Unable to create an Ingress session",
         title: addon.name,
@@ -195,7 +195,7 @@ class HassioIngressView extends LitElement {
     this._sessionKeepAlive = window.setInterval(async () => {
       try {
         await validateHassioSession(this.hass, session);
-      } catch (err: any) {
+      } catch (err) {
         session = await createHassioSession(this.hass);
       }
     }, 60000);

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

@@ -144,7 +144,7 @@ class HassioCoreInfo extends LitElement {
 
     try {
       await restartCore(this.hass);
-    } catch (err: any) {
+    } catch (err) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
           title: this.supervisor.localize(

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

@@ -18,6 +18,7 @@ import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
   changeHostOptions,
   configSyncOS,
+  dataDiskMove,
   rebootHost,
   shutdownHost,
   updateOS,
@@ -39,9 +40,8 @@ import {
   roundWithOneDecimal,
 } from "../../../src/util/calculate";
 import "../components/supervisor-metric";
-import { showHassioDatadiskDialog } from "../dialogs/datadisk/show-dialog-hassio-datadisk";
-import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
 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")
@@ -184,34 +184,22 @@ class HassioHostInfo extends LitElement {
             <mwc-icon-button slot="trigger">
               <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
             </mwc-icon-button>
-            <mwc-list-item
-              .action=${"hardware"}
-              @click=${this._handleMenuAction}
-            >
+            <mwc-list-item @click=${() => this._handleMenuAction("hardware")}>
               ${this.supervisor.localize("system.host.hardware")}
             </mwc-list-item>
             ${this.supervisor.host.features.includes("haos")
-              ? html`
-                  <mwc-list-item
-                    .action=${"import_from_usb"}
-                    @click=${this._handleMenuAction}
-                  >
-                    ${this.supervisor.localize("system.host.import_from_usb")}
-                  </mwc-list-item>
-                  ${this.supervisor.host.features.includes("os_agent") &&
-                  atLeastVersion(this.supervisor.host.agent_version, 1, 2, 0)
-                    ? html`
-                        <mwc-list-item
-                          .action=${"move_datadisk"}
-                          @click=${this._handleMenuAction}
-                        >
-                          ${this.supervisor.localize(
-                            "system.host.move_datadisk"
-                          )}
-                        </mwc-list-item>
-                      `
-                    : ""}
-                `
+              ? html`<mwc-list-item
+                  @click=${() => this._handleMenuAction("import_from_usb")}
+                >
+                  ${this.supervisor.localize("system.host.import_from_usb")}
+                </mwc-list-item>`
+              : ""}
+            ${this.supervisor.host.features.includes("agent")
+              ? html`<mwc-list-item
+                  @click=${() => this._handleMenuAction("data_disk_move")}
+                >
+                  ${this.supervisor.localize("system.host.data_disk_move")}
+                </mwc-list-item>`
               : ""}
           </ha-button-menu>
         </div>
@@ -234,31 +222,25 @@ class HassioHostInfo extends LitElement {
     return network_info.interfaces.find((a) => a.primary)?.ipv4?.address![0];
   });
 
-  private async _handleMenuAction(ev) {
-    switch ((ev.target as any).action) {
+  private async _handleMenuAction(action: string) {
+    switch (action) {
       case "hardware":
         await this._showHardware();
         break;
       case "import_from_usb":
         await this._importFromUSB();
         break;
-      case "move_datadisk":
-        await this._moveDatadisk();
+      case "data_disk_move":
+        await this._dataDiskMove();
         break;
     }
   }
 
-  private _moveDatadisk(): void {
-    showHassioDatadiskDialog(this, {
-      supervisor: this.supervisor,
-    });
-  }
-
   private async _showHardware(): Promise<void> {
     let hardware;
     try {
       hardware = await fetchHassioHardwareInfo(this.hass);
-    } catch (err: any) {
+    } catch (err) {
       await showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_get_hardware_list"
@@ -288,7 +270,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await rebootHost(this.hass);
-    } catch (err: any) {
+    } catch (err) {
       // Ignore connection errors, these are all expected
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
@@ -318,7 +300,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await shutdownHost(this.hass);
-    } catch (err: any) {
+    } catch (err) {
       // Ignore connection errors, these are all expected
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
@@ -359,7 +341,7 @@ class HassioHostInfo extends LitElement {
     try {
       await updateOS(this.hass);
       fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
-    } catch (err: any) {
+    } catch (err) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
           title: this.supervisor.localize(
@@ -397,7 +379,7 @@ class HassioHostInfo extends LitElement {
         fireEvent(this, "supervisor-collection-refresh", {
           collection: "host",
         });
-      } catch (err: any) {
+      } catch (err) {
         showAlertDialog(this, {
           title: this.supervisor.localize("system.host.failed_to_set_hostname"),
           text: extractApiErrorMessage(err),
@@ -412,7 +394,7 @@ class HassioHostInfo extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: "host",
       });
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_import_from_usb"
@@ -422,6 +404,34 @@ class HassioHostInfo extends LitElement {
     }
   }
 
+  private async _dataDiskMove(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.supervisor.localize("system.host.data_disk_move"),
+      text: html`${this.supervisor.localize(
+          "dialog.data_disk_move.description",
+          { current_path: this.supervisor.os.data_disk }
+        )} <br /><br />${this.supervisor.localize(
+          "dialog.data_disk_move.confirm_text"
+        )}`,
+      confirmText: this.supervisor.localize("dialog.data_disk_move.move"),
+      dismissText: this.supervisor.localize("dialog.data_disk_move.cancel"),
+    });
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await dataDiskMove(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize("system.host.failed_to_move"),
+          text: extractApiErrorMessage(err),
+        });
+      }
+    }
+  }
+
   private async _loadData(): Promise<void> {
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
       fireEvent(this, "supervisor-collection-refresh", {

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

@@ -34,18 +34,16 @@ import { hassioStyle } from "../resources/hassio-style";
 const UNSUPPORTED_REASON_URL = {
   apparmor: "/more-info/unsupported/apparmor",
   container: "/more-info/unsupported/container",
-  content_trust: "/more-info/unsupported/content_trust",
   dbus: "/more-info/unsupported/dbus",
   docker_configuration: "/more-info/unsupported/docker_configuration",
   docker_version: "/more-info/unsupported/docker_version",
   job_conditions: "/more-info/unsupported/job_conditions",
   lxc: "/more-info/unsupported/lxc",
   network_manager: "/more-info/unsupported/network_manager",
-  os_agent: "/more-info/unsupported/os_agent",
   os: "/more-info/unsupported/os",
   privileged: "/more-info/unsupported/privileged",
-  source_mods: "/more-info/unsupported/source_mods",
   systemd: "/more-info/unsupported/systemd",
+  content_trust: "/more-info/unsupported/content_trust",
 };
 
 const UNHEALTHY_REASON_URL = {
@@ -282,7 +280,7 @@ class HassioSupervisorInfo extends LitElement {
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.supervisor.failed_to_set_option"
@@ -300,7 +298,7 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await this._reloadSupervisor();
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize("system.supervisor.failed_to_reload"),
         text: extractApiErrorMessage(err),
@@ -343,7 +341,7 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await restartSupervisor(this.hass);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "common.failed_to_restart_name",
@@ -388,7 +386,7 @@ class HassioSupervisorInfo extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: "supervisor",
       });
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "common.failed_to_update_name",
@@ -427,10 +425,10 @@ class HassioSupervisorInfo extends LitElement {
               <li>
                 ${UNSUPPORTED_REASON_URL[reason]
                   ? html`<a
-                      href=${documentationUrl(
+                      href="${documentationUrl(
                         this.hass,
                         UNSUPPORTED_REASON_URL[reason]
-                      )}
+                      )}"
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -458,10 +456,10 @@ class HassioSupervisorInfo extends LitElement {
               <li>
                 ${UNHEALTHY_REASON_URL[reason]
                   ? html`<a
-                      href=${documentationUrl(
+                      href="${documentationUrl(
                         this.hass,
                         UNHEALTHY_REASON_URL[reason]
-                      )}
+                      )}"
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -483,7 +481,7 @@ class HassioSupervisorInfo extends LitElement {
         diagnostics: !this.supervisor.supervisor?.diagnostics,
       };
       await setSupervisorOption(this.hass, data);
-    } catch (err: any) {
+    } catch (err) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.supervisor.failed_to_set_option"

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

@@ -130,7 +130,7 @@ class HassioSupervisorLog extends LitElement {
         this.hass,
         this._selectedLogProvider
       );
-    } catch (err: any) {
+    } catch (err) {
       this._error = this.supervisor.localize(
         "system.log.get_logs",
         "provider",

netlify.toml

@@ -1,3 +1,3 @@
 [build.environment]
   YARN_VERSION = "1.22.11"
-  NODE_OPTIONS = "--max_old_space_size=6144"
+  NODE_OPTIONS = "--max_old_space_size=4096"

package.json

@@ -16,7 +16,8 @@
     "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",
-    "test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.js \"test/**/*.ts\""
+    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
+    "test": "yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -33,39 +34,35 @@
     "@codemirror/stream-parser": "^0.19.1",
     "@codemirror/text": "^0.19.2",
     "@codemirror/view": "^0.19.4",
-    "@formatjs/intl-datetimeformat": "^4.2.4",
     "@formatjs/intl-getcanonicallocales": "^1.7.3",
-    "@formatjs/intl-locale": "^2.4.38",
-    "@formatjs/intl-numberformat": "^7.2.4",
-    "@formatjs/intl-pluralrules": "^4.1.4",
-    "@formatjs/intl-relativetimeformat": "^9.3.1",
-    "@formatjs/intl-utils": "^3.8.4",
+    "@formatjs/intl-locale": "^2.4.37",
+    "@formatjs/intl-pluralrules": "^4.1.3",
     "@fullcalendar/common": "5.9.0",
     "@fullcalendar/core": "5.9.0",
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
     "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
-    "@material/chips": "13.0.0-canary.65125b3a6.0",
-    "@material/data-table": "13.0.0-canary.65125b3a6.0",
-    "@material/mwc-button": "0.25.1",
-    "@material/mwc-checkbox": "0.25.1",
-    "@material/mwc-circular-progress": "0.25.1",
-    "@material/mwc-dialog": "0.25.1",
-    "@material/mwc-fab": "0.25.1",
-    "@material/mwc-formfield": "0.25.1",
-    "@material/mwc-icon-button": "0.25.1",
-    "@material/mwc-linear-progress": "0.25.1",
-    "@material/mwc-list": "0.25.1",
-    "@material/mwc-menu": "0.25.1",
-    "@material/mwc-radio": "0.25.1",
-    "@material/mwc-ripple": "0.25.1",
-    "@material/mwc-switch": "0.25.1",
-    "@material/mwc-tab": "0.25.1",
-    "@material/mwc-tab-bar": "0.25.1",
-    "@material/top-app-bar": "13.0.0-canary.65125b3a6.0",
-    "@mdi/js": "6.2.95",
-    "@mdi/svg": "6.2.95",
+    "@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": "6.1.95",
+    "@mdi/svg": "6.1.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -92,8 +89,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/vaadin-combo-box": "^21.0.2",
-    "@vaadin/vaadin-date-picker": "^21.0.2",
+    "@vaadin/vaadin-combo-box": "^20.0.4",
+    "@vaadin/vaadin-date-picker": "^20.0.4",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -106,17 +103,18 @@
     "date-fns": "^2.23.0",
     "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.11",
+    "hls.js": "^1.0.10",
     "home-assistant-js-websocket": "^5.11.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.0",
-    "lit-vaadin-helpers": "^0.2.1",
+    "lit": "^2.0.0-rc.3",
+    "lit-vaadin-helpers": "^0.1.3",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
@@ -145,18 +143,17 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@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.15.4",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+    "@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/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-typescript": "^7.15.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",
@@ -173,24 +170,23 @@
     "@types/mocha": "^8",
     "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.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.2.2",
     "chai": "^4.3.4",
     "del": "^4.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint": "^7.30.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-lit": "^1.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-unused-imports": "^1.1.5",
-    "eslint-plugin-wc": "^1.3.2",
+    "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.2",
@@ -201,8 +197,7 @@
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
-    "instant-mocha": "^1.3.1",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^11.0.1",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
@@ -211,7 +206,7 @@
     "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
-    "prettier": "^2.4.1",
+    "prettier": "^2.3.2",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
@@ -221,26 +216,26 @@
     "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.2.4",
+    "terser-webpack-plugin": "^5.1.4",
     "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.4.3",
+    "ts-mocha": "^8.0.0",
+    "typescript": "^4.3.5",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^5.55.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.3.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "webpackbar": "^5.0.0-3",
+    "webpack": "^5.43.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-manifest-plugin": "^3.1.1",
     "workbox-build": "^6.1.5"
   },
   "_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",
-    "lit": "^2.0.0",
-    "lit-html": "2.0.0",
-    "lit-element": "3.0.0",
-    "@lit/reactive-element": "1.0.0"
+    "lit": "^2.0.0-rc.3",
+    "lit-html": "2.0.0-rc.4",
+    "lit-element": "3.0.0-rc.3",
+    "@lit/reactive-element": "1.0.0-rc.3"
   },
   "main": "src/home-assistant.js",
   "husky": {

setup.py

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

src/auth/ha-auth-flow.ts

@@ -194,7 +194,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         this._state = "error";
         this._errorMessage = data.message;
       }
-    } catch (err: any) {
+    } catch (err) {
       // eslint-disable-next-line no-console
       console.error("Error starting auth flow", err);
       this._state = "error";
@@ -317,7 +317,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         return;
       }
       await this._updateStep(newStep);
-    } catch (err: any) {
+    } catch (err) {
       // eslint-disable-next-line no-console
       console.error("Error submitting step", err);
       this._state = "error";

src/auth/ha-authorize.ts

@@ -76,20 +76,20 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       ${loggingInWith}
 
       <ha-auth-flow
-        .resources=${this.resources}
-        .clientId=${this.clientId}
-        .redirectUri=${this.redirectUri}
-        .oauth2State=${this.oauth2State}
-        .authProvider=${this._authProvider}
+        .resources="${this.resources}"
+        .clientId="${this.clientId}"
+        .redirectUri="${this.redirectUri}"
+        .oauth2State="${this.oauth2State}"
+        .authProvider="${this._authProvider}"
       ></ha-auth-flow>
 
       ${inactiveProviders.length > 0
         ? html`
             <ha-pick-auth-provider
-              .resources=${this.resources}
-              .clientId=${this.clientId}
-              .authProviders=${inactiveProviders}
-              @pick-auth-provider=${this._handleAuthProviderPick}
+              .resources="${this.resources}"
+              .clientId="${this.clientId}"
+              .authProviders="${inactiveProviders}"
+              @pick-auth-provider="${this._handleAuthProviderPick}"
             ></ha-pick-auth-provider>
           `
         : ""}
@@ -158,7 +158,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
       this._authProviders = authProviders;
       this._authProvider = authProviders[0];
-    } catch (err: any) {
+    } catch (err) {
       // eslint-disable-next-line
       console.error("Error loading auth providers", err);
     }

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

@@ -1,4 +1,3 @@
-/* eslint-disable lit/prefer-static-styles */
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";

src/auth/ha-pick-auth-provider.ts

@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
@@ -18,6 +18,14 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
 
   protected render() {
     return html`
+      <style>
+        paper-item {
+          cursor: pointer;
+        }
+        p {
+          margin-top: 0;
+        }
+      </style>
       <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
       ${this.authProviders.map(
         (provider) => html`
@@ -33,14 +41,5 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
   private _handlePick(ev) {
     fireEvent(this, "pick-auth-provider", ev.currentTarget.auth_provider);
   }
-
-  static styles = css`
-    paper-item {
-      cursor: pointer;
-    }
-    p {
-      margin-top: 0;
-    }
-  `;
 }
 customElements.define("ha-pick-auth-provider", HaPickAuthProvider);

src/common/auth/token_storage.ts

@@ -33,7 +33,7 @@ export function saveTokens(tokens: AuthData | null) {
   if (tokenCache.writeEnabled) {
     try {
       storage.hassTokens = JSON.stringify(tokens);
-    } catch (err: any) {
+    } catch (err) {
       // write failed, ignore it. Happens if storage is full or private mode.
     }
   }
@@ -58,7 +58,7 @@ export function loadTokens() {
       } else {
         tokenCache.tokens = null;
       }
-    } catch (err: any) {
+    } catch (err) {
       tokenCache.tokens = null;
     }
   }

src/common/const.ts

@@ -57,29 +57,28 @@ export const FIXED_DOMAIN_ICONS = {
 
 export const FIXED_DEVICE_CLASS_ICONS = {
   aqi: "hass:air-filter",
-  battery: "hass:battery",
+  current: "hass:current-ac",
   carbon_dioxide: "mdi:molecule-co2",
   carbon_monoxide: "mdi:molecule-co",
-  current: "hass:current-ac",
   date: "hass:calendar",
   energy: "hass:lightning-bolt",
   gas: "hass:gas-cylinder",
   humidity: "hass:water-percent",
   illuminance: "hass:brightness-5",
-  monetary: "mdi:cash",
   nitrogen_dioxide: "mdi:molecule",
   nitrogen_monoxide: "mdi:molecule",
   nitrous_oxide: "mdi:molecule",
   ozone: "mdi:molecule",
+  temperature: "hass:thermometer",
+  monetary: "mdi:cash",
+  pm25: "mdi:molecule",
   pm1: "mdi:molecule",
   pm10: "mdi:molecule",
-  pm25: "mdi:molecule",
+  pressure: "hass:gauge",
   power: "hass:flash",
   power_factor: "hass:angle-acute",
-  pressure: "hass:gauge",
   signal_strength: "hass:wifi",
   sulphur_dioxide: "mdi:molecule",
-  temperature: "hass:thermometer",
   timestamp: "hass:clock",
   volatile_organic_compounds: "mdi:molecule",
   voltage: "hass:sine-wave",

src/common/datetime/check_options_support.ts

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

src/common/datetime/format_date.ts

@@ -1,15 +1,13 @@
+import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { polyfillsLoaded } from "../translations/localize";
-
-if (__BUILD__ === "latest" && polyfillsLoaded) {
-  await polyfillsLoaded;
-}
+import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
 // Tuesday, August 10
-export const formatDateWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateWeekdayMem(locale).format(dateObj);
-
+export const formatDateWeekday = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateWeekdayMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "dddd, MMMM D");
 const formatDateWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -20,9 +18,10 @@ const formatDateWeekdayMem = memoizeOne(
 );
 
 // August 10, 2021
-export const formatDate = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateMem(locale).format(dateObj);
-
+export const formatDate = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY");
 const formatDateMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -33,9 +32,10 @@ const formatDateMem = memoizeOne(
 );
 
 // 10/08/2021
-export const formatDateNumeric = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateNumericMem(locale).format(dateObj);
-
+export const formatDateNumeric = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateNumericMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "M/D/YYYY");
 const formatDateNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -46,9 +46,10 @@ const formatDateNumericMem = memoizeOne(
 );
 
 // Aug 10
-export const formatDateShort = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateShortMem(locale).format(dateObj);
-
+export const formatDateShort = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateShortMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMM D");
 const formatDateShortMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -58,11 +59,10 @@ const formatDateShortMem = memoizeOne(
 );
 
 // August 2021
-export const formatDateMonthYear = (
-  dateObj: Date,
-  locale: FrontendLocaleData
-) => formatDateMonthYearMem(locale).format(dateObj);
-
+export const formatDateMonthYear = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMonthYearMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMMM YYYY");
 const formatDateMonthYearMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -72,9 +72,10 @@ const formatDateMonthYearMem = memoizeOne(
 );
 
 // August
-export const formatDateMonth = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateMonthMem(locale).format(dateObj);
-
+export const formatDateMonth = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMonthMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "MMMM");
 const formatDateMonthMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -83,9 +84,10 @@ const formatDateMonthMem = memoizeOne(
 );
 
 // 2021
-export const formatDateYear = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateYearMem(locale).format(dateObj);
-
+export const formatDateYear = toLocaleDateStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateYearMem(locale).format(dateObj)
+  : (dateObj: Date) => format(dateObj, "YYYY");
 const formatDateYearMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {

src/common/datetime/format_date_time.ts

@@ -1,16 +1,15 @@
+import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
+import { toLocaleStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
-import { polyfillsLoaded } from "../translations/localize";
-
-if (__BUILD__ === "latest" && polyfillsLoaded) {
-  await polyfillsLoaded;
-}
 
 // August 9, 2021, 8:23 AM
-export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateTimeMem(locale).format(dateObj);
-
+export const formatDateTime = toLocaleStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -24,11 +23,11 @@ const formatDateTimeMem = memoizeOne(
 );
 
 // August 9, 2021, 8:23:15 AM
-export const formatDateTimeWithSeconds = (
-  dateObj: Date,
-  locale: FrontendLocaleData
-) => formatDateTimeWithSecondsMem(locale).format(dateObj);
-
+export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -43,11 +42,11 @@ const formatDateTimeWithSecondsMem = memoizeOne(
 );
 
 // 9/8/2021, 8:23 AM
-export const formatDateTimeNumeric = (
-  dateObj: Date,
-  locale: FrontendLocaleData
-) => formatDateTimeNumericMem(locale).format(dateObj);
-
+export const formatDateTimeNumeric = toLocaleStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeNumericMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "M/D/YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
 const formatDateTimeNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {

src/common/datetime/format_time.ts

@@ -1,31 +1,30 @@
+import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
+import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
-import { polyfillsLoaded } from "../translations/localize";
-
-if (__BUILD__ === "latest" && polyfillsLoaded) {
-  await polyfillsLoaded;
-}
 
 // 9:15 PM || 21:15
-export const formatTime = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatTimeMem(locale).format(dateObj);
-
+export const formatTime = toLocaleTimeStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "shortTime" + useAmPm(locale) ? " A" : "");
 const formatTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
-      hour: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hour12: useAmPm(locale),
     })
 );
 
 // 9:15:24 PM || 21:15:24
-export const formatTimeWithSeconds = (
-  dateObj: Date,
-  locale: FrontendLocaleData
-) => formatTimeWithSecondsMem(locale).format(dateObj);
-
+export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "mediumTime" + useAmPm(locale) ? " A" : "");
 const formatTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -37,15 +36,17 @@ const formatTimeWithSecondsMem = memoizeOne(
 );
 
 // Tuesday 7:00 PM || Tuesday 19:00
-export const formatTimeWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatTimeWeekdayMem(locale).format(dateObj);
-
+export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWeekdayMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "dddd, HH:mm" + useAmPm(locale) ? " A" : "");
 const formatTimeWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
-      second: "2-digit",
       hour12: useAmPm(locale),
     })
 );

src/common/datetime/relative_time.ts

@@ -1,32 +1,48 @@
-import { selectUnit } from "@formatjs/intl-utils";
-import memoizeOne from "memoize-one";
-import { FrontendLocaleData } from "../../data/translation";
-import { polyfillsLoaded } from "../translations/localize";
+import { LocalizeFunc } from "../translations/localize";
 
-if (__BUILD__ === "latest" && polyfillsLoaded) {
-  await polyfillsLoaded;
-}
+/**
+ * Calculate a string representing a date object as relative time from now.
+ *
+ * Example output: 5 minutes ago, in 3 days.
+ */
+const tests = [60, 60, 24, 7];
+const langKey = ["second", "minute", "hour", "day"];
 
-const formatRelTimeMem = memoizeOne(
-  (locale: FrontendLocaleData) =>
-    // @ts-expect-error
-    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
-);
+export default function relativeTime(
+  dateObj: Date,
+  localize: LocalizeFunc,
+  options: {
+    compareTime?: Date;
+    includeTense?: boolean;
+  } = {}
+): string {
+  const compareTime = options.compareTime || new Date();
+  let delta = (compareTime.getTime() - dateObj.getTime()) / 1000;
+  const tense = delta >= 0 ? "past" : "future";
+  delta = Math.abs(delta);
+  let roundedDelta = Math.round(delta);
 
-export const relativeTime = (
-  from: Date,
-  locale: FrontendLocaleData,
-  to?: Date,
-  includeTense = true
-): string => {
-  const diff = selectUnit(from, to);
-  if (includeTense) {
-    return formatRelTimeMem(locale).format(diff.value, diff.unit);
+  if (roundedDelta === 0) {
+    return localize("ui.components.relative_time.just_now");
   }
-  return Intl.NumberFormat(locale.language, {
-    style: "unit",
-    // @ts-expect-error
-    unit: diff.unit,
-    unitDisplay: "long",
-  }).format(Math.abs(diff.value));
-};
+
+  let unit = "week";
+
+  for (let i = 0; i < tests.length; i++) {
+    if (roundedDelta < tests[i]) {
+      unit = langKey[i];
+      break;
+    }
+
+    delta /= tests[i];
+    roundedDelta = Math.round(delta);
+  }
+
+  return localize(
+    options.includeTense === false
+      ? `ui.components.relative_time.duration.${unit}`
+      : `ui.components.relative_time.${tense}_duration.${unit}`,
+    "count",
+    roundedDelta
+  );
+}

src/common/decorators/local-storage.ts

@@ -74,7 +74,7 @@ class Storage {
     this._storage[storageKey] = value;
     try {
       window.localStorage.setItem(storageKey, JSON.stringify(value));
-    } catch (err: any) {
+    } catch (err) {
       // Safari in private mode doesn't allow localstorage
     }
   }

src/common/dom/apply_themes_on_element.ts

@@ -115,7 +115,7 @@ export const applyThemesOnElement = (
   }
 
   const newTheme =
-    Object.keys(themeRules).length && cacheKey
+    themeRules && cacheKey
       ? PROCESSED_THEMES[cacheKey] || processTheme(cacheKey, themeRules)
       : undefined;
 
@@ -167,7 +167,7 @@ const processTheme = (
       const prefixedRgbKey = `--${rgbKey}`;
       styles[prefixedRgbKey] = rgbValue;
       keys[prefixedRgbKey] = "";
-    } catch (err: any) {
+    } catch (e) {
       continue;
     }
   }

src/common/dom/get_main_window.ts

@@ -5,4 +5,4 @@ export const mainWindow =
     ? window
     : parent.name === MAIN_WINDOW_NAME
     ? parent
-    : top!;
+    : top;

src/common/entity/alarm_panel_icon.ts

@@ -1,24 +0,0 @@
-/** Return an icon representing a alarm panel state. */
-
-export const alarmPanelIcon = (state?: string) => {
-  switch (state) {
-    case "armed_away":
-      return "hass:shield-lock";
-    case "armed_vacation":
-      return "hass:shield-airplane";
-    case "armed_home":
-      return "hass:shield-home";
-    case "armed_night":
-      return "hass:shield-moon";
-    case "armed_custom_bypass":
-      return "hass:security";
-    case "pending":
-      return "hass:shield-outline";
-    case "triggered":
-      return "hass:bell-ring";
-    case "disarmed":
-      return "hass:shield-off";
-    default:
-      return "hass:shield";
-  }
-};

src/common/entity/compute_state_display.ts

@@ -4,7 +4,7 @@ import { FrontendLocaleData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber } from "../number/format_number";
+import { formatNumber } from "../string/format_number";
 import { LocalizeFunc } from "../translations/localize";
 import { computeStateDomain } from "./compute_state_domain";
 

src/common/entity/domain_icon.ts

@@ -5,7 +5,6 @@ import { HassEntity } from "home-assistant-js-websocket";
  * Optionally pass in a state to influence the domain icon.
  */
 import { DEFAULT_DOMAIN_ICON, FIXED_DOMAIN_ICONS } from "../const";
-import { alarmPanelIcon } from "./alarm_panel_icon";
 import { binarySensorIcon } from "./binary_sensor_icon";
 import { coverIcon } from "./cover_icon";
 import { sensorIcon } from "./sensor_icon";
@@ -19,7 +18,18 @@ export const domainIcon = (
 
   switch (domain) {
     case "alarm_control_panel":
-      return alarmPanelIcon(compareState);
+      switch (compareState) {
+        case "armed_home":
+          return "hass:bell-plus";
+        case "armed_night":
+          return "hass:bell-sleep";
+        case "disarmed":
+          return "hass:bell-outline";
+        case "triggered":
+          return "hass:bell-ring";
+        default:
+          return "hass:bell";
+      }
 
     case "binary_sensor":
       return binarySensorIcon(compareState, stateObj);

src/common/string/capitalize-first-letter.ts

@@ -1,2 +0,0 @@
-export const capitalizeFirstLetter = (str: string) =>
-  str.charAt(0).toUpperCase() + str.slice(1);

src/common/string/filter/filter.ts

@@ -180,10 +180,10 @@ export function fuzzyScore(
     wordLow
   );
 
-  let row: number;
+  let row = 1;
   let column = 1;
-  let patternPos: number;
-  let wordPos: number;
+  let patternPos = patternStart;
+  let wordPos = wordStart;
 
   const hasStrongFirstMatch = [false];
 

src/common/string/format_number.ts

@@ -1,5 +1,5 @@
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
-import { round } from "./round";
+import { round } from "../number/round";
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData
@@ -51,10 +51,10 @@ export const formatNumber = (
         locale,
         getDefaultFormatOptions(num, options)
       ).format(Number(num));
-    } catch (err: any) {
+    } catch (error) {
       // Don't fail when using "TEST" language
       // eslint-disable-next-line no-console
-      console.error(err);
+      console.error(error);
       return new Intl.NumberFormat(
         undefined,
         getDefaultFormatOptions(num, options)

src/common/translations/localize.ts

@@ -1,10 +1,6 @@
-import { shouldPolyfill as shouldPolyfillLocale } from "@formatjs/intl-locale/lib/should-polyfill";
-import { shouldPolyfill as shouldPolyfillPluralRules } from "@formatjs/intl-pluralrules/lib/should-polyfill";
-import { shouldPolyfill as shouldPolyfillRelativeTime } from "@formatjs/intl-relativetimeformat/lib/should-polyfill";
-import { shouldPolyfill as shouldPolyfillDateTime } from "@formatjs/intl-datetimeformat/lib/should-polyfill";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources } from "../../types";
-import { getLocalLanguage } from "../../util/common-translation";
 
 export type LocalizeFunc = (key: string, ...args: any[]) => string;
 interface FormatType {
@@ -16,32 +12,17 @@ export interface FormatsType {
   time: FormatType;
 }
 
-const loadedPolyfillLocale = new Set();
+let loadedPolyfillLocale: Set<string> | undefined;
 
-const polyfills: Promise<any>[] = [];
-if (__BUILD__ === "latest") {
-  if (shouldPolyfillLocale()) {
-    polyfills.push(import("@formatjs/intl-locale/polyfill"));
-  }
-  if (shouldPolyfillPluralRules()) {
-    polyfills.push(import("@formatjs/intl-pluralrules/polyfill"));
-    polyfills.push(import("@formatjs/intl-pluralrules/locale-data/en"));
-  }
-  if (shouldPolyfillRelativeTime()) {
-    polyfills.push(import("@formatjs/intl-relativetimeformat/polyfill"));
-  }
-  if (shouldPolyfillDateTime()) {
-    polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
-  }
-}
-
-export const polyfillsLoaded =
-  polyfills.length === 0
-    ? undefined
-    : Promise.all(polyfills).then(() =>
-        // Load the default language
-        loadPolyfillLocales(getLocalLanguage())
-      );
+let polyfillLoaded = !shouldPolyfill();
+const polyfillProm = polyfillLoaded
+  ? undefined
+  : import("@formatjs/intl-locale/polyfill")
+      .then(() => import("@formatjs/intl-pluralrules/polyfill"))
+      .then(() => {
+        loadedPolyfillLocale = new Set();
+        polyfillLoaded = true;
+      });
 
 /**
  * Adapted from Polymer app-localize-behavior.
@@ -70,11 +51,18 @@ export const computeLocalize = async (
   resources: Resources,
   formats?: FormatsType
 ): Promise<LocalizeFunc> => {
-  if (polyfillsLoaded) {
-    await polyfillsLoaded;
+  if (!polyfillLoaded) {
+    await polyfillProm;
   }
 
-  await loadPolyfillLocales(language);
+  if (loadedPolyfillLocale && !loadedPolyfillLocale.has(language)) {
+    try {
+      loadedPolyfillLocale.add(language);
+      await import("@formatjs/intl-pluralrules/locale-data/en");
+    } catch (_e) {
+      // Ignore
+    }
+  }
 
   // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
@@ -104,7 +92,7 @@ export const computeLocalize = async (
           language,
           formats
         );
-      } catch (err: any) {
+      } catch (err) {
         return "Translation error: " + err.message;
       }
       cache._localizationCache[messageKey] = translatedMessage;
@@ -121,53 +109,8 @@ export const computeLocalize = async (
 
     try {
       return translatedMessage.format<string>(argObject) as string;
-    } catch (err: any) {
+    } catch (err) {
       return "Translation " + err;
     }
   };
 };
-
-export const loadPolyfillLocales = async (language: string) => {
-  if (loadedPolyfillLocale.has(language)) {
-    return;
-  }
-  loadedPolyfillLocale.add(language);
-  try {
-    if (
-      Intl.NumberFormat &&
-      // @ts-ignore
-      typeof Intl.NumberFormat.__addLocaleData === "function"
-    ) {
-      const result = await fetch(
-        `/static/locale-data/intl-numberformat/${language}.json`
-      );
-      // @ts-ignore
-      Intl.NumberFormat.__addLocaleData(await result.json());
-    }
-    if (
-      // @ts-expect-error
-      Intl.RelativeTimeFormat &&
-      // @ts-ignore
-      typeof Intl.RelativeTimeFormat.__addLocaleData === "function"
-    ) {
-      const result = await fetch(
-        `/static/locale-data/intl-relativetimeformat/${language}.json`
-      );
-      // @ts-ignore
-      Intl.RelativeTimeFormat.__addLocaleData(await result.json());
-    }
-    if (
-      Intl.DateTimeFormat &&
-      // @ts-ignore
-      typeof Intl.DateTimeFormat.__addLocaleData === "function"
-    ) {
-      const result = await fetch(
-        `/static/locale-data/intl-datetimeformat/${language}.json`
-      );
-      // @ts-ignore
-      Intl.DateTimeFormat.__addLocaleData(await result.json());
-    }
-  } catch (_e) {
-    // Ignore
-  }
-};

src/common/util/parse-aspect-ratio.ts

@@ -25,7 +25,7 @@ export default function parseAspectRatio(input: string) {
     return arr.length === 1
       ? { w: parseOrThrow(arr[0]), h: 1 }
       : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) };
-  } catch (err: any) {
+  } catch (err) {
     // Ignore the error
   }
   return null;

src/components/buttons/ha-call-api-button.ts

@@ -50,7 +50,7 @@ class HaCallApiButton extends LitElement {
       this._progressButton.actionSuccess();
       eventData.success = true;
       eventData.response = resp;
-    } catch (err: any) {
+    } catch (err) {
       this.progress = false;
       this._progressButton.actionError();
       eventData.success = false;

src/components/chart/ha-chart-base.ts

@@ -86,7 +86,6 @@ export default class HaChartBase extends LitElement {
                   class=${classMap({
                     hidden: this._hiddenDatasets.has(index),
                   })}
-                  .title=${dataset.label}
                 >
                   <div
                     class="bullet"

src/components/chart/state-history-chart-line.ts

@@ -5,7 +5,7 @@ import { getColorByIndex } from "../../common/color/colors";
 import {
   formatNumber,
   numberFormatToLocale,
-} from "../../common/number/format_number";
+} from "../../common/string/format_number";
 import { LineChartEntity, LineChartState } from "../../data/history";
 import { HomeAssistant } from "../../types";
 import "./ha-chart-base";

src/components/chart/state-history-chart-timeline.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { getColorByIndex } from "../../common/color/colors";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { numberFormatToLocale } from "../../common/number/format_number";
+import { numberFormatToLocale } from "../../common/string/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { TimelineEntity } from "../../data/history";
 import { HomeAssistant } from "../../types";
@@ -21,7 +21,6 @@ const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
   "garage_door",
   "gas",
   "lock",
-  "motion",
   "opening",
   "problem",
   "safety",
@@ -56,11 +55,7 @@ const getColor = (
   entityState: HassEntity,
   computedStyles: CSSStyleDeclaration
 ) => {
-  // Inversion is only valid for "on" or "off" state
-  if (
-    (stateString === "on" || stateString === "off") &&
-    invertOnOff(entityState)
-  ) {
+  if (invertOnOff(entityState)) {
     stateString = stateString === "on" ? "off" : "on";
   }
   if (stateColorMap.has(stateString)) {

src/components/chart/statistics-chart.ts

@@ -19,7 +19,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import {
   formatNumber,
   numberFormatToLocale,
-} from "../../common/number/format_number";
+} from "../../common/string/format_number";
 import {
   getStatisticIds,
   Statistics,

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

@@ -1,5 +1,4 @@
 import { Layout1d, scroll } from "@lit-labs/virtualizer";
-import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
   css,
@@ -28,7 +27,7 @@ import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
-import "../ha-svg-icon";
+import "../ha-icon";
 import { filterData, sortData } from "./sort-filter";
 
 declare global {
@@ -312,11 +311,11 @@ export class HaDataTable extends LitElement {
                 >
                   ${column.sortable
                     ? html`
-                        <ha-svg-icon
-                          .path=${sorted && this._sortDirection === "desc"
-                            ? mdiArrowDown
-                            : mdiArrowUp}
-                        ></ha-svg-icon>
+                        <ha-icon
+                          .icon=${sorted && this._sortDirection === "desc"
+                            ? "hass:arrow-down"
+                            : "hass:arrow-up"}
+                        ></ha-icon>
                       `
                     : ""}
                   <span>${column.title}</span>
@@ -551,7 +550,7 @@ export class HaDataTable extends LitElement {
 
   private _handleRowClick(ev: Event) {
     const target = ev.target as HTMLElement;
-    if (["HA-CHECKBOX", "MWC-BUTTON"].includes(target.tagName)) {
+    if (target.tagName === "HA-CHECKBOX") {
       return;
     }
     const rowId = (ev.currentTarget as any).rowId;
@@ -864,14 +863,14 @@ export class HaDataTable extends LitElement {
         :host([dir="rtl"]) .mdc-data-table__header-cell > * {
           transition: right 0.2s ease;
         }
-        .mdc-data-table__header-cell ha-svg-icon {
+        .mdc-data-table__header-cell ha-icon {
           top: -3px;
           position: absolute;
         }
-        .mdc-data-table__header-cell.not-sorted ha-svg-icon {
+        .mdc-data-table__header-cell.not-sorted ha-icon {
           left: -20px;
         }
-        :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-svg-icon {
+        :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon {
           right: -20px;
         }
         .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
@@ -887,16 +886,16 @@ export class HaDataTable extends LitElement {
           left: auto;
           right: 24px;
         }
-        .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-svg-icon,
-        .mdc-data-table__header-cell.sortable:hover.not-sorted ha-svg-icon {
+        .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
+        .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
           left: 12px;
         }
         :host([dir="rtl"])
           .mdc-data-table__header-cell.sortable:not(.not-sorted)
-          ha-svg-icon,
+          ha-icon,
         :host([dir="rtl"])
           .mdc-data-table__header-cell.sortable:hover.not-sorted
-          ha-svg-icon {
+          ha-icon {
           left: auto;
           right: 12px;
         }

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

@@ -50,7 +50,6 @@ interface AreaDevices {
   devices: string[];
 }
 
-// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
     paper-item {
       padding: 0;

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

@@ -46,7 +46,6 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
-// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
     paper-item {
       padding: 0;

src/components/dialog/ha-paper-dialog.ts

@@ -15,7 +15,7 @@ const haTabFixBehaviorImpl = {
   },
 };
 
-// paper-dialog that uses the haTabFixBehaviorImpl behavior
+// paper-dialog that uses the haTabFixBehaviorImpl behvaior
 // export class HaPaperDialog extends paperDialogClass {}
 // @ts-ignore
 export class HaPaperDialog

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

@@ -23,7 +23,6 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
     paper-item {
       padding: 0;

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

@@ -26,7 +26,6 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
     paper-icon-item {
       padding: 0;

src/components/entity/ha-state-label-badge.ts

@@ -1,4 +1,3 @@
-import { mdiAlert } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -14,13 +13,13 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { domainIcon } from "../../common/entity/domain_icon";
 import { stateIcon } from "../../common/entity/state_icon";
-import { formatNumber } from "../../common/number/format_number";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { timerTimeRemaining } from "../../data/timer";
+import { formatNumber } from "../../common/string/format_number";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { HomeAssistant } from "../../types";
 import "../ha-label-badge";
-import "../ha-icon";
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
@@ -59,49 +58,41 @@ export class HaStateLabelBadge extends LitElement {
       return html`
         <ha-label-badge
           class="warning"
-          label=${this.hass!.localize("state_badge.default.error")}
-          description=${this.hass!.localize(
+          label="${this.hass!.localize("state_badge.default.error")}"
+          icon="hass:alert"
+          description="${this.hass!.localize(
             "state_badge.default.entity_not_found"
-          )}
-        >
-          <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
-        </ha-label-badge>
+          )}"
+        ></ha-label-badge>
       `;
     }
 
     const domain = computeStateDomain(entityState);
 
-    const value = this._computeValue(domain, entityState);
-    const icon = this.icon ? this.icon : this._computeIcon(domain, entityState);
-    const image = this.icon
-      ? ""
-      : this.image
-      ? this.image
-      : entityState.attributes.entity_picture_local ||
-        entityState.attributes.entity_picture;
-
     return html`
       <ha-label-badge
-        class=${classMap({
+        class="${classMap({
           [domain]: true,
           "has-unit_of_measurement":
             "unit_of_measurement" in entityState.attributes,
-        })}
-        .image=${image}
-        .label=${this._computeLabel(
+        })}"
+        .value="${this._computeValue(domain, entityState)}"
+        .icon="${this.icon
+          ? this.icon
+          : this._computeIcon(domain, entityState)}"
+        .image="${this.icon
+          ? ""
+          : this.image
+          ? this.image
+          : entityState.attributes.entity_picture_local ||
+            entityState.attributes.entity_picture}"
+        .label="${this._computeLabel(
           domain,
           entityState,
           this._timerTimeRemaining
-        )}
-        .description=${this.name ?? computeStateName(entityState)}
-      >
-        ${!image && icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
-        ${value && (this.icon || !this.image)
-          ? html`<span class=${value && value.length > 4 ? "big" : ""}
-              >${value}</span
-            >`
-          : ""}
-      </ha-label-badge>
+        )}"
+        .description="${this.name ? this.name : computeStateName(entityState)}"
+      ></ha-label-badge>
     `;
   }
 
@@ -150,6 +141,26 @@ export class HaStateLabelBadge extends LitElement {
     }
     switch (domain) {
       case "alarm_control_panel":
+        if (entityState.state === "pending") {
+          return "hass:clock-fast";
+        }
+        if (entityState.state === "armed_away") {
+          return "hass:nature";
+        }
+        if (entityState.state === "armed_home") {
+          return "hass:home-variant";
+        }
+        if (entityState.state === "armed_night") {
+          return "hass:weather-night";
+        }
+        if (entityState.state === "armed_custom_bypass") {
+          return "hass:shield-home";
+        }
+        if (entityState.state === "triggered") {
+          return "hass:alert-circle";
+        }
+        // state == 'disarmed'
+        return domainIcon(domain, entityState);
       case "binary_sensor":
       case "device_tracker":
       case "updater":
@@ -220,9 +231,7 @@ export class HaStateLabelBadge extends LitElement {
       :host {
         cursor: pointer;
       }
-      .big {
-        font-size: 70%;
-      }
+
       ha-label-badge {
         --ha-label-badge-color: var(--label-badge-red, #df4c1e);
       }

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

@@ -51,14 +51,6 @@ export class HaStatisticPicker extends LitElement {
   @property({ type: Array, attribute: "include-unit-of-measurement" })
   public includeUnitOfMeasurement?: string[];
 
-  /**
-   * Show only statistics with these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
   /**
    * Show only statistics on entities.
    * @type {Boolean}
@@ -77,7 +69,6 @@ export class HaStatisticPicker extends LitElement {
     id: string;
     name: string;
     state?: HassEntity;
-    // eslint-disable-next-line lit/prefer-static-styles
   }> = (item) => html`<style>
       paper-icon-item {
         padding: 0;
@@ -111,7 +102,7 @@ export class HaStatisticPicker extends LitElement {
             ? html`<a
                 target="_blank"
                 rel="noopener noreferrer"
-                href=${documentationUrl(this.hass, "/more-info/statistics/")}
+                href="${documentationUrl(this.hass, "/more-info/statistics/")}"
                 >${this.hass.localize(
                   "ui.components.statistic-picker.learn_more"
                 )}</a
@@ -125,7 +116,6 @@ export class HaStatisticPicker extends LitElement {
     (
       statisticIds: StatisticsMetaData[],
       includeUnitOfMeasurement?: string[],
-      includeDeviceClasses?: string[],
       entitiesOnly?: boolean
     ): Array<{ id: string; name: string; state?: HassEntity }> => {
       if (!statisticIds.length) {
@@ -158,18 +148,11 @@ export class HaStatisticPicker extends LitElement {
           }
           return;
         }
-        if (
-          !includeDeviceClasses ||
-          includeDeviceClasses.includes(
-            entityState!.attributes.device_class || ""
-          )
-        ) {
-          output.push({
-            id: meta.statistic_id,
-            name: computeStateName(entityState),
-            state: entityState,
-          });
-        }
+        output.push({
+          id: meta.statistic_id,
+          name: computeStateName(entityState),
+          state: entityState,
+        });
       });
 
       if (!output.length) {
@@ -220,7 +203,6 @@ export class HaStatisticPicker extends LitElement {
         (this.comboBox as any).items = this._getStatistics(
           this.statisticIds!,
           this.includeUnitOfMeasurement,
-          this.includeDeviceClasses,
           this.entitiesOnly
         );
       } else {
@@ -228,7 +210,6 @@ export class HaStatisticPicker extends LitElement {
           (this.comboBox as any).items = this._getStatistics(
             this.statisticIds!,
             this.includeUnitOfMeasurement,
-            this.includeDeviceClasses,
             this.entitiesOnly
           );
         });

src/components/entity/state-info.ts

@@ -24,15 +24,13 @@ class StateInfo extends LitElement {
       return html``;
     }
 
-    const name = computeStateName(this.stateObj);
-
     return html`<state-badge
         .stateObj=${this.stateObj}
         .stateColor=${true}
       ></state-badge>
       <div class="info">
-        <div class="name" .title=${name} .inDialog=${this.inDialog}>
-          ${name}
+        <div class="name" .inDialog=${this.inDialog}>
+          ${computeStateName(this.stateObj)}
         </div>
         ${this.inDialog
           ? html`<div class="time-ago">
@@ -40,7 +38,6 @@ class StateInfo extends LitElement {
                 id="last_changed"
                 .hass=${this.hass}
                 .datetime=${this.stateObj.last_changed}
-                capitalize
               ></ha-relative-time>
               <paper-tooltip animation-delay="0" for="last_changed">
                 <div>
@@ -95,6 +92,7 @@ class StateInfo extends LitElement {
       state-badge {
         float: left;
       }
+
       :host([rtl]) state-badge {
         float: right;
       }

src/components/ha-addon-picker.ts

@@ -12,7 +12,6 @@ import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
 
-// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
     paper-item {
       padding: 0;
@@ -110,7 +109,7 @@ class HaAddonPicker extends LitElement {
           ),
         });
       }
-    } catch (err: any) {
+    } catch (error) {
       showAlertDialog(this, {
         title: this.hass.localize(
           "ui.componencts.addon-picker.error.fetch_addons.title"