update

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

.eslintrc.json

@@ -4,7 +4,8 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
-    "prettier"
+    "prettier",
+    "prettier/@typescript-eslint"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -83,27 +84,7 @@
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-shadow": ["error"],
-    "@typescript-eslint/naming-convention": [
-      0,
-      {
-        "selector": "default",
-        "format": ["camelCase", "snake_case"],
-        "leadingUnderscore": "allow",
-        "trailingUnderscore": "allow"
-      },
-      {
-        "selector": ["variable"],
-        "format": ["camelCase", "snake_case", "UPPER_CASE"],
-        "leadingUnderscore": "allow",
-        "trailingUnderscore": "allow"
-      },
-      {
-        "selector": "typeLike",
-        "format": ["PascalCase"]
-      }
-    ],
-    "lit/attribute-value-entities": 0
+    "@typescript-eslint/no-shadow": ["error"]
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,8 @@
 name: Report a bug with the UI, Frontend or Lovelace
-description: Report an issue related to the Home Assistant frontend.
+about: Report an issue related to the Home Assistant frontend.
 labels: bug
+title: ""
+issue_body: true
 body:
   - type: markdown
     attributes:
@@ -95,7 +97,11 @@ body:
         If your issue is about how an entity is shown in the UI, please add the
         state and attributes for all situations. You can find this information
         at Developer Tools -> States.
-      render: txt
+      value: |
+        ```yaml
+        # Paste your state here.
+
+        ```
   - type: textarea
     attributes:
       label: Problem-relevant frontend configuration
@@ -104,18 +110,29 @@ body:
         configuration of the used cards. Fill this out even if it seems
         unimportant to you. Please be sure to remove personal information like
         passwords, private URLs and other credentials.
-      render: yaml
+      value: |
+        ```yaml
+        # Paste your YAML here.
+
+        ```
   - type: textarea
     attributes:
       label: Javascript errors shown in your browser console/inspector
       description: >
         If you come across any Javascript or other error logs, e.g., in your
         browser console/inspector please provide them.
-      render: txt
-  - type: textarea
+      value: |
+        ```txt
+        # Paste your logs here.
+
+        ```
+  - type: markdown
     attributes:
-      label: Additional information
-      description: >
+      value: |
+        ## Additional information
+  - type: markdown
+    attributes:
+      value: |
         If you have any additional information for us, use the field below.
-        Please note, you can attach screenshots or screen recordings here, by
-        dragging and dropping files in the field below.
+        Please note, you can attach screenshots or screen recordings here,
+        by dragging and dropping files in the field below.

.github/workflows/ci.yaml

@@ -37,11 +37,9 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
       - name: Run eslint
-        run: yarn run lint:eslint
+        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
       - name: Run tsc
-        run: yarn run lint:types
-      - name: Run prettier
-        run: yarn run lint:prettier
+        run: ./node_modules/.bin/tsc
   test:
     runs-on: ubuntu-latest
     steps:

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

@@ -54,7 +54,9 @@ class HcCast extends LitElement {
     const error =
       this.castManager.castState === "NO_DEVICES_AVAILABLE"
         ? html`
-            <p>There were no suitable Chromecast devices to cast to found.</p>
+            <p>
+              There were no suitable Chromecast devices to cast to found.
+            </p>
           `
         : undefined;
 

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

@@ -86,7 +86,9 @@ export class HcConnect extends LitElement {
           </div>
           <div class="card-actions">
             <a href="/">
-              <mwc-button> Retry </mwc-button>
+              <mwc-button>
+                Retry
+              </mwc-button>
             </a>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleLogout}>Log out</mwc-button>

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

@@ -35,12 +35,11 @@ class HcLovelace extends LitElement {
     }
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
-      rawConfig: this.lovelaceConfig,
       editMode: false,
       urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
-      locale: this.hass.locale,
+      language: "en",
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
@@ -95,7 +94,6 @@ class HcLovelace extends LitElement {
     return css`
       :host {
         min-height: 100vh;
-        height: 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;

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

@@ -221,17 +221,11 @@ export class HcMain extends HassElement {
   }
 
   private async _generateLovelaceConfig() {
-    const { generateLovelaceDashboardStrategy } = await import(
-      "../../../../src/panels/lovelace/strategies/get-strategy"
+    const { generateLovelaceConfigFromHass } = await import(
+      "../../../../src/panels/lovelace/common/generate-lovelace-config"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceDashboardStrategy(
-        {
-          hass: this.hass!,
-          narrow: false,
-        },
-        "original-states"
-      )
+      await generateLovelaceConfigFromHass(this.hass!)
     );
   }
 

demo/src/configs/arsaboo/entities.ts

@@ -246,15 +246,11 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
 
     "light.living_room_lights": {
       entity_id: "light.living_room_lights",
-      state: "on",
+      state: "off",
       attributes: {
         min_mireds: 111,
         max_mireds: 400,
-        brightness: 175,
-        color_temp: 300,
-        supported_color_modes: ["brightness", "color_temp"],
         friendly_name: "Living Room Lights",
-        color_mode: "color_temp",
         supported_features: 55,
       },
     },
@@ -267,27 +263,13 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
     },
     "light.kitchen_lights": {
       entity_id: "light.kitchen_lights",
-      state: "on",
-      attributes: {
-        min_mireds: 111,
-        max_mireds: 400,
-        brightness: 200,
-        rgb_color: [255, 175, 96],
-        supported_color_modes: ["brightness", "color_temp", "rgb"],
-        color_mode: "rgb",
-        friendly_name: "Kitchen Lights",
-        supported_features: 55,
-      },
-    },
-    "light.lifx5": {
-      entity_id: "light.lifx5",
       state: "off",
       attributes: {
-        supported_color_modes: ["brightness"],
-        friendly_name: "Garage Lights",
+        friendly_name: "Kitchen Lights",
         supported_features: 1,
       },
     },
+
     "sensor.plexspy": {
       entity_id: "sensor.plexspy",
       state: "0",
@@ -500,6 +482,16 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:history",
       },
     },
+    "light.lifx5": {
+      entity_id: "light.lifx5",
+      state: "on",
+      attributes: {
+        min_mireds: 111,
+        max_mireds: 400,
+        friendly_name: "Garage Lights",
+        supported_features: 55,
+      },
+    },
     "sensor.alok_to_home": {
       entity_id: "sensor.alok_to_home",
       state: "41",

demo/src/configs/teachingbirds/entities.ts

@@ -1114,9 +1114,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         min_mireds: 153,
         max_mireds: 500,
         brightness: 63,
-        color_temp: 200,
-        supported_color_modes: ["brightness", "color_temp", "rgb"],
-        color_mode: "color_temp",
         friendly_name: "Upstairs lights",
         supported_features: 63,
         custom_ui_state_card: "state-card-custom-ui",
@@ -1128,7 +1125,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Walk in closet lights",
         supported_features: 41,
-        supported_color_modes: ["brightness", "color_temp"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:wall-sconce",
       },
@@ -1140,8 +1136,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         brightness: 254,
         friendly_name: "Outdoor lights",
         supported_features: 41,
-        supported_color_modes: ["brightness"],
-        color_mode: "brightness",
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:wall-sconce",
       },
@@ -1154,8 +1148,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 128,
         color_temp: 366,
-        supported_color_modes: ["brightness", "color_temp", "rgb"],
-        color_mode: "color_temp",
         effect_list: ["colorloop"],
         friendly_name: "Downstairs lights",
         supported_features: 63,
@@ -1315,7 +1307,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
-        supported_color_modes: ["brightness", "color_temp"],
         is_deconz_group: false,
         friendly_name: "Bedside Lamp",
         supported_features: 63,
@@ -1329,7 +1320,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
-        supported_color_modes: ["brightness", "color_temp"],
         is_deconz_group: false,
         friendly_name: "Floorlamp Reading Light",
         supported_features: 43,
@@ -1345,8 +1335,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 128,
         color_temp: 366,
-        supported_color_modes: ["brightness", "color_temp", "rgb"],
-        color_mode: "color_temp",
         effect_list: ["colorloop"],
         is_deconz_group: false,
         friendly_name: "Hallway window light",
@@ -1361,7 +1349,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         brightness: 77,
         is_deconz_group: false,
-        supported_color_modes: ["brightness"],
         friendly_name: "Isa Ceiling Light",
         supported_features: 41,
         custom_ui_state_card: "state-card-custom-ui",
@@ -1376,8 +1363,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 150,
         color_temp: 366,
-        supported_color_modes: ["brightness", "color_temp"],
-        color_mode: "color_temp",
         effect_list: ["colorloop"],
         is_deconz_group: false,
         friendly_name: "Floorlamp",
@@ -1392,7 +1377,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Bedroom Ceiling Light",
         supported_features: 41,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1403,7 +1387,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Nightlight",
         supported_features: 17,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:lamp",
       },
@@ -1770,7 +1753,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 2.2,
         friendly_name: "Upstairs Hallway Light",
         supported_features: 33,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1786,7 +1768,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 0,
         friendly_name: "Dining Room Light",
         supported_features: 33,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1802,7 +1783,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 0,
         friendly_name: "Living room Spotlights",
         supported_features: 33,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },
@@ -1819,7 +1799,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 2.5,
         friendly_name: "Passage Lights",
         supported_features: 33,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },
@@ -1864,7 +1843,6 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 37.4,
         friendly_name: "Kitchen Lights",
         supported_features: 33,
-        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },

demo/src/stubs/translations.ts

@@ -3,6 +3,8 @@ import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockTranslations = (hass: MockHomeAssistant) => {
   hass.mockWS(
     "frontend/get_translations",
-    (/* msg: {language: string, category: string} */) => ({ resources: {} })
+    (/* msg: {language: string, category: string} */) => {
+      return { resources: {} };
+    }
   );
 };

gallery/src/components/demo-card.js

@@ -15,10 +15,6 @@ class DemoCard extends PolymerElement {
           margin: 0 0 20px;
           color: var(--primary-color);
         }
-        h2 small {
-          font-size: 0.5em;
-          color: var(--primary-text-color);
-        }
         #card {
           max-width: 400px;
           width: 100vw;
@@ -38,12 +34,7 @@ class DemoCard extends PolymerElement {
           }
         }
       </style>
-      <h2>
-        [[config.heading]]
-        <template is="dom-if" if="[[_size]]">
-          <small>(size [[_size]])</small>
-        </template>
-      </h2>
+      <h2>[[config.heading]]</h2>
       <div class="root">
         <div id="card"></div>
         <template is="dom-if" if="[[showConfig]]">
@@ -64,9 +55,6 @@ class DemoCard extends PolymerElement {
         observer: "_configChanged",
       },
       showConfig: Boolean,
-      _size: {
-        type: Number,
-      },
     };
   }
 
@@ -82,17 +70,6 @@ class DemoCard extends PolymerElement {
 
     const el = this._createCardElement(safeLoad(config.config)[0]);
     card.appendChild(el);
-    this._getSize(el);
-  }
-
-  async _getSize(el) {
-    await customElements.whenDefined(el.localName);
-
-    if (!("getCardSize" in el)) {
-      this._size = undefined;
-      return;
-    }
-    this._size = await el.getCardSize();
   }
 
   _createCardElement(cardConfig) {

gallery/src/data/traces/basic_trace.ts

@@ -1,349 +0,0 @@
-import { DemoTrace } from "./types";
-
-export const basicTrace: DemoTrace = {
-  trace: {
-    last_step: "action/2",
-    run_id: "0",
-    state: "stopped",
-    timestamp: {
-      start: "2021-03-25T04:36:51.223693+00:00",
-      finish: "2021-03-25T04:36:51.266132+00:00",
-    },
-    trigger: "state of input_boolean.toggle_1",
-    domain: "automation",
-    item_id: "1615419646544",
-    trace: {
-      "trigger/0": [
-        {
-          path: "trigger/0",
-          timestamp: "2021-03-25T04:36:51.223693+00:00",
-        },
-      ],
-      "condition/0": [
-        {
-          path: "condition/0",
-          timestamp: "2021-03-25T04:36:51.228243+00:00",
-          changed_variables: {
-            trigger: {
-              platform: "state",
-              entity_id: "input_boolean.toggle_1",
-              from_state: {
-                entity_id: "input_boolean.toggle_1",
-                state: "on",
-                attributes: {
-                  editable: true,
-                  friendly_name: "Toggle 1",
-                },
-                last_changed: "2021-03-24T19:03:59.141440+00:00",
-                last_updated: "2021-03-24T19:03:59.141440+00:00",
-                context: {
-                  id: "5d0918eb379214d07554bdab6a08bcff",
-                  parent_id: null,
-                  user_id: null,
-                },
-              },
-              to_state: {
-                entity_id: "input_boolean.toggle_1",
-                state: "off",
-                attributes: {
-                  editable: true,
-                  friendly_name: "Toggle 1",
-                },
-                last_changed: "2021-03-25T04:36:51.220696+00:00",
-                last_updated: "2021-03-25T04:36:51.220696+00:00",
-                context: {
-                  id: "664d6d261450a9ecea6738e97269a149",
-                  parent_id: null,
-                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
-                },
-              },
-              for: null,
-              attribute: null,
-              description: "state of input_boolean.toggle_1",
-            },
-          },
-          result: {
-            result: true,
-          },
-        },
-      ],
-      "action/0": [
-        {
-          path: "action/0",
-          timestamp: "2021-03-25T04:36:51.243018+00:00",
-          changed_variables: {
-            trigger: {
-              platform: "state",
-              entity_id: "input_boolean.toggle_1",
-              from_state: {
-                entity_id: "input_boolean.toggle_1",
-                state: "on",
-                attributes: {
-                  editable: true,
-                  friendly_name: "Toggle 1",
-                },
-                last_changed: "2021-03-24T19:03:59.141440+00:00",
-                last_updated: "2021-03-24T19:03:59.141440+00:00",
-                context: {
-                  id: "5d0918eb379214d07554bdab6a08bcff",
-                  parent_id: null,
-                  user_id: null,
-                },
-              },
-              to_state: {
-                entity_id: "input_boolean.toggle_1",
-                state: "off",
-                attributes: {
-                  editable: true,
-                  friendly_name: "Toggle 1",
-                },
-                last_changed: "2021-03-25T04:36:51.220696+00:00",
-                last_updated: "2021-03-25T04:36:51.220696+00:00",
-                context: {
-                  id: "664d6d261450a9ecea6738e97269a149",
-                  parent_id: null,
-                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
-                },
-              },
-              for: null,
-              attribute: null,
-              description: "state of input_boolean.toggle_1",
-            },
-            context: {
-              id: "6cfcae368e7b3686fad6c59e83ae76c9",
-              parent_id: "664d6d261450a9ecea6738e97269a149",
-              user_id: null,
-            },
-          },
-          result: {
-            params: {
-              domain: "input_boolean",
-              service: "toggle",
-              service_data: {},
-              target: {
-                entity_id: ["input_boolean.toggle_4"],
-              },
-            },
-            running_script: false,
-            limit: 10,
-          },
-        },
-      ],
-      "action/1": [
-        {
-          path: "action/1",
-          timestamp: "2021-03-25T04:36:51.252406+00:00",
-          result: {
-            choice: 0,
-          },
-        },
-      ],
-      "action/1/choose/0": [
-        {
-          path: "action/1/choose/0",
-          timestamp: "2021-03-25T04:36:51.254569+00:00",
-          result: {
-            result: true,
-          },
-        },
-      ],
-      "action/1/choose/0/conditions/0": [
-        {
-          path: "action/1/choose/0/conditions/0",
-          timestamp: "2021-03-25T04:36:51.254697+00:00",
-          result: {
-            result: true,
-          },
-        },
-      ],
-      "action/1/choose/0/sequence/0": [
-        {
-          path: "action/1/choose/0/sequence/0",
-          timestamp: "2021-03-25T04:36:51.257360+00:00",
-          result: {
-            params: {
-              domain: "input_boolean",
-              service: "toggle",
-              service_data: {},
-              target: {
-                entity_id: ["input_boolean.toggle_2"],
-              },
-            },
-            running_script: false,
-            limit: 10,
-          },
-        },
-      ],
-      "action/1/choose/0/sequence/1": [
-        {
-          path: "action/1/choose/0/sequence/1",
-          timestamp: "2021-03-25T04:36:51.260658+00:00",
-          result: {
-            params: {
-              domain: "input_boolean",
-              service: "toggle",
-              service_data: {},
-              target: {
-                entity_id: ["input_boolean.toggle_3"],
-              },
-            },
-            running_script: false,
-            limit: 10,
-          },
-        },
-      ],
-      "action/2": [
-        {
-          path: "action/2",
-          timestamp: "2021-03-25T04:36:51.264159+00:00",
-          result: {
-            params: {
-              domain: "input_boolean",
-              service: "toggle",
-              service_data: {},
-              target: {
-                entity_id: ["input_boolean.toggle_4"],
-              },
-            },
-            running_script: false,
-            limit: 10,
-          },
-        },
-      ],
-    },
-
-    config: {
-      id: "1615419646544",
-      alias: "Ensure Party mode",
-      description: "",
-      trigger: [
-        {
-          platform: "state",
-          entity_id: "input_boolean.toggle_1",
-        },
-      ],
-      condition: [
-        {
-          condition: "template",
-          alias: "Test if Paulus is home",
-          value_template: "{{ true }}",
-        },
-      ],
-      action: [
-        {
-          service: "input_boolean.toggle",
-          target: {
-            entity_id: "input_boolean.toggle_4",
-          },
-        },
-        {
-          choose: [
-            {
-              alias: "If toggle 3 is on",
-              conditions: [
-                {
-                  condition: "template",
-                  value_template:
-                    "{{ is_state('input_boolean.toggle_3', 'on') }}",
-                },
-              ],
-              sequence: [
-                {
-                  service: "input_boolean.toggle",
-                  alias: "Toggle 2 while 3 is on",
-                  target: {
-                    entity_id: "input_boolean.toggle_2",
-                  },
-                },
-                {
-                  service: "input_boolean.toggle",
-                  alias: "Toggle 3",
-                  target: {
-                    entity_id: "input_boolean.toggle_3",
-                  },
-                },
-              ],
-            },
-          ],
-          default: [
-            {
-              service: "input_boolean.toggle",
-              alias: "Toggle 2",
-              target: {
-                entity_id: "input_boolean.toggle_2",
-              },
-            },
-          ],
-        },
-        {
-          service: "input_boolean.toggle",
-          target: {
-            entity_id: "input_boolean.toggle_4",
-          },
-        },
-      ],
-      mode: "single",
-    },
-    context: {
-      id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      parent_id: "664d6d261450a9ecea6738e97269a149",
-      user_id: null,
-    },
-    script_execution: "finished",
-  },
-  logbookEntries: [
-    {
-      name: "Ensure Party mode",
-      message: "has been triggered by state of input_boolean.toggle_1",
-      source: "state of input_boolean.toggle_1",
-      entity_id: "automation.toggle_toggles",
-      context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      when: "2021-03-25T04:36:51.240832+00:00",
-      domain: "automation",
-    },
-    {
-      when: "2021-03-25T04:36:51.249828+00:00",
-      name: "Toggle 4",
-      state: "on",
-      entity_id: "input_boolean.toggle_4",
-      context_entity_id: "automation.toggle_toggles",
-      context_entity_id_name: "Ensure Party mode",
-      context_event_type: "automation_triggered",
-      context_domain: "automation",
-      context_name: "Ensure Party mode",
-    },
-    {
-      when: "2021-03-25T04:36:51.258947+00:00",
-      name: "Toggle 2",
-      state: "on",
-      entity_id: "input_boolean.toggle_2",
-      context_entity_id: "automation.toggle_toggles",
-      context_entity_id_name: "Ensure Party mode",
-      context_event_type: "automation_triggered",
-      context_domain: "automation",
-      context_name: "Ensure Party mode",
-    },
-    {
-      when: "2021-03-25T04:36:51.261806+00:00",
-      name: "Toggle 3",
-      state: "off",
-      entity_id: "input_boolean.toggle_3",
-      context_entity_id: "automation.toggle_toggles",
-      context_entity_id_name: "Ensure Party mode",
-      context_event_type: "automation_triggered",
-      context_domain: "automation",
-      context_name: "Ensure Party mode",
-    },
-    {
-      when: "2021-03-25T04:36:51.265246+00:00",
-      name: "Toggle 4",
-      state: "off",
-      entity_id: "input_boolean.toggle_4",
-      context_entity_id: "automation.toggle_toggles",
-      context_entity_id_name: "Ensure Party mode",
-      context_event_type: "automation_triggered",
-      context_domain: "automation",
-      context_name: "Ensure Party mode",
-    },
-  ],
-};

gallery/src/data/traces/mock-demo-trace.ts

@@ -1,44 +0,0 @@
-import { LogbookEntry } from "../../../../src/data/logbook";
-import { AutomationTraceExtended } from "../../../../src/data/trace";
-import { DemoTrace } from "./types";
-
-export const mockDemoTrace = (
-  tracePartial: Partial<AutomationTraceExtended>,
-  logbookEntries?: LogbookEntry[]
-): DemoTrace => ({
-  trace: {
-    last_step: "",
-    run_id: "0",
-    state: "stopped",
-    timestamp: {
-      start: "2021-03-25T04:36:51.223693+00:00",
-      finish: "2021-03-25T04:36:51.266132+00:00",
-    },
-    trigger: "mocked trigger",
-    domain: "automation",
-    item_id: "1615419646544",
-    trace: {
-      "trigger/0": [
-        {
-          path: "trigger/0",
-          changed_variables: {
-            trigger: {
-              description: "mocked trigger",
-            },
-          },
-          timestamp: "2021-03-25T04:36:51.223693+00:00",
-        },
-      ],
-    },
-    config: {
-      trigger: [],
-      action: [],
-    },
-    context: {
-      id: "abcd",
-    },
-    script_execution: "finished",
-    ...tracePartial,
-  },
-  logbookEntries: logbookEntries || [],
-});

gallery/src/data/traces/motion-light-trace.ts

@@ -1,214 +0,0 @@
-import { DemoTrace } from "./types";
-
-export const motionLightTrace: DemoTrace = {
-  trace: {
-    last_step: "action/3",
-    run_id: "1",
-    state: "stopped",
-    timestamp: {
-      start: "2021-03-14T06:07:01.768006+00:00",
-      finish: "2021-03-14T06:07:53.287525+00:00",
-    },
-    trigger: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
-    domain: "automation",
-    item_id: "1614732497392",
-    trace: {
-      "trigger/0": [
-        {
-          path: "trigger/0",
-          timestamp: "2021-03-25T04:36:51.223693+00:00",
-        },
-      ],
-      "action/0": [
-        {
-          path: "action/0",
-          timestamp: "2021-03-14T06:07:01.771038+00:00",
-          changed_variables: {
-            trigger: {
-              platform: "state",
-              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-              from_state: {
-                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-                state: "off",
-                attributes: {
-                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
-                  icon: "mdi:camera-off",
-                },
-                last_changed: "2021-03-14T06:06:29.235325+00:00",
-                last_updated: "2021-03-14T06:06:29.235325+00:00",
-                context: {
-                  id: "ad4864c5ce957c38a07b50378eeb245d",
-                  parent_id: null,
-                  user_id: null,
-                },
-              },
-              to_state: {
-                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-                state: "on",
-                attributes: {
-                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
-                  icon: "mdi:camera",
-                },
-                last_changed: "2021-03-14T06:07:01.762009+00:00",
-                last_updated: "2021-03-14T06:07:01.762009+00:00",
-                context: {
-                  id: "e22ddfd5f11dc4aad9a52fc10dab613b",
-                  parent_id: null,
-                  user_id: null,
-                },
-              },
-              for: null,
-              attribute: null,
-              description:
-                "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
-            },
-            context: {
-              id: "43b6ee9293a551c5cc14e8eb60af54ba",
-              parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
-              user_id: null,
-            },
-          },
-        },
-      ],
-      "action/1": [
-        { path: "action/1", timestamp: "2021-03-14T06:07:01.875316+00:00" },
-      ],
-      "action/2": [
-        {
-          path: "action/2",
-          timestamp: "2021-03-14T06:07:53.195013+00:00",
-          changed_variables: {
-            wait: {
-              remaining: null,
-              trigger: {
-                platform: "state",
-                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-                from_state: {
-                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-                  state: "on",
-                  attributes: {
-                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
-                    icon: "mdi:camera",
-                  },
-                  last_changed: "2021-03-14T06:07:01.762009+00:00",
-                  last_updated: "2021-03-14T06:07:01.762009+00:00",
-                  context: {
-                    id: "e22ddfd5f11dc4aad9a52fc10dab613b",
-                    parent_id: null,
-                    user_id: null,
-                  },
-                },
-                to_state: {
-                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-                  state: "off",
-                  attributes: {
-                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
-                    icon: "mdi:camera-off",
-                  },
-                  last_changed: "2021-03-14T06:07:53.186755+00:00",
-                  last_updated: "2021-03-14T06:07:53.186755+00:00",
-                  context: {
-                    id: "b2308cc91d509ea8e0c623331ab178d6",
-                    parent_id: null,
-                    user_id: null,
-                  },
-                },
-                for: null,
-                attribute: null,
-                description:
-                  "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
-              },
-            },
-          },
-        },
-      ],
-      "action/3": [
-        {
-          path: "action/3",
-          timestamp: "2021-03-14T06:07:53.196014+00:00",
-        },
-      ],
-    },
-    config: {
-      mode: "restart",
-      max_exceeded: "silent",
-      trigger: [
-        {
-          platform: "state",
-          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-          from: "off",
-          to: "on",
-        },
-      ],
-      action: [
-        {
-          service: "light.turn_on",
-          target: {
-            entity_id: "light.elgato_key_light_air",
-          },
-        },
-        {
-          wait_for_trigger: [
-            {
-              platform: "state",
-              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
-              from: "on",
-              to: "off",
-            },
-          ],
-        },
-        {
-          delay: 0,
-        },
-        {
-          service: "light.turn_off",
-          target: {
-            entity_id: "light.elgato_key_light_air",
-          },
-        },
-      ],
-      id: "1614732497392",
-      alias: "Auto Elgato",
-      description: "",
-    },
-    context: {
-      id: "43b6ee9293a551c5cc14e8eb60af54ba",
-      parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
-      user_id: null,
-    },
-    script_execution: "finished",
-  },
-  logbookEntries: [
-    {
-      name: "Auto Elgato",
-      message:
-        "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
-      source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
-      entity_id: "automation.auto_elgato",
-      when: "2021-03-14T06:07:01.768492+00:00",
-      domain: "automation",
-    },
-    {
-      when: "2021-03-14T06:07:01.872187+00:00",
-      name: "Elgato Key Light Air",
-      state: "on",
-      entity_id: "light.elgato_key_light_air",
-      context_entity_id: "automation.auto_elgato",
-      context_entity_id_name: "Auto Elgato",
-      context_event_type: "automation_triggered",
-      context_domain: "automation",
-      context_name: "Auto Elgato",
-    },
-    {
-      when: "2021-03-14T06:07:53.284505+00:00",
-      name: "Elgato Key Light Air",
-      state: "off",
-      entity_id: "light.elgato_key_light_air",
-      context_entity_id: "automation.auto_elgato",
-      context_entity_id_name: "Auto Elgato",
-      context_event_type: "automation_triggered",
-      context_domain: "automation",
-      context_name: "Auto Elgato",
-    },
-  ],
-};

gallery/src/data/traces/types.ts

@@ -1,7 +0,0 @@
-import { AutomationTraceExtended } from "../../../../src/data/trace";
-import { LogbookEntry } from "../../../../src/data/logbook";
-
-export interface DemoTrace {
-  trace: AutomationTraceExtended;
-  logbookEntries: LogbookEntry[];
-}

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

@@ -1,102 +0,0 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
-import "../../../src/components/ha-card";
-import { describeAction } from "../../../src/data/script_i18n";
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../src/types";
-
-const actions = [
-  { wait_template: "{{ true }}", alias: "Something with an alias" },
-  { delay: "0:05" },
-  { wait_template: "{{ true }}" },
-  {
-    condition: "template",
-    value_template: "{{ true }}",
-  },
-  { event: "happy_event" },
-  {
-    device_id: "abcdefgh",
-    domain: "plex",
-    entity_id: "media_player.kitchen",
-  },
-  { scene: "scene.kitchen_morning" },
-  {
-    wait_for_trigger: [
-      {
-        platform: "state",
-        entity_id: "input_boolean.toggle_1",
-      },
-    ],
-  },
-  {
-    variables: {
-      hello: "world",
-    },
-  },
-  {
-    service: "input_boolean.toggle",
-    target: {
-      entity_id: "input_boolean.toggle_4",
-    },
-  },
-];
-
-@customElement("demo-automation-describe-action")
-export class DemoAutomationDescribeAction extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-    return html`
-      <ha-card header="Actions">
-        ${actions.map(
-          (conf) => html`
-            <div class="action">
-              <span>${describeAction(this.hass, conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
-            </div>
-          `
-        )}
-      </ha-card>
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .action {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      span {
-        margin-right: 16px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-describe-action": DemoAutomationDescribeAction;
-  }
-}

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

@@ -1,65 +0,0 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import "../../../src/components/ha-card";
-import { describeCondition } from "../../../src/data/automation_i18n";
-
-const conditions = [
-  { condition: "and" },
-  { condition: "not" },
-  { condition: "or" },
-  { condition: "state" },
-  { condition: "numeric_state" },
-  { condition: "sun", after: "sunset" },
-  { condition: "sun", after: "sunrise" },
-  { condition: "zone" },
-  { condition: "time" },
-  { condition: "template" },
-];
-
-@customElement("demo-automation-describe-condition")
-export class DemoAutomationDescribeCondition extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      <ha-card header="Conditions">
-        ${conditions.map(
-          (conf) => html`
-            <div class="condition">
-              <span>${describeCondition(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
-            </div>
-          `
-        )}
-      </ha-card>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .condition {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      span {
-        margin-right: 16px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-describe-condition": DemoAutomationDescribeCondition;
-  }
-}

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

@@ -1,68 +0,0 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import "../../../src/components/ha-card";
-import { describeTrigger } from "../../../src/data/automation_i18n";
-
-const triggers = [
-  { platform: "state" },
-  { platform: "mqtt" },
-  { platform: "geo_location" },
-  { platform: "homeassistant" },
-  { platform: "numeric_state" },
-  { platform: "sun" },
-  { platform: "time_pattern" },
-  { platform: "webhook" },
-  { platform: "zone" },
-  { platform: "tag" },
-  { platform: "time" },
-  { platform: "template" },
-  { platform: "event" },
-];
-
-@customElement("demo-automation-describe-trigger")
-export class DemoAutomationDescribeTrigger extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      <ha-card header="Triggers">
-        ${triggers.map(
-          (conf) => html`
-            <div class="trigger">
-              <span>${describeTrigger(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
-            </div>
-          `
-        )}
-      </ha-card>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .trigger {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      span {
-        margin-right: 16px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-describe-trigger": DemoAutomationDescribeTrigger;
-  }
-}

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

@@ -1,87 +0,0 @@
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
-import "../../../src/components/ha-card";
-import "../../../src/components/trace/hat-script-graph";
-import "../../../src/components/trace/hat-trace-timeline";
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../src/types";
-import { mockDemoTrace } from "../data/traces/mock-demo-trace";
-import { DemoTrace } from "../data/traces/types";
-
-const traces: DemoTrace[] = [
-  mockDemoTrace({ state: "running" }),
-  mockDemoTrace({ state: "debugged" }),
-  mockDemoTrace({ state: "stopped", script_execution: "failed_conditions" }),
-  mockDemoTrace({ state: "stopped", script_execution: "failed_single" }),
-  mockDemoTrace({ state: "stopped", script_execution: "failed_max_runs" }),
-  mockDemoTrace({ state: "stopped", script_execution: "finished" }),
-  mockDemoTrace({ state: "stopped", script_execution: "aborted" }),
-  mockDemoTrace({
-    state: "stopped",
-    script_execution: "error",
-    error: 'Variable "beer" cannot be None',
-  }),
-  mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
-];
-
-@customElement("demo-automation-trace-timeline")
-export class DemoAutomationTraceTimeline extends LitElement {
-  @property({ attribute: false }) hass?: HomeAssistant;
-
-  protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-    return html`
-      ${traces.map(
-        (trace) => html`
-          <ha-card .header=${trace.trace.config.alias}>
-            <div class="card-content">
-              <hat-trace-timeline
-                .hass=${this.hass}
-                .trace=${trace.trace}
-                .logbookEntries=${trace.logbookEntries}
-              ></hat-trace-timeline>
-              <button @click=${() => console.log(trace)}>Log trace</button>
-            </div>
-          </ha-card>
-        `
-      )}
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px;
-      }
-      .card-content {
-        display: flex;
-      }
-      button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-trace-timeline": DemoAutomationTraceTimeline;
-  }
-}

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

@@ -1,98 +0,0 @@
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  internalProperty,
-  property,
-} from "lit-element";
-import "../../../src/components/ha-card";
-import "../../../src/components/trace/hat-script-graph";
-import "../../../src/components/trace/hat-trace-timeline";
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../src/types";
-import { DemoTrace } from "../data/traces/types";
-import { basicTrace } from "../data/traces/basic_trace";
-import { motionLightTrace } from "../data/traces/motion-light-trace";
-
-const traces: DemoTrace[] = [basicTrace, motionLightTrace];
-
-@customElement("demo-automation-trace")
-export class DemoAutomationTrace extends LitElement {
-  @property({ attribute: false }) hass?: HomeAssistant;
-
-  @internalProperty() private _selected = {};
-
-  protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-    return html`
-      ${traces.map(
-        (trace, idx) => html`
-          <ha-card .header=${trace.trace.config.alias}>
-            <div class="card-content">
-              <hat-script-graph
-                .trace=${trace.trace}
-                .selected=${this._selected[idx]}
-                @graph-node-selected=${(ev) => {
-                  this._selected = { ...this._selected, [idx]: ev.detail.path };
-                }}
-              ></hat-script-graph>
-              <hat-trace-timeline
-                allowPick
-                .hass=${this.hass}
-                .trace=${trace.trace}
-                .logbookEntries=${trace.logbookEntries}
-                .selectedPath=${this._selected[idx]}
-                @value-changed=${(ev) => {
-                  this._selected = {
-                    ...this._selected,
-                    [idx]: ev.detail.value,
-                  };
-                }}
-              ></hat-trace-timeline>
-              <button @click=${() => console.log(trace)}>Log trace</button>
-            </div>
-          </ha-card>
-        `
-      )}
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px;
-      }
-      .card-content {
-        display: flex;
-      }
-      .card-content > * {
-        margin-right: 16px;
-      }
-      .card-content > *:last-child {
-        margin-right: 0;
-      }
-      button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-trace": DemoAutomationTrace;
-  }
-}

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

@@ -93,8 +93,4 @@ class DemoAlarmPanelEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-alarm-panel-card": DemoAlarmPanelEntity;
-  }
-}
+customElements.define("demo-hui-alarm-panel-card", DemoAlarmPanelEntity);

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

@@ -75,8 +75,4 @@ class DemoConditional extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-conditional-card": DemoConditional;
-  }
-}
+customElements.define("demo-hui-conditional-card", DemoConditional);

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

@@ -239,8 +239,4 @@ class DemoEntities extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-entities-card": DemoEntities;
-  }
-}
+customElements.define("demo-hui-entities-card", DemoEntities);

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

@@ -91,8 +91,4 @@ class DemoButtonEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-entity-button-card": DemoButtonEntity;
-  }
-}
+customElements.define("demo-hui-entity-button-card", DemoButtonEntity);

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

@@ -132,8 +132,4 @@ class DemoEntityFilter extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-entity-filter-card": DemoEntityFilter;
-  }
-}
+customElements.define("demo-hui-entity-filter-card", DemoEntityFilter);

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

@@ -129,8 +129,4 @@ class DemoGaugeEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-gauge-card": DemoGaugeEntity;
-  }
-}
+customElements.define("demo-hui-gauge-card", DemoGaugeEntity);

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

@@ -186,7 +186,7 @@ const CONFIGS = [
       name:
     - light.kitchen_lights
     - entity: lock.kitchen_door
-      name:
+      name: 
     - light.ceiling_lights
     `,
   },
@@ -194,7 +194,7 @@ const CONFIGS = [
     heading: "Custom tap action",
     config: `
 - type: glance
-  columns: 4
+  columns: 4  
   entities:
     - entity: lock.kitchen_door
       name: Custom
@@ -232,8 +232,4 @@ class DemoGlanceEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-glance-card": DemoGlanceEntity;
-  }
-}
+customElements.define("demo-hui-glance-card", DemoGlanceEntity);

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

@@ -42,8 +42,4 @@ class DemoIframe extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-iframe-card": DemoIframe;
-  }
-}
+customElements.define("demo-hui-iframe-card", DemoIframe);

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

@@ -85,8 +85,4 @@ class DemoLightEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-light-card": DemoLightEntity;
-  }
-}
+customElements.define("demo-hui-light-card", DemoLightEntity);

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

@@ -183,8 +183,4 @@ class DemoMap extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-map-card": DemoMap;
-  }
-}
+customElements.define("demo-hui-map-card", DemoMap);

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

@@ -276,8 +276,4 @@ class DemoMarkdown extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-markdown-card": DemoMarkdown;
-  }
-}
+customElements.define("demo-hui-markdown-card", DemoMarkdown);

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

@@ -180,8 +180,4 @@ class DemoHuiMediaControlCard extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-media-control-card": DemoHuiMediaControlCard;
-  }
-}
+customElements.define("demo-hui-media-control-card", DemoHuiMediaControlCard);

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

@@ -77,8 +77,4 @@ class DemoHuiMediaPlayerRow extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-media-player-row": DemoHuiMediaPlayerRow;
-  }
-}
+customElements.define("demo-hui-media-player-row", DemoHuiMediaPlayerRow);

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

@@ -147,8 +147,4 @@ class DemoPictureElements extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-picture-elements-card": DemoPictureElements;
-  }
-}
+customElements.define("demo-hui-picture-elements-card", DemoPictureElements);

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

@@ -102,8 +102,4 @@ class DemoPictureEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-picture-entity-card": DemoPictureEntity;
-  }
-}
+customElements.define("demo-hui-picture-entity-card", DemoPictureEntity);

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

@@ -143,8 +143,4 @@ class DemoPictureGlance extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-picture-glance-card": DemoPictureGlance;
-  }
-}
+customElements.define("demo-hui-picture-glance-card", DemoPictureGlance);

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

@@ -52,8 +52,4 @@ export class DemoPlantEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-plant-card": DemoPlantEntity;
-  }
-}
+customElements.define("demo-hui-plant-card", DemoPlantEntity);

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

@@ -48,8 +48,4 @@ class DemoShoppingListEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-shopping-list-card": DemoShoppingListEntity;
-  }
-}
+customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity);

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

@@ -49,110 +49,6 @@ const ENTITIES = [
 ];
 
 const CONFIGS = [
-  {
-    heading: "Default Grid",
-    config: `
-- type: grid
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
-  },
-  {
-    heading: "Non-square Grid with 2 columns",
-    config: `
-- type: grid
-  columns: 2
-  square: false
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
-  },
-  {
-    heading: "Default Grid with title",
-    config: `
-- type: grid
-  title: Kitchen
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
-  },
-  {
-    heading: "Columns 4",
-    config: `
-- type: grid
-  columns: 4
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
-  },
-  {
-    heading: "Columns 2",
-    config: `
-- type: grid
-  columns: 2
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    `,
-  },
-  {
-    heading: "Columns 1",
-    config: `
-- type: grid
-  columns: 1
-  cards:
-  - type: entity
-    entity: light.kitchen_lights
-    `,
-  },
-  {
-    heading: "Size for single card",
-    config: `
-- type: grid
-  cards:
-  - type: entity
-    entity: light.kitchen_lights
-    `,
-  },
-
   {
     heading: "Vertical Stack",
     config: `
@@ -203,9 +99,45 @@ const CONFIGS = [
       entity: light.bed_light
     `,
   },
+  {
+    heading: "Default Grid",
+    config: `
+- type: grid
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    - type: entity
+      entity: device_tracker.demo_anne_therese
+    `,
+  },
+  {
+    heading: "Non-square Grid with 2 columns",
+    config: `
+- type: grid
+  columns: 2
+  square: false
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    `,
+  },
 ];
 
-@customElement("demo-hui-grid-and-stack-card")
+@customElement("demo-hui-stack-card")
 class DemoStack extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -223,8 +155,4 @@ class DemoStack extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-grid-and-stack-card": DemoStack;
-  }
-}
+customElements.define("demo-hui-stack-card", DemoStack);

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

@@ -96,8 +96,4 @@ class DemoThermostatEntity extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-hui-thermostat-card": DemoThermostatEntity;
-  }
-}
+customElements.define("demo-hui-thermostat-card", DemoThermostatEntity);

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

@@ -1,356 +0,0 @@
-import {
-  customElement,
-  html,
-  css,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-
-import { IntegrationManifest } from "../../../src/data/integration";
-
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../src/types";
-import "../../../src/panels/config/integrations/ha-integration-card";
-import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
-import "../../../src/panels/config/integrations/ha-config-flow-card";
-import type {
-  ConfigEntryExtended,
-  DataEntryFlowProgressExtended,
-} from "../../../src/panels/config/integrations/ha-config-integrations";
-import { DeviceRegistryEntry } from "../../../src/data/device_registry";
-import { EntityRegistryEntry } from "../../../src/data/entity_registry";
-import { classMap } from "lit-html/directives/class-map";
-
-const createConfigEntry = (
-  title: string,
-  override: Partial<ConfigEntryExtended> = {}
-): ConfigEntryExtended => ({
-  entry_id: title,
-  domain: "esphome",
-  localized_domain_name: "ESPHome",
-  title,
-  source: "zeroconf",
-  state: "loaded",
-  connection_class: "local_push",
-  supports_options: false,
-  supports_unload: true,
-  disabled_by: null,
-  reason: null,
-  ...override,
-});
-
-const createManifest = (
-  isCustom: boolean,
-  isCloud: boolean,
-  name = "ESPHome"
-): IntegrationManifest => ({
-  name,
-  domain: "esphome",
-  is_built_in: !isCustom,
-  config_flow: false,
-  documentation: "https://www.home-assistant.io/integrations/esphome/",
-  iot_class: isCloud ? "cloud_polling" : "local_polling",
-});
-
-const loadedEntry = createConfigEntry("Loaded");
-const nameAsDomainEntry = createConfigEntry("ESPHome");
-const longNameEntry = createConfigEntry(
-  "Entry with a super long name that is going to the next line"
-);
-const longNonBreakingNameEntry = createConfigEntry(
-  "EntryWithASuperLongNameThatDoesNotBreak"
-);
-const configPanelEntry = createConfigEntry("Config Panel", {
-  domain: "mqtt",
-  localized_domain_name: "MQTT",
-});
-const optionsFlowEntry = createConfigEntry("Options Flow", {
-  supports_options: true,
-});
-const setupErrorEntry = createConfigEntry("Setup Error", {
-  state: "setup_error",
-});
-const migrationErrorEntry = createConfigEntry("Migration Error", {
-  state: "migration_error",
-});
-const setupRetryEntry = createConfigEntry("Setup Retry", {
-  state: "setup_retry",
-});
-const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
-  state: "setup_retry",
-  reason: "connection_error",
-});
-const setupRetryReasonMissingKeyEntry = createConfigEntry("Setup Retry", {
-  state: "setup_retry",
-  reason:
-    "HTTPSConnectionpool: Max retries exceeded with NewConnectionError('<urllib3.connection.HTTPSConnection object at 0x9eedfc10>: Failed to establish a new connection: [Errno 113] Host is unreachable')",
-});
-const failedUnloadEntry = createConfigEntry("Failed Unload", {
-  state: "failed_unload",
-});
-const notLoadedEntry = createConfigEntry("Not Loaded", { state: "not_loaded" });
-const disabledEntry = createConfigEntry("Disabled", {
-  state: "not_loaded",
-  disabled_by: "user",
-});
-const disabledFailedUnloadEntry = createConfigEntry(
-  "Disabled - Failed Unload",
-  {
-    state: "failed_unload",
-    disabled_by: "user",
-  }
-);
-
-const configFlows: DataEntryFlowProgressExtended[] = [
-  {
-    flow_id: "adbb401329d8439ebb78ef29837826a8",
-    handler: "roku",
-    context: {
-      source: "ssdp",
-      unique_id: "YF008D862864",
-      title_placeholders: {
-        name: "Living room Roku",
-      },
-    },
-    step_id: "discovery_confirm",
-    localized_title: "Living room Roku",
-  },
-  {
-    flow_id: "adbb401329d8439ebb78ef29837826a8",
-    handler: "hue",
-    context: {
-      source: "reauth",
-      unique_id: "YF008D862864",
-      title_placeholders: {
-        name: "Living room Roku",
-      },
-    },
-    step_id: "discovery_confirm",
-    localized_title: "Philips Hue",
-  },
-];
-
-const configEntries: Array<{
-  items: ConfigEntryExtended[];
-  is_custom?: boolean;
-  disabled?: boolean;
-  highlight?: string;
-}> = [
-  { items: [loadedEntry] },
-  { items: [configPanelEntry] },
-  { items: [optionsFlowEntry] },
-  { items: [nameAsDomainEntry] },
-  { items: [longNameEntry] },
-  { items: [longNonBreakingNameEntry] },
-  { items: [setupErrorEntry] },
-  { items: [migrationErrorEntry] },
-  { items: [setupRetryEntry] },
-  { items: [setupRetryReasonEntry] },
-  { items: [setupRetryReasonMissingKeyEntry] },
-  { items: [failedUnloadEntry] },
-  { items: [notLoadedEntry] },
-  {
-    items: [
-      loadedEntry,
-      setupErrorEntry,
-      migrationErrorEntry,
-      longNameEntry,
-      longNonBreakingNameEntry,
-      setupRetryEntry,
-      failedUnloadEntry,
-      notLoadedEntry,
-      disabledEntry,
-      nameAsDomainEntry,
-      configPanelEntry,
-      optionsFlowEntry,
-    ],
-  },
-  { disabled: true, items: [disabledEntry] },
-  { disabled: true, items: [disabledFailedUnloadEntry] },
-  {
-    disabled: true,
-    items: [disabledEntry, disabledFailedUnloadEntry],
-  },
-  {
-    items: [loadedEntry, configPanelEntry],
-    highlight: "Loaded",
-  },
-];
-
-const createEntityRegistryEntries = (
-  item: ConfigEntryExtended
-): EntityRegistryEntry[] => [
-  {
-    config_entry_id: item.entry_id,
-    device_id: "mock-device-id",
-    area_id: null,
-    disabled_by: null,
-    entity_id: "binary_sensor.updater",
-    name: null,
-    icon: null,
-    platform: "updater",
-  },
-];
-
-const createDeviceRegistryEntries = (
-  item: ConfigEntryExtended
-): DeviceRegistryEntry[] => [
-  {
-    entry_type: null,
-    config_entries: [item.entry_id],
-    connections: [],
-    manufacturer: "ESPHome",
-    model: "Mock Device",
-    name: "Tag Reader",
-    sw_version: null,
-    id: "mock-device-id",
-    identifiers: [],
-    via_device_id: null,
-    area_id: null,
-    name_by_user: null,
-    disabled_by: null,
-  },
-];
-
-@customElement("demo-integration-card")
-export class DemoIntegrationCard extends LitElement {
-  @property({ attribute: false }) hass?: HomeAssistant;
-
-  @internalProperty() isCustomIntegration = false;
-
-  @internalProperty() isCloud = false;
-
-  protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-    return html`
-      <div class="container">
-        <div class="filters">
-          <ha-formfield label="Custom Integration">
-            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
-          </ha-formfield>
-          <ha-formfield label="Relies on cloud">
-            <ha-switch @change=${this._toggleCloud}></ha-switch>
-          </ha-formfield>
-        </div>
-
-        <ha-ignored-config-entry-card
-          .hass=${this.hass}
-          .entry=${createConfigEntry("Ignored Entry")}
-          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
-        ></ha-ignored-config-entry-card>
-
-        ${configFlows.map(
-          (flow) => html`
-            <ha-config-flow-card
-              .hass=${this.hass}
-              .flow=${flow}
-              .manifest=${createManifest(
-                this.isCustomIntegration,
-                this.isCloud,
-                flow.handler === "roku" ? "Roku" : "Philips Hue"
-              )}
-            ></ha-config-flow-card>
-          `
-        )}
-        ${configEntries.map(
-          (info) => html`
-            <ha-integration-card
-              class=${classMap({
-                highlight: info.highlight !== undefined,
-              })}
-              .hass=${this.hass}
-              domain="esphome"
-              .items=${info.items}
-              .manifest=${createManifest(
-                this.isCustomIntegration,
-                this.isCloud
-              )}
-              .entityRegistryEntries=${createEntityRegistryEntries(
-                info.items[0]
-              )}
-              .deviceRegistryEntries=${createDeviceRegistryEntries(
-                info.items[0]
-              )}
-              ?disabled=${info.disabled}
-              .selectedConfigEntryId=${info.highlight}
-            ></ha-integration-card>
-          `
-        )}
-      </div>
-      <div class="container">
-        <!-- One that is standalone to see how it increases height if height
-           not defined by other cards. -->
-        <ha-integration-card
-          .hass=${this.hass}
-          domain="esphome"
-          .items=${[
-            loadedEntry,
-            setupErrorEntry,
-            migrationErrorEntry,
-            setupRetryEntry,
-            failedUnloadEntry,
-          ]}
-          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
-          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
-          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
-        ></ha-integration-card>
-      </div>
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    // Normally this string is loaded from backend
-    hass.addTranslations(
-      {
-        "component.esphome.config.error.connection_error":
-          "Can't connect to ESP. Please make sure your YAML file contains an 'api:' line.",
-      },
-      "en"
-    );
-  }
-
-  private _toggleCustomIntegration() {
-    this.isCustomIntegration = !this.isCustomIntegration;
-  }
-
-  private _toggleCloud() {
-    this.isCloud = !this.isCloud;
-  }
-
-  static get styles() {
-    return css`
-      .container {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        grid-gap: 16px 16px;
-        padding: 8px 16px 16px;
-        margin-bottom: 64px;
-      }
-
-      .container > * {
-        max-width: 500px;
-      }
-
-      ha-formfield {
-        margin: 8px 0;
-        display: block;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-integration-card": DemoIntegrationCard;
-  }
-}

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

@@ -9,10 +9,13 @@ import {
 } from "lit-element";
 import "../../../src/components/ha-card";
 import {
-  LightColorModes,
+  SUPPORT_BRIGHTNESS,
+  SUPPORT_COLOR,
+  SUPPORT_COLOR_TEMP,
   SUPPORT_EFFECT,
   SUPPORT_FLASH,
   SUPPORT_TRANSITION,
+  SUPPORT_WHITE_VALUE,
 } from "../../../src/data/light";
 import "../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
@@ -29,8 +32,7 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_color_modes: [LightColorModes.BRIGHTNESS],
-    color_mode: LightColorModes.BRIGHTNESS,
+    supported_features: SUPPORT_BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -38,96 +40,20 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-    ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    supported_features: SUPPORT_BRIGHTNESS + SUPPORT_COLOR_TEMP,
   }),
-  getEntity("light", "color_hs_light", "on", {
-    friendly_name: "Color HS Light",
-    brightness: 255,
-    hs_color: [30, 100],
-    rgb_color: [30, 100, 255],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.HS,
-    ],
-    color_mode: LightColorModes.HS,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_rgb_ct_light", "on", {
-    friendly_name: "Color RGB + CT Light",
-    brightness: 255,
-    color_temp: 75,
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.RGB,
-    ],
-    color_mode: LightColorModes.COLOR_TEMP,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_RGB_light", "on", {
+  getEntity("light", "color_effectslight", "on", {
     friendly_name: "Color Effets Light",
     brightness: 255,
-    rgb_color: [30, 100, 255],
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
-    color_mode: LightColorModes.RGB,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_rgbw_light", "on", {
-    friendly_name: "Color RGBW Light",
-    brightness: 255,
-    rgbw_color: [30, 100, 255, 125],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.RGBW,
-    ],
-    color_mode: LightColorModes.RGBW,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_rgbww_light", "on", {
-    friendly_name: "Color RGBWW Light",
-    brightness: 255,
-    rgbww_color: [30, 100, 255, 125, 10],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.RGBWW,
-    ],
-    color_mode: LightColorModes.RGBWW,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_xy_light", "on", {
-    friendly_name: "Color XY Light",
-    brightness: 255,
-    xy_color: [30, 100],
-    rgb_color: [30, 100, 255],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.XY,
-    ],
-    color_mode: LightColorModes.XY,
+    hs_color: [30, 100],
+    white_value: 36,
+    supported_features:
+      SUPPORT_BRIGHTNESS +
+      SUPPORT_EFFECT +
+      SUPPORT_FLASH +
+      SUPPORT_COLOR +
+      SUPPORT_TRANSITION +
+      SUPPORT_WHITE_VALUE,
     effect_list: ["random", "colorloop"],
   }),
 ];
@@ -155,8 +81,4 @@ class DemoMoreInfoLight extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-info-light": DemoMoreInfoLight;
-  }
-}
+customElements.define("demo-more-info-light", DemoMoreInfoLight);

gallery/src/ha-gallery.js

@@ -111,9 +111,29 @@ class HaGallery extends PolymerElement {
                 </template>
               </ha-card>
 
-              <ha-card header="Other Demos">
-                <div class="card-content intro"></div>
-                <template is="dom-repeat" items="[[_restDemos]]">
+              <ha-card header="More Info Demos">
+                <div class="card-content intro">
+                  <p>
+                    More info screens show up when an entity is clicked.
+                  </p>
+                </div>
+                <template is="dom-repeat" items="[[_moreInfoDemos]]">
+                  <a href="#[[item]]">
+                    <paper-item>
+                      <paper-item-body>{{ item }}</paper-item-body>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
+                    </paper-item>
+                  </a>
+                </template>
+              </ha-card>
+
+              <ha-card header="Util Demos">
+                <div class="card-content intro">
+                  <p>
+                    Test pages for our utility functions.
+                  </p>
+                </div>
+                <template is="dom-repeat" items="[[_utilDemos]]">
                   <a href="#[[item]]">
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
@@ -158,9 +178,13 @@ class HaGallery extends PolymerElement {
         type: Array,
         computed: "_computeLovelace(_demos)",
       },
-      _restDemos: {
+      _moreInfoDemos: {
         type: Array,
-        computed: "_computeRest(_demos)",
+        computed: "_computeMoreInfos(_demos)",
+      },
+      _utilDemos: {
+        type: Array,
+        computed: "_computeUtil(_demos)",
       },
     };
   }
@@ -213,8 +237,12 @@ class HaGallery extends PolymerElement {
     return demos.filter((demo) => demo.includes("hui"));
   }
 
-  _computeRest(demos) {
-    return demos.filter((demo) => !demo.includes("hui"));
+  _computeMoreInfos(demos) {
+    return demos.filter((demo) => demo.includes("more-info"));
+  }
+
+  _computeUtil(demos) {
+    return demos.filter((demo) => demo.includes("util"));
   }
 }
 

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

@@ -47,7 +47,9 @@ class HassioAddonRepositoryEl extends LitElement {
     const repo = this.repo;
     let _addons = this.addons;
     if (!this.hass.userData?.showAdvanced) {
-      _addons = _addons.filter((addon) => !addon.advanced);
+      _addons = _addons.filter((addon) => {
+        return !addon.advanced;
+      });
     }
     const addons = this._getAddons(_addons, this.filter);
 
@@ -66,7 +68,9 @@ class HassioAddonRepositoryEl extends LitElement {
     }
     return html`
       <div class="content">
-        <h1>${repo.name}</h1>
+        <h1>
+          ${repo.name}
+        </h1>
         <div class="card-group">
           ${addons.map(
             (addon) => html`

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

@@ -86,7 +86,9 @@ class HassioAddonStore extends LitElement {
         main-page
         supervisor
       >
-        <span slot="header"> ${this.supervisor.localize("panel.store")} </span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.store")}
+        </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -152,8 +154,8 @@ class HassioAddonStore extends LitElement {
       repositories: HassioAddonRepository[],
       addons: HassioAddonInfo[],
       filter?: string
-    ) =>
-      repositories.sort(sortRepos).map((repo) => {
+    ) => {
+      return repositories.sort(sortRepos).map((repo) => {
         const filteredAddons = addons.filter(
           (addon) => addon.repository === repo.slug
         );
@@ -169,7 +171,8 @@ class HassioAddonStore extends LitElement {
               ></hassio-addon-repository>
             `
           : html``;
-      })
+      });
+    }
   );
 
   private _handleAction(ev: CustomEvent<ActionDetail>) {

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

@@ -69,13 +69,13 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedInput!}
             >
               ${this._inputDevices &&
-              this._inputDevices.map(
-                (item) => html`
+              this._inputDevices.map((item) => {
+                return html`
                   <paper-item device=${item.device || ""}>
                     ${item.name}
                   </paper-item>
-                `
-              )}
+                `;
+              })}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
@@ -90,13 +90,13 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedOutput!}
             >
               ${this._outputDevices &&
-              this._outputDevices.map(
-                (item) => html`
+              this._outputDevices.map((item) => {
+                return html`
                   <paper-item device=${item.device || ""}
                     >${item.name}</paper-item
                   >
-                `
-              )}
+                `;
+              })}
             </paper-listbox>
           </paper-dropdown-menu>
         </div>

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

@@ -65,15 +65,19 @@ class HassioAddonConfig extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  public computeLabel = (entry: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
-      ?.name ||
-    this.addon.translations.en?.configuration?.[entry.name].name ||
-    entry.name;
+  public computeLabel = (entry: HaFormSchema): string => {
+    return (
+      this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+        ?.name ||
+      this.addon.translations.en?.configuration?.[entry.name].name ||
+      entry.name
+    );
+  };
 
   private _filteredShchema = memoizeOne(
-    (options: Record<string, unknown>, schema: HaFormSchema[]) =>
-      schema.filter((entry) => entry.name in options || entry.required)
+    (options: Record<string, unknown>, schema: HaFormSchema[]) => {
+      return schema.filter((entry) => entry.name in options || entry.required);
+    }
   );
 
   protected render(): TemplateResult {

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

@@ -79,10 +79,12 @@ class HassioAddonNetwork extends LitElement {
                     "addon.configuration.network.host"
                   )}
                 </th>
-                <th>${this.supervisor.localize("common.description")}</th>
+                <th>
+                  ${this.supervisor.localize("common.description")}
+                </th>
               </tr>
-              ${this._config!.map(
-                (item) => html`
+              ${this._config!.map((item) => {
+                return html`
                   <tr>
                     <td>${item.container}</td>
                     <td>
@@ -98,8 +100,8 @@ class HassioAddonNetwork extends LitElement {
                     </td>
                     <td>${this._computeDescription(item)}</td>
                   </tr>
-                `
-              )}
+                `;
+              })}
             </tbody>
           </table>
         </div>
@@ -122,20 +124,25 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
-  private _computeDescription = (item: NetworkItem): string =>
-    this.addon.translations[this.hass.language]?.network?.[item.container]
-      ?.description ||
-    this.addon.translations.en?.network?.[item.container]?.description ||
-    item.description;
+  private _computeDescription = (item: NetworkItem): string => {
+    return (
+      this.addon.translations[this.hass.language]?.network?.[item.container]
+        ?.description ||
+      this.addon.translations.en?.network?.[item.container]?.description ||
+      item.description
+    );
+  };
 
   private _setNetworkConfig(): void {
     const network = this.addon.network || {};
     const description = this.addon.network_description || {};
-    const items: NetworkItem[] = Object.keys(network).map((key) => ({
-      container: key,
-      host: network[key],
-      description: description[key],
-    }));
+    const items: NetworkItem[] = Object.keys(network).map((key) => {
+      return {
+        container: key,
+        host: network[key],
+        description: description[key],
+      };
+    });
     this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
   }
 

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

@@ -177,9 +177,8 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons.some(
-          (addon) => addon.slug === requestedAddon
-        );
+        const validAddon = addonsInfo.addons
+          .some((addon) => addon.slug === requestedAddon);
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {

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

@@ -242,18 +242,14 @@ class HassioAddonInfo extends LitElement {
               ? html`
                   Current version: ${this.addon.version}
                   <div class="changelog" @click=${this._openChangelog}>
-                    (<span class="changelog-link"
-                      >${this.supervisor.localize(
-                        "addon.dashboard.changelog"
-                      )}</span
+                    (<span class="changelog-link">
+                      ${this.supervisor.localize("addon.dashboard.changelog")} </span
                     >)
                   </div>
                 `
-              : html`<span class="changelog-link" @click=${this._openChangelog}
-                  >${this.supervisor.localize(
-                    "addon.dashboard.changelog"
-                  )}</span
-                >`}
+              : html`<span class="changelog-link" @click=${this._openChangelog}>
+                  ${this.supervisor.localize("addon.dashboard.changelog")}
+                </span>`}
           </div>
 
           <div class="description light-color">
@@ -261,9 +257,13 @@ class HassioAddonInfo extends LitElement {
             ${this.supervisor.localize(
               "addon.dashboard.visit_addon_page",
               "name",
-              html`<a href="${this.addon.url!}" target="_blank" rel="noreferrer"
-                >${this.addon.name}</a
-              >`
+              html`<a
+                href="${this.addon.url!}"
+                target="_blank"
+                rel="noreferrer"
+              >
+                ${this.addon.name}
+              </a>`
             )}
           </div>
           <div class="addon-container">
@@ -562,7 +562,9 @@ class HassioAddonInfo extends LitElement {
                       <span slot="heading">
                         ${this.supervisor.localize("addon.dashboard.hostname")}
                       </span>
-                      <code slot="description"> ${this.addon.hostname} </code>
+                      <code slot="description">
+                        ${this.addon.hostname}
+                      </code>
                     </ha-settings-row>
                     ${metrics.map(
                       (metric) =>
@@ -991,7 +993,7 @@ class HassioAddonInfo extends LitElement {
         addons: [this.addon.slug],
         homeassistant: false,
       },
-      updateHandler: async () => this._updateAddon(),
+      updateHandler: async () => await this._updateAddon(),
     });
   }
 

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

@@ -56,13 +56,13 @@ class HassioCardContent extends LitElement {
             ></ha-svg-icon>
           `}
       <div>
-        <div class="title">${this.title}</div>
+        <div class="title">
+          ${this.title}
+        </div>
         <div class="addition">
           ${this.description}
-          ${
-            /* treat as available when undefined */
-            this.available === false ? " (Not available)" : ""
-          }
+          ${/* treat as available when undefined */
+          this.available === false ? " (Not available)" : ""}
           ${this.datetime
             ? html`
                 <ha-relative-time

hassio/src/components/supervisor-metric.ts

@@ -23,9 +23,13 @@ class SupervisorMetric extends LitElement {
   protected render(): TemplateResult {
     const roundedValue = roundWithOneDecimal(this.value);
     return html`<ha-settings-row>
-      <span slot="heading"> ${this.description} </span>
+      <span slot="heading">
+        ${this.description}
+      </span>
       <div slot="description" .title=${this.tooltip ?? ""}>
-        <span class="value"> ${roundedValue} % </span>
+        <span class="value">
+          ${roundedValue} %
+        </span>
         <ha-bar
           class="${classMap({
             "target-warning": roundedValue > 50,
@@ -69,7 +73,7 @@ class SupervisorMetric extends LitElement {
         );
       }
       .value {
-        width: 48px;
+        width: 42px;
         padding-right: 4px;
       }
     `;

hassio/src/dashboard/hassio-update.ts

@@ -40,8 +40,9 @@ import { HomeAssistant } from "../../../src/types";
 import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
-const computeVersion = (key: string, version: string): string =>
-  key === "os" ? version : `${key}-${version}`;
+const computeVersion = (key: string, version: string): string => {
+  return key === "os" ? version : `${key}-${version}`;
+};
 
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
@@ -49,12 +50,11 @@ export class HassioUpdate extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  private _pendingUpdates = memoizeOne(
-    (supervisor: Supervisor): number =>
-      Object.keys(supervisor).filter(
-        (value) => supervisor[value].update_available
-      ).length
-  );
+  private _pendingUpdates = memoizeOne((supervisor: Supervisor): number => {
+    return Object.keys(supervisor).filter(
+      (value) => supervisor[value].update_available
+    ).length;
+  });
 
   protected render(): TemplateResult {
     if (!this.supervisor) {

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

@@ -18,6 +18,7 @@ import {
 } from "lit-element";
 import { cache } from "lit-html/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-chips";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -47,8 +48,7 @@ import { HassioNetworkDialogParams } from "./show-dialog-network";
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
 @customElement("dialog-hassio-network")
-export class DialogHassioNetwork
-  extends LitElement
+export class DialogHassioNetwork extends LitElement
   implements HassDialog<HassioNetworkDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -77,9 +77,9 @@ export class DialogHassioNetwork
     this._dirty = false;
     this._curTabIndex = 0;
     this.supervisor = params.supervisor;
-    this._interfaces = params.supervisor.network.interfaces.sort((a, b) =>
-      a.primary > b.primary ? -1 : 1
-    );
+    this._interfaces = params.supervisor.network.interfaces.sort((a, b) => {
+      return a.primary > b.primary ? -1 : 1;
+    });
     this._interface = { ...this._interfaces[this._curTabIndex] };
 
     await this.updateComplete;

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

@@ -108,8 +108,8 @@ class HassioRegistriesDialog extends LitElement {
                 </mwc-button>
               `
             : html`${this._registries?.length
-                  ? this._registries.map(
-                      (entry) => html`
+                  ? this._registries.map((entry) => {
+                      return html`
                         <mwc-list-item class="option" hasMeta twoline>
                           <span>${entry.registry}</span>
                           <span slot="secondary"
@@ -129,8 +129,8 @@ class HassioRegistriesDialog extends LitElement {
                             <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                           </mwc-icon-button>
                         </mwc-list-item>
-                      `
-                    )
+                      `;
+                    })
                   : html`
                       <mwc-list-item>
                         <span

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

@@ -43,7 +43,7 @@ class HassioRepositoriesDialog extends LitElement {
 
   @internalProperty() private _opened = false;
 
-  @internalProperty() private _processing = false;
+  @internalProperty() private _prosessing = false;
 
   @internalProperty() private _error?: string;
 
@@ -87,8 +87,8 @@ class HassioRepositoriesDialog extends LitElement {
         ${this._error ? html`<div class="error">${this._error}</div>` : ""}
         <div class="form">
           ${repositories.length
-            ? repositories.map(
-                (repo) => html`
+            ? repositories.map((repo) => {
+                return html`
                   <paper-item class="option">
                     <paper-item-body three-line>
                       <div>${repo.name}</div>
@@ -105,9 +105,13 @@ class HassioRepositoriesDialog extends LitElement {
                       <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                     </mwc-icon-button>
                   </paper-item>
-                `
-              )
-            : html` <paper-item> No repositories </paper-item> `}
+                `;
+              })
+            : html`
+                <paper-item>
+                  No repositories
+                </paper-item>
+              `}
           <div class="layout horizontal bottom">
             <paper-input
               class="flex-auto"
@@ -119,11 +123,8 @@ class HassioRepositoriesDialog extends LitElement {
               @keydown=${this._handleKeyAdd}
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
-              ${this._processing
-                ? html`<ha-circular-progress
-                    active
-                    size="small"
-                  ></ha-circular-progress>`
+              ${this._prosessing
+                ? html`<ha-circular-progress active></ha-circular-progress>`
                 : this._dialogParams!.supervisor.localize(
                     "dialog.repositories.add"
                   )}
@@ -204,9 +205,11 @@ class HassioRepositoriesDialog extends LitElement {
     if (!input || !input.value) {
       return;
     }
-    this._processing = true;
+    this._prosessing = true;
     const repositories = this._filteredRepositories(this._repositories!);
-    const newRepositories = repositories.map((repo) => repo.source);
+    const newRepositories = repositories.map((repo) => {
+      return repo.source;
+    });
     newRepositories.push(input.value);
 
     try {
@@ -219,19 +222,25 @@ class HassioRepositoriesDialog extends LitElement {
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
-    this._processing = false;
+    this._prosessing = false;
   }
 
   private async _removeRepository(ev: Event) {
     const slug = (ev.currentTarget as any).slug;
     const repositories = this._filteredRepositories(this._repositories!);
-    const repository = repositories.find((repo) => repo.slug === slug);
+    const repository = repositories.find((repo) => {
+      return repo.slug === slug;
+    });
     if (!repository) {
       return;
     }
     const newRepositories = repositories
-      .map((repo) => repo.source)
-      .filter((repo) => repo !== repository.source);
+      .map((repo) => {
+        return repo.source;
+      })
+      .filter((repo) => {
+        return repo !== repository.source;
+      });
 
     try {
       await setSupervisorOption(this.hass, {

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

@@ -18,8 +18,7 @@ import "../../components/hassio-upload-snapshot";
 import { HassioSnapshotUploadDialogParams } from "./show-dialog-snapshot-upload";
 
 @customElement("dialog-hassio-snapshot-upload")
-export class DialogHassioSnapshotUpload
-  extends LitElement
+export class DialogHassioSnapshotUpload extends LitElement
   implements HassDialog<HassioSnapshotUploadDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -58,7 +57,9 @@ export class DialogHassioSnapshotUpload
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"> Upload snapshot </span>
+            <span slot="title">
+              Upload snapshot
+            </span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>

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

@@ -53,13 +53,14 @@ const _computeFolders = (folders) => {
   return list;
 };
 
-const _computeAddons = (addons) =>
-  addons.map((addon) => ({
+const _computeAddons = (addons) => {
+  return addons.map((addon) => ({
     slug: addon.slug,
     name: addon.name,
     version: addon.version,
     checked: true,
   }));
+};
 
 interface AddonItem {
   slug: string;
@@ -121,7 +122,9 @@ class HassioSnapshotDialog extends LitElement {
       <ha-dialog open @closing=${this._closeDialog} .heading=${true}>
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"> ${this._computeName} </span>
+            <span slot="title">
+              ${this._computeName}
+            </span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>
@@ -149,8 +152,8 @@ class HassioSnapshotDialog extends LitElement {
           ? html`
               <div>Folders:</div>
               <paper-dialog-scrollable class="no-margin-top">
-                ${this._folders.map(
-                  (item) => html`
+                ${this._folders.map((item) => {
+                  return html`
                     <paper-checkbox
                       .checked=${item.checked}
                       @change="${(ev: Event) =>
@@ -161,8 +164,8 @@ class HassioSnapshotDialog extends LitElement {
                     >
                       ${item.name}
                     </paper-checkbox>
-                  `
-                )}
+                  `;
+                })}
               </paper-dialog-scrollable>
             `
           : ""}
@@ -170,8 +173,8 @@ class HassioSnapshotDialog extends LitElement {
           ? html`
               <div>Add-on:</div>
               <paper-dialog-scrollable class="no-margin-top">
-                ${this._addons.map(
-                  (item) => html`
+                ${this._addons.map((item) => {
+                  return html`
                     <paper-checkbox
                       .checked=${item.checked}
                       @change="${(ev: Event) =>
@@ -182,8 +185,8 @@ class HassioSnapshotDialog extends LitElement {
                     >
                       ${item.name}
                     </paper-checkbox>
-                  `
-                )}
+                  `;
+                })}
               </paper-dialog-scrollable>
             `
           : ""}

hassio/src/dialogs/system_checks/dialog-hassio-system-checks.ts

@@ -0,0 +1,116 @@
+import {
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { setCheckOptions } from "../../../../src/data/hassio/resolution";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { SystemChecksParams } from "./show-dialog-system-checks";
+
+@customElement("dialog-hassio-system-checks")
+class HassioSystemChecksDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor?: Supervisor;
+
+  protected render(): TemplateResult {
+    if (!this.supervisor) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        @closing=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.supervisor.localize("dialog.system_check.title")
+        )}
+        hideActions
+        open
+      >
+        <div class="form">
+          ${this.supervisor.resolution.checks.map(
+            (check) => html`
+              <ha-settings-row three-line>
+                <span slot="heading">
+                  ${this.supervisor!.localize(
+                    `dialog.system_check.check.${check.slug}.title`
+                  ) || check.slug}
+                </span>
+                <span slot="description">
+                  ${this.supervisor!.localize(
+                    `dialog.system_check.check.${check.slug}.description`
+                  )}
+                </span>
+                <ha-switch
+                  .slug=${check.slug}
+                  @change=${this._checkToggled}
+                  .checked=${check.enabled}
+                  haptic
+                ></ha-switch>
+              </ha-settings-row>
+            `
+          )}
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  public async showDialog(dialogParams: SystemChecksParams): Promise<void> {
+    this.supervisor = dialogParams.supervisor;
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this.supervisor = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  private async _checkToggled(ev: Event): Promise<void> {
+    const check = ev.currentTarget as any;
+
+    try {
+      await setCheckOptions(this.hass, check.slug, { enabled: check.checked });
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "resolution",
+      });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.supervisor!.localize(
+          "dialog.system_check.failed_to_set_option"
+        ),
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [haStyle, haStyleDialog];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-system-checks": HassioSystemChecksDialog;
+  }
+}

hassio/src/dialogs/system_checks/show-dialog-system-checks.ts

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

hassio/src/hassio-main.ts

@@ -44,10 +44,7 @@ export class HassioMain extends SupervisorBaseElement {
     // We changed the navigate event to fire directly on the window, as that's
     // where we are listening for it. However, the older panel_custom will
     // listen on this element for navigation events, so we need to forward them.
-
-    // Joakim - April 26, 2021
-    // Due to changes in behavior in Google Chrome, we changed navigate to fire on the top element
-    top.addEventListener("location-changed", (ev) =>
+    window.addEventListener("location-changed", (ev) =>
       // @ts-ignore
       fireEvent(this, ev.type, ev.detail, {
         bubbles: false,

hassio/src/snapshots/hassio-snapshots.ts

@@ -132,7 +132,9 @@ class HassioSnapshots extends LitElement {
         </ha-button-menu>
 
         <div class="content">
-          <h1>${this.supervisor.localize("snapshot.create_snapshot")}</h1>
+          <h1>
+            ${this.supervisor.localize("snapshot.create_snapshot")}
+          </h1>
           <p class="description">
             ${this.supervisor.localize("snapshot.description")}
           </p>

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

@@ -178,7 +178,7 @@ class HassioCoreInfo extends LitElement {
         folders: ["homeassistant"],
         homeassistant: true,
       },
-      updateHandler: async () => this._updateCore(),
+      updateHandler: async () => await this._updateCore(),
     });
   }
 

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

@@ -97,7 +97,9 @@ class HassioHostInfo extends LitElement {
                   <span slot="heading">
                     ${this.supervisor.localize("system.host.ip_address")}
                   </span>
-                  <span slot="description"> ${primaryIpAddress} </span>
+                  <span slot="description">
+                    ${primaryIpAddress}
+                  </span>
                   <mwc-button
                     .label=${this.supervisor.localize("system.host.change")}
                     @click=${this._changeNetworkClicked}

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

@@ -8,7 +8,6 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
@@ -39,7 +38,6 @@ import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
 const UNSUPPORTED_REASON_URL = {
-  apparmor: "/more-info/unsupported/apparmor",
   container: "/more-info/unsupported/container",
   dbus: "/more-info/unsupported/dbus",
   docker_configuration: "/more-info/unsupported/docker_configuration",
@@ -50,7 +48,6 @@ const UNSUPPORTED_REASON_URL = {
   os: "/more-info/unsupported/os",
   privileged: "/more-info/unsupported/privileged",
   systemd: "/more-info/unsupported/systemd",
-  content_trust: "/more-info/unsupported/content_trust",
 };
 
 const UNHEALTHY_REASON_URL = {
@@ -58,7 +55,6 @@ const UNHEALTHY_REASON_URL = {
   supervisor: "/more-info/unhealthy/supervisor",
   setup: "/more-info/unhealthy/setup",
   docker: "/more-info/unhealthy/docker",
-  untrusted: "/more-info/unhealthy/untrusted",
 };
 
 @customElement("hassio-supervisor-info")
@@ -152,32 +148,30 @@ class HassioSupervisorInfo extends LitElement {
             </ha-settings-row>
 
             ${this.supervisor.supervisor.supported
-              ? !atLeastVersion(this.hass.config.version, 2021, 4)
-                ? html` <ha-settings-row three-line>
-                    <span slot="heading">
-                      ${this.supervisor.localize(
-                        "system.supervisor.share_diagnostics"
-                      )}
-                    </span>
-                    <div slot="description" class="diagnostics-description">
-                      ${this.supervisor.localize(
-                        "system.supervisor.share_diagnostics_description"
-                      )}
-                      <button
-                        class="link"
-                        .title=${this.supervisor.localize("common.show_more")}
-                        @click=${this._diagnosticsInformationDialog}
-                      >
-                        ${this.supervisor.localize("common.learn_more")}
-                      </button>
-                    </div>
-                    <ha-switch
-                      haptic
-                      .checked=${this.supervisor.supervisor.diagnostics}
-                      @change=${this._toggleDiagnostics}
-                    ></ha-switch>
-                  </ha-settings-row>`
-                : ""
+              ? html` <ha-settings-row three-line>
+                  <span slot="heading">
+                    ${this.supervisor.localize(
+                      "system.supervisor.share_diagnostics"
+                    )}
+                  </span>
+                  <div slot="description" class="diagnostics-description">
+                    ${this.supervisor.localize(
+                      "system.supervisor.share_diagnostics_description"
+                    )}
+                    <button
+                      class="link"
+                      .title=${this.supervisor.localize("common.show_more")}
+                      @click=${this._diagnosticsInformationDialog}
+                    >
+                      ${this.supervisor.localize("common.learn_more")}
+                    </button>
+                  </div>
+                  <ha-switch
+                    haptic
+                    .checked=${this.supervisor.supervisor.diagnostics}
+                    @change=${this._toggleDiagnostics}
+                  ></ha-switch>
+                </ha-settings-row>`
               : html`<div class="error">
                   ${this.supervisor.localize(
                     "system.supervisor.unsupported_title"
@@ -264,18 +258,18 @@ class HassioSupervisorInfo extends LitElement {
         title: this.supervisor.localize("system.supervisor.warning"),
         text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
           <br />
-          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
+          <b>
+            ${this.supervisor.localize("system.supervisor.beta_backup")}
+          </b>
           <br /><br />
           ${this.supervisor.localize("system.supervisor.beta_release_items")}
-          <ul>
-            <li>Home Assistant Core</li>
-            <li>Home Assistant Supervisor</li>
-            <li>Home Assistant Operating System</li>
-          </ul>
+          <li>Home Assistant Core</li>
+          <li>Home Assistant Supervisor</li>
+          <li>Home Assistant Operating System</li>
           <br />
-          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
+          ${this.supervisor.localize("system.supervisor.join_beta_action")}`,
         confirmText: this.supervisor.localize(
-          "system.supervisor.join_beta_action"
+          "system.supervisor.beta_join_confirm"
         ),
         dismissText: this.supervisor.localize("common.cancel"),
       });

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

@@ -87,13 +87,13 @@ class HassioSupervisorLog extends LitElement {
                   attr-for-selected="provider"
                   .selected=${this._selectedLogProvider}
                 >
-                  ${logProviders.map(
-                    (provider) => html`
+                  ${logProviders.map((provider) => {
+                    return html`
                       <paper-item provider=${provider.key}>
                         ${provider.name}
                       </paper-item>
-                    `
-                  )}
+                    `;
+                  })}
                 </paper-listbox>
               </paper-dropdown-menu>
             `

hassio/src/system/hassio-system.ts

@@ -1,3 +1,5 @@
+import { ActionDetail } from "@material/mwc-list";
+import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -11,6 +13,7 @@ import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
+import { showSystemChecksDialog } from "../dialogs/system_checks/show-dialog-system-checks";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-core-info";
@@ -39,7 +42,24 @@ class HassioSystem extends LitElement {
         main-page
         supervisor
       >
-        <span slot="header"> ${this.supervisor.localize("panel.system")} </span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.system")}
+        </span>
+        ${this.hass.userData?.showAdvanced
+          ? html` <ha-button-menu
+              corner="BOTTOM_START"
+              slot="toolbar-icon"
+              @action=${this._handleAction}
+            >
+              <mwc-icon-button slot="trigger" alt="menu">
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-list-item>
+                ${this.supervisor.localize("system.system_checks")}
+              </mwc-list-item>
+            </ha-button-menu>`
+          : ""}
+
         <div class="content">
           <div class="card-group">
             <hassio-core-info
@@ -64,6 +84,14 @@ class HassioSystem extends LitElement {
     `;
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        showSystemChecksDialog(this, { supervisor: this.supervisor });
+        break;
+    }
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

package.json

@@ -14,10 +14,10 @@
     "format:prettier": "prettier \"**/src/**/*.{js,ts,json,css,md}\" --write",
     "lint:types": "tsc",
     "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",
+    "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:types",
+    "format": "npm run format:eslint && npm run format:prettier",
     "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
-    "test": "yarn run lint && yarn run mocha"
+    "test": "npm run lint && npm run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -100,6 +100,7 @@
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "~2.8.0",
     "chartjs-chart-timeline": "^0.3.0",
+    "codemirror": "^5.49.0",
     "comlink": "^4.3.0",
     "core-js": "^3.6.5",
     "cropperjs": "^1.5.7",
@@ -108,15 +109,15 @@
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.1",
+    "hls.js": "^0.13.2",
     "home-assistant-js-websocket": "^5.9.0",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",
     "leaflet": "^1.4.0",
     "leaflet-draw": "^1.0.4",
-    "lit-element": "^2.5.0",
-    "lit-html": "^1.4.0",
+    "lit-element": "^2.4.0",
+    "lit-html": "^1.3.0",
     "lit-virtualizer": "^0.4.2",
     "marked": "2.0.0",
     "mdn-polyfills": "^5.16.0",
@@ -131,33 +132,30 @@
     "sortablejs": "^1.10.2",
     "superstruct": "^0.10.13",
     "tinykeys": "^1.1.1",
-    "tsparticles": "^1.19.2",
     "unfetch": "^4.1.0",
     "vis-data": "^7.1.1",
     "vis-network": "^8.5.4",
     "vue": "^2.6.11",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
-    "workbox-cacheable-response": "^6.1.5",
-    "workbox-core": "^6.1.5",
-    "workbox-expiration": "^6.1.5",
-    "workbox-precaching": "^6.1.5",
-    "workbox-routing": "^6.1.5",
-    "workbox-strategies": "^6.1.5",
+    "workbox-core": "^5.1.3",
+    "workbox-precaching": "^5.1.3",
+    "workbox-routing": "^5.1.3",
+    "workbox-strategies": "^5.1.3",
     "xss": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-external-helpers": "^7.12.13",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-decorators": "^7.13.15",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.14.0",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-typescript": "^7.10.4",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
@@ -168,6 +166,8 @@
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^5.0.11",
     "@types/chromecast-caf-sender": "^1.0.3",
+    "@types/codemirror": "^0.0.97",
+    "@types/hls.js": "^0.12.3",
     "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
     "@types/leaflet-draw": "^1.0.1",
@@ -177,23 +177,23 @@
     "@types/resize-observer-browser": "^0.1.3",
     "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "cpx": "^1.5.0",
     "del": "^4.0.0",
-    "eslint": "^7.25.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-typescript": "^7.2.1",
+    "eslint-config-prettier": "^6.10.1",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-lit": "^1.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-wc": "^1.3.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-lit": "^1.2.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-wc": "^1.2.0",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
@@ -227,22 +227,22 @@
     "terser-webpack-plugin": "^5.1.1",
     "ts-lit-plugin": "^1.2.1",
     "ts-mocha": "^7.0.0",
-    "typescript": "^4.2.4",
+    "typescript": "^4.0.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "^5.24.1",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-manifest-plugin": "^3.0.0",
-    "workbox-build": "^6.1.5"
+    "workbox-build": "^5.1.3"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
   "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",
   "resolutions": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
-    "lit-html": "1.4.0",
-    "lit-element": "2.5.0"
+    "lit-html": "1.3.0",
+    "lit-element": "2.4.0"
   },
   "main": "src/home-assistant.js",
   "husky": {

script/version_bump.js

@@ -10,10 +10,10 @@ function patch(version) {
 
 function today() {
   const now = new Date();
-  return `${now.getUTCFullYear()}${String(now.getUTCMonth() + 1).padStart(
+  return `${now.getFullYear()}${String(now.getMonth() + 1).padStart(
     2,
     "0"
-  )}${String(now.getUTCDate()).padStart(2, "0")}.0`;
+  )}${String(now.getDate()).padStart(2, "0")}.0`;
 }
 
 function auto(version) {

setup.py

@@ -2,12 +2,12 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210503.0",
+    version="20210302.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",
     author_email="hello@home-assistant.io",
-    license="Apache-2.0",
+    license="Apache License 2.0",
     packages=find_packages(include=["hass_frontend", "hass_frontend.*"]),
     include_package_data=True,
     zip_safe=False,

src/auth/ha-auth-flow.ts

@@ -38,7 +38,11 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   @internalProperty() private _errorMessage?: string;
 
   protected render() {
-    return html` <form>${this._renderForm()}</form> `;
+    return html`
+      <form>
+        ${this._renderForm()}
+      </form>
+    `;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {

src/auth/ha-authorize.ts

@@ -8,7 +8,6 @@ import {
   PropertyValues,
 } from "lit-element";
 import punycode from "punycode";
-import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import {
   AuthProvider,
@@ -117,20 +116,6 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
     this._fetchDiscoveryInfo();
 
-    if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(
-        document.documentElement,
-        {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
-    }
-
     if (!this.redirectUri) {
       return;
     }

src/cast/receiver_messages.ts

@@ -62,7 +62,7 @@ export const ensureConnectedCastSession = (cast: CastManager, auth: Auth) => {
     return undefined;
   }
 
-  return new Promise<void>((resolve) => {
+  return new Promise((resolve) => {
     const unsub = cast.addEventListener("connection-changed", () => {
       if (cast.castConnectedToOurHass) {
         unsub();

src/common/color/convert-color.ts

@@ -17,8 +17,9 @@ export const hex2rgb = (hex: string): [number, number, number] => {
   ];
 };
 
-export const rgb2hex = (rgb: [number, number, number]): string =>
-  `#${rgb_hex(rgb[0])}${rgb_hex(rgb[1])}${rgb_hex(rgb[2])}`;
+export const rgb2hex = (rgb: [number, number, number]): string => {
+  return `#${rgb_hex(rgb[0])}${rgb_hex(rgb[1])}${rgb_hex(rgb[2])}`;
+};
 
 // Conversion between LAB, XYZ and RGB from https://github.com/gka/chroma.js
 // Copyright (c) 2011-2019, Gregor Aisch
@@ -48,10 +49,13 @@ const xyz_lab = (t: number) => {
   return t / t2 + t0;
 };
 
-const xyz_rgb = (r: number) =>
-  255 * (r <= 0.00304 ? 12.92 * r : 1.055 * r ** (1 / 2.4) - 0.055);
+const xyz_rgb = (r: number) => {
+  return 255 * (r <= 0.00304 ? 12.92 * r : 1.055 * r ** (1 / 2.4) - 0.055);
+};
 
-const lab_xyz = (t: number) => (t > t1 ? t * t * t : t2 * (t - t0));
+const lab_xyz = (t: number) => {
+  return t > t1 ? t * t * t : t2 * (t - t0);
+};
 
 // Conversions between RGB and LAB
 
@@ -98,17 +102,3 @@ export const lab2hex = (lab: [number, number, number]): string => {
   const rgb = lab2rgb(lab);
   return rgb2hex(rgb);
 };
-
-export const rgb2hsv = (
-  rgb: [number, number, number]
-): [number, number, number] => {
-  const [r, g, b] = rgb;
-  const v = Math.max(r, g, b);
-  const c = v - Math.min(r, g, b);
-  const h =
-    c && (v === r ? (g - b) / c : v === g ? 2 + (b - r) / c : 4 + (r - g) / c);
-  return [60 * (h < 0 ? h + 6 : h), v && c / v, v];
-};
-
-export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
-  rgb2hsv(rgb).slice(0, 2) as [number, number];

src/common/color/lab.ts

@@ -4,9 +4,13 @@
 export const labDarken = (
   lab: [number, number, number],
   amount = 1
-): [number, number, number] => [lab[0] - 18 * amount, lab[1], lab[2]];
+): [number, number, number] => {
+  return [lab[0] - 18 * amount, lab[1], lab[2]];
+};
 
 export const labBrighten = (
   lab: [number, number, number],
   amount = 1
-): [number, number, number] => labDarken(lab, -amount);
+): [number, number, number] => {
+  return labDarken(lab, -amount);
+};

src/common/config/can_show_page.ts

@@ -2,9 +2,12 @@ import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../types";
 import { isComponentLoaded } from "./is_component_loaded";
 
-export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
-  (isCore(page) || isLoadedIntegration(hass, page)) &&
-  !hideAdvancedPage(hass, page);
+export const canShowPage = (hass: HomeAssistant, page: PageNavigation) => {
+  return (
+    (isCore(page) || isLoadedIntegration(hass, page)) &&
+    !hideAdvancedPage(hass, page)
+  );
+};
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
   !page.component || isComponentLoaded(hass, page.component);

src/common/const.ts

@@ -56,8 +56,6 @@ export const FIXED_DOMAIN_ICONS = {
 
 export const FIXED_DEVICE_CLASS_ICONS = {
   current: "hass:current-ac",
-  carbon_dioxide: "mdi:molecule-co2",
-  carbon_monoxide: "mdi:molecule-co",
   energy: "hass:flash",
   humidity: "hass:water-percent",
   illuminance: "hass:brightness-5",

src/common/datetime/format_date.ts

@@ -1,10 +1,9 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
 export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleDateString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleDateString(locales, {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -12,8 +11,8 @@ export const formatDate = toLocaleDateStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "longDate");
 
 export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleDateString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleDateString(locales, {
         weekday: "long",
         month: "short",
         day: "numeric",

src/common/datetime/format_date_time.ts

@@ -1,10 +1,9 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";
 
 export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleString(locales, {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -14,8 +13,8 @@ export const formatDateTime = toLocaleStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");
 
 export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleString(locales, {
         year: "numeric",
         month: "long",
         day: "numeric",

src/common/datetime/format_time.ts

@@ -1,18 +1,17 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 
 export const formatTime = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleTimeString(locales, {
         hour: "numeric",
         minute: "2-digit",
       })
   : (dateObj: Date) => format(dateObj, "shortTime");
 
 export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleTimeString(locales, {
         hour: "numeric",
         minute: "2-digit",
         second: "2-digit",
@@ -20,8 +19,8 @@ export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "mediumTime");
 
 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
+  ? (dateObj: Date, locales: string) =>
+      dateObj.toLocaleTimeString(locales, {
         weekday: "long",
         hour: "numeric",
         minute: "2-digit",

src/common/decorators/local-storage.ts

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

src/common/decorators/restore-scroll.ts

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

src/common/dom/apply_themes_on_element.ts

@@ -70,18 +70,13 @@ export const applyThemesOnElement = (
       themeRules["text-accent-color"] =
         rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
     }
-
-    // Nothing was changed
-    if (element._themes?.cacheKey === cacheKey) {
-      return;
-    }
   }
 
   if (selectedTheme && themes.themes[selectedTheme]) {
     themeRules = themes.themes[selectedTheme];
   }
 
-  if (!element._themes?.keys && !Object.keys(themeRules).length) {
+  if (!element._themes && !Object.keys(themeRules).length) {
     // No styles to reset, and no styles to set
     return;
   }
@@ -92,8 +87,8 @@ export const applyThemesOnElement = (
       : undefined;
 
   // Add previous set keys to reset them, and new theme
-  const styles = { ...element._themes?.keys, ...newTheme?.styles };
-  element._themes = { cacheKey, keys: newTheme?.keys };
+  const styles = { ...element._themes, ...newTheme?.styles };
+  element._themes = newTheme?.keys;
 
   // Set and/or reset styles
   if (element.updateStyles) {

src/common/dom/load_resource.ts

@@ -1,9 +1,13 @@
 // Load a resource and get a promise when loading done.
 // From: https://davidwalsh.name/javascript-loader
 
-const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
+const _load = (
+  tag: "link" | "script" | "img",
+  url: string,
+  type?: "module"
+) => {
   // This promise will be used by Promise.all to determine success or failure
-  new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     const element = document.createElement(tag);
     let attr = "src";
     let parent = "body";
@@ -31,6 +35,8 @@ const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
     element[attr] = url;
     document[parent].appendChild(element);
   });
+};
+
 export const loadCSS = (url: string) => _load("link", url);
 export const loadJS = (url: string) => _load("script", url);
 export const loadImg = (url: string) => _load("img", url);

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

@@ -48,8 +48,8 @@ export const replaceTileLayer = (
 const createTileLayer = (
   leaflet: LeafletModuleType,
   darkMode: boolean
-): TileLayer =>
-  leaflet.tileLayer(
+): TileLayer => {
+  return leaflet.tileLayer(
     `https://{s}.basemaps.cartocdn.com/${
       darkMode ? "dark_all" : "light_all"
     }/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x.png" : ".png"}`,
@@ -61,3 +61,4 @@ const createTileLayer = (
       maxZoom: 20,
     }
   );
+};

src/common/ensure-array.ts

@@ -1,10 +1,6 @@
-type NonUndefined<T> = T extends undefined ? never : T;
-
-export function ensureArray(value: undefined): undefined;
-export function ensureArray<T>(value: T | T[]): NonUndefined<T>[];
-export function ensureArray(value) {
-  if (value === undefined || Array.isArray(value)) {
+export const ensureArray = (value?: any) => {
+  if (!value || Array.isArray(value)) {
     return value;
   }
   return [value];
-}
+};

src/common/entity/compute_domain.ts

@@ -1,2 +1,3 @@
-export const computeDomain = (entityId: string): string =>
-  entityId.substr(0, entityId.indexOf("."));
+export const computeDomain = (entityId: string): string => {
+  return entityId.substr(0, entityId.indexOf("."));
+};

src/common/entity/compute_object_id.ts

@@ -1,3 +1,4 @@
 /** Compute the object ID of a state. */
-export const computeObjectId = (entityId: string): string =>
-  entityId.substr(entityId.indexOf(".") + 1);
+export const computeObjectId = (entityId: string): string => {
+  return entityId.substr(entityId.indexOf(".") + 1);
+};

src/common/entity/compute_state_display.ts

@@ -1,6 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import { FrontendTranslationData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
@@ -11,7 +10,7 @@ import { computeStateDomain } from "./compute_state_domain";
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
-  locale: FrontendTranslationData,
+  language: string,
   state?: string
 ): string => {
   const compareState = state !== undefined ? state : stateObj.state;
@@ -21,7 +20,7 @@ export const computeStateDisplay = (
   }
 
   if (stateObj.attributes.unit_of_measurement) {
-    return `${formatNumber(compareState, locale)} ${
+    return `${formatNumber(compareState, language)} ${
       stateObj.attributes.unit_of_measurement
     }`;
   }
@@ -36,7 +35,7 @@ export const computeStateDisplay = (
         stateObj.attributes.month - 1,
         stateObj.attributes.day
       );
-      return formatDate(date, locale);
+      return formatDate(date, language);
     }
     if (!stateObj.attributes.has_date) {
       const now = new Date();
@@ -49,7 +48,7 @@ export const computeStateDisplay = (
         stateObj.attributes.hour,
         stateObj.attributes.minute
       );
-      return formatTime(date, locale);
+      return formatTime(date, language);
     }
 
     date = new Date(
@@ -59,7 +58,7 @@ export const computeStateDisplay = (
       stateObj.attributes.hour,
       stateObj.attributes.minute
     );
-    return formatDateTime(date, locale);
+    return formatDateTime(date, language);
   }
 
   if (domain === "humidifier") {
@@ -68,13 +67,8 @@ export const computeStateDisplay = (
     }
   }
 
-  // `counter` `number` and `input_number` domains do not have a unit of measurement but should still use `formatNumber`
-  if (
-    domain === "counter" ||
-    domain === "number" ||
-    domain === "input_number"
-  ) {
-    return formatNumber(compareState, locale);
+  if (domain === "counter") {
+    return formatNumber(compareState, language);
   }
 
   return (

src/common/entity/compute_state_domain.ts

@@ -1,5 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "./compute_domain";
 
-export const computeStateDomain = (stateObj: HassEntity) =>
-  computeDomain(stateObj.entity_id);
+export const computeStateDomain = (stateObj: HassEntity) => {
+  return computeDomain(stateObj.entity_id);
+};

src/common/entity/compute_state_name.ts

@@ -1,7 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeObjectId } from "./compute_object_id";
 
-export const computeStateName = (stateObj: HassEntity): string =>
-  stateObj.attributes.friendly_name === undefined
+export const computeStateName = (stateObj: HassEntity): string => {
+  return stateObj.attributes.friendly_name === undefined
     ? computeObjectId(stateObj.entity_id).replace(/_/g, " ")
     : stateObj.attributes.friendly_name || "";
+};

src/common/entity/has_location.ts

@@ -1,4 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 
-export const hasLocation = (stateObj: HassEntity) =>
-  "latitude" in stateObj.attributes && "longitude" in stateObj.attributes;
+export const hasLocation = (stateObj: HassEntity) => {
+  return (
+    "latitude" in stateObj.attributes && "longitude" in stateObj.attributes
+  );
+};

src/common/entity/supports-feature.ts

@@ -3,6 +3,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 export const supportsFeature = (
   stateObj: HassEntity,
   feature: number
-): boolean =>
+): boolean => {
   // eslint-disable-next-line no-bitwise
-  (stateObj.attributes.supported_features! & feature) !== 0;
+  return (stateObj.attributes.supported_features! & feature) !== 0;
+};

src/common/image/extract_color.ts

@@ -119,7 +119,6 @@ export const extractColors = (url: string, downsampleColors = 16) =>
     colorCount: downsampleColors,
   })
     .getPalette()
-    .then(({ foreground, background }) => ({
-      background: background!,
-      foreground: foreground!,
-    }));
+    .then(({ foreground, background }) => {
+      return { background: background!, foreground: foreground! };
+    });

src/common/navigate.ts

@@ -12,24 +12,16 @@ declare global {
 export const navigate = (_node: any, path: string, replace = false) => {
   if (__DEMO__) {
     if (replace) {
-      top.history.replaceState(
-        top.history.state?.root ? { root: true } : null,
-        "",
-        `${top.location.pathname}#${path}`
-      );
+      history.replaceState(null, "", `${location.pathname}#${path}`);
     } else {
-      top.location.hash = path;
+      window.location.hash = path;
     }
   } else if (replace) {
-    top.history.replaceState(
-      top.history.state?.root ? { root: true } : null,
-      "",
-      path
-    );
+    history.replaceState(null, "", path);
   } else {
-    top.history.pushState(null, "", path);
+    history.pushState(null, "", path);
   }
-  fireEvent(top, "location-changed", {
+  fireEvent(window, "location-changed", {
     replace,
   });
 };

src/common/string/filter/filter.ts

@@ -34,12 +34,14 @@ const _maxLen = 128;
 
 function initTable() {
   const table: number[][] = [];
-  const row: number[] = [];
-  for (let i = 0; i <= _maxLen; i++) {
-    row[i] = 0;
+  const row: number[] = [0];
+  for (let i = 1; i <= _maxLen; i++) {
+    row.push(-i);
   }
   for (let i = 0; i <= _maxLen; i++) {
-    table.push(row.slice(0));
+    const thisRow = row.slice(0);
+    thisRow[0] = -i;
+    table.push(thisRow);
   }
   return table;
 }
@@ -48,7 +50,7 @@ function isSeparatorAtPos(value: string, index: number): boolean {
   if (index < 0 || index >= value.length) {
     return false;
   }
-  const code = value.codePointAt(index);
+  const code = value.charCodeAt(index);
   switch (code) {
     case CharCode.Underline:
     case CharCode.Dash:
@@ -60,16 +62,8 @@ function isSeparatorAtPos(value: string, index: number): boolean {
     case CharCode.DoubleQuote:
     case CharCode.Colon:
     case CharCode.DollarSign:
-    case CharCode.LessThan:
-    case CharCode.OpenParen:
-    case CharCode.OpenSquareBracket:
       return true;
-    case undefined:
-      return false;
     default:
-      if (isEmojiImprecise(code)) {
-        return true;
-      }
       return false;
   }
 }
@@ -98,15 +92,10 @@ function isPatternInWord(
   patternLen: number,
   wordLow: string,
   wordPos: number,
-  wordLen: number,
-  fillMinWordPosArr = false
+  wordLen: number
 ): boolean {
   while (patternPos < patternLen && wordPos < wordLen) {
     if (patternLow[patternPos] === wordLow[wordPos]) {
-      if (fillMinWordPosArr) {
-        // Remember the min word position for each pattern position
-        _minWordMatchPos[patternPos] = wordPos;
-      }
       patternPos += 1;
     }
     wordPos += 1;
@@ -115,22 +104,42 @@ function isPatternInWord(
 }
 
 enum Arrow {
-  Diag = 1,
-  Left = 2,
-  LeftLeft = 3,
+  Top = 0b1,
+  Diag = 0b10,
+  Left = 0b100,
 }
 
 /**
- * An array representating a fuzzy match.
- *
+ * A tuple of three values.
  * 0. the score
- * 1. the offset at which matching started
- * 2. `<match_pos_N>`
- * 3. `<match_pos_1>`
- * 4. `<match_pos_0>` etc
+ * 1. the matches encoded as bitmask (2^53)
+ * 2. the offset at which matching started
  */
-// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
-export type FuzzyScore = Array<number>;
+export type FuzzyScore = [number, number, number];
+
+interface FilterGlobals {
+  _matchesCount: number;
+  _topMatch2: number;
+  _topScore: number;
+  _wordStart: number;
+  _firstMatchCanBeWeak: boolean;
+  _table: number[][];
+  _scores: number[][];
+  _arrows: Arrow[][];
+}
+
+function initGlobals(): FilterGlobals {
+  return {
+    _matchesCount: 0,
+    _topMatch2: 0,
+    _topScore: 0,
+    _wordStart: 0,
+    _firstMatchCanBeWeak: false,
+    _table: initTable(),
+    _scores: initTable(),
+    _arrows: <Arrow[][]>initTable(),
+  };
+}
 
 export function fuzzyScore(
   pattern: string,
@@ -141,6 +150,7 @@ export function fuzzyScore(
   wordStart: number,
   firstMatchCanBeWeak: boolean
 ): FuzzyScore | undefined {
+  const globals = initGlobals();
   const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
   const wordLen = word.length > _maxLen ? _maxLen : word.length;
 
@@ -162,30 +172,18 @@ export function fuzzyScore(
       patternLen,
       wordLow,
       wordStart,
-      wordLen,
-      true
+      wordLen
     )
   ) {
     return undefined;
   }
 
-  // Find the max matching word position for each pattern position
-  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
-  _fillInMaxWordMatchPos(
-    patternLen,
-    wordLen,
-    patternStart,
-    wordStart,
-    patternLow,
-    wordLow
-  );
-
   let row = 1;
   let column = 1;
   let patternPos = patternStart;
   let wordPos = wordStart;
 
-  const hasStrongFirstMatch = [false];
+  let hasStrongFirstMatch = false;
 
   // There will be a match, fill in tables
   for (
@@ -193,146 +191,83 @@ export function fuzzyScore(
     patternPos < patternLen;
     row++, patternPos++
   ) {
-    // Reduce search space to possible matching word positions and to possible access from next row
-    const minWordMatchPos = _minWordMatchPos[patternPos];
-    const maxWordMatchPos = _maxWordMatchPos[patternPos];
-    const nextMaxWordMatchPos =
-      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
-
     for (
-      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
-      wordPos < nextMaxWordMatchPos;
+      column = 1, wordPos = wordStart;
+      wordPos < wordLen;
       column++, wordPos++
     ) {
-      let score = Number.MIN_SAFE_INTEGER;
-      let canComeDiag = false;
+      const score = _doScore(
+        pattern,
+        patternLow,
+        patternPos,
+        patternStart,
+        word,
+        wordLow,
+        wordPos
+      );
 
-      if (wordPos <= maxWordMatchPos) {
-        score = _doScore(
-          pattern,
-          patternLow,
-          patternPos,
-          patternStart,
-          word,
-          wordLow,
-          wordPos,
-          wordLen,
-          wordStart,
-          _diag[row - 1][column - 1] === 0,
-          hasStrongFirstMatch
-        );
+      if (patternPos === patternStart && score > 1) {
+        hasStrongFirstMatch = true;
       }
 
-      let diagScore = 0;
-      if (score !== Number.MAX_SAFE_INTEGER) {
-        canComeDiag = true;
-        diagScore = score + _table[row - 1][column - 1];
-      }
+      globals._scores[row][column] = score;
 
-      const canComeLeft = wordPos > minWordMatchPos;
-      const leftScore = canComeLeft
-        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
+      const diag =
+        globals._table[row - 1][column - 1] + (score > 1 ? 1 : score);
+      const top = globals._table[row - 1][column] + -1;
+      const left = globals._table[row][column - 1] + -1;
 
-      const canComeLeftLeft =
-        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
-      const leftLeftScore = canComeLeftLeft
-        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      if (
-        canComeLeftLeft &&
-        (!canComeLeft || leftLeftScore >= leftScore) &&
-        (!canComeDiag || leftLeftScore >= diagScore)
-      ) {
-        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
-        _table[row][column] = leftLeftScore;
-        _arrows[row][column] = Arrow.LeftLeft;
-        _diag[row][column] = 0;
-      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
-        // always prefer choosing left since that means a match is earlier in the word
-        _table[row][column] = leftScore;
-        _arrows[row][column] = Arrow.Left;
-        _diag[row][column] = 0;
-      } else if (canComeDiag) {
-        _table[row][column] = diagScore;
-        _arrows[row][column] = Arrow.Diag;
-        _diag[row][column] = _diag[row - 1][column - 1] + 1;
+      if (left >= top) {
+        // left or diag
+        if (left > diag) {
+          globals._table[row][column] = left;
+          globals._arrows[row][column] = Arrow.Left;
+        } else if (left === diag) {
+          globals._table[row][column] = left;
+          globals._arrows[row][column] = Arrow.Left || Arrow.Diag;
+        } else {
+          globals._table[row][column] = diag;
+          globals._arrows[row][column] = Arrow.Diag;
+        }
+      } else if (top > diag) {
+        globals._table[row][column] = top;
+        globals._arrows[row][column] = Arrow.Top;
+      } else if (top === diag) {
+        globals._table[row][column] = top;
+        globals._arrows[row][column] = Arrow.Top || Arrow.Diag;
       } else {
-        throw new Error(`not possible`);
+        globals._table[row][column] = diag;
+        globals._arrows[row][column] = Arrow.Diag;
       }
     }
   }
 
   if (_debug) {
-    printTables(pattern, patternStart, word, wordStart);
+    printTables(pattern, patternStart, word, wordStart, globals);
   }
 
-  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
+  if (!hasStrongFirstMatch && !firstMatchCanBeWeak) {
     return undefined;
   }
 
-  row--;
-  column--;
+  globals._matchesCount = 0;
+  globals._topScore = -100;
+  globals._wordStart = wordStart;
+  globals._firstMatchCanBeWeak = firstMatchCanBeWeak;
 
-  const result: FuzzyScore = [_table[row][column], wordStart];
-
-  let backwardsDiagLength = 0;
-  let maxMatchColumn = 0;
-
-  while (row >= 1) {
-    // Find the column where we go diagonally up
-    let diagColumn = column;
-    do {
-      const arrow = _arrows[row][diagColumn];
-      if (arrow === Arrow.LeftLeft) {
-        diagColumn -= 2;
-      } else if (arrow === Arrow.Left) {
-        diagColumn -= 1;
-      } else {
-        // found the diagonal
-        break;
-      }
-    } while (diagColumn >= 1);
-
-    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
-    if (
-      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
-      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
-      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
-      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
-    ) {
-      diagColumn = column;
-    }
-
-    if (diagColumn === column) {
-      // this is a contiguous match
-      backwardsDiagLength++;
-    } else {
-      backwardsDiagLength = 1;
-    }
-
-    if (!maxMatchColumn) {
-      // remember the last matched column
-      maxMatchColumn = diagColumn;
-    }
-
-    row--;
-    column = diagColumn - 1;
-    result.push(column);
+  _findAllMatches2(
+    row - 1,
+    column - 1,
+    patternLen === wordLen ? 1 : 0,
+    0,
+    false,
+    globals
+  );
+  if (globals._matchesCount === 0) {
+    return undefined;
   }
 
-  if (wordLen === patternLen) {
-    // the word matches the pattern with all characters!
-    // giving the score a total match boost (to come up ahead other words)
-    result[0] += 2;
-  }
-
-  // Add 1 penalty for each skipped character in the word
-  const skippedCharsCount = maxMatchColumn - patternLen;
-  result[0] -= skippedCharsCount;
-
-  return result;
+  return [globals._topScore, globals._topMatch2, wordStart];
 }
 
 function _doScore(
@@ -342,81 +277,50 @@ function _doScore(
   patternStart: number,
   word: string,
   wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  wordStart: number,
-  newMatchStart: boolean,
-  outFirstMatchStrong: boolean[]
-): number {
+  wordPos: number
+) {
   if (patternLow[patternPos] !== wordLow[wordPos]) {
-    return Number.MIN_SAFE_INTEGER;
+    return -1;
   }
-
-  let score = 1;
-  let isGapLocation = false;
   if (wordPos === patternPos - patternStart) {
     // common prefix: `foobar <-> foobaz`
     //                            ^^^^^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-  } else if (
+    if (pattern[patternPos] === word[wordPos]) {
+      return 7;
+    }
+    return 5;
+  }
+
+  if (
     isUpperCaseAtPos(wordPos, word, wordLow) &&
     (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
   ) {
     // hitting upper-case: `foo <-> forOthers`
     //                              ^^ ^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-    isGapLocation = true;
-  } else if (
+    if (pattern[patternPos] === word[wordPos]) {
+      return 7;
+    }
+    return 5;
+  }
+
+  if (
     isSeparatorAtPos(wordLow, wordPos) &&
     (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
   ) {
     // hitting a separator: `. <-> foo.bar`
     //                                ^
-    score = 5;
-  } else if (
+    return 5;
+  }
+
+  if (
     isSeparatorAtPos(wordLow, wordPos - 1) ||
     isWhitespaceAtPos(wordLow, wordPos - 1)
   ) {
     // post separator: `foo <-> bar_foo`
     //                              ^^^
-    score = 5;
-    isGapLocation = true;
+    return 5;
   }
-
-  if (score > 1 && patternPos === patternStart) {
-    outFirstMatchStrong[0] = true;
-  }
-
-  if (!isGapLocation) {
-    isGapLocation =
-      isUpperCaseAtPos(wordPos, word, wordLow) ||
-      isSeparatorAtPos(wordLow, wordPos - 1) ||
-      isWhitespaceAtPos(wordLow, wordPos - 1);
-  }
-
-  //
-  if (patternPos === patternStart) {
-    // first character in pattern
-    if (wordPos > wordStart) {
-      // the first pattern character would match a word character that is not at the word start
-      // so introduce a penalty to account for the gap preceding this match
-      score -= isGapLocation ? 3 : 5;
-    }
-  } else if (newMatchStart) {
-    // this would be the beginning of a new match (i.e. there would be a gap before this location)
-    score += isGapLocation ? 2 : 0;
-  } else {
-    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
-    score += isGapLocation ? 0 : 1;
-  }
-
-  if (wordPos + 1 === wordLen) {
-    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
-    // so pretend there is a gap after the last character in the word to normalize things
-    score -= isGapLocation ? 3 : 5;
-  }
-
-  return score;
+  return 1;
 }
 
 function printTable(
@@ -456,96 +360,104 @@ function printTables(
   pattern: string,
   patternStart: number,
   word: string,
-  wordStart: number
+  wordStart: number,
+  globals: FilterGlobals
 ): void {
   pattern = pattern.substr(patternStart);
   word = word.substr(wordStart);
-  console.log(printTable(_table, pattern, pattern.length, word, word.length));
-  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
-  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
-}
-
-const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
-const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
-const _diag = initTable(); // the length of a contiguous diagonal match
-const _table = initTable();
-const _arrows = <Arrow[][]>initTable();
-
-function initArr(maxLen: number) {
-  const row: number[] = [];
-  for (let i = 0; i <= maxLen; i++) {
-    row[i] = 0;
-  }
-  return row;
-}
-
-function _fillInMaxWordMatchPos(
-  patternLen: number,
-  wordLen: number,
-  patternStart: number,
-  wordStart: number,
-  patternLow: string,
-  wordLow: string
-) {
-  let patternPos = patternLen - 1;
-  let wordPos = wordLen - 1;
-  while (patternPos >= patternStart && wordPos >= wordStart) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      _maxWordMatchPos[patternPos] = wordPos;
-      patternPos--;
-    }
-    wordPos--;
-  }
-}
-
-export interface FuzzyScorer {
-  (
-    pattern: string,
-    lowPattern: string,
-    patternPos: number,
-    word: string,
-    lowWord: string,
-    wordPos: number,
-    firstMatchCanBeWeak: boolean
-  ): FuzzyScore | undefined;
-}
-
-export function createMatches(score: undefined | FuzzyScore): Match[] {
-  if (typeof score === "undefined") {
-    return [];
-  }
-  const res: Match[] = [];
-  const wordPos = score[1];
-  for (let i = score.length - 1; i > 1; i--) {
-    const pos = score[i] + wordPos;
-    const last = res[res.length - 1];
-    if (last && last.end === pos) {
-      last.end = pos + 1;
-    } else {
-      res.push({ start: pos, end: pos + 1 });
-    }
-  }
-  return res;
-}
-
-/**
- * A fast function (therefore imprecise) to check if code points are emojis.
- * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
- */
-export function isEmojiImprecise(x: number): boolean {
-  return (
-    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
-    x === 8986 ||
-    x === 8987 ||
-    x === 9200 ||
-    x === 9203 ||
-    (x >= 9728 && x <= 10175) ||
-    x === 11088 ||
-    x === 11093 ||
-    (x >= 127744 && x <= 128591) ||
-    (x >= 128640 && x <= 128764) ||
-    (x >= 128992 && x <= 129003) ||
-    (x >= 129280 && x <= 129535) ||
-    (x >= 129648 && x <= 129750)
+  console.log(
+    printTable(globals._table, pattern, pattern.length, word, word.length)
+  );
+  console.log(
+    printTable(globals._arrows, pattern, pattern.length, word, word.length)
+  );
+  console.log(
+    printTable(globals._scores, pattern, pattern.length, word, word.length)
   );
 }
+
+function _findAllMatches2(
+  row: number,
+  column: number,
+  total: number,
+  matches: number,
+  lastMatched: boolean,
+  globals: FilterGlobals
+): void {
+  if (globals._matchesCount >= 10 || total < -25) {
+    // stop when having already 10 results, or
+    // when a potential alignment as already 5 gaps
+    return;
+  }
+
+  let simpleMatchCount = 0;
+
+  while (row > 0 && column > 0) {
+    const score = globals._scores[row][column];
+    const arrow = globals._arrows[row][column];
+
+    if (arrow === Arrow.Left) {
+      // left -> no match, skip a word character
+      column -= 1;
+      if (lastMatched) {
+        total -= 5; // new gap penalty
+      } else if (matches !== 0) {
+        total -= 1; // gap penalty after first match
+      }
+      lastMatched = false;
+      simpleMatchCount = 0;
+    } else if (arrow && Arrow.Diag) {
+      if (arrow && Arrow.Left) {
+        // left
+        _findAllMatches2(
+          row,
+          column - 1,
+          matches !== 0 ? total - 1 : total, // gap penalty after first match
+          matches,
+          lastMatched,
+          globals
+        );
+      }
+
+      // diag
+      total += score;
+      row -= 1;
+      column -= 1;
+      lastMatched = true;
+
+      // match -> set a 1 at the word pos
+      matches += 2 ** (column + globals._wordStart);
+
+      // count simple matches and boost a row of
+      // simple matches when they yield in a
+      // strong match.
+      if (score === 1) {
+        simpleMatchCount += 1;
+
+        if (row === 0 && !globals._firstMatchCanBeWeak) {
+          // when the first match is a weak
+          // match we discard it
+          return;
+        }
+      } else {
+        // boost
+        total += 1 + simpleMatchCount * (score - 1);
+        simpleMatchCount = 0;
+      }
+    } else {
+      return;
+    }
+  }
+
+  total -= column >= 3 ? 9 : column * 3; // late start penalty
+
+  // dynamically keep track of the current top score
+  // and insert the current best score at head, the rest at tail
+  globals._matchesCount += 1;
+  if (total > globals._topScore) {
+    globals._topScore = total;
+    globals._topMatch2 = matches;
+  }
+}
+
+// #endregion

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

@@ -10,13 +10,10 @@ import { fuzzyScore } from "./filter";
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */
 
-export const fuzzySequentialMatch = (
-  filter: string,
-  item: ScorableTextItem
-) => {
-  let topScore = Number.NEGATIVE_INFINITY;
+export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
+  let topScore = 0;
 
-  for (const word of item.strings) {
+  for (const word of words) {
     const scores = fuzzyScore(
       filter,
       filter.toLowerCase(),
@@ -31,39 +28,22 @@ export const fuzzySequentialMatch = (
       continue;
     }
 
-    // The VS Code implementation of filter returns a 0 for a weak match.
-    // But if .filter() sees a "0", it considers that a failed match and will remove it.
-    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
-    const score = scores[0] === 0 ? 1 : scores[0];
+    // The VS Code implementation of filter treats a score of "0" as just barely a match
+    // But we will typically use this matcher in a .filter(), which interprets 0 as a failure.
+    // By shifting all scores up by 1, we allow "0" matches, while retaining score precedence
+    const score = scores[0] + 1;
 
     if (score > topScore) {
       topScore = score;
     }
   }
-
-  if (topScore === Number.NEGATIVE_INFINITY) {
-    return undefined;
-  }
-
   return topScore;
 };
 
-/**
- * An interface that objects must extend in order to use the fuzzy sequence matcher
- *
- * @param {number} score - A number representing the existence and strength of a match.
- *    - `< 0` means a good match that starts in the middle of the string
- *    - `> 0` means a good match that starts at the beginning of the string
- *    - `0` means just barely a match
- *    - `undefined` means not a match
- *
- * @param {string} strings - Array of strings (aliases) representing the item. The filter string will be compared against each of these for a match.
- *
- */
-
 export interface ScorableTextItem {
   score?: number;
-  strings: string[];
+  text: string;
+  altText?: string;
 }
 
 type FuzzyFilterSort = <T extends ScorableTextItem>(
@@ -71,13 +51,16 @@ type FuzzyFilterSort = <T extends ScorableTextItem>(
   items: T[]
 ) => T[];
 
-export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
-  items
+export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
+  return items
     .map((item) => {
-      item.score = fuzzySequentialMatch(filter, item);
+      item.score = item.altText
+        ? fuzzySequentialMatch(filter, item.text, item.altText)
+        : fuzzySequentialMatch(filter, item.text);
       return item;
     })
-    .filter((item) => item.score !== undefined)
+    .filter((item) => item.score !== undefined && item.score > 0)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );
+};

src/common/string/format_number.ts

@@ -1,36 +1,14 @@
-import { FrontendTranslationData, NumberFormat } from "../../data/translation";
-
 /**
- * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
+ * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
  *
  * @param num The number to format
- * @param locale The user-selected language and number format, from `hass.locale`
- * @param options Intl.NumberFormatOptions to use
+ * @param language The language to use when formatting the number
  */
 export const formatNumber = (
   num: string | number,
-  locale?: FrontendTranslationData,
+  language: string,
   options?: Intl.NumberFormatOptions
 ): string => {
-  let format: string | string[] | undefined;
-
-  switch (locale?.number_format) {
-    case NumberFormat.comma_decimal:
-      format = ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
-      break;
-    case NumberFormat.decimal_comma:
-      format = ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
-      break;
-    case NumberFormat.space_comma:
-      format = ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
-      break;
-    case NumberFormat.system:
-      format = undefined;
-      break;
-    default:
-      format = locale?.language;
-  }
-
   // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
   Number.isNaN =
     Number.isNaN ||
@@ -38,25 +16,11 @@ export const formatNumber = (
       return typeof input === "number" && isNaN(input);
     };
 
-  if (
-    !Number.isNaN(Number(num)) &&
-    Intl &&
-    locale?.number_format !== NumberFormat.none
-  ) {
-    try {
-      return new Intl.NumberFormat(
-        format,
-        getDefaultFormatOptions(num, options)
-      ).format(Number(num));
-    } catch (error) {
-      // Don't fail when using "TEST" language
-      // eslint-disable-next-line no-console
-      console.error(error);
-      return new Intl.NumberFormat(
-        undefined,
-        getDefaultFormatOptions(num, options)
-      ).format(Number(num));
-    }
+  if (!Number.isNaN(Number(num)) && Intl) {
+    return new Intl.NumberFormat(
+      language,
+      getDefaultFormatOptions(num, options)
+    ).format(Number(num));
   }
   return num.toString();
 };

src/common/string/has-template.ts

@@ -1,5 +1,4 @@
-const isTemplateRegex = new RegExp("{%|{{");
-
+const isTemplateRegex = new RegExp("{%|{{|{#");
 export const isTemplate = (value: string): boolean =>
   isTemplateRegex.test(value);
 
@@ -12,7 +11,7 @@ export const hasTemplate = (value: unknown): boolean => {
   }
   if (typeof value === "object") {
     const values = Array.isArray(value) ? value : Object.values(value!);
-    return values.some((val) => val && hasTemplate(val));
+    return values.some((val) => hasTemplate(val));
   }
   return false;
 };