Don't make dialog box full height on mobile

.eslintrc.json

@@ -84,8 +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"],
-    "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/translations.yaml

@@ -7,7 +7,7 @@ on:
     branches:
       - dev
     paths:
-      - src/translations/en.json
+      - translations/en.json
 
 env:
   NODE_VERSION: 12

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

@@ -100,7 +100,7 @@ class HcLayout extends LitElement {
         display: block;
         margin: 0;
       }
-
+	
       .hero {
         border-radius: 4px 4px 0 0;
       }

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!)
     );
   }
 

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-integration-card.ts

@@ -1,350 +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 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: "resolve_error",
-});
-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: [setupErrorEntry] },
-  { items: [migrationErrorEntry] },
-  { items: [setupRetryEntry] },
-  { items: [setupRetryReasonEntry] },
-  { items: [setupRetryReasonMissingKeyEntry] },
-  { items: [failedUnloadEntry] },
-  { items: [notLoadedEntry] },
-  {
-    items: [
-      loadedEntry,
-      setupErrorEntry,
-      migrationErrorEntry,
-      longNameEntry,
-      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

@@ -81,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-store.ts

@@ -14,9 +14,7 @@ import { html, TemplateResult } from "lit-html";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import { navigate } from "../../../src/common/navigate";
 import "../../../src/common/search/search-input";
-import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
 import {
@@ -139,12 +137,6 @@ class HassioAddonStore extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    const repositoryUrl = extractSearchParam("repository_url");
-    navigate(this, "/hassio/store", true);
-    if (repositoryUrl) {
-      this._manageRepositories(repositoryUrl);
-    }
-
     this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
     this._loadData();
   }
@@ -178,7 +170,7 @@ class HassioAddonStore extends LitElement {
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._manageRepositoriesClicked();
+        this._manageRepositories();
         break;
       case 1:
         this.refreshData();
@@ -195,14 +187,10 @@ class HassioAddonStore extends LitElement {
     }
   }
 
-  private _manageRepositoriesClicked() {
-    this._manageRepositories();
-  }
-
-  private async _manageRepositories(url?: string) {
+  private async _manageRepositories() {
     showRepositoriesDialog(this, {
       supervisor: this.supervisor,
-      url,
+      loadData: () => this._loadData(),
     });
   }
 
@@ -211,9 +199,9 @@ class HassioAddonStore extends LitElement {
   }
 
   private async _loadData() {
-    fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "supervisor",
+    fireEvent(this, "supervisor-colllection-refresh", { colllection: "addon" });
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "supervisor",
     });
   }
 

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

@@ -165,7 +165,7 @@ class HassioAddonConfig extends LitElement {
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || !this._valid}
           >
-            ${this.supervisor.localize("common.save")}
+            Save ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>

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

@@ -21,7 +21,6 @@ import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-circular-progress";
 import {
   fetchHassioAddonInfo,
-  fetchHassioAddonsInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
@@ -174,17 +173,9 @@ class HassioAddonDashboard extends LitElement {
 
   protected async firstUpdated(): Promise<void> {
     if (this.route.path === "") {
-      const requestedAddon = extractSearchParam("addon");
-      if (requestedAddon) {
-        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons.some(
-          (addon) => addon.slug === requestedAddon
-        );
-        if (!validAddon) {
-          this._error = this.supervisor.localize("my.error_addon_not_found");
-        } else {
-          navigate(this, `/hassio/addon/${requestedAddon}`, true);
-        }
+      const addon = extractSearchParam("addon");
+      if (addon) {
+        navigate(this, `/hassio/addon/${addon}`, true);
       }
     }
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
@@ -200,8 +191,8 @@ class HassioAddonDashboard extends LitElement {
     const path: string = pathSplit[pathSplit.length - 1];
 
     if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "supervisor",
+      fireEvent(this, "supervisor-colllection-refresh", {
+        colllection: "supervisor",
       });
     }
 

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

@@ -50,7 +50,6 @@ import {
   startHassioAddon,
   stopHassioAddon,
   uninstallHassioAddon,
-  updateHassioAddon,
   validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import {
@@ -69,8 +68,8 @@ import { HomeAssistant } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
+import { showDialogSupervisorAddonUpdate } from "../../dialogs/addon/show-dialog-addon-update";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
-import { showDialogSupervisorUpdate } from "../../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../../resources/hassio-style";
 import { addonArchIsSupported } from "../../util/addon";
 
@@ -242,18 +241,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">
@@ -481,7 +476,7 @@ class HassioAddonInfo extends LitElement {
                               </span>
                               <span slot="description">
                                 ${this.supervisor.localize(
-                                  "addon.dashboard.option.watchdog.description"
+                                  "addon.dashboard.option.boot.description"
                                 )}
                               </span>
                               <ha-switch
@@ -503,7 +498,7 @@ class HassioAddonInfo extends LitElement {
                               </span>
                               <span slot="description">
                                 ${this.supervisor.localize(
-                                  "addon.dashboard.option.auto_update.description"
+                                  "addon.dashboard.option.boot.description"
                                 )}
                               </span>
                               <ha-switch
@@ -988,30 +983,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _updateClicked(): Promise<void> {
-    showDialogSupervisorUpdate(this, {
-      supervisor: this.supervisor,
-      name: this.addon.name,
-      version: this.addon.version_latest,
-      snapshotParams: {
-        name: `addon_${this.addon.slug}_${this.addon.version}`,
-        addons: [this.addon.slug],
-        homeassistant: false,
-      },
-      updateHandler: async () => await this._updateAddon(),
-    });
-  }
-
-  private async _updateAddon(): Promise<void> {
-    await updateHassioAddon(this.hass, this.addon.slug);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "addon",
-    });
-    const eventdata = {
-      success: true,
-      response: undefined,
-      path: "update",
-    };
-    fireEvent(this, "hass-api-called", eventdata);
+    showDialogSupervisorAddonUpdate(this, { addon: this.addon });
   }
 
   private async _startClicked(ev: CustomEvent): Promise<void> {

hassio/src/components/supervisor-metric.ts

@@ -28,7 +28,7 @@ class SupervisorMetric extends LitElement {
       </span>
       <div slot="description" .title=${this.tooltip ?? ""}>
         <span class="value">
-          ${roundedValue} %
+          ${roundedValue}%
         </span>
         <ha-bar
           class="${classMap({
@@ -73,7 +73,7 @@ class SupervisorMetric extends LitElement {
         );
       }
       .value {
-        width: 48px;
+        width: 42px;
         padding-right: 4px;
       }
     `;

hassio/src/dashboard/hassio-update.ts

@@ -19,14 +19,13 @@ import "../../../src/components/ha-svg-icon";
 import {
   extractApiErrorMessage,
   HassioResponse,
-  ignoreSupervisorError,
+  ignoredStatusCodes,
 } from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-import { updateCore } from "../../../src/data/supervisor/core";
 import {
   Supervisor,
   supervisorApiWsRequest,
@@ -37,7 +36,7 @@ import {
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
+import { showDialogSupervisorCoreUpdate } from "../dialogs/core/show-dialog-core-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 const computeVersion = (key: string, version: string): string => {
@@ -165,17 +164,7 @@ export class HassioUpdate extends LitElement {
   private async _confirmUpdate(ev): Promise<void> {
     const item = ev.currentTarget;
     if (item.key === "core") {
-      showDialogSupervisorUpdate(this, {
-        supervisor: this.supervisor,
-        name: "Home Assistant Core",
-        version: this.supervisor.core.version_latest,
-        snapshotParams: {
-          name: `core_${this.supervisor.core.version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        },
-        updateHandler: async () => this._updateCore(),
-      });
+      showDialogSupervisorCoreUpdate(this, { core: this.supervisor.core });
       return;
     }
     item.progress = true;
@@ -210,13 +199,17 @@ export class HassioUpdate extends LitElement {
       } else {
         await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
       }
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: item.key,
+      fireEvent(this, "supervisor-colllection-refresh", {
+        colllection: item.key,
       });
     } catch (err) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+      if (
+        this.hass.connection.connected &&
+        err.status_code &&
+        !ignoredStatusCodes.has(err.status_code)
+      ) {
         showAlertDialog(this, {
           title: this.supervisor.localize("common.error.update_failed"),
           text: extractApiErrorMessage(err),
@@ -226,13 +219,6 @@ export class HassioUpdate extends LitElement {
     item.progress = false;
   }
 
-  private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "core",
-    });
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyle,

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

@@ -15,18 +15,21 @@ import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
+  HassioAddonDetails,
+  updateHassioAddon,
+} from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
+import { SupervisorDialogSupervisorAddonUpdateParams } from "./show-dialog-addon-update";
 
-@customElement("dialog-supervisor-update")
-class DialogSupervisorUpdate extends LitElement {
+@customElement("dialog-supervisor-addon-update")
+class DialogSupervisorAddonUpdate extends LitElement {
   public hass!: HomeAssistant;
 
+  public addon!: HassioAddonDetails;
+
   @internalProperty() private _opened = false;
 
   @internalProperty() private _createSnapshot = true;
@@ -35,22 +38,18 @@ class DialogSupervisorUpdate extends LitElement {
 
   @internalProperty() private _error?: string;
 
-  @internalProperty()
-  private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
-
   public async showDialog(
-    params: SupervisorDialogSupervisorUpdateParams
+    params: SupervisorDialogSupervisorAddonUpdateParams
   ): Promise<void> {
     this._opened = true;
-    this._dialogParams = params;
+    this.addon = params.addon;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
     this._action = null;
     this._createSnapshot = true;
-    this._error = undefined;
-    this._dialogParams = undefined;
+    this._opened = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -63,77 +62,47 @@ class DialogSupervisorUpdate extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._dialogParams) {
-      return html``;
-    }
     return html`
       <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
         ${this._action === null
           ? html`<slot name="heading">
                 <h2 id="title" class="header_title">
-                  ${this._dialogParams.supervisor.localize(
-                    "confirm.update.title",
-                    "name",
-                    this._dialogParams.name
-                  )}
+                  Update ${this.addon.name}
                 </h2>
               </slot>
               <div>
-                ${this._dialogParams.supervisor.localize(
-                  "confirm.update.text",
-                  "name",
-                  this._dialogParams.name,
-                  "version",
-                  this._dialogParams.version
-                )}
+                Are you sure you want to update the ${this.addon.name} add-on to
+                version ${this.addon.version_latest}?
               </div>
 
               <ha-settings-row>
                 <span slot="heading">
-                  ${this._dialogParams.supervisor.localize(
-                    "dialog.update.snapshot"
-                  )}
+                  Snapshot
                 </span>
                 <span slot="description">
-                  ${this._dialogParams.supervisor.localize(
-                    "dialog.update.create_snapshot",
-                    "name",
-                    this._dialogParams.name
-                  )}
+                  Create a snapshot of the ${this.addon.name} add-on before
+                  updating
                 </span>
                 <ha-switch
                   .checked=${this._createSnapshot}
                   haptic
+                  title="Create snapshot"
                   @click=${this._toggleSnapshot}
                 >
                 </ha-switch>
               </ha-settings-row>
               <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                ${this._dialogParams.supervisor.localize("common.cancel")}
+                Cancel
               </mwc-button>
-              <mwc-button
-                .disabled=${this._error !== undefined}
-                @click=${this._update}
-                slot="primaryAction"
-              >
-                ${this._dialogParams.supervisor.localize("common.update")}
+              <mwc-button @click=${this._update} slot="primaryAction">
+                Update
               </mwc-button>`
           : html`<ha-circular-progress alt="Updating" size="large" active>
               </ha-circular-progress>
               <p class="progress-text">
                 ${this._action === "update"
-                  ? this._dialogParams.supervisor.localize(
-                      "dialog.update.updating",
-                      "name",
-                      this._dialogParams.name,
-                      "version",
-                      this._dialogParams.version
-                    )
-                  : this._dialogParams.supervisor.localize(
-                      "dialog.update.snapshotting",
-                      "name",
-                      this._dialogParams.name
-                    )}
+                  ? `Updating ${this.addon.name} to version ${this.addon.version_latest}`
+                  : "Creating snapshot of Home Assistant Core"}
               </p>`}
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
       </ha-dialog>
@@ -148,10 +117,11 @@ class DialogSupervisorUpdate extends LitElement {
     if (this._createSnapshot) {
       this._action = "snapshot";
       try {
-        await createHassioPartialSnapshot(
-          this.hass,
-          this._dialogParams!.snapshotParams
-        );
+        await createHassioPartialSnapshot(this.hass, {
+          name: `addon_${this.addon.slug}_${this.addon.version}`,
+          addons: [this.addon.slug],
+          homeassistant: false,
+        });
       } catch (err) {
         this._error = extractApiErrorMessage(err);
         this._action = null;
@@ -161,15 +131,16 @@ class DialogSupervisorUpdate extends LitElement {
 
     this._action = "update";
     try {
-      await this._dialogParams!.updateHandler!();
+      await updateHassioAddon(this.hass, this.addon.slug);
     } catch (err) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        this._error = extractApiErrorMessage(err);
-      }
+      this._error = extractApiErrorMessage(err);
       this._action = null;
       return;
     }
-
+    fireEvent(this, "supervisor-colllection-refresh", { colllection: "addon" });
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "supervisor",
+    });
     this.closeDialog();
   }
 
@@ -203,6 +174,6 @@ class DialogSupervisorUpdate extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-supervisor-update": DialogSupervisorUpdate;
+    "dialog-supervisor-addon-update": DialogSupervisorAddonUpdate;
   }
 }

hassio/src/dialogs/addon/show-dialog-addon-update.ts

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

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

@@ -0,0 +1,175 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-switch";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
+import { HassioHomeAssistantInfo } from "../../../../src/data/hassio/supervisor";
+import { updateCore } from "../../../../src/data/supervisor/core";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { SupervisorDialogSupervisorCoreUpdateParams } from "./show-dialog-core-update";
+
+@customElement("dialog-supervisor-core-update")
+class DialogSupervisorCoreUpdate extends LitElement {
+  public hass!: HomeAssistant;
+
+  public core!: HassioHomeAssistantInfo;
+
+  @internalProperty() private _opened = false;
+
+  @internalProperty() private _createSnapshot = true;
+
+  @internalProperty() private _action: "snapshot" | "update" | null = null;
+
+  @internalProperty() private _error?: string;
+
+  public async showDialog(
+    params: SupervisorDialogSupervisorCoreUpdateParams
+  ): Promise<void> {
+    this._opened = true;
+    this.core = params.core;
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._action = null;
+    this._createSnapshot = true;
+    this._opened = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
+        ${this._action === null
+          ? html`<slot name="heading">
+                <h2 id="title" class="header_title">
+                  Update Home Assistant Core
+                </h2>
+              </slot>
+              <div>
+                Are you sure you want to update Home Assistant Core to version
+                ${this.core.version_latest}?
+              </div>
+
+              <ha-settings-row three-rows>
+                <span slot="heading">
+                  Snapshot
+                </span>
+                <span slot="description">
+                  Create a snapshot of Home Assistant Core before updating
+                </span>
+                <ha-switch
+                  .checked=${this._createSnapshot}
+                  haptic
+                  title="Create snapshot"
+                  @click=${this._toggleSnapshot}
+                >
+                </ha-switch>
+              </ha-settings-row>
+              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+                Cancel
+              </mwc-button>
+              <mwc-button @click=${this._update} slot="primaryAction">
+                Update
+              </mwc-button>`
+          : html`<ha-circular-progress alt="Updating" size="large" active>
+              </ha-circular-progress>
+              <p class="progress-text">
+                ${this._action === "update"
+                  ? `Updating Home Assistant Core to version ${this.core.version_latest}`
+                  : "Creating snapshot of Home Assistant Core"}
+              </p>`}
+        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+      </ha-dialog>
+    `;
+  }
+
+  private _toggleSnapshot() {
+    this._createSnapshot = !this._createSnapshot;
+  }
+
+  private async _update() {
+    if (this._createSnapshot) {
+      this._action = "snapshot";
+      try {
+        await createHassioPartialSnapshot(this.hass, {
+          name: `core_${this.core.version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        });
+      } catch (err) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+
+    this._action = "update";
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+    fireEvent(this, "supervisor-colllection-refresh", { colllection: "core" });
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        .form {
+          color: var(--primary-text-color);
+        }
+
+        ha-settings-row {
+          margin-top: 32px;
+          padding: 0;
+        }
+
+        ha-circular-progress {
+          display: block;
+          margin: 32px;
+          text-align: center;
+        }
+
+        .progress-text {
+          text-align: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-supervisor-core-update": DialogSupervisorCoreUpdate;
+  }
+}

hassio/src/dialogs/core/show-dialog-core-update.ts

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

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";

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

@@ -17,7 +17,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
-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-svg-icon";
@@ -27,6 +26,7 @@ import {
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
@@ -35,12 +35,15 @@ import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
 class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ attribute: false }) private _repos: HassioAddonRepository[] = [];
+
+  @property({ attribute: false })
+  private _dialogParams?: HassioRepositoryDialogParams;
+
   @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
-  @internalProperty() private _repositories?: HassioAddonRepository[];
-
-  @internalProperty() private _dialogParams?: HassioRepositoryDialogParams;
-
   @internalProperty() private _opened = false;
 
   @internalProperty() private _prosessing = false;
@@ -51,13 +54,12 @@ class HassioRepositoriesDialog extends LitElement {
     dialogParams: HassioRepositoryDialogParams
   ): Promise<void> {
     this._dialogParams = dialogParams;
+    this.supervisor = dialogParams.supervisor;
     this._opened = true;
-    await this._loadData();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    this._dialogParams = undefined;
     this._opened = false;
     this._error = "";
   }
@@ -69,10 +71,9 @@ class HassioRepositoriesDialog extends LitElement {
   );
 
   protected render(): TemplateResult {
-    if (!this._dialogParams?.supervisor || this._repositories === undefined) {
-      return html``;
-    }
-    const repositories = this._filteredRepositories(this._repositories);
+    const repositories = this._filteredRepositories(
+      this.supervisor.addon.repositories
+    );
     return html`
       <ha-dialog
         .open=${this._opened}
@@ -81,7 +82,7 @@ class HassioRepositoriesDialog extends LitElement {
         escapeKeyAction
         .heading=${createCloseHeading(
           this.hass,
-          this._dialogParams!.supervisor.localize("dialog.repositories.title")
+          this.supervisor.localize("dialog.repositories.title")
         )}
       >
         ${this._error ? html`<div class="error">${this._error}</div>` : ""}
@@ -97,7 +98,7 @@ class HassioRepositoriesDialog extends LitElement {
                     </paper-item-body>
                     <mwc-icon-button
                       .slug=${repo.slug}
-                      .title=${this._dialogParams!.supervisor.localize(
+                      .title=${this.supervisor.localize(
                         "dialog.repositories.remove"
                       )}
                       @click=${this._removeRepository}
@@ -116,23 +117,18 @@ class HassioRepositoriesDialog extends LitElement {
             <paper-input
               class="flex-auto"
               id="repository_input"
-              .value=${this._dialogParams!.url || ""}
-              .label=${this._dialogParams!.supervisor.localize(
-                "dialog.repositories.add"
-              )}
+              .label=${this.supervisor.localize("dialog.repositories.add")}
               @keydown=${this._handleKeyAdd}
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._prosessing
                 ? html`<ha-circular-progress active></ha-circular-progress>`
-                : this._dialogParams!.supervisor.localize(
-                    "dialog.repositories.add"
-                  )}
+                : this.supervisor.localize("dialog.repositories.add")}
             </mwc-button>
           </div>
         </div>
-        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-          ${this._dialogParams?.supervisor.localize("common.close")}
+        <mwc-button slot="primaryAction" @click="${this.closeDialog}">
+          Close
         </mwc-button>
       </ha-dialog>
     `;
@@ -163,11 +159,6 @@ class HassioRepositoriesDialog extends LitElement {
         ha-paper-dropdown-menu {
           display: block;
         }
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
       `,
     ];
   }
@@ -188,25 +179,13 @@ class HassioRepositoriesDialog extends LitElement {
     this._addRepository();
   }
 
-  private async _loadData(): Promise<void> {
-    try {
-      const addonsinfo = await fetchHassioAddonsInfo(this.hass);
-
-      this._repositories = addonsinfo.repositories;
-
-      fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    } catch (err) {
-      this._error = extractApiErrorMessage(err);
-    }
-  }
-
   private async _addRepository() {
     const input = this._optionInput;
     if (!input || !input.value) {
       return;
     }
     this._prosessing = true;
-    const repositories = this._filteredRepositories(this._repositories!);
+    const repositories = this._filteredRepositories(this._repos);
     const newRepositories = repositories.map((repo) => {
       return repo.source;
     });
@@ -216,7 +195,11 @@ class HassioRepositoriesDialog extends LitElement {
       await setSupervisorOption(this.hass, {
         addons_repositories: newRepositories,
       });
-      await this._loadData();
+
+      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+      this._repos = addonsInfo.repositories;
+
+      await this._dialogParams!.loadData();
 
       input.value = "";
     } catch (err) {
@@ -227,7 +210,7 @@ class HassioRepositoriesDialog extends LitElement {
 
   private async _removeRepository(ev: Event) {
     const slug = (ev.currentTarget as any).slug;
-    const repositories = this._filteredRepositories(this._repositories!);
+    const repositories = this._filteredRepositories(this._repos);
     const repository = repositories.find((repo) => {
       return repo.slug === slug;
     });
@@ -246,7 +229,11 @@ class HassioRepositoriesDialog extends LitElement {
       await setSupervisorOption(this.hass, {
         addons_repositories: newRepositories,
       });
-      await this._loadData();
+
+      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+      this._repos = addonsInfo.repositories;
+
+      await this._dialogParams!.loadData();
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }

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

@@ -4,7 +4,7 @@ import "./dialog-hassio-repositories";
 
 export interface HassioRepositoryDialogParams {
   supervisor: Supervisor;
-  url?: string;
+  loadData: () => Promise<void>;
 }
 
 export const showRepositoriesDialog = (

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

@@ -1,21 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface SupervisorDialogSupervisorUpdateParams {
-  supervisor: Supervisor;
-  name: string;
-  version: string;
-  snapshotParams: any;
-  updateHandler: () => Promise<void>;
-}
-
-export const showDialogSupervisorUpdate = (
-  element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorUpdateParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-supervisor-update",
-    dialogImport: () => import("./dialog-supervisor-update"),
-    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/hassio-my-redirect.ts

@@ -22,9 +22,6 @@ import { HomeAssistant, Route } from "../../src/types";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 
 const REDIRECTS: Redirects = {
-  supervisor: {
-    redirect: "/hassio/dashboard",
-  },
   supervisor_logs: {
     redirect: "/hassio/system",
   },
@@ -37,18 +34,15 @@ const REDIRECTS: Redirects = {
   supervisor_store: {
     redirect: "/hassio/store",
   },
+  supervisor: {
+    redirect: "/hassio/dashboard",
+  },
   supervisor_addon: {
     redirect: "/hassio/addon",
     params: {
       addon: "string",
     },
   },
-  supervisor_add_addon_repository: {
-    redirect: "/hassio/store",
-    params: {
-      repository_url: "url",
-    },
-  },
 };
 
 @customElement("hassio-my-redirect")

hassio/src/hassio-panel.ts

@@ -31,7 +31,7 @@ class HassioPanel extends LitElement {
 
     if (
       Object.keys(supervisorCollection).some(
-        (collection) => !this.supervisor[collection]
+        (colllection) => !this.supervisor[colllection]
       )
     ) {
       return html`<hass-loading-screen></hass-loading-screen>`;

hassio/src/supervisor-base-element.ts

@@ -23,19 +23,19 @@ import {
 import { fetchSupervisorStore } from "../../src/data/supervisor/store";
 import {
   getSupervisorEventCollection,
+  subscribeSupervisorEvents,
   Supervisor,
   SupervisorObject,
   supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
-import { HomeAssistant } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";
 
 declare global {
   interface HASSDomEvents {
     "supervisor-update": Partial<Supervisor>;
-    "supervisor-collection-refresh": { collection: SupervisorObject };
+    "supervisor-colllection-refresh": { colllection: SupervisorObject };
   }
 }
 
@@ -53,6 +53,8 @@ export class SupervisorBaseElement extends urlSyncMixin(
     Collection<unknown>
   > = {};
 
+  @internalProperty() private _resources?: Record<string, any>;
+
   @internalProperty() private _language = "en";
 
   public connectedCallback(): void {
@@ -69,39 +71,12 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    if (changedProperties.has("hass")) {
-      const oldHass = changedProperties.get("hass") as
-        | HomeAssistant
-        | undefined;
-      if (
-        oldHass !== undefined &&
-        oldHass.language !== undefined &&
-        oldHass.language !== this.hass.language
-      ) {
-        this._language = this.hass.language;
-      }
-    }
 
     if (changedProperties.has("_language")) {
       if (changedProperties.get("_language") !== this._language) {
         this._initializeLocalize();
       }
     }
-
-    if (changedProperties.has("_collections")) {
-      if (this._collections) {
-        const unsubs = Object.keys(this._unsubs);
-        for (const collection of Object.keys(this._collections)) {
-          if (!unsubs.includes(collection)) {
-            this._unsubs[collection] = this._collections[
-              collection
-            ].subscribe((data) =>
-              this._updateSupervisor({ [collection]: data })
-            );
-          }
-        }
-      }
-    }
   }
 
   protected _updateSupervisor(obj: Partial<Supervisor>): void {
@@ -110,10 +85,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
-    if (
-      this._language !== this.hass.language &&
-      this.hass.language !== undefined
-    ) {
+    if (this._language !== this.hass.language) {
       this._language = this.hass.language;
     }
     this._initializeLocalize();
@@ -127,43 +99,55 @@ export class SupervisorBaseElement extends urlSyncMixin(
       "/api/hassio/app/static/translations"
     );
 
+    this._resources = {
+      [language]: data,
+    };
+
     this.supervisor = {
       ...this.supervisor,
-      localize: await computeLocalize(this.constructor.prototype, language, {
-        [language]: data,
-      }),
+      localize: await computeLocalize(
+        this.constructor.prototype,
+        this._language,
+        this._resources
+      ),
     };
   }
 
   private async _handleSupervisorStoreRefreshEvent(ev) {
-    const collection = ev.detail.collection;
+    const colllection = ev.detail.colllection;
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      this._collections[collection].refresh();
+      this._collections[colllection].refresh();
       return;
     }
 
     const response = await this.hass.callApi<HassioResponse<any>>(
       "GET",
-      `hassio${supervisorCollection[collection]}`
+      `hassio${supervisorCollection[colllection]}`
     );
-    this._updateSupervisor({ [collection]: response.data });
+    this._updateSupervisor({ [colllection]: response.data });
   }
 
   private async _initSupervisor(): Promise<void> {
     this.addEventListener(
-      "supervisor-collection-refresh",
+      "supervisor-colllection-refresh",
       this._handleSupervisorStoreRefreshEvent
     );
 
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      Object.keys(supervisorCollection).forEach((collection) => {
-        if (collection in this._collections) {
-          this._collections[collection].refresh();
+      Object.keys(supervisorCollection).forEach((colllection) => {
+        this._unsubs[colllection] = subscribeSupervisorEvents(
+          this.hass,
+          (data) => this._updateSupervisor({ [colllection]: data }),
+          colllection,
+          supervisorCollection[colllection]
+        );
+        if (this._collections[colllection]) {
+          this._collections[colllection].refresh();
         } else {
-          this._collections[collection] = getSupervisorEventCollection(
+          this._collections[colllection] = getSupervisorEventCollection(
             this.hass.connection,
-            collection,
-            supervisorCollection[collection]
+            colllection,
+            supervisorCollection[colllection]
           );
         }
       });
@@ -201,7 +185,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
         fetchSupervisorStore(this.hass),
       ]);
 
-      this._updateSupervisor({
+      this.supervisor = {
         addon,
         supervisor,
         host,
@@ -211,7 +195,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
         network,
         resolution,
         store,
-      });
+      };
 
       this.addEventListener("supervisor-update", (ev) =>
         this._updateSupervisor(ev.detail)

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

@@ -10,7 +10,6 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
@@ -20,7 +19,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../src/data/hassio/common";
-import { restartCore, updateCore } from "../../../src/data/supervisor/core";
+import { restartCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -30,7 +29,7 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
 import "../components/supervisor-metric";
-import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
+import { showDialogSupervisorCoreUpdate } from "../dialogs/core/show-dialog-core-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-core-info")
@@ -169,24 +168,7 @@ class HassioCoreInfo extends LitElement {
   }
 
   private async _coreUpdate(): Promise<void> {
-    showDialogSupervisorUpdate(this, {
-      supervisor: this.supervisor,
-      name: "Home Assistant Core",
-      version: this.supervisor.core.version_latest,
-      snapshotParams: {
-        name: `core_${this.supervisor.core.version}`,
-        folders: ["homeassistant"],
-        homeassistant: true,
-      },
-      updateHandler: async () => await this._updateCore(),
-    });
-  }
-
-  private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "core",
-    });
+    showDialogSupervisorCoreUpdate(this, { core: this.supervisor.core });
   }
 
   static get styles(): CSSResult[] {

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

@@ -21,7 +21,7 @@ import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
-  ignoreSupervisorError,
+  ignoredStatusCodes,
 } from "../../../src/data/hassio/common";
 import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
@@ -154,8 +154,8 @@ class HassioHostInfo extends LitElement {
                     )}
                   </span>
                   <span slot="description">
-                    ${this.supervisor.host.disk_life_time - 10} % -
-                    ${this.supervisor.host.disk_life_time} %
+                    ${this.supervisor.host.disk_life_time - 10}% -
+                    ${this.supervisor.host.disk_life_time}%
                   </span>
                 </ha-settings-row>`
               : ""}
@@ -274,7 +274,7 @@ class HassioHostInfo extends LitElement {
       await rebootHost(this.hass);
     } catch (err) {
       // Ignore connection errors, these are all expected
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
         showAlertDialog(this, {
           title: this.supervisor.localize("system.host.failed_to_reboot"),
           text: extractApiErrorMessage(err),
@@ -304,7 +304,7 @@ class HassioHostInfo extends LitElement {
       await shutdownHost(this.hass);
     } catch (err) {
       // Ignore connection errors, these are all expected
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
         showAlertDialog(this, {
           title: this.supervisor.localize("system.host.failed_to_shutdown"),
           text: extractApiErrorMessage(err),
@@ -342,7 +342,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await updateOS(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
+      fireEvent(this, "supervisor-colllection-refresh", { colllection: "os" });
     } catch (err) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
@@ -378,8 +378,8 @@ class HassioHostInfo extends LitElement {
     if (hostname && hostname !== curHostname) {
       try {
         await changeHostOptions(this.hass, { hostname });
-        fireEvent(this, "supervisor-collection-refresh", {
-          collection: "host",
+        fireEvent(this, "supervisor-colllection-refresh", {
+          colllection: "host",
         });
       } catch (err) {
         showAlertDialog(this, {
@@ -393,8 +393,8 @@ class HassioHostInfo extends LitElement {
   private async _importFromUSB(): Promise<void> {
     try {
       await configSyncOS(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "host",
+      fireEvent(this, "supervisor-colllection-refresh", {
+        colllection: "host",
       });
     } catch (err) {
       showAlertDialog(this, {
@@ -408,8 +408,8 @@ class HassioHostInfo extends LitElement {
 
   private async _loadData(): Promise<void> {
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "network",
+      fireEvent(this, "supervisor-colllection-refresh", {
+        colllection: "network",
       });
     } else {
       const network = await fetchNetworkInfo(this.hass);

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"
@@ -269,15 +263,13 @@ class HassioSupervisorInfo extends LitElement {
           </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"),
       });
@@ -325,8 +317,8 @@ class HassioSupervisorInfo extends LitElement {
 
   private async _reloadSupervisor(): Promise<void> {
     await reloadSupervisor(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "supervisor",
+    fireEvent(this, "supervisor-colllection-refresh", {
+      colllection: "supervisor",
     });
   }
 
@@ -375,13 +367,9 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        "Supervisor"
-      ),
+      title: this.supervisor.localize("confirm.update", "name", "Supervisor"),
       text: this.supervisor.localize(
-        "confirm.update.text",
+        "confirm.text",
         "name",
         "Supervisor",
         "version",
@@ -398,8 +386,8 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await updateSupervisor(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "supervisor",
+      fireEvent(this, "supervisor-colllection-refresh", {
+        colllection: "supervisor",
       });
     } catch (err) {
       showAlertDialog(this, {

package.json

@@ -23,17 +23,16 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.0",
-    "@codemirror/commands": "^0.18.0",
-    "@codemirror/gutter": "^0.18.0",
-    "@codemirror/highlight": "^0.18.0",
-    "@codemirror/history": "^0.18.0",
-    "@codemirror/legacy-modes": "^0.18.0",
-    "@codemirror/rectangular-selection": "^0.18.0",
-    "@codemirror/search": "^0.18.0",
-    "@codemirror/state": "^0.18.0",
-    "@codemirror/stream-parser": "^0.18.0",
-    "@codemirror/text": "^0.18.0",
-    "@codemirror/view": "^0.18.0",
+    "@codemirror/commands": "^0.17.0",
+    "@codemirror/gutter": "^0.17.0",
+    "@codemirror/highlight": "^0.17.0",
+    "@codemirror/history": "^0.17.0",
+    "@codemirror/legacy-modes": "^0.17.0",
+    "@codemirror/search": "^0.17.0",
+    "@codemirror/state": "^0.17.0",
+    "@codemirror/stream-parser": "^0.17.0",
+    "@codemirror/text": "^0.17.0",
+    "@codemirror/view": "^0.17.0",
     "@formatjs/intl-getcanonicallocales": "^1.4.6",
     "@formatjs/intl-pluralrules": "^3.4.10",
     "@fullcalendar/common": "5.1.0",
@@ -91,6 +90,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.5.2",
+    "@types/chromecast-caf-sender": "^1.0.3",
+    "@types/sortablejs": "^1.10.6",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
     "@vibrant/color": "^3.2.1-alpha.1",
@@ -100,6 +101,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,7 +110,7 @@
     "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",
@@ -131,7 +133,6 @@
     "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",
@@ -165,8 +166,8 @@
     "@rollup/plugin-replace": "^2.3.2",
     "@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",
@@ -174,7 +175,6 @@
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^7.0.2",
     "@types/resize-observer-browser": "^0.1.3",
-    "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
@@ -226,7 +226,7 @@
     "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",

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="20210423.0",
+    version="20210301.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-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/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",
@@ -105,7 +103,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "lock",
   "media_player",
   "person",
-  "remote",
   "script",
   "sun",
   "timer",

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/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/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_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/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>(
@@ -74,10 +54,12 @@ type FuzzyFilterSort = <T extends ScorableTextItem>(
 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,18 +0,0 @@
-const isTemplateRegex = new RegExp("{%|{{");
-
-export const isTemplate = (value: string): boolean =>
-  isTemplateRegex.test(value);
-
-export const hasTemplate = (value: unknown): boolean => {
-  if (!value) {
-    return false;
-  }
-  if (typeof value === "string") {
-    return isTemplate(value);
-  }
-  if (typeof value === "object") {
-    const values = Array.isArray(value) ? value : Object.values(value!);
-    return values.some((val) => val && hasTemplate(val));
-  }
-  return false;
-};

src/common/string/starts-with.ts

@@ -1,2 +0,0 @@
-export const strStartsWith = (value: string, search: string) =>
-  value.substring(0, search.length) === search;

src/common/url/construct-url.ts

@@ -1,5 +0,0 @@
-export const constructUrlCurrentPath = (searchParams: string): string => {
-  const base = window.location.pathname;
-  // Prevent trailing "?" if no parameters exist
-  return searchParams ? base + "?" + searchParams : base;
-};

src/common/url/search-params.ts

@@ -19,17 +19,3 @@ export const createSearchParam = (params: Record<string, string>): string => {
   });
   return urlParams.toString();
 };
-
-export const addSearchParam = (params: Record<string, string>): string => {
-  const urlParams = new URLSearchParams(window.location.search);
-  Object.entries(params).forEach(([key, value]) => {
-    urlParams.set(key, value);
-  });
-  return urlParams.toString();
-};
-
-export const removeSearchParam = (param: string): string => {
-  const urlParams = new URLSearchParams(window.location.search);
-  urlParams.delete(param);
-  return urlParams.toString();
-};

src/common/util/render-status.ts

@@ -1,4 +1,4 @@
-export const afterNextRender = (cb: (value: unknown) => void): void => {
+export const afterNextRender = (cb: () => void): void => {
   requestAnimationFrame(() => setTimeout(cb, 0));
 };
 

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

@@ -0,0 +1,65 @@
+import { html, LitElement } from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "./ha-progress-button";
+
+class HaCallApiButton extends LitElement {
+  render() {
+    return html`
+      <ha-progress-button
+        .progress="${this.progress}"
+        @click="${this._buttonTapped}"
+        ?disabled="${this.disabled}"
+        ><slot></slot
+      ></ha-progress-button>
+    `;
+  }
+
+  constructor() {
+    super();
+    this.method = "POST";
+    this.data = {};
+    this.disabled = false;
+    this.progress = false;
+  }
+
+  static get properties() {
+    return {
+      hass: {},
+      progress: Boolean,
+      path: String,
+      method: String,
+      data: {},
+      disabled: Boolean,
+    };
+  }
+
+  get progressButton() {
+    return this.renderRoot.querySelector("ha-progress-button");
+  }
+
+  async _buttonTapped() {
+    this.progress = true;
+    const eventData = {
+      method: this.method,
+      path: this.path,
+      data: this.data,
+    };
+
+    try {
+      const resp = await this.hass.callApi(this.method, this.path, this.data);
+      this.progress = false;
+      this.progressButton.actionSuccess();
+      eventData.success = true;
+      eventData.response = resp;
+    } catch (err) {
+      this.progress = false;
+      this.progressButton.actionError();
+      eventData.success = false;
+      eventData.response = err;
+    }
+
+    fireEvent(this, "hass-api-called", eventData);
+  }
+}
+
+customElements.define("ha-call-api-button", HaCallApiButton);

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

@@ -1,77 +0,0 @@
-import { css, CSSResult, html, LitElement, property, query } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import "./ha-progress-button";
-
-class HaCallApiButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public method: "POST" | "GET" | "PUT" | "DELETE" = "POST";
-
-  @property() public data = {};
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public progress = false;
-
-  @property() public path?: string;
-
-  @query("ha-progress-button", true) private _progressButton;
-
-  render() {
-    return html`
-      <ha-progress-button
-        .progress=${this.progress}
-        @click=${this._buttonTapped}
-        ?disabled=${this.disabled}
-        ><slot></slot
-      ></ha-progress-button>
-    `;
-  }
-
-  async _buttonTapped() {
-    this.progress = true;
-    const eventData: {
-      method: string;
-      path: string;
-      data: any;
-      success?: boolean;
-      response?: any;
-    } = {
-      method: this.method,
-      path: this.path!,
-      data: this.data,
-    };
-
-    try {
-      const resp = await this.hass.callApi(this.method, this.path!, this.data);
-      this.progress = false;
-      this._progressButton.actionSuccess();
-      eventData.success = true;
-      eventData.response = resp;
-    } catch (err) {
-      this.progress = false;
-      this._progressButton.actionError();
-      eventData.success = false;
-      eventData.response = err;
-    }
-
-    fireEvent(this, "hass-api-called", eventData as any);
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host([disabled]) {
-        pointer-events: none;
-      }
-    `;
-  }
-}
-
-customElements.define("ha-call-api-button", HaCallApiButton);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-call-api-button": HaCallApiButton;
-  }
-}

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

@@ -63,7 +63,7 @@ export interface DataTableSortColumnData {
 }
 
 export interface DataTableColumnData extends DataTableSortColumnData {
-  title: TemplateResult | string;
+  title: string;
   type?: "numeric" | "icon" | "icon-button";
   template?: <T>(data: any, row: T) => TemplateResult | string;
   width?: string;
@@ -74,7 +74,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
 }
 
 type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
-  title?: TemplateResult | string;
+  title?: string;
 };
 
 export interface DataTableRowData {
@@ -132,7 +132,7 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  @internalProperty() private _items: DataTableRowData[] = [];
+  private _items: DataTableRowData[] = [];
 
   private _checkableRowsCount?: number;
 
@@ -160,9 +160,9 @@ export class HaDataTable extends LitElement {
 
   public connectedCallback() {
     super.connectedCallback();
-    if (this._items.length) {
+    if (this._filteredData.length) {
       // Force update of location of rows
-      this._items = [...this._items];
+      this._filteredData = [...this._filteredData];
     }
   }
 
@@ -236,19 +236,20 @@ export class HaDataTable extends LitElement {
             "auto-height": this.autoHeight,
           })}"
           role="table"
-          aria-rowcount=${this._filteredData.length + 1}
+          aria-rowcount=${this._filteredData.length}
           style=${styleMap({
             height: this.autoHeight
               ? `${(this._filteredData.length || 1) * 53 + 57}px`
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
-          <div class="mdc-data-table__header-row" role="row" aria-rowindex="1">
+          <div class="mdc-data-table__header-row" role="row">
             ${this.selectable
               ? html`
                   <div
                     class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
                     role="columnheader"
+                    scope="col"
                   >
                     <ha-checkbox
                       class="mdc-data-table__row-checkbox"
@@ -291,13 +292,7 @@ export class HaDataTable extends LitElement {
                       })
                     : ""}
                   role="columnheader"
-                  aria-sort=${ifDefined(
-                    sorted
-                      ? this._sortDirection === "desc"
-                        ? "descending"
-                        : "ascending"
-                      : undefined
-                  )}
+                  scope="col"
                   @click=${this._handleHeaderClick}
                   .columnId=${key}
                 >
@@ -343,7 +338,7 @@ export class HaDataTable extends LitElement {
                       }
                       return html`
                         <div
-                          aria-rowindex=${index! + 2}
+                          aria-rowindex=${index}
                           role="row"
                           .rowId=${row[this.id]}
                           @click=${this._handleRowClick}
@@ -550,9 +545,7 @@ export class HaDataTable extends LitElement {
 
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
-    if (this._items.length) {
-      this._items = [...this._items];
-    }
+    this._filteredData = [...this._filteredData];
     fireEvent(this, "selection-changed", {
       value: this._checkedRows,
     });

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

@@ -100,7 +100,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   public excludeDomains?: string[];
 
   /**
-   * Show only devices with entities of these device classes.
+   * Show only deviced with entities of these device classes.
    * @type {Array}
    * @attr include-device-classes
    */
@@ -113,7 +113,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @internalProperty() private _opened?: boolean;
 
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
   private _init = false;
 
@@ -242,11 +242,11 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   );
 
   public open() {
-    this.comboBox?.open();
+    this._comboBox?.open();
   }
 
   public focus() {
-    this.comboBox?.focus();
+    this._comboBox?.focus();
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -269,7 +269,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       (changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
-      (this.comboBox as any).items = this._getDevices(
+      (this._comboBox as any).items = this._getDevices(
         this.devices!,
         this.areas!,
         this.entities!,

src/components/entity/ha-chart-base.js

@@ -371,7 +371,7 @@ class HaChartBase extends mixinBehaviors(
       return value;
     }
     const date = new Date(values[index].value);
-    return formatTime(date, this.hass.locale);
+    return formatTime(date, this.hass.language);
   }
 
   drawChart() {

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

@@ -99,7 +99,7 @@ export class HaEntityPicker extends LitElement {
 
   @property({ type: Boolean }) private _opened = false;
 
-  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
   public open() {
     this.updateComplete.then(() => {
@@ -208,7 +208,7 @@ export class HaEntityPicker extends LitElement {
         this.entityFilter,
         this.includeDeviceClasses
       );
-      (this.comboBox as any).filteredItems = this._states;
+      (this._comboBox as any).filteredItems = this._states;
       this._initedStates = true;
     }
   }
@@ -296,7 +296,7 @@ export class HaEntityPicker extends LitElement {
 
   private _filterChanged(ev: CustomEvent): void {
     const filterString = ev.detail.value.toLowerCase();
-    (this.comboBox as any).filteredItems = this._states.filter(
+    (this._comboBox as any).filteredItems = this._states.filter(
       (state) =>
         state.entity_id.toLowerCase().includes(filterString) ||
         computeStateName(state).toLowerCase().includes(filterString)

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

@@ -17,7 +17,6 @@ import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
 import "../ha-switch";
-import "../ha-formfield";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -30,8 +29,6 @@ export class HaEntityToggle extends LitElement {
 
   @property() public stateObj?: HassEntity;
 
-  @property() public label?: string;
-
   @internalProperty() private _isOn = false;
 
   protected render(): TemplateResult {
@@ -58,21 +55,15 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
-    const switchTemplate = html`<ha-switch
-      aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
-        this._isOn ? "off" : "on"
-      }`}
-      .checked=${this._isOn}
-      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
-      @change=${this._toggleChanged}
-    ></ha-switch>`;
-
-    if (!this.label) {
-      return switchTemplate;
-    }
-
     return html`
-      <ha-formfield .label=${this.label}>${switchTemplate}</ha-formfield>
+      <ha-switch
+        aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
+          this._isOn ? "off" : "on"
+        }`}
+        .checked=${this._isOn}
+        .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+        @change=${this._toggleChanged}
+      ></ha-switch>
     `;
   }
 

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

@@ -116,8 +116,12 @@ export class HaStateLabelBadge extends LitElement {
           : state.state === UNKNOWN
           ? "-"
           : state.attributes.unit_of_measurement
-          ? formatNumber(state.state, this.hass!.locale)
-          : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
+          ? formatNumber(state.state, this.hass!.language)
+          : computeStateDisplay(
+              this.hass!.localize,
+              state,
+              this.hass!.language
+            );
     }
   }
 

src/components/entity/state-info.ts

@@ -84,7 +84,7 @@ class StateInfo extends LitElement {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.locale !== this.hass.locale) {
+    if (!oldHass || oldHass.language !== this.hass.language) {
       this.rtl = computeRTL(this.hass);
     }
   }

src/components/ha-analytics-learn-more.ts

@@ -1,10 +0,0 @@
-import { html } from "lit-element";
-import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
-
-export const analyticsLearnMore = (hass: HomeAssistant) => html`<a
-  .href=${documentationUrl(hass, "/integrations/analytics/")}
-  target="_blank"
-  rel="noreferrer"
-  >${hass.localize("ui.panel.config.core.section.core.analytics.learn_more")}</a
->`;

src/components/ha-analytics.ts

@@ -1,199 +0,0 @@
-import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { fireEvent } from "../common/dom/fire_event";
-import { Analytics, AnalyticsPreferences } from "../data/analytics";
-import { haStyle } from "../resources/styles";
-import { HomeAssistant } from "../types";
-import "./ha-checkbox";
-import type { HaCheckbox } from "./ha-checkbox";
-import "./ha-settings-row";
-
-const ADDITIONAL_PREFERENCES = ["usage", "statistics"];
-
-declare global {
-  interface HASSDomEvents {
-    "analytics-preferences-changed": { preferences: AnalyticsPreferences };
-  }
-}
-
-@customElement("ha-analytics")
-export class HaAnalytics extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public analytics?: Analytics;
-
-  protected render(): TemplateResult {
-    const loading = this.analytics === undefined;
-    const baseEnabled = !loading && this.analytics!.preferences.base;
-
-    return html`
-      <ha-settings-row>
-        <span slot="prefix">
-          <ha-checkbox
-            @change=${this._handleRowCheckboxClick}
-            .checked=${baseEnabled}
-            .preference=${"base"}
-            .disabled=${loading}
-            name="base"
-          >
-          </ha-checkbox>
-        </span>
-        <span slot="heading" data-for="base">
-          ${this.hass.localize(
-            `ui.panel.config.core.section.core.analytics.preference.base.title`
-          )}
-        </span>
-        <span slot="description" data-for="base">
-          ${this.hass.localize(
-            `ui.panel.config.core.section.core.analytics.preference.base.description`
-          )}
-        </span>
-      </ha-settings-row>
-      ${ADDITIONAL_PREFERENCES.map(
-        (preference) =>
-          html`<ha-settings-row>
-            <span slot="prefix">
-              <ha-checkbox
-                @change=${this._handleRowCheckboxClick}
-                .checked=${this.analytics?.preferences[preference]}
-                .preference=${preference}
-                name=${preference}
-              >
-              </ha-checkbox>
-              ${!baseEnabled
-                ? html`<paper-tooltip animation-delay="0" position="right"
-                    >${this.hass.localize(
-                      "ui.panel.config.core.section.core.analytics.needs_base"
-                    )}
-                  </paper-tooltip>`
-                : ""}
-            </span>
-            <span slot="heading" data-for=${preference}>
-              ${preference === "usage"
-                ? isComponentLoaded(this.hass, "hassio")
-                  ? this.hass.localize(
-                      `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.title`
-                    )
-                  : this.hass.localize(
-                      `ui.panel.config.core.section.core.analytics.preference.usage.title`
-                    )
-                : this.hass.localize(
-                    `ui.panel.config.core.section.core.analytics.preference.${preference}.title`
-                  )}
-            </span>
-            <span slot="description" data-for=${preference}>
-              ${preference !== "usage"
-                ? this.hass.localize(
-                    `ui.panel.config.core.section.core.analytics.preference.${preference}.description`
-                  )
-                : isComponentLoaded(this.hass, "hassio")
-                ? this.hass.localize(
-                    `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.description`
-                  )
-                : this.hass.localize(
-                    `ui.panel.config.core.section.core.analytics.preference.usage.description`
-                  )}
-            </span>
-          </ha-settings-row>`
-      )}
-      <ha-settings-row>
-        <span slot="prefix">
-          <ha-checkbox
-            @change=${this._handleRowCheckboxClick}
-            .checked=${this.analytics?.preferences.diagnostics}
-            .preference=${"diagnostics"}
-            .disabled=${loading}
-            name="diagnostics"
-          >
-          </ha-checkbox>
-        </span>
-        <span slot="heading" data-for="diagnostics">
-          ${this.hass.localize(
-            `ui.panel.config.core.section.core.analytics.preference.diagnostics.title`
-          )}
-        </span>
-        <span slot="description" data-for="diagnostics">
-          ${this.hass.localize(
-            `ui.panel.config.core.section.core.analytics.preference.diagnostics.description`
-          )}
-        </span>
-      </ha-settings-row>
-    `;
-  }
-
-  protected updated(changedProps) {
-    super.updated(changedProps);
-
-    this.shadowRoot!.querySelectorAll("*[data-for]").forEach((el) => {
-      const forEl = (el as HTMLElement).dataset.for;
-      delete (el as HTMLElement).dataset.for;
-
-      el.addEventListener("click", () => {
-        const toFocus = this.shadowRoot!.querySelector(
-          `*[name=${forEl}]`
-        ) as HTMLElement | null;
-
-        if (toFocus) {
-          toFocus.focus();
-          toFocus.click();
-        }
-      });
-    });
-  }
-
-  private _handleRowCheckboxClick(ev: Event) {
-    const checkbox = ev.currentTarget as HaCheckbox;
-    const preference = (checkbox as any).preference;
-    const preferences = this.analytics ? { ...this.analytics.preferences } : {};
-
-    if (preferences[preference] === checkbox.checked) {
-      return;
-    }
-
-    preferences[preference] = checkbox.checked;
-
-    if (ADDITIONAL_PREFERENCES.includes(preference) && checkbox.checked) {
-      preferences.base = true;
-    } else if (preference === "base" && !checkbox.checked) {
-      preferences.usage = false;
-      preferences.statistics = false;
-    }
-
-    fireEvent(this, "analytics-preferences-changed", { preferences });
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      css`
-        .error {
-          color: var(--error-color);
-        }
-
-        ha-settings-row {
-          padding: 0;
-        }
-
-        span[slot="heading"],
-        span[slot="description"] {
-          cursor: pointer;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-analytics": HaAnalytics;
-  }
-}

src/components/ha-area-picker.ts

@@ -127,7 +127,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @internalProperty() private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
   private _init = false;
 
@@ -140,7 +140,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         this._devices = devices;
       }),
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities;
+        this._entities = entities.filter((entity) => entity.area_id);
       }),
     ];
   }
@@ -193,13 +193,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           deviceEntityLookup[entity.device_id].push(entity);
         }
         inputDevices = devices;
-        inputEntities = entities.filter((entity) => entity.area_id);
+        inputEntities = entities;
       } else {
         if (deviceFilter) {
           inputDevices = devices;
         }
         if (entityFilter) {
-          inputEntities = entities.filter((entity) => entity.area_id);
+          inputEntities = entities;
         }
       }
 
@@ -319,7 +319,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       (changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
-      (this.comboBox as any).items = this._getAreas(
+      (this._comboBox as any).items = this._getAreas(
         this._areas!,
         this._devices!,
         this._entities!,

src/components/ha-button-menu.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu } from "@material/mwc-menu";
 import {
@@ -10,6 +11,8 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
+import "./ha-icon-button";
+
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
   @property() public corner: Corner = "TOP_START";

src/components/ha-button-related-filter-menu.ts

@@ -1,207 +0,0 @@
-import "@material/mwc-icon-button";
-import type { Corner } from "@material/mwc-menu";
-import { mdiFilterVariant } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import "@material/mwc-menu/mwc-menu-surface";
-import { fireEvent } from "../common/dom/fire_event";
-import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
-import "./ha-svg-icon";
-import "./ha-area-picker";
-import "./device/ha-device-picker";
-import "./entity/ha-entity-picker";
-import { computeStateName } from "../common/entity/compute_state_name";
-import { computeDeviceName } from "../data/device_registry";
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "related-changed": {
-      value?: FilterValue;
-      items?: RelatedResult;
-      filter?: string;
-    };
-  }
-}
-
-interface FilterValue {
-  area?: string;
-  device?: string;
-  entity?: string;
-}
-
-@customElement("ha-button-related-filter-menu")
-export class HaRelatedFilterButtonMenu extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public corner: Corner = "TOP_START";
-
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ attribute: false }) public value?: FilterValue;
-
-  /**
-   * Show no entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  @internalProperty() private _open = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <mwc-icon-button @click=${this._handleClick}>
-        <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-      </mwc-icon-button>
-      <mwc-menu-surface
-        .open=${this._open}
-        .anchor=${this}
-        .fullwidth=${this.narrow}
-        .corner=${this.corner}
-        @closed=${this._onClosed}
-      >
-        <ha-area-picker
-          .label=${this.hass.localize(
-            "ui.components.related-filter-menu.filter_by_area"
-          )}
-          .hass=${this.hass}
-          .value=${this.value?.area}
-          no-add
-          @value-changed=${this._areaPicked}
-        ></ha-area-picker>
-        <ha-device-picker
-          .label=${this.hass.localize(
-            "ui.components.related-filter-menu.filter_by_device"
-          )}
-          .hass=${this.hass}
-          .value=${this.value?.device}
-          @value-changed=${this._devicePicked}
-        ></ha-device-picker>
-        <ha-entity-picker
-          .label=${this.hass.localize(
-            "ui.components.related-filter-menu.filter_by_entity"
-          )}
-          .hass=${this.hass}
-          .value=${this.value?.entity}
-          .excludeDomains=${this.excludeDomains}
-          @value-changed=${this._entityPicked}
-        ></ha-entity-picker>
-      </mwc-menu-surface>
-    `;
-  }
-
-  private _handleClick(): void {
-    if (this.disabled) {
-      return;
-    }
-    this._open = true;
-  }
-
-  private _onClosed(): void {
-    this._open = false;
-  }
-
-  private async _entityPicked(ev: CustomEvent) {
-    const entityId = ev.detail.value;
-    if (!entityId) {
-      fireEvent(this, "related-changed", { value: undefined });
-      return;
-    }
-    const filter = this.hass.localize(
-      "ui.components.related-filter-menu.filtered_by_entity",
-      "entity_name",
-      computeStateName((ev.currentTarget as any).comboBox.selectedItem)
-    );
-    const items = await findRelated(this.hass, "entity", entityId);
-    fireEvent(this, "related-changed", {
-      value: { entity: entityId },
-      filter,
-      items,
-    });
-  }
-
-  private async _devicePicked(ev: CustomEvent) {
-    const deviceId = ev.detail.value;
-    if (!deviceId) {
-      fireEvent(this, "related-changed", { value: undefined });
-      return;
-    }
-    const filter = this.hass.localize(
-      "ui.components.related-filter-menu.filtered_by_device",
-      "device_name",
-      computeDeviceName(
-        (ev.currentTarget as any).comboBox.selectedItem,
-        this.hass
-      )
-    );
-    const items = await findRelated(this.hass, "device", deviceId);
-
-    fireEvent(this, "related-changed", {
-      value: { device: deviceId },
-      filter,
-      items,
-    });
-  }
-
-  private async _areaPicked(ev: CustomEvent) {
-    const areaId = ev.detail.value;
-    if (!areaId) {
-      fireEvent(this, "related-changed", { value: undefined });
-      return;
-    }
-    const filter = this.hass.localize(
-      "ui.components.related-filter-menu.filtered_by_area",
-      "area_name",
-      (ev.currentTarget as any).comboBox.selectedItem.name
-    );
-    const items = await findRelated(this.hass, "area", areaId);
-    fireEvent(this, "related-changed", {
-      value: { area: areaId },
-      filter,
-      items,
-    });
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        display: inline-block;
-        position: relative;
-      }
-      :host([narrow]) {
-        position: static;
-      }
-      ha-area-picker,
-      ha-device-picker,
-      ha-entity-picker {
-        display: block;
-        width: 300px;
-        padding: 4px 16px;
-        box-sizing: border-box;
-      }
-      :host([narrow]) ha-area-picker,
-      :host([narrow]) ha-device-picker {
-        width: 100%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-button-related-filter-menu": HaRelatedFilterButtonMenu;
-  }
-}

src/components/ha-chip.ts

@@ -1,74 +0,0 @@
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
-import "./ha-icon";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-  unsafeCSS,
-} from "lit-element";
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
-}
-
-@customElement("ha-chip")
-export class HaChip extends LitElement {
-  @property() public index = 0;
-
-  @property({ type: Boolean }) public hasIcon = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="mdc-chip" .index=${this.index}>
-        ${this.hasIcon
-          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
-              <slot name="icon"></slot>
-            </div>`
-          : null}
-        <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
-        <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span class="mdc-chip__text"><slot></slot></span>
-          </span>
-        </span>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ${unsafeCSS(chipStyles)}
-      .mdc-chip {
-        background-color: var(
-          --ha-chip-background-color,
-          rgba(var(--rgb-primary-text-color), 0.15)
-        );
-        color: var(--ha-chip-text-color, var(--primary-text-color));
-      }
-
-      .mdc-chip:hover {
-        color: var(--ha-chip-text-color, var(--primary-text-color));
-      }
-
-      .mdc-chip__icon--leading {
-        --mdc-icon-size: 20px;
-        color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-chip": HaChip;
-  }
-}

src/components/ha-chips.ts

@@ -1,5 +1,6 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import { ripple } from "@material/mwc-ripple/ripple-directive";
 import {
   css,
   CSSResult,
@@ -11,7 +12,6 @@ import {
   unsafeCSS,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
-import "./ha-chip";
 
 declare global {
   // for fire event
@@ -20,8 +20,8 @@ declare global {
   }
 }
 
-@customElement("ha-chip-set")
-export class HaChipSet extends LitElement {
+@customElement("ha-chips")
+export class HaChips extends LitElement {
   @property() public items = [];
 
   protected render(): TemplateResult {
@@ -33,9 +33,18 @@ export class HaChipSet extends LitElement {
         ${this.items.map(
           (item, idx) =>
             html`
-              <ha-chip .index=${idx} @click=${this._handleClick}>
-                ${item}
-              </ha-chip>
+              <div class="mdc-chip" .index=${idx} @click=${this._handleClick}>
+                <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
+                <span role="gridcell">
+                  <span
+                    role="button"
+                    tabindex="0"
+                    class="mdc-chip__primary-action"
+                  >
+                    <span class="mdc-chip__text">${item}</span>
+                  </span>
+                </span>
+              </div>
             `
         )}
       </div>
@@ -51,9 +60,9 @@ export class HaChipSet extends LitElement {
   static get styles(): CSSResult {
     return css`
       ${unsafeCSS(chipStyles)}
-
-      ha-chip {
-        margin: 4px;
+      .mdc-chip {
+        background-color: rgba(var(--rgb-primary-text-color), 0.15);
+        color: var(--primary-text-color);
       }
     `;
   }
@@ -61,6 +70,6 @@ export class HaChipSet extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-chip-set": HaChipSet;
+    "ha-chips": HaChips;
   }
 }

src/components/ha-climate-state.ts

@@ -53,14 +53,14 @@ class HaClimateState extends LitElement {
     if (this.stateObj.attributes.current_temperature != null) {
       return `${formatNumber(
         this.stateObj.attributes.current_temperature,
-        this.hass.locale
+        this.hass!.language
       )} ${this.hass.config.unit_system.temperature}`;
     }
 
     if (this.stateObj.attributes.current_humidity != null) {
       return `${formatNumber(
         this.stateObj.attributes.current_humidity,
-        this.hass.locale
+        this.hass!.language
       )} %`;
     }
 
@@ -78,17 +78,17 @@ class HaClimateState extends LitElement {
     ) {
       return `${formatNumber(
         this.stateObj.attributes.target_temp_low,
-        this.hass.locale
+        this.hass!.language
       )}-${formatNumber(
         this.stateObj.attributes.target_temp_high,
-        this.hass.locale
+        this.hass!.language
       )} ${this.hass.config.unit_system.temperature}`;
     }
 
     if (this.stateObj.attributes.temperature != null) {
       return `${formatNumber(
         this.stateObj.attributes.temperature,
-        this.hass.locale
+        this.hass!.language
       )} ${this.hass.config.unit_system.temperature}`;
     }
     if (
@@ -97,17 +97,17 @@ class HaClimateState extends LitElement {
     ) {
       return `${formatNumber(
         this.stateObj.attributes.target_humidity_low,
-        this.hass.locale
+        this.hass!.language
       )}-${formatNumber(
         this.stateObj.attributes.target_humidity_high,
-        this.hass.locale
-      )} %`;
+        this.hass!.language
+      )}%`;
     }
 
     if (this.stateObj.attributes.humidity != null) {
       return `${formatNumber(
         this.stateObj.attributes.humidity,
-        this.hass.locale
+        this.hass!.language
       )} %`;
     }
 

src/components/ha-code-editor.ts

@@ -1,3 +1,4 @@
+import type { StreamLanguage } from "@codemirror/stream-parser";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import {
   customElement,
@@ -15,6 +16,10 @@ declare global {
   }
 }
 
+const modeTag = Symbol("mode");
+
+const readOnlyTag = Symbol("readOnly");
+
 const saveKeyBinding: KeyBinding = {
   key: "Mod-s",
   run: (view: EditorView) => {
@@ -37,7 +42,7 @@ export class HaCodeEditor extends UpdatingElement {
 
   @internalProperty() private _value = "";
 
-  private _loadedCodeMirror?: typeof import("../resources/codemirror");
+  @internalProperty() private _langs?: Record<string, StreamLanguage<unknown>>;
 
   public set value(value: string) {
     this._value = value;
@@ -47,17 +52,6 @@ export class HaCodeEditor extends UpdatingElement {
     return this.codemirror ? this.codemirror.state.doc.toString() : this._value;
   }
 
-  public get hasComments(): boolean {
-    if (!this.codemirror || !this._loadedCodeMirror) {
-      return false;
-    }
-    const className = this._loadedCodeMirror.HighlightStyle.get(
-      this.codemirror.state,
-      this._loadedCodeMirror.tags.comment
-    );
-    return !!this.shadowRoot!.querySelector(`span.${className}`);
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     if (!this.codemirror) {
@@ -77,16 +71,16 @@ export class HaCodeEditor extends UpdatingElement {
 
     if (changedProps.has("mode")) {
       this.codemirror.dispatch({
-        effects: this._loadedCodeMirror!.langCompartment!.reconfigure(
-          this._mode
-        ),
+        reconfigure: {
+          [modeTag]: this._mode,
+        },
       });
     }
     if (changedProps.has("readOnly")) {
       this.codemirror.dispatch({
-        effects: this._loadedCodeMirror!.readonlyCompartment!.reconfigure(
-          this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
-        ),
+        reconfigure: {
+          [readOnlyTag]: !this.readOnly,
+        },
       });
     }
     if (changedProps.has("_value") && this._value !== this.value) {
@@ -110,11 +104,13 @@ export class HaCodeEditor extends UpdatingElement {
   }
 
   private get _mode() {
-    return this._loadedCodeMirror!.langs[this.mode];
+    return this._langs![this.mode];
   }
 
   private async _load(): Promise<void> {
-    this._loadedCodeMirror = await loadCodeMirror();
+    const loaded = await loadCodeMirror();
+
+    this._langs = loaded.langs;
 
     const shadowRoot = this.attachShadow({ mode: "open" });
 
@@ -128,33 +124,28 @@ export class HaCodeEditor extends UpdatingElement {
 
     shadowRoot.appendChild(container);
 
-    this.codemirror = new this._loadedCodeMirror.EditorView({
-      state: this._loadedCodeMirror.EditorState.create({
+    this.codemirror = new loaded.EditorView({
+      state: loaded.EditorState.create({
         doc: this._value,
         extensions: [
-          this._loadedCodeMirror.lineNumbers(),
-          this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
-          this._loadedCodeMirror.history(),
-          this._loadedCodeMirror.highlightSelectionMatches(),
-          this._loadedCodeMirror.highlightActiveLine(),
-          this._loadedCodeMirror.drawSelection(),
-          this._loadedCodeMirror.rectangularSelection(),
-          this._loadedCodeMirror.keymap.of([
-            ...this._loadedCodeMirror.defaultKeymap,
-            ...this._loadedCodeMirror.searchKeymap,
-            ...this._loadedCodeMirror.historyKeymap,
-            ...this._loadedCodeMirror.tabKeyBindings,
+          loaded.lineNumbers(),
+          loaded.history(),
+          loaded.highlightSelectionMatches(),
+          loaded.keymap.of([
+            ...loaded.defaultKeymap,
+            ...loaded.searchKeymap,
+            ...loaded.historyKeymap,
+            ...loaded.tabKeyBindings,
             saveKeyBinding,
           ] as KeyBinding[]),
-          this._loadedCodeMirror.langCompartment.of(this._mode),
-          this._loadedCodeMirror.theme,
-          this._loadedCodeMirror.Prec.fallback(
-            this._loadedCodeMirror.highlightStyle
+          loaded.tagExtension(modeTag, this._mode),
+          loaded.theme,
+          loaded.Prec.fallback(loaded.highlightStyle),
+          loaded.tagExtension(
+            readOnlyTag,
+            loaded.EditorView.editable.of(!this.readOnly)
           ),
-          this._loadedCodeMirror.readonlyCompartment.of(
-            this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
-          ),
-          this._loadedCodeMirror.EditorView.updateListener.of((update) =>
+          loaded.EditorView.updateListener.of((update) =>
             this._onUpdate(update)
           ),
         ],

src/components/ha-combo-box.ts

@@ -86,10 +86,6 @@ export class HaComboBox extends LitElement {
     });
   }
 
-  public get selectedItem() {
-    return (this._comboBox as any).selectedItem;
-  }
-
   protected render(): TemplateResult {
     return html`
       <vaadin-combo-box-light
@@ -153,9 +149,9 @@ export class HaComboBox extends LitElement {
     fireEvent(this, ev.type, ev.detail);
   }
 
-  private _filterChanged(ev: PolymerChangedEvent<string>) {
+  private _filterChanged(ev: PolymerChangedEvent<boolean>) {
     // @ts-ignore
-    fireEvent(this, ev.type, ev.detail, { composed: false });
+    fireEvent(this, ev.type, ev.detail);
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {

src/components/ha-date-input.ts

@@ -1,61 +1,62 @@
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
-import "@polymer/paper-input/paper-input";
-import { fireEvent } from "../common/dom/fire_event";
-import { mdiCalendar } from "@mdi/js";
-import "./ha-svg-icon";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker";
 
-const i18n = {
-  monthNames: [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ],
-  weekdays: [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ],
-  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  firstDayOfWeek: 0,
-  week: "Week",
-  calendar: "Calendar",
-  clear: "Clear",
-  today: "Today",
-  cancel: "Cancel",
-  formatTitle: (monthName, fullYear) => {
-    return monthName + " " + fullYear;
-  },
-  formatDate: (d: { day: number; month: number; year: number }) => {
+const VaadinDatePicker = customElements.get("vaadin-date-picker");
+
+const documentContainer = document.createElement("template");
+documentContainer.setAttribute("style", "display: none;");
+documentContainer.innerHTML = `
+  <dom-module id="ha-date-input-styles" theme-for="vaadin-text-field">
+    <template>
+      <style>
+      [part="input-field"] {
+        top: 2px;
+        height: 30px;
+        color: var(--primary-text-color);
+      }
+      [part="value"] {
+        text-align: center;
+      }
+      </style>
+    </template>
+  </dom-module>
+`;
+document.head.appendChild(documentContainer.content);
+
+export class HaDateInput extends VaadinDatePicker {
+  constructor() {
+    super();
+
+    this.i18n.formatDate = this._formatISODate;
+    this.i18n.parseDate = this._parseISODate;
+  }
+
+  ready() {
+    super.ready();
+    const styleEl = document.createElement("style");
+    styleEl.innerHTML = `
+      :host {
+        width: 12ex;
+        margin-top: -6px;
+        --material-body-font-size: 16px;
+        --_material-text-field-input-line-background-color: var(--primary-text-color);
+        --_material-text-field-input-line-opacity: 1;
+        --material-primary-color: var(--primary-text-color);
+      }
+    `;
+    this.shadowRoot.appendChild(styleEl);
+    this._inputElement.querySelector("[part='toggle-button']").style.display =
+      "none";
+  }
+
+  private _formatISODate(d) {
     return [
       ("0000" + String(d.year)).slice(-4),
       ("0" + String(d.month + 1)).slice(-2),
       ("0" + String(d.day)).slice(-2),
     ].join("-");
-  },
-  parseDate: (text: string) => {
+  }
+
+  private _parseISODate(text) {
     const parts = text.split("-");
     const today = new Date();
     let date;
@@ -79,75 +80,11 @@ const i18n = {
       return { day: date, month, year };
     }
     return undefined;
-  },
-};
-@customElement("ha-date-input")
-export class HaDateInput extends LitElement {
-  @property() public value?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property() public label?: string;
-
-  @query("vaadin-date-picker-light", true) private _datePicker;
-
-  private _inited = false;
-
-  updated(changedProps: PropertyValues) {
-    if (changedProps.has("value")) {
-      this._datePicker.value = this.value;
-      this._inited = true;
-    }
-  }
-
-  render() {
-    return html`<vaadin-date-picker-light
-      .disabled=${this.disabled}
-      @value-changed=${this._valueChanged}
-      attr-for-value="value"
-      .i18n=${i18n}
-    >
-      <paper-input .label=${this.label} no-label-float>
-        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
-      </paper-input>
-    </vaadin-date-picker-light>`;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    if (
-      !this.value ||
-      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
-    ) {
-      this.value = ev.detail.value;
-      fireEvent(this, "change");
-      fireEvent(this, "value-changed", { value: ev.detail.value });
-    }
-  }
-
-  private _compareStringDates(a: string, b: string): boolean {
-    const aParts = a.split("-");
-    const bParts = b.split("-");
-    let i = 0;
-    for (const aPart of aParts) {
-      if (Number(aPart) !== Number(bParts[i])) {
-        return false;
-      }
-      i++;
-    }
-    return true;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      paper-input {
-        width: 110px;
-      }
-      ha-svg-icon {
-        color: var(--secondary-text-color);
-      }
-    `;
   }
 }
+
+customElements.define("ha-date-input", HaDateInput as any);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-date-input": HaDateInput;

src/components/ha-date-range-picker.ts

@@ -43,7 +43,7 @@ export class HaDateRangePicker extends LitElement {
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.locale !== this.hass.locale) {
+      if (!oldHass || oldHass.language !== this.hass.language) {
         this._hour24format = this._compute24hourFormat();
         this._rtlDirection = computeRTLDirection(this.hass);
       }
@@ -62,7 +62,7 @@ export class HaDateRangePicker extends LitElement {
         <div slot="input" class="date-range-inputs">
           <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
           <paper-input
-            .value=${formatDateTime(this.startDate, this.hass.locale)}
+            .value=${formatDateTime(this.startDate, this.hass.language)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.start_date"
             )}
@@ -71,7 +71,7 @@ export class HaDateRangePicker extends LitElement {
             readonly
           ></paper-input>
           <paper-input
-            .value=${formatDateTime(this.endDate, this.hass.locale)}
+            .value=${formatDateTime(this.endDate, this.hass.language)}
             label=${this.hass.localize(
               "ui.components.date-range-picker.end_date"
             )}

src/components/ha-gauge.ts

@@ -11,7 +11,6 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import { afterNextRender } from "../common/util/render-status";
-import { FrontendTranslationData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
 
 const getAngle = (value: number, min: number, max: number) => {
@@ -30,7 +29,7 @@ export class Gauge extends LitElement {
 
   @property({ type: Number }) public value = 0;
 
-  @property() public locale!: FrontendTranslationData;
+  @property({ type: String }) public language = "";
 
   @property() public label = "";
 
@@ -91,7 +90,7 @@ export class Gauge extends LitElement {
       </svg>
       <svg class="text">
         <text class="value-text">
-          ${formatNumber(this.value, this.locale)} ${this.label}
+          ${formatNumber(this.value, this.language)} ${this.label}
         </text>
       </svg>`;
   }

src/components/ha-hls-player.ts

@@ -1,4 +1,3 @@
-import type HlsType from "hls.js";
 import {
   css,
   CSSResult,
@@ -16,6 +15,8 @@ import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
 
+type HLSModule = typeof import("hls.js");
+
 @customElement("ha-hls-player")
 class HaHLSPlayer extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -42,7 +43,7 @@ class HaHLSPlayer extends LitElement {
 
   @internalProperty() private _attached = false;
 
-  private _hlsPolyfillInstance?: HlsType;
+  private _hlsPolyfillInstance?: Hls;
 
   private _useExoPlayer = false;
 
@@ -106,8 +107,8 @@ class HaHLSPlayer extends LitElement {
     const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
 
-    const Hls = (await import("hls.js")).default;
-    let hlsSupported = Hls.isSupported();
+    const hls = ((await import("hls.js")) as any).default as HLSModule;
+    let hlsSupported = hls.isSupported();
 
     if (!hlsSupported) {
       hlsSupported =
@@ -143,8 +144,8 @@ class HaHLSPlayer extends LitElement {
     // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
     if (this._useExoPlayer && match !== null && match[1] !== undefined) {
       this._renderHLSExoPlayer(playlist_url);
-    } else if (Hls.isSupported()) {
-      this._renderHLSPolyfill(videoEl, Hls, playlist_url);
+    } else if (hls.isSupported()) {
+      this._renderHLSPolyfill(videoEl, hls, playlist_url);
     } else {
       this._renderHLSNative(videoEl, playlist_url);
     }
@@ -181,7 +182,7 @@ class HaHLSPlayer extends LitElement {
 
   private async _renderHLSPolyfill(
     videoEl: HTMLVideoElement,
-    Hls: typeof HlsType,
+    Hls: HLSModule,
     url: string
   ) {
     const hls = new Hls({

src/components/ha-selector/ha-selector-time.ts

@@ -1,9 +1,12 @@
 import { customElement, html, LitElement, property } from "lit-element";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { TimeSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../paper-time-input";
+
+const test = new Date().toLocaleString();
+const useAMPM = test.includes("AM") || test.includes("PM");
+
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -16,24 +19,16 @@ export class HaTimeSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  private _useAmPm = memoizeOne((language: string) => {
-    const test = new Date().toLocaleString(language);
-    return test.includes("AM") || test.includes("PM");
-  });
-
   protected render() {
-    const useAMPM = this._useAmPm(this.hass.locale.language);
-
     const parts = this.value?.split(":") || [];
-    const hours = parts[0];
+    const hours = useAMPM ? parts[0] ?? "12" : parts[0] ?? "0";
 
     return html`
       <paper-time-input
         .label=${this.label}
-        .hour=${hours &&
-        (useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours)}
-        .min=${parts[1]}
-        .sec=${parts[2]}
+        .hour=${useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours}
+        .min=${parts[1] ?? "00"}
+        .sec=${parts[2] ?? "00"}
         .format=${useAMPM ? 12 : 24}
         .amPm=${useAMPM && (Number(hours) > 12 ? "PM" : "AM")}
         .disabled=${this.disabled}
@@ -47,16 +42,12 @@ export class HaTimeSelector extends LitElement {
 
   private _timeChanged(ev) {
     let value = ev.target.value;
-    const useAMPM = this._useAmPm(this.hass.locale.language);
-    let hours = Number(ev.target.hour || 0);
-    if (value && useAMPM) {
+    if (useAMPM) {
+      let hours = Number(ev.target.hour);
       if (ev.target.amPm === "PM") {
         hours += 12;
       }
-      value = `${hours}:${ev.target.min || "00"}:${ev.target.sec || "00"}`;
-    }
-    if (value === this.value) {
-      return;
+      value = `${hours}:${ev.target.min}:${ev.target.sec}`;
     }
     fireEvent(this, "value-changed", {
       value,

src/components/ha-service-control.ts

@@ -1,4 +1,3 @@
-import { mdiHelpCircle } from "@mdi/js";
 import { HassService, HassServiceTarget } from "home-assistant-js-websocket";
 import {
   css,
@@ -19,12 +18,11 @@ import { ENTITY_COMPONENT_DOMAINS } from "../data/entity";
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
-import "./ha-checkbox";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-settings-row";
 import "./ha-yaml-editor";
+import "./ha-checkbox";
 import type { HaYamlEditor } from "./ha-yaml-editor";
 
 interface ExtHassService extends Omit<HassService, "fields"> {
@@ -38,7 +36,6 @@ interface ExtHassService extends Omit<HassService, "fields"> {
     example?: any;
     selector?: Selector;
   }[];
-  hasSelector: string[];
 }
 
 @customElement("ha-service-control")
@@ -51,17 +48,17 @@ export class HaServiceControl extends LitElement {
     data?: Record<string, any>;
   };
 
-  @internalProperty() private _value!: this["value"];
-
   @property({ reflect: true, type: Boolean }) public narrow!: boolean;
 
   @property({ type: Boolean }) public showAdvanced?: boolean;
 
+  @internalProperty() private _serviceData?: ExtHassService;
+
   @internalProperty() private _checkedKeys = new Set();
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  protected updated(changedProperties: PropertyValues) {
     if (!changedProperties.has("value")) {
       return;
     }
@@ -73,11 +70,13 @@ export class HaServiceControl extends LitElement {
       this._checkedKeys = new Set();
     }
 
-    const serviceData = this._getServiceInfo(this.value?.service);
+    this._serviceData = this.value?.service
+      ? this._getServiceInfo(this.value.service)
+      : undefined;
 
     if (
-      serviceData &&
-      "target" in serviceData &&
+      this._serviceData &&
+      "target" in this._serviceData &&
       (this.value?.data?.entity_id ||
         this.value?.data?.area_id ||
         this.value?.data?.device_id)
@@ -96,23 +95,21 @@ export class HaServiceControl extends LitElement {
         target.device_id = this.value.data.device_id;
       }
 
-      this._value = {
+      this.value = {
         ...this.value,
         target,
         data: { ...this.value.data },
       };
 
-      delete this._value.data!.entity_id;
-      delete this._value.data!.device_id;
-      delete this._value.data!.area_id;
-    } else {
-      this._value = this.value;
+      delete this.value.data!.entity_id;
+      delete this.value.data!.device_id;
+      delete this.value.data!.area_id;
     }
 
-    if (this._value?.data) {
+    if (this.value?.data) {
       const yamlEditor = this._yamlEditor;
-      if (yamlEditor && yamlEditor.value !== this._value.data) {
-        yamlEditor.setValue(this._value.data);
+      if (yamlEditor && yamlEditor.value !== this.value.data) {
+        yamlEditor.setValue(this.value.data);
       }
     }
   }
@@ -122,7 +119,7 @@ export class HaServiceControl extends LitElement {
     return ENTITY_COMPONENT_DOMAINS.includes(domain) ? [domain] : null;
   });
 
-  private _getServiceInfo = memoizeOne((service?: string):
+  private _getServiceInfo = memoizeOne((service: string):
     | ExtHassService
     | undefined => {
     if (!service) {
@@ -150,60 +147,32 @@ export class HaServiceControl extends LitElement {
     return {
       ...serviceDomains[domain][serviceName],
       fields,
-      hasSelector: fields.length
-        ? fields.filter((field) => field.selector).map((field) => field.key)
-        : [],
     };
   });
 
   protected render() {
-    const serviceData = this._getServiceInfo(this._value?.service);
-
-    const shouldRenderServiceDataYaml =
-      (serviceData?.fields.length && !serviceData.hasSelector.length) ||
-      (serviceData &&
-        Object.keys(this._value?.data || {}).some(
-          (key) => !serviceData!.hasSelector.includes(key)
-        ));
+    const legacy =
+      this._serviceData?.fields.length &&
+      !this._serviceData.fields.some((field) => field.selector);
 
     const entityId =
-      shouldRenderServiceDataYaml &&
-      serviceData?.fields.find((field) => field.key === "entity_id");
+      legacy &&
+      this._serviceData?.fields.find((field) => field.key === "entity_id");
 
     const hasOptional = Boolean(
-      !shouldRenderServiceDataYaml &&
-        serviceData?.fields.some((field) => field.selector && !field.required)
+      !legacy &&
+        this._serviceData?.fields.some(
+          (field) => field.selector && !field.required
+        )
     );
 
     return html`<ha-service-picker
         .hass=${this.hass}
-        .value=${this._value?.service}
+        .value=${this.value?.service}
         @value-changed=${this._serviceChanged}
       ></ha-service-picker>
-      <div class="description">
-        <p>${serviceData?.description}</p>
-        ${this.value?.service
-          ? html` <a
-              href="${documentationUrl(
-                this.hass,
-                "/integrations/" + computeDomain(this.value?.service)
-              )}"
-              title="${this.hass.localize(
-                "ui.components.service-control.integration_doc"
-              )}"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <mwc-icon-button>
-                <ha-svg-icon
-                  path=${mdiHelpCircle}
-                  class="help-icon"
-                ></ha-svg-icon>
-              </mwc-icon-button>
-            </a>`
-          : ""}
-      </div>
-      ${serviceData && "target" in serviceData
+      <p>${this._serviceData?.description}</p>
+      ${this._serviceData && "target" in this._serviceData
         ? html`<ha-settings-row .narrow=${this.narrow}>
             ${hasOptional
               ? html`<div slot="prefix" class="checkbox-spacer"></div>`
@@ -219,42 +188,38 @@ export class HaServiceControl extends LitElement {
               )}</span
             ><ha-selector
               .hass=${this.hass}
-              .selector=${serviceData.target
-                ? { target: serviceData.target }
+              .selector=${this._serviceData.target
+                ? { target: this._serviceData.target }
                 : {
                     target: {
-                      entity: { domain: computeDomain(this._value!.service) },
+                      entity: { domain: computeDomain(this.value!.service) },
                     },
                   }}
               @value-changed=${this._targetChanged}
-              .value=${this._value?.target}
+              .value=${this.value?.target}
             ></ha-selector
           ></ha-settings-row>`
         : entityId
         ? html`<ha-entity-picker
             .hass=${this.hass}
-            .value=${this._value?.data?.entity_id}
+            .value=${this.value?.data?.entity_id}
             .label=${entityId.description}
-            .includeDomains=${this._domainFilter(this._value!.service)}
+            .includeDomains=${this._domainFilter(this.value!.service)}
             @value-changed=${this._entityPicked}
             allow-custom-entity
           ></ha-entity-picker>`
         : ""}
-      ${shouldRenderServiceDataYaml
+      ${legacy
         ? html`<ha-yaml-editor
             .label=${this.hass.localize(
               "ui.components.service-control.service_data"
             )}
             .name=${"data"}
-            .defaultValue=${this._value?.data}
+            .defaultValue=${this.value?.data}
             @value-changed=${this._dataChanged}
           ></ha-yaml-editor>`
-        : serviceData?.fields.map((dataField) =>
-            dataField.selector &&
-            (!dataField.advanced ||
-              this.showAdvanced ||
-              (this._value?.data &&
-                this._value.data[dataField.key] !== undefined))
+        : this._serviceData?.fields.map((dataField) =>
+            dataField.selector && (!dataField.advanced || this.showAdvanced)
               ? html`<ha-settings-row .narrow=${this.narrow}>
                   ${dataField.required
                     ? hasOptional
@@ -263,8 +228,8 @@ export class HaServiceControl extends LitElement {
                     : html`<ha-checkbox
                         .key=${dataField.key}
                         .checked=${this._checkedKeys.has(dataField.key) ||
-                        (this._value?.data &&
-                          this._value.data[dataField.key] !== undefined)}
+                        (this.value?.data &&
+                          this.value.data[dataField.key] !== undefined)}
                         @change=${this._checkboxChanged}
                         slot="prefix"
                       ></ha-checkbox>`}
@@ -273,15 +238,15 @@ export class HaServiceControl extends LitElement {
                   ><ha-selector
                     .disabled=${!dataField.required &&
                     !this._checkedKeys.has(dataField.key) &&
-                    (!this._value?.data ||
-                      this._value.data[dataField.key] === undefined)}
+                    (!this.value?.data ||
+                      this.value.data[dataField.key] === undefined)}
                     .hass=${this.hass}
                     .selector=${dataField.selector}
                     .key=${dataField.key}
                     @value-changed=${this._serviceDataChanged}
-                    .value=${this._value?.data &&
-                    this._value.data[dataField.key] !== undefined
-                      ? this._value.data[dataField.key]
+                    .value=${this.value?.data &&
+                    this.value.data[dataField.key] !== undefined
+                      ? this.value.data[dataField.key]
                       : dataField.default}
                   ></ha-selector
                 ></ha-settings-row>`
@@ -296,13 +261,13 @@ export class HaServiceControl extends LitElement {
       this._checkedKeys.add(key);
     } else {
       this._checkedKeys.delete(key);
-      const data = { ...this._value?.data };
+      const data = { ...this.value?.data };
 
       delete data[key];
 
       fireEvent(this, "value-changed", {
         value: {
-          ...this._value,
+          ...this.value,
           data,
         },
       });
@@ -312,7 +277,7 @@ export class HaServiceControl extends LitElement {
 
   private _serviceChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
-    if (ev.detail.value === this._value?.service) {
+    if (ev.detail.value === this.value?.service) {
       return;
     }
     fireEvent(this, "value-changed", {
@@ -323,17 +288,17 @@ export class HaServiceControl extends LitElement {
   private _entityPicked(ev: CustomEvent) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
-    if (this._value?.data?.entity_id === newValue) {
+    if (this.value?.data?.entity_id === newValue) {
       return;
     }
     let value;
-    if (!newValue && this._value?.data) {
-      value = { ...this._value };
+    if (!newValue && this.value?.data) {
+      value = { ...this.value };
       delete value.data.entity_id;
     } else {
       value = {
-        ...this._value,
-        data: { ...this._value?.data, entity_id: ev.detail.value },
+        ...this.value,
+        data: { ...this.value?.data, entity_id: ev.detail.value },
       };
     }
     fireEvent(this, "value-changed", {
@@ -344,15 +309,15 @@ export class HaServiceControl extends LitElement {
   private _targetChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
-    if (this._value?.target === newValue) {
+    if (this.value?.target === newValue) {
       return;
     }
     let value;
     if (!newValue) {
-      value = { ...this._value };
+      value = { ...this.value };
       delete value.target;
     } else {
-      value = { ...this._value, target: ev.detail.value };
+      value = { ...this.value, target: ev.detail.value };
     }
     fireEvent(this, "value-changed", {
       value,
@@ -363,14 +328,11 @@ export class HaServiceControl extends LitElement {
     ev.stopPropagation();
     const key = (ev.currentTarget as any).key;
     const value = ev.detail.value;
-    if (
-      this._value?.data?.[key] === value ||
-      (!this._value?.data?.[key] && (value === "" || value === undefined))
-    ) {
+    if (this.value?.data && this.value.data[key] === value) {
       return;
     }
 
-    const data = { ...this._value?.data, [key]: value };
+    const data = { ...this.value?.data, [key]: value };
 
     if (value === "" || value === undefined) {
       delete data[key];
@@ -378,7 +340,7 @@ export class HaServiceControl extends LitElement {
 
     fireEvent(this, "value-changed", {
       value: {
-        ...this._value,
+        ...this.value,
         data,
       },
     });
@@ -391,7 +353,7 @@ export class HaServiceControl extends LitElement {
     }
     fireEvent(this, "value-changed", {
       value: {
-        ...this._value,
+        ...this.value,
         data: ev.detail.value,
       },
     });
@@ -434,15 +396,6 @@ export class HaServiceControl extends LitElement {
       ha-checkbox {
         margin-left: -16px;
       }
-      .help-icon {
-        color: var(--secondary-text-color);
-      }
-      .description {
-        justify-content: space-between;
-        display: flex;
-        align-items: center;
-        padding-right: 2px;
-      }
     `;
   }
 }

src/components/ha-sidebar.ts

@@ -245,7 +245,7 @@ class HaSidebar extends LitElement {
       hass.panelUrl !== oldHass.panelUrl ||
       hass.user !== oldHass.user ||
       hass.localize !== oldHass.localize ||
-      hass.locale !== oldHass.locale ||
+      hass.language !== oldHass.language ||
       hass.states !== oldHass.states ||
       hass.defaultPanel !== oldHass.defaultPanel
     );
@@ -281,7 +281,7 @@ class HaSidebar extends LitElement {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.locale !== this.hass.locale) {
+    if (!oldHass || oldHass.language !== this.hass.language) {
       this.rtl = computeRTL(this.hass);
     }
 

src/components/ha-target-picker.ts

@@ -125,41 +125,35 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       return html``;
     }
     return html`<div class="mdc-chip-set items">
-        ${this.value?.area_id
-          ? ensureArray(this.value.area_id).map((area_id) => {
-              const area = this._areas![area_id];
-              return this._renderChip(
-                "area_id",
-                area_id,
-                area?.name || area_id,
-                undefined,
-                mdiSofa
-              );
-            })
-          : ""}
-        ${this.value?.device_id
-          ? ensureArray(this.value.device_id).map((device_id) => {
-              const device = this._devices![device_id];
-              return this._renderChip(
-                "device_id",
-                device_id,
-                device ? computeDeviceName(device, this.hass) : device_id,
-                undefined,
-                mdiDevices
-              );
-            })
-          : ""}
-        ${this.value?.entity_id
-          ? ensureArray(this.value.entity_id).map((entity_id) => {
-              const entity = this.hass.states[entity_id];
-              return this._renderChip(
-                "entity_id",
-                entity_id,
-                entity ? computeStateName(entity) : entity_id,
-                entity ? stateIcon(entity) : undefined
-              );
-            })
-          : ""}
+        ${ensureArray(this.value?.area_id)?.map((area_id) => {
+          const area = this._areas![area_id];
+          return this._renderChip(
+            "area_id",
+            area_id,
+            area?.name || area_id,
+            undefined,
+            mdiSofa
+          );
+        })}
+        ${ensureArray(this.value?.device_id)?.map((device_id) => {
+          const device = this._devices![device_id];
+          return this._renderChip(
+            "device_id",
+            device_id,
+            device ? computeDeviceName(device, this.hass) : device_id,
+            undefined,
+            mdiDevices
+          );
+        })}
+        ${ensureArray(this.value?.entity_id)?.map((entity_id) => {
+          const entity = this.hass.states[entity_id];
+          return this._renderChip(
+            "entity_id",
+            entity_id,
+            entity ? computeStateName(entity) : entity_id,
+            entity ? stateIcon(entity) : undefined
+          );
+        })}
       </div>
       ${this._renderPicker()}
       <div class="mdc-chip-set">
@@ -350,7 +344,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           .includeDeviceClasses=${this.includeDeviceClasses}
           .includeDomains=${this.includeDomains}
           @value-changed=${this._targetPicked}
-          allow-custom-entity
         ></ha-entity-picker>`;
     }
     return html``;

src/components/ha-water_heater-state.js

@@ -2,7 +2,6 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
-import { formatNumber } from "../common/string/format_number";
 import LocalizeMixin from "../mixins/localize-mixin";
 
 /*
@@ -56,31 +55,21 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
   computeTarget(hass, stateObj) {
     if (!hass || !stateObj) return null;
     // We're using "!= null" on purpose so that we match both null and undefined.
-
     if (
       stateObj.attributes.target_temp_low != null &&
       stateObj.attributes.target_temp_high != null
     ) {
-      return `${formatNumber(
-        stateObj.attributes.target_temp_low,
-        this.hass.locale
-      )} - ${formatNumber(
-        stateObj.attributes.target_temp_high,
-        this.hass.locale
-      )} ${hass.config.unit_system.temperature}`;
+      return `${stateObj.attributes.target_temp_low} - ${stateObj.attributes.target_temp_high} ${hass.config.unit_system.temperature}`;
     }
     if (stateObj.attributes.temperature != null) {
-      return `${formatNumber(
-        stateObj.attributes.temperature,
-        this.hass.locale
-      )} ${hass.config.unit_system.temperature}`;
+      return `${stateObj.attributes.temperature} ${hass.config.unit_system.temperature}`;
     }
 
     return "";
   }
 
   _localizeState(stateObj) {
-    return computeStateDisplay(this.hass.localize, stateObj, this.hass.locale);
+    return computeStateDisplay(this.hass.localize, stateObj);
   }
 }
 customElements.define("ha-water_heater-state", HaWaterHeaterState);

src/components/paper-time-input.js

@@ -107,10 +107,6 @@ export class PaperTimeInput extends PolymerElement {
         #millisec {
           width: 38px;
         }
-
-        .no-suffix {
-          margin-left: -2px;
-        }
       </style>
 
       <label hidden$="[[hideLabel]]">[[label]]</label>
@@ -133,12 +129,11 @@ export class PaperTimeInput extends PolymerElement {
           always-float-label$="[[alwaysFloatInputLabels]]"
           disabled="[[disabled]]"
         >
-          <span suffix slot="suffix">:</span>
+          <span suffix="" slot="suffix">:</span>
         </paper-input>
 
         <!-- Min Input -->
         <paper-input
-          class$="[[_computeClassNames(enableSecond)]]"
           id="min"
           type="number"
           value="{{min}}"
@@ -160,7 +155,6 @@ export class PaperTimeInput extends PolymerElement {
 
         <!-- Sec Input -->
         <paper-input
-          class$="[[_computeClassNames(enableMillisecond)]]"
           id="sec"
           type="number"
           value="{{sec}}"
@@ -303,28 +297,28 @@ export class PaperTimeInput extends PolymerElement {
         notify: true,
       },
       /**
-       * Label for the hour input
+       * Suffix for the hour input
        */
       hourLabel: {
         type: String,
         value: "",
       },
       /**
-       * Label for the min input
+       * Suffix for the min input
        */
       minLabel: {
         type: String,
-        value: "",
+        value: ":",
       },
       /**
-       * Label for the sec input
+       * Suffix for the sec input
        */
       secLabel: {
         type: String,
         value: "",
       },
       /**
-       * Label for the milli sec input
+       * Suffix for the milli sec input
        */
       millisecLabel: {
         type: String,
@@ -485,10 +479,6 @@ export class PaperTimeInput extends PolymerElement {
   _equal(n1, n2) {
     return n1 === n2;
   }
-
-  _computeClassNames(hasSuffix) {
-    return hasSuffix ? " " : "no-suffix";
-  }
 }
 
 customElements.define("paper-time-input", PaperTimeInput);

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

@@ -361,7 +361,7 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
       const item = items[0];
       const date = data.datasets[item.datasetIndex].data[item.index].x;
 
-      return formatDateTimeWithSeconds(date, this.hass.locale);
+      return formatDateTimeWithSeconds(date, this.hass.language);
     };
 
     const chartOptions = {

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

@@ -201,8 +201,8 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
     const formatTooltipLabel = (item, data) => {
       const values = data.datasets[item.datasetIndex].data[item.index];
 
-      const start = formatDateTimeWithSeconds(values[0], this.hass.locale);
-      const end = formatDateTimeWithSeconds(values[1], this.hass.locale);
+      const start = formatDateTimeWithSeconds(values[0], this.hass.language);
+      const end = formatDateTimeWithSeconds(values[1], this.hass.language);
       const state = values[2];
 
       return [state, start, end];

src/components/trace/ha-timeline.ts

@@ -1,125 +0,0 @@
-import { mdiCircleOutline } from "@mdi/js";
-import {
-  LitElement,
-  customElement,
-  html,
-  css,
-  property,
-  TemplateResult,
-  internalProperty,
-} from "lit-element";
-import { buttonLinkStyle } from "../../resources/styles";
-import "../ha-svg-icon";
-
-@customElement("ha-timeline")
-export class HaTimeline extends LitElement {
-  @property({ type: Boolean, reflect: true }) public label = false;
-
-  @property({ type: Boolean, reflect: true }) public raised = false;
-
-  @property({ type: Boolean }) public lastItem = false;
-
-  @property({ type: String }) public icon?: string;
-
-  @property({ attribute: false }) public moreItems?: TemplateResult[];
-
-  @internalProperty() private _showMore = false;
-
-  protected render() {
-    return html`
-      <div class="timeline-start">
-        ${this.label
-          ? ""
-          : html`
-              <ha-svg-icon .path=${this.icon || mdiCircleOutline}></ha-svg-icon>
-            `}
-        ${this.lastItem ? "" : html`<div class="line"></div>`}
-      </div>
-      <div class="content">
-        <slot></slot>
-        ${!this.moreItems
-          ? ""
-          : html`
-              <div>
-                ${this._showMore ||
-                // If there is only 1 item hidden behind "show more", just show it
-                // instead of showing the more info link. We're not animals.
-                this.moreItems.length === 1
-                  ? this.moreItems
-                  : html`
-                      <button class="link" @click=${this._handleShowMore}>
-                        Show ${this.moreItems.length} more items
-                      </button>
-                    `}
-              </div>
-            `}
-      </div>
-    `;
-  }
-
-  private _handleShowMore() {
-    this._showMore = true;
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: row;
-        }
-        :host(:not([lastItem])) {
-          min-height: 50px;
-        }
-        :host([label]) {
-          margin-top: -8px;
-          font-style: italic;
-          color: var(--timeline-label-color, var(--secondary-text-color));
-        }
-        .timeline-start {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-right: 8px;
-          width: 24px;
-        }
-        ha-svg-icon {
-          color: var(
-            --timeline-ball-color,
-            var(--timeline-color, var(--secondary-text-color))
-          );
-          border-radius: 50%;
-        }
-        :host([raised]) ha-svg-icon {
-          transform: scale(1.3);
-        }
-        .line {
-          flex: 1;
-          width: 2px;
-          background-color: var(
-            --timeline-line-color,
-            var(--timeline-color, var(--secondary-text-color))
-          );
-          margin: 4px 0;
-        }
-        .content {
-          margin-top: 2px;
-        }
-        :host(:not([lastItem])) .content {
-          padding-bottom: 16px;
-        }
-        :host([label]) .content {
-          margin-top: 0;
-          padding-top: 6px;
-        }
-      `,
-      buttonLinkStyle,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-timeline": HaTimeline;
-  }
-}

src/components/trace/hat-graph-node.ts

@@ -1,166 +0,0 @@
-import { css, customElement, LitElement, property, svg } from "lit-element";
-
-import { NODE_SIZE, SPACING } from "./hat-graph";
-
-@customElement("hat-graph-node")
-export class HatGraphNode extends LitElement {
-  @property() iconPath?: string;
-
-  @property({ reflect: true, type: Boolean }) disabled?: boolean;
-
-  @property({ reflect: true, type: Boolean }) graphstart?: boolean;
-
-  @property({ reflect: true, type: Boolean }) nofocus?: boolean;
-
-  @property({ reflect: true, type: Number }) badge?: number;
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute("tabindex") && !this.nofocus)
-      this.setAttribute("tabindex", "0");
-  }
-
-  render() {
-    const height = NODE_SIZE + (this.graphstart ? 2 : SPACING + 1);
-    const width = SPACING + NODE_SIZE;
-    return svg`
-    <svg
-    width="${width}px"
-    height="${height}px"
-    viewBox="-${Math.ceil(width / 2)} -${
-      this.graphstart
-        ? Math.ceil(height / 2)
-        : Math.ceil((NODE_SIZE + SPACING * 2) / 2)
-    } ${width} ${height}"
-    >
-      ${
-        this.graphstart
-          ? ``
-          : svg`
-          <path
-            class="connector"
-            d="
-              M 0 ${-SPACING - NODE_SIZE / 2}
-              L 0 0
-            "
-            line-caps="round"
-          />
-          `
-      }
-    <g class="node">
-      <circle
-        cx="0"
-        cy="0"
-        r="${NODE_SIZE / 2}"
-      />
-      }
-      ${
-        this.badge
-          ? svg`
-        <g class="number">
-          <circle
-            cx="8"
-            cy="${-NODE_SIZE / 2}"
-            r="8"
-          ></circle>
-          <text
-            x="8"
-            y="${-NODE_SIZE / 2}"
-            text-anchor="middle"
-            alignment-baseline="middle"
-          >${this.badge > 9 ? "9+" : this.badge}</text>
-        </g>
-      `
-          : ""
-      }
-      <g
-        style="pointer-events: none"
-        transform="translate(${-12} ${-12})"
-      >
-        ${this.iconPath ? svg`<path class="icon" d="${this.iconPath}"/>` : ""}
-      </g>
-    </g>
-      </svg>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-      :host(.track) {
-        --stroke-clr: var(--track-clr);
-        --icon-clr: var(--default-icon-clr);
-      }
-      :host(.active) circle {
-        --stroke-clr: var(--active-clr);
-        --icon-clr: var(--default-icon-clr);
-      }
-      :host(:focus) {
-        outline: none;
-      }
-      :host(:hover) circle {
-        --stroke-clr: var(--hover-clr);
-        --icon-clr: var(--default-icon-clr);
-      }
-      :host([disabled]) circle {
-        stroke: var(--disabled-clr);
-      }
-      :host-context([disabled]) {
-        --stroke-clr: var(--disabled-clr);
-      }
-      :host([nofocus]):host-context(.active),
-      :host([nofocus]):host-context(:focus) {
-        --circle-clr: var(--active-clr);
-        --icon-clr: var(--default-icon-clr);
-      }
-      circle,
-      path.connector {
-        stroke: var(--stroke-clr);
-        stroke-width: 2;
-        fill: none;
-      }
-      circle {
-        fill: var(--background-clr);
-        stroke: var(--circle-clr, var(--stroke-clr));
-      }
-      .number circle {
-        fill: var(--track-clr);
-        stroke: none;
-        stroke-width: 0;
-      }
-      .number text {
-        font-size: smaller;
-      }
-      path.icon {
-        fill: var(--icon-clr);
-      }
-
-      :host(.triggered) svg {
-        overflow: visible;
-      }
-      :host(.triggered) circle {
-        animation: glow 10s;
-      }
-      @keyframes glow {
-        0% {
-          filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
-        }
-        10% {
-          filter: drop-shadow(0px 0px 10px rgba(var(--rgb-trigger-color), 1));
-        }
-        100% {
-          filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
-        }
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-graph-node": HatGraphNode;
-  }
-}

src/components/trace/hat-graph-spacer.ts

@@ -1,55 +0,0 @@
-import { css, customElement, LitElement, property, svg } from "lit-element";
-
-import { NODE_SIZE, SPACING } from "./hat-graph";
-
-@customElement("hat-graph-spacer")
-export class HatGraphSpacer extends LitElement {
-  @property({ reflect: true, type: Boolean }) disabled?: boolean;
-
-  render() {
-    return svg`
-    <svg
-    width="${SPACING}px"
-    height="${SPACING + NODE_SIZE + 1}px"
-    viewBox="-${SPACING / 2} 0 10 ${SPACING + NODE_SIZE + 1}"
-    >
-          <path
-            class="connector"
-            d="
-              M 0 ${SPACING + NODE_SIZE + 1}
-              L 0 0
-            "
-            line-caps="round"
-          />
-      }
-      </svg>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-      :host(.track) {
-        --stroke-clr: var(--track-clr);
-        --icon-clr: var(--default-icon-clr);
-      }
-      :host-context([disabled]) {
-        --stroke-clr: var(--disabled-clr);
-      }
-      path.connector {
-        stroke: var(--stroke-clr);
-        stroke-width: 2;
-        fill: none;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-graph-spacer": HatGraphSpacer;
-  }
-}

src/components/trace/hat-graph.ts

@@ -1,225 +0,0 @@
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  svg,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-
-export const BRANCH_HEIGHT = 20;
-export const SPACING = 10;
-export const NODE_SIZE = 30;
-
-const track_converter = {
-  fromAttribute: (value) => value.split(",").map((v) => parseInt(v)),
-  toAttribute: (value) =>
-    value instanceof Array ? value.join(",") : `${value}`,
-};
-
-export interface NodeInfo {
-  path: string;
-  config: any;
-}
-
-interface BranchConfig {
-  x: number;
-  height: number;
-  start: boolean;
-  end: boolean;
-}
-
-@customElement("hat-graph")
-export class HatGraph extends LitElement {
-  @property({ type: Number }) _num_items = 0;
-
-  @property({ reflect: true, type: Boolean }) branching?: boolean;
-
-  @property({ reflect: true, converter: track_converter })
-  track_start?: number[];
-
-  @property({ reflect: true, converter: track_converter }) track_end?: number[];
-
-  @property({ reflect: true, type: Boolean }) disabled?: boolean;
-
-  @property({ reflect: true, type: Boolean }) selected?: boolean;
-
-  @property({ reflect: true, type: Boolean }) short = false;
-
-  async updateChildren() {
-    this._num_items = this.children.length;
-  }
-
-  render() {
-    const branches: BranchConfig[] = [];
-    let total_width = 0;
-    let max_height = 0;
-    let min_height = Number.POSITIVE_INFINITY;
-    if (this.branching) {
-      for (const c of Array.from(this.children)) {
-        if (c.slot === "head") continue;
-        const rect = c.getBoundingClientRect();
-        branches.push({
-          x: rect.width / 2 + total_width,
-          height: rect.height,
-          start: c.getAttribute("graphStart") != null,
-          end: c.getAttribute("graphEnd") != null,
-        });
-        total_width += rect.width;
-        max_height = Math.max(max_height, rect.height);
-        min_height = Math.min(min_height, rect.height);
-      }
-    }
-
-    return html`
-      <slot name="head" @slotchange=${this.updateChildren}> </slot>
-      ${this.branching
-        ? svg`
-            <svg
-              id="top"
-              width="${total_width}"
-              height="${BRANCH_HEIGHT}"
-            >
-              ${branches.map((branch, i) => {
-                if (branch.start) return "";
-                return svg`
-                  <path
-                    class="${classMap({
-                      line: true,
-                      track: this.track_start?.includes(i) ?? false,
-                    })}"
-                    id="${this.track_start?.includes(i) ? "track-start" : ""}"
-                    index=${i}
-                    d="
-                      M ${total_width / 2} 0
-                      L ${branch.x} ${BRANCH_HEIGHT}
-                      "/>
-                `;
-              })}
-              <use xlink:href="#track-start" />
-            </svg>
-          `
-        : ""}
-      <div id="branches">
-        ${this.branching
-          ? svg`
-              <svg
-                id="lines"
-                width="${total_width}"
-                height="${max_height}"
-              >
-                ${branches.map((branch, i) => {
-                  if (branch.end) return "";
-                  return svg`
-                    <path
-                      class="${classMap({
-                        line: true,
-                        track: this.track_end?.includes(i) ?? false,
-                      })}"
-                      index=${i}
-                      d="
-                        M ${branch.x} ${branch.height}
-                        l 0 ${max_height - branch.height}
-                        "/>
-                  `;
-                })}
-              </svg>
-            `
-          : ""}
-        <slot @slotchange=${this.updateChildren}></slot>
-      </div>
-
-      ${this.branching && !this.short
-        ? svg`
-            <svg
-              id="bottom"
-              width="${total_width}"
-              height="${BRANCH_HEIGHT + SPACING}"
-            >
-              ${branches.map((branch, i) => {
-                if (branch.end) return "";
-                return svg`
-                  <path
-                    class="${classMap({
-                      line: true,
-                      track: this.track_end?.includes(i) ?? false,
-                    })}"
-                    id="${this.track_end?.includes(i) ? "track-end" : ""}"
-                    index=${i}
-                    d="
-                      M ${branch.x} 0
-                      L ${branch.x} ${SPACING}
-                      L ${total_width / 2} ${BRANCH_HEIGHT + SPACING}
-                      "/>
-                `;
-              })}
-              <use xlink:href="#track-end" />
-            </svg>
-          `
-        : ""}
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        --stroke-clr: var(--stroke-color, var(--secondary-text-color));
-        --active-clr: var(--active-color, var(--primary-color));
-        --track-clr: var(--track-color, var(--accent-color));
-        --hover-clr: var(--hover-color, var(--primary-color));
-        --disabled-clr: var(--disabled-color, var(--disabled-text-color));
-        --default-trigger-color: 3, 169, 244;
-        --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
-        --background-clr: var(--background-color, white);
-        --default-icon-clr: var(--icon-color, black);
-        --icon-clr: var(--stroke-clr);
-      }
-      :host(:focus) {
-        outline: none;
-      }
-      #branches {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      :host([branching]) #branches {
-        flex-direction: row;
-        align-items: start;
-      }
-      :host([branching]) ::slotted(*) {
-        z-index: 1;
-      }
-      :host([branching]) ::slotted([slot="head"]) {
-        margin-bottom: ${-BRANCH_HEIGHT / 2}px;
-      }
-
-      #lines {
-        position: absolute;
-      }
-
-      path.line {
-        stroke: var(--stroke-clr);
-        stroke-width: 2;
-        fill: none;
-      }
-      path.line.track {
-        stroke: var(--track-clr);
-      }
-      :host([disabled]) path.line {
-        stroke: var(--disabled-clr);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-graph": HatGraph;
-  }
-}

src/components/trace/hat-logbook-note.ts

@@ -1,26 +0,0 @@
-import { LitElement, css, html, customElement } from "lit-element";
-
-@customElement("hat-logbook-note")
-class HatLogbookNote extends LitElement {
-  render() {
-    return html`
-      Not all shown logbook entries might be related to this automation.
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      text-align: center;
-      font-style: italic;
-      padding: 16px;
-      margin-top: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-logbook-note": HatLogbookNote;
-  }
-}

src/components/trace/hat-script-graph.ts

@@ -1,573 +0,0 @@
-import {
-  html,
-  LitElement,
-  property,
-  customElement,
-  PropertyValues,
-  css,
-} from "lit-element";
-import "@material/mwc-icon-button/mwc-icon-button";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
-import {
-  AutomationTraceExtended,
-  ChooseActionTraceStep,
-  ConditionTraceStep,
-} from "../../data/trace";
-import {
-  mdiAbTesting,
-  mdiArrowUp,
-  mdiAsterisk,
-  mdiCallSplit,
-  mdiCheckboxBlankOutline,
-  mdiCheckBoxOutline,
-  mdiChevronDown,
-  mdiChevronRight,
-  mdiChevronUp,
-  mdiClose,
-  mdiCodeBrackets,
-  mdiDevices,
-  mdiExclamation,
-  mdiRefresh,
-  mdiTimerOutline,
-  mdiTrafficLight,
-} from "@mdi/js";
-import "./hat-graph-node";
-import { classMap } from "lit-html/directives/class-map";
-import { NODE_SIZE, SPACING, NodeInfo } from "./hat-graph";
-import { Condition, Trigger } from "../../data/automation";
-import {
-  Action,
-  ChooseAction,
-  DelayAction,
-  DeviceAction,
-  EventAction,
-  RepeatAction,
-  SceneAction,
-  ServiceAction,
-  WaitAction,
-  WaitForTriggerAction,
-} from "../../data/script";
-import { ensureArray } from "../../common/ensure-array";
-import "./hat-graph-spacer";
-
-declare global {
-  interface HASSDomEvents {
-    "graph-node-selected": NodeInfo;
-  }
-}
-
-@customElement("hat-script-graph")
-class HatScriptGraph extends LitElement {
-  @property({ attribute: false }) public trace!: AutomationTraceExtended;
-
-  @property({ attribute: false }) public selected;
-
-  @property() trackedNodes: Record<string, any> = {};
-
-  private selectNode(config, path) {
-    return () => {
-      fireEvent(this, "graph-node-selected", { config, path });
-    };
-  }
-
-  private render_trigger(config: Trigger, i: number) {
-    const path = `trigger/${i}`;
-    const tracked = this.trace && path in this.trace.trace;
-    if (tracked) {
-      this.trackedNodes[path] = { config, path };
-    }
-    return html`
-      <hat-graph-node
-        graphStart
-        @focus=${this.selectNode(config, path)}
-        class=${classMap({
-          track: tracked,
-          active: this.selected === path,
-        })}
-        .iconPath=${mdiAsterisk}
-        tabindex=${tracked ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_condition(config: Condition, i: number) {
-    const path = `condition/${i}`;
-    const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
-    const track_path =
-      trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
-    if (trace) {
-      this.trackedNodes[path] = { config, path };
-    }
-    return html`
-      <hat-graph
-        branching
-        @focus=${this.selectNode(config, path)}
-        class=${classMap({
-          track: track_path,
-          active: this.selected === path,
-        })}
-        .track_start=${[track_path]}
-        .track_end=${[track_path]}
-        tabindex=${trace ? "-1" : "0"}
-        short
-      >
-        <hat-graph-node
-          slot="head"
-          class=${classMap({
-            track: trace !== undefined,
-          })}
-          .iconPath=${mdiAbTesting}
-          nofocus
-          graphEnd
-        ></hat-graph-node>
-        <div
-          style=${`width: ${NODE_SIZE + SPACING}px;`}
-          graphStart
-          graphEnd
-        ></div>
-        <div></div>
-        <hat-graph-node
-          .iconPath=${mdiClose}
-          graphEnd
-          nofocus
-          class=${classMap({
-            track: track_path === 2,
-          })}
-        ></hat-graph-node>
-      </hat-graph>
-    `;
-  }
-
-  private render_choose_node(config: ChooseAction, path: string) {
-    const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
-    const trace_path = trace?.[0].result
-      ? trace[0].result.choice === "default"
-        ? [config.choose?.length || 0]
-        : [trace[0].result.choice]
-      : [];
-    return html`
-      <hat-graph
-        tabindex=${trace === undefined ? "-1" : "0"}
-        branching
-        .track_start=${trace_path}
-        .track_end=${trace_path}
-        @focus=${this.selectNode(config, path)}
-        class=${classMap({
-          track: trace !== undefined,
-          active: this.selected === path,
-        })}
-      >
-        <hat-graph-node
-          .iconPath=${mdiCallSplit}
-          class=${classMap({
-            track: trace !== undefined,
-          })}
-          slot="head"
-          nofocus
-        ></hat-graph-node>
-
-        ${config.choose?.map((branch, i) => {
-          const branch_path = `${path}/choose/${i}`;
-          const track_this =
-            trace !== undefined && trace[0].result?.choice === i;
-          if (track_this) {
-            this.trackedNodes[branch_path] = { config, path: branch_path };
-          }
-          return html`
-            <hat-graph>
-              <hat-graph-node
-                .iconPath=${!trace || track_this
-                  ? mdiCheckBoxOutline
-                  : mdiCheckboxBlankOutline}
-                @focus=${this.selectNode(config, branch_path)}
-                class=${classMap({
-                  active: this.selected === branch_path,
-                  track: track_this,
-                })}
-              ></hat-graph-node>
-              ${ensureArray(branch.sequence).map((action, j) =>
-                this.render_node(action, `${branch_path}/sequence/${j}`)
-              )}
-            </hat-graph>
-          `;
-        })}
-        <hat-graph>
-          <hat-graph-spacer
-            class=${classMap({
-              track:
-                trace !== undefined && trace[0].result?.choice === "default",
-            })}
-          ></hat-graph-spacer>
-          ${ensureArray(config.default)?.map((action, i) =>
-            this.render_node(action, `${path}/default/${i}`)
-          )}
-        </hat-graph>
-      </hat-graph>
-    `;
-  }
-
-  private render_condition_node(node: Condition, path: string) {
-    const trace = (this.trace.trace[path] as ConditionTraceStep[]) || undefined;
-    const track_path =
-      trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
-    return html`
-      <hat-graph
-        branching
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: track_path,
-          active: this.selected === path,
-        })}
-        .track_start=${[track_path]}
-        .track_end=${[track_path]}
-        tabindex=${trace === undefined ? "-1" : "0"}
-        short
-      >
-        <hat-graph-node
-          slot="head"
-          class=${classMap({
-            track: Boolean(trace),
-          })}
-          .iconPath=${mdiAbTesting}
-          nofocus
-          graphEnd
-        ></hat-graph-node>
-        <div
-          style=${`width: ${NODE_SIZE + SPACING}px;`}
-          graphStart
-          graphEnd
-        ></div>
-        <div></div>
-        <hat-graph-node
-          .iconPath=${mdiClose}
-          graphEnd
-          nofocus
-          class=${classMap({
-            track: track_path === 2,
-          })}
-        ></hat-graph-node>
-      </hat-graph>
-    `;
-  }
-
-  private render_delay_node(node: DelayAction, path: string) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiTimerOutline}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_device_node(node: DeviceAction, path: string) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiDevices}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_event_node(node: EventAction, path: string) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiExclamation}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_repeat_node(node: RepeatAction, path: string) {
-    const trace: any = this.trace.trace[path];
-    const track_path = trace ? [0, 1] : [];
-    const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
-    return html`
-      <hat-graph
-        .track_start=${track_path}
-        .track_end=${track_path}
-        tabindex=${trace === undefined ? "-1" : "0"}
-        branching
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-      >
-        <hat-graph-node
-          .iconPath=${mdiRefresh}
-          class=${classMap({
-            track: trace,
-          })}
-          slot="head"
-          nofocus
-        ></hat-graph-node>
-        <hat-graph-node
-          .iconPath=${mdiArrowUp}
-          nofocus
-          class=${classMap({
-            track: track_path.includes(1),
-          })}
-          .badge=${repeats}
-        ></hat-graph-node>
-        <hat-graph>
-          ${ensureArray(node.repeat.sequence).map((action, i) =>
-            this.render_node(action, `${path}/repeat/sequence/${i}`)
-          )}
-        </hat-graph>
-      </hat-graph>
-    `;
-  }
-
-  private render_scene_node(node: SceneAction, path: string) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiExclamation}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_service_node(node: ServiceAction, path: string) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiChevronRight}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_wait_node(
-    node: WaitAction | WaitForTriggerAction,
-    path: string
-  ) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiTrafficLight}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-        tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_other_node(node: Action, path: string) {
-    return html`
-      <hat-graph-node
-        .iconPath=${mdiCodeBrackets}
-        @focus=${this.selectNode(node, path)}
-        class=${classMap({
-          track: path in this.trace.trace,
-          active: this.selected === path,
-        })}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_node(node: Action, path: string) {
-    const NODE_TYPES = {
-      choose: this.render_choose_node,
-      condition: this.render_condition_node,
-      delay: this.render_delay_node,
-      device_id: this.render_device_node,
-      event: this.render_event_node,
-      repeat: this.render_repeat_node,
-      scene: this.render_scene_node,
-      service: this.render_service_node,
-      wait_template: this.render_wait_node,
-      wait_for_trigger: this.render_wait_node,
-      other: this.render_other_node,
-    };
-
-    const type = Object.keys(NODE_TYPES).find((key) => key in node) || "other";
-    const nodeEl = NODE_TYPES[type].bind(this)(node, path);
-    if (this.trace && path in this.trace.trace) {
-      this.trackedNodes[path] = { config: node, path };
-    }
-    return nodeEl;
-  }
-
-  protected render() {
-    const paths = Object.keys(this.trackedNodes);
-    const manual_triggered = this.trace && "trigger" in this.trace.trace;
-    let track_path = manual_triggered ? undefined : [0];
-    const trigger_nodes = ensureArray(this.trace.config.trigger).map(
-      (trigger, i) => {
-        if (this.trace && `trigger/${i}` in this.trace.trace) {
-          track_path = [i];
-        }
-        return this.render_trigger(trigger, i);
-      }
-    );
-    try {
-      return html`
-        <hat-graph class="parent">
-          <div></div>
-          <hat-graph
-            branching
-            id="trigger"
-            .short=${trigger_nodes.length < 2}
-            .track_start=${track_path}
-            .track_end=${track_path}
-          >
-            ${trigger_nodes}
-          </hat-graph>
-          <hat-graph id="condition">
-            ${ensureArray(this.trace.config.condition)?.map((condition, i) =>
-              this.render_condition(condition!, i)
-            )}
-          </hat-graph>
-          ${ensureArray(this.trace.config.action).map((action, i) =>
-            this.render_node(action, `action/${i}`)
-          )}
-        </hat-graph>
-        <div class="actions">
-          <mwc-icon-button
-            .disabled=${paths.length === 0 || paths[0] === this.selected}
-            @click=${this.previousTrackedNode}
-          >
-            <ha-svg-icon .path=${mdiChevronUp}></ha-svg-icon>
-          </mwc-icon-button>
-          <mwc-icon-button
-            .disabled=${paths.length === 0 ||
-            paths[paths.length - 1] === this.selected}
-            @click=${this.nextTrackedNode}
-          >
-            <ha-svg-icon .path=${mdiChevronDown}></ha-svg-icon>
-          </mwc-icon-button>
-        </div>
-      `;
-    } catch (err) {
-      if (__DEV__) {
-        // eslint-disable-next-line no-console
-        console.log("Error creating script graph:", err);
-      }
-      return html`
-        <div class="error">
-          Error rendering graph. Please download trace and share with the
-          developers.
-        </div>
-      `;
-    }
-  }
-
-  protected update(changedProps: PropertyValues<this>) {
-    if (changedProps.has("trace")) {
-      this.trackedNodes = {};
-    }
-    super.update(changedProps);
-  }
-
-  protected updated(changedProps: PropertyValues<this>) {
-    super.updated(changedProps);
-
-    // Select first node if new trace loaded but no selection given.
-    if (changedProps.has("trace")) {
-      const tracked = this.getTrackedNodes();
-      const paths = Object.keys(tracked);
-
-      // If trace changed and we have no or an invalid selection, select first option.
-      if (this.selected === "" || !(this.selected in paths)) {
-        // Find first tracked node with node info
-        for (const path of paths) {
-          if (tracked[path]) {
-            fireEvent(this, "graph-node-selected", tracked[path]);
-            break;
-          }
-        }
-      }
-
-      if (this.trace) {
-        const sortKeys = Object.keys(this.trace.trace);
-        const keys = Object.keys(this.trackedNodes).sort(
-          (a, b) => sortKeys.indexOf(a) - sortKeys.indexOf(b)
-        );
-        const sortedTrackedNodes = keys.reduce((obj, key) => {
-          obj[key] = this.trackedNodes[key];
-          return obj;
-        }, {});
-        this.trackedNodes = sortedTrackedNodes;
-      }
-    }
-  }
-
-  public getTrackedNodes() {
-    return this.trackedNodes;
-  }
-
-  public previousTrackedNode() {
-    const tracked = this.getTrackedNodes();
-    const nodes = Object.keys(tracked);
-
-    for (let i = nodes.indexOf(this.selected) - 1; i >= 0; i--) {
-      if (tracked[nodes[i]]) {
-        fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
-        break;
-      }
-    }
-  }
-
-  public nextTrackedNode() {
-    const tracked = this.getTrackedNodes();
-    const nodes = Object.keys(tracked);
-    for (let i = nodes.indexOf(this.selected) + 1; i < nodes.length; i++) {
-      if (tracked[nodes[i]]) {
-        fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
-        break;
-      }
-    }
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-      }
-      .actions {
-        display: flex;
-        flex-direction: column;
-      }
-      .parent {
-        margin-left: 8px;
-      }
-      .error {
-        padding: 16px;
-        max-width: 300px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-script-graph": HatScriptGraph;
-  }
-}

src/components/trace/hat-trace-timeline.ts

@@ -1,600 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import {
-  AutomationTraceExtended,
-  ChooseActionTraceStep,
-  getDataFromPath,
-  TriggerTraceStep,
-  isTriggerPath,
-} from "../../data/trace";
-import { HomeAssistant } from "../../types";
-import "./ha-timeline";
-import type { HaTimeline } from "./ha-timeline";
-import {
-  mdiAlertCircle,
-  mdiCircle,
-  mdiCircleOutline,
-  mdiProgressClock,
-  mdiProgressWrench,
-  mdiRecordCircleOutline,
-} from "@mdi/js";
-import { LogbookEntry } from "../../data/logbook";
-import {
-  ChooseAction,
-  ChooseActionChoice,
-  getActionType,
-} from "../../data/script";
-import relativeTime from "../../common/datetime/relative_time";
-import { fireEvent } from "../../common/dom/fire_event";
-import { describeAction } from "../../data/script_i18n";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-const LOGBOOK_ENTRIES_BEFORE_FOLD = 2;
-
-/* eslint max-classes-per-file: "off" */
-
-// Report time entry when more than this time has passed
-const SIGNIFICANT_TIME_CHANGE = 1000; // 1 seconds
-
-const isSignificantTimeChange = (a: Date, b: Date) =>
-  Math.abs(b.getTime() - a.getTime()) > SIGNIFICANT_TIME_CHANGE;
-
-class RenderedTimeTracker {
-  private lastReportedTime: Date;
-
-  constructor(
-    private hass: HomeAssistant,
-    private entries: TemplateResult[],
-    trace: AutomationTraceExtended
-  ) {
-    this.lastReportedTime = new Date(trace.timestamp.start);
-  }
-
-  setLastReportedTime(date: Date) {
-    this.lastReportedTime = date;
-  }
-
-  renderTime(from: Date, to: Date): void {
-    this.entries.push(html`
-      <ha-timeline label>
-        ${relativeTime(from, this.hass.localize, {
-          compareTime: to,
-          includeTense: false,
-        })}
-        later
-      </ha-timeline>
-    `);
-    this.lastReportedTime = to;
-  }
-
-  maybeRenderTime(timestamp: Date): boolean {
-    if (!isSignificantTimeChange(timestamp, this.lastReportedTime)) {
-      this.lastReportedTime = timestamp;
-      return false;
-    }
-
-    this.renderTime(this.lastReportedTime, timestamp);
-    return true;
-  }
-}
-
-class LogbookRenderer {
-  private curIndex: number;
-
-  private pendingItems: Array<[Date, LogbookEntry]> = [];
-
-  constructor(
-    private entries: TemplateResult[],
-    private timeTracker: RenderedTimeTracker,
-    private logbookEntries: LogbookEntry[]
-  ) {
-    // Skip the "automation got triggered item"
-    this.curIndex =
-      logbookEntries.length > 0 && logbookEntries[0].domain === "automation"
-        ? 1
-        : 0;
-  }
-
-  get curItem() {
-    return this.logbookEntries[this.curIndex];
-  }
-
-  get hasNext() {
-    return this.curIndex !== this.logbookEntries.length;
-  }
-
-  maybeRenderItem() {
-    const logbookEntry = this.curItem;
-    this.curIndex++;
-    const entryDate = new Date(logbookEntry.when);
-
-    if (this.pendingItems.length === 0) {
-      this.pendingItems.push([entryDate, logbookEntry]);
-      return;
-    }
-
-    const previousEntryDate = this.pendingItems[
-      this.pendingItems.length - 1
-    ][0];
-
-    // If logbook entry is too long after the last one,
-    // add a time passed label
-    if (isSignificantTimeChange(previousEntryDate, entryDate)) {
-      this._renderLogbookEntries();
-      this.timeTracker.renderTime(previousEntryDate, entryDate);
-    }
-
-    this.pendingItems.push([entryDate, logbookEntry]);
-  }
-
-  flush() {
-    if (this.pendingItems.length > 0) {
-      this._renderLogbookEntries();
-    }
-  }
-
-  private _renderLogbookEntries() {
-    this.timeTracker.maybeRenderTime(this.pendingItems[0][0]);
-
-    const parts: TemplateResult[] = [];
-
-    let i;
-
-    for (
-      i = 0;
-      i < Math.min(this.pendingItems.length, LOGBOOK_ENTRIES_BEFORE_FOLD);
-      i++
-    ) {
-      parts.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
-    }
-
-    let moreItems: TemplateResult[] | undefined;
-
-    // If we didn't render all items, push rest into `moreItems`
-    if (i < this.pendingItems.length) {
-      moreItems = [];
-      for (; i < this.pendingItems.length; i++) {
-        moreItems.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
-      }
-    }
-
-    this.entries.push(html`
-      <ha-timeline .icon=${mdiCircleOutline} .moreItems=${moreItems}>
-        ${parts}
-      </ha-timeline>
-    `);
-
-    // Clear rendered items.
-    this.timeTracker.setLastReportedTime(
-      this.pendingItems[this.pendingItems.length - 1][0]
-    );
-    this.pendingItems = [];
-  }
-
-  private _renderLogbookEntryHelper(entry: LogbookEntry) {
-    return html`${entry.name} (${entry.entity_id})
-      ${entry.message || `turned ${entry.state}`}<br />`;
-  }
-}
-
-class ActionRenderer {
-  private curIndex = 0;
-
-  private keys: string[];
-
-  constructor(
-    private hass: HomeAssistant,
-    private entries: TemplateResult[],
-    private trace: AutomationTraceExtended,
-    private logbookRenderer: LogbookRenderer,
-    private timeTracker: RenderedTimeTracker
-  ) {
-    this.keys = Object.keys(trace.trace);
-  }
-
-  get curItem() {
-    return this._getItem(this.curIndex);
-  }
-
-  get hasNext() {
-    return this.curIndex !== this.keys.length;
-  }
-
-  renderItem() {
-    this.curIndex = this._renderItem(this.curIndex);
-  }
-
-  private _getItem(index: number) {
-    return this.trace.trace[this.keys[index]];
-  }
-
-  private _renderItem(
-    index: number,
-    actionType?: ReturnType<typeof getActionType>
-  ): number {
-    const value = this._getItem(index);
-
-    if (isTriggerPath(value[0].path)) {
-      return this._handleTrigger(index, value[0] as TriggerTraceStep);
-    }
-
-    const timestamp = new Date(value[0].timestamp);
-
-    // Render all logbook items that are in front of this item.
-    while (
-      this.logbookRenderer.hasNext &&
-      new Date(this.logbookRenderer.curItem.when) < timestamp
-    ) {
-      this.logbookRenderer.maybeRenderItem();
-    }
-
-    this.logbookRenderer.flush();
-    this.timeTracker.maybeRenderTime(timestamp);
-
-    const path = value[0].path;
-    let data;
-    try {
-      data = getDataFromPath(this.trace.config, path);
-    } catch (err) {
-      this.entries.push(
-        html`Unable to extract path ${path}. Download trace and report as bug`
-      );
-      return index + 1;
-    }
-
-    const isTopLevel = path.split("/").length === 2;
-
-    if (!isTopLevel && !actionType) {
-      this._renderEntry(path, path.replace(/\//g, " "));
-      return index + 1;
-    }
-
-    if (!actionType) {
-      actionType = getActionType(data);
-    }
-
-    if (actionType === "choose") {
-      return this._handleChoose(index);
-    }
-
-    this._renderEntry(path, describeAction(this.hass, data, actionType));
-    return index + 1;
-  }
-
-  private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
-    this._renderEntry(
-      triggerStep.path,
-      `Triggered ${
-        triggerStep.path === "trigger"
-          ? "manually"
-          : `by the ${this.trace.trigger}`
-      } at
-    ${formatDateTimeWithSeconds(
-      new Date(triggerStep.timestamp),
-      this.hass.locale
-    )}`,
-      mdiCircle
-    );
-    return index + 1;
-  }
-
-  private _handleChoose(index: number): number {
-    // startLevel: choose root config
-
-    // +1: 'default
-    // +2: executed sequence
-
-    // +1: 'choose'
-    // +2: current choice
-
-    // +3: 'conditions'
-    // +4: evaluated condition
-
-    // +3: 'sequence'
-    // +4: executed sequence
-
-    const choosePath = this.keys[index];
-    const startLevel = choosePath.split("/").length - 1;
-
-    const chooseTrace = this._getItem(index)[0] as ChooseActionTraceStep;
-    const defaultExecuted = chooseTrace.result?.choice === "default";
-    const chooseConfig = this._getDataFromPath(
-      this.keys[index]
-    ) as ChooseAction;
-    const name = chooseConfig.alias || "Choose";
-
-    if (defaultExecuted) {
-      this._renderEntry(choosePath, `${name}: Default action executed`);
-    } else if (chooseTrace.result) {
-      const choiceConfig = this._getDataFromPath(
-        `${this.keys[index]}/choose/${chooseTrace.result.choice}`
-      ) as ChooseActionChoice | undefined;
-      const choiceName = choiceConfig
-        ? `${
-            choiceConfig.alias || `Choice ${chooseTrace.result.choice}`
-          } executed`
-        : `Error: ${chooseTrace.error}`;
-      this._renderEntry(choosePath, `${name}: ${choiceName}`);
-    } else {
-      this._renderEntry(choosePath, `${name}: No action taken`);
-    }
-
-    let i;
-
-    // Skip over conditions
-    for (i = index + 1; i < this.keys.length; i++) {
-      const parts = this.keys[i].split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      // We're going to skip all conditions
-      if (
-        (defaultExecuted && parts[startLevel + 1] === "default") ||
-        (!defaultExecuted && parts[startLevel + 3] === "sequence")
-      ) {
-        break;
-      }
-    }
-
-    // Render choice
-    while (i < this.keys.length) {
-      const path = this.keys[i];
-      const parts = path.split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      // We know it's an action sequence, so force the type like that
-      // for rendering.
-      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
-    }
-
-    return i;
-  }
-
-  private _renderEntry(
-    path: string,
-    description: string,
-    icon = mdiRecordCircleOutline
-  ) {
-    this.entries.push(html`
-      <ha-timeline .icon=${icon} data-path=${path}>
-        ${description}
-      </ha-timeline>
-    `);
-  }
-
-  private _getDataFromPath(path: string) {
-    return getDataFromPath(this.trace.config, path);
-  }
-}
-
-@customElement("hat-trace-timeline")
-export class HaAutomationTracer extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public trace?: AutomationTraceExtended;
-
-  @property({ attribute: false }) public logbookEntries?: LogbookEntry[];
-
-  @property({ attribute: false }) public selectedPath?: string;
-
-  @property({ type: Boolean }) public allowPick = false;
-
-  protected render(): TemplateResult {
-    if (!this.trace) {
-      return html``;
-    }
-
-    const entries: TemplateResult[] = [];
-
-    const timeTracker = new RenderedTimeTracker(this.hass, entries, this.trace);
-    const logbookRenderer = new LogbookRenderer(
-      entries,
-      timeTracker,
-      this.logbookEntries || []
-    );
-    const actionRenderer = new ActionRenderer(
-      this.hass,
-      entries,
-      this.trace,
-      logbookRenderer,
-      timeTracker
-    );
-
-    while (actionRenderer.hasNext) {
-      actionRenderer.renderItem();
-    }
-
-    while (logbookRenderer.hasNext) {
-      logbookRenderer.maybeRenderItem();
-    }
-
-    logbookRenderer.flush();
-
-    // Render footer
-    const renderFinishedAt = () =>
-      formatDateTimeWithSeconds(
-        new Date(this.trace!.timestamp.finish!),
-        this.hass.locale
-      );
-    const renderRuntime = () => `(runtime:
-      ${(
-        (new Date(this.trace!.timestamp.finish!).getTime() -
-          new Date(this.trace!.timestamp.start).getTime()) /
-        1000
-      ).toFixed(2)}
-      seconds)`;
-
-    let entry: {
-      description: TemplateResult | string;
-      icon: string;
-      className?: string;
-    };
-
-    if (this.trace.state === "running") {
-      entry = {
-        description: "Still running",
-        icon: mdiProgressClock,
-      };
-    } else if (this.trace.state === "debugged") {
-      entry = {
-        description: "Debugged",
-        icon: mdiProgressWrench,
-      };
-    } else if (this.trace.script_execution === "finished") {
-      entry = {
-        description: `Finished at ${renderFinishedAt()} ${renderRuntime()}`,
-        icon: mdiCircle,
-      };
-    } else if (this.trace.script_execution === "aborted") {
-      entry = {
-        description: `Aborted at ${renderFinishedAt()} ${renderRuntime()}`,
-        icon: mdiAlertCircle,
-      };
-    } else if (this.trace.script_execution === "cancelled") {
-      entry = {
-        description: `Cancelled at ${renderFinishedAt()} ${renderRuntime()}`,
-        icon: mdiAlertCircle,
-      };
-    } else {
-      let reason: string;
-      let isError = false;
-      let extra: TemplateResult | undefined;
-
-      switch (this.trace.script_execution) {
-        case "failed_conditions":
-          reason = "a condition failed";
-          break;
-        case "failed_single":
-          reason = "only a single execution is allowed";
-          break;
-        case "failed_max_runs":
-          reason = "maximum number of parallel runs reached";
-          break;
-        case "error":
-          reason = "an error was encountered";
-          isError = true;
-          extra = html`<br /><br />${this.trace.error!}`;
-          break;
-        default:
-          reason = `of unknown reason "${this.trace.script_execution}"`;
-          isError = true;
-      }
-
-      entry = {
-        description: html`Stopped because ${reason} at ${renderFinishedAt()}
-        ${renderRuntime()}${extra || ""}`,
-        icon: mdiAlertCircle,
-        className: isError ? "error" : undefined,
-      };
-    }
-    // null means it was stopped by a condition
-    if (entry) {
-      entries.push(html`
-        <ha-timeline
-          lastItem
-          .icon=${entry.icon}
-          class=${ifDefined(entry.className)}
-        >
-          ${entry.description}
-        </ha-timeline>
-      `);
-    }
-
-    return html`${entries}`;
-  }
-
-  protected updated(props: PropertyValues) {
-    super.updated(props);
-
-    // Pick first path when we load a new trace.
-    if (
-      this.allowPick &&
-      props.has("trace") &&
-      this.trace &&
-      this.selectedPath &&
-      !(this.selectedPath in this.trace.trace)
-    ) {
-      const element = this.shadowRoot!.querySelector<HaTimeline>(
-        "ha-timeline[data-path]"
-      );
-      if (element) {
-        fireEvent(this, "value-changed", { value: element.dataset.path });
-        this.selectedPath = element.dataset.path;
-      }
-    }
-
-    if (props.has("trace") || props.has("selectedPath")) {
-      this.shadowRoot!.querySelectorAll<HaTimeline>(
-        "ha-timeline[data-path]"
-      ).forEach((el) => {
-        el.toggleAttribute("selected", this.selectedPath === el.dataset.path);
-        if (!this.allowPick || el.tabIndex === 0) {
-          return;
-        }
-        el.tabIndex = 0;
-        const selectEl = () => {
-          this.selectedPath = el.dataset.path;
-          fireEvent(this, "value-changed", { value: el.dataset.path });
-        };
-        el.addEventListener("click", selectEl);
-        el.addEventListener("keydown", (ev: KeyboardEvent) => {
-          if (ev.key === "Enter" || ev.key === " ") {
-            selectEl();
-          }
-        });
-        el.addEventListener("mouseover", () => {
-          el.raised = true;
-        });
-        el.addEventListener("mouseout", () => {
-          el.raised = false;
-        });
-      });
-    }
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      css`
-        ha-timeline[lastItem].condition {
-          --timeline-ball-color: var(--error-color);
-        }
-        ha-timeline[data-path] {
-          cursor: pointer;
-        }
-        ha-timeline[selected] {
-          --timeline-ball-color: var(--primary-color);
-        }
-        ha-timeline:focus {
-          outline: none;
-          --timeline-ball-color: var(--accent-color);
-        }
-        .error {
-          --timeline-ball-color: var(--error-color);
-          color: var(--error-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hat-trace-timeline": HaAutomationTracer;
-  }
-}

src/data/analytics.ts

@@ -1,27 +0,0 @@
-import { HomeAssistant } from "../types";
-
-export interface AnalyticsPreferences {
-  base?: boolean;
-  diagnostics?: boolean;
-  usage?: boolean;
-  statistics?: boolean;
-}
-
-export interface Analytics {
-  preferences: AnalyticsPreferences;
-  onboarded: boolean;
-}
-
-export const getAnalyticsDetails = (hass: HomeAssistant) =>
-  hass.callWS<Analytics>({
-    type: "analytics",
-  });
-
-export const setAnalyticsPreferences = (
-  hass: HomeAssistant,
-  preferences: AnalyticsPreferences
-) =>
-  hass.callWS<AnalyticsPreferences>({
-    type: "analytics/preferences",
-    preferences,
-  });