use heading property

build-scripts/gulp/translations.js

@@ -336,6 +336,14 @@ gulp.task("build-translation-fragment-supervisor", () =>
   gulp
     .src(fullDir + "/*.json")
     .pipe(transform((data) => data.supervisor))
+    .pipe(
+      rename((filePath) => {
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
+      })
+    )
     .pipe(gulp.dest(workDir + "/supervisor"))
 );
 

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

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

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

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

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

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

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

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

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

@@ -60,6 +60,75 @@ class HassioDatadiskDialog extends LitElement {
     if (!this.dialogParams) {
       return html``;
     }
+    let heading: string;
+    let content: TemplateResult;
+
+    if (this.moving) {
+      heading = this.dialogParams.supervisor.localize(
+        "dialog.datadisk_move.moving"
+      );
+      content = html`
+        <ha-circular-progress alt="Moving" size="large" active>
+        </ha-circular-progress>
+        <p class="progress-text">
+          ${this.dialogParams.supervisor.localize(
+            "dialog.datadisk_move.moving_desc"
+          )}
+        </p>
+      `;
+    } else {
+      heading = this.dialogParams.supervisor.localize(
+        "dialog.datadisk_move.title"
+      );
+      content = html`
+        ${this.devices?.length
+          ? html`
+              ${this.dialogParams.supervisor.localize(
+                "dialog.datadisk_move.description",
+                {
+                  current_path: this.dialogParams.supervisor.os.data_disk,
+                  time: calculateMoveTime(this.dialogParams.supervisor),
+                }
+              )}
+              <br /><br />
+
+              <paper-dropdown-menu
+                .label=${this.dialogParams.supervisor.localize(
+                  "dialog.datadisk_move.select_device"
+                )}
+                @value-changed=${this._select_device}
+              >
+                <paper-listbox slot="dropdown-content">
+                  ${this.devices.map(
+                    (device) => html`<paper-item>${device}</paper-item>`
+                  )}
+                </paper-listbox>
+              </paper-dropdown-menu>
+            `
+          : this.devices === undefined
+          ? this.dialogParams.supervisor.localize(
+              "dialog.datadisk_move.loading_devices"
+            )
+          : this.dialogParams.supervisor.localize(
+              "dialog.datadisk_move.no_devices"
+            )}
+
+        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+          ${this.dialogParams.supervisor.localize(
+            "dialog.datadisk_move.cancel"
+          )}
+        </mwc-button>
+
+        <mwc-button
+          .disabled=${!this.selectedDevice}
+          slot="primaryAction"
+          @click=${this._moveDatadisk}
+        >
+          ${this.dialogParams.supervisor.localize("dialog.datadisk_move.move")}
+        </mwc-button>
+      `;
+    }
+
     return html`
       <ha-dialog
         open
@@ -67,76 +136,9 @@ class HassioDatadiskDialog extends LitElement {
         escapeKeyAction
         @closed=${this.closeDialog}
         ?hideActions=${this.moving}
+        .heading=${heading}
       >
-        ${this.moving
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  ${this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.moving"
-                  )}
-                </h2>
-              </slot>
-              <ha-circular-progress alt="Moving" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.moving_desc"
-                )}
-              </p>`
-          : html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  ${this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.title"
-                  )}
-                </h2>
-              </slot>
-              ${this.devices?.length
-                ? html`
-                    ${this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.description",
-                      {
-                        current_path: this.dialogParams.supervisor.os.data_disk,
-                        time: calculateMoveTime(this.dialogParams.supervisor),
-                      }
-                    )}
-                    <br /><br />
-
-                    <paper-dropdown-menu
-                      .label=${this.dialogParams.supervisor.localize(
-                        "dialog.datadisk_move.select_device"
-                      )}
-                      @value-changed=${this._select_device}
-                    >
-                      <paper-listbox slot="dropdown-content">
-                        ${this.devices.map(
-                          (device) => html`<paper-item>${device}</paper-item>`
-                        )}
-                      </paper-listbox>
-                    </paper-dropdown-menu>
-                  `
-                : this.devices === undefined
-                ? this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.loading_devices"
-                  )
-                : this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.no_devices"
-                  )}
-
-              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.cancel"
-                )}
-              </mwc-button>
-
-              <mwc-button
-                .disabled=${!this.selectedDevice}
-                slot="primaryAction"
-                @click=${this._moveDatadisk}
-              >
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.move"
-                )}
-              </mwc-button>`}
+        ${content}
       </ha-dialog>
     `;
   }

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

@@ -184,23 +184,34 @@ class HassioHostInfo extends LitElement {
             <mwc-icon-button slot="trigger">
               <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
             </mwc-icon-button>
-            <mwc-list-item @click=${() => this._handleMenuAction("hardware")}>
+            <mwc-list-item
+              .action=${"hardware"}
+              @click=${this._handleMenuAction}
+            >
               ${this.supervisor.localize("system.host.hardware")}
             </mwc-list-item>
             ${this.supervisor.host.features.includes("haos")
-              ? html`<mwc-list-item
-                    @click=${() => this._handleMenuAction("import_from_usb")}
+              ? html`
+                  <mwc-list-item
+                    .action=${"import_from_usb"}
+                    @click=${this._handleMenuAction}
                   >
                     ${this.supervisor.localize("system.host.import_from_usb")}
                   </mwc-list-item>
                   ${this.supervisor.host.features.includes("os_agent") &&
                   atLeastVersion(this.supervisor.host.agent_version, 1, 2, 0)
-                    ? html`<mwc-list-item
-                        @click=${() => this._handleMenuAction("move_datadisk")}
-                      >
-                        ${this.supervisor.localize("system.host.move_datadisk")}
-                      </mwc-list-item>`
-                    : ""} `
+                    ? html`
+                        <mwc-list-item
+                          .action=${"move_datadisk"}
+                          @click=${this._handleMenuAction}
+                        >
+                          ${this.supervisor.localize(
+                            "system.host.move_datadisk"
+                          )}
+                        </mwc-list-item>
+                      `
+                    : ""}
+                `
               : ""}
           </ha-button-menu>
         </div>
@@ -223,8 +234,8 @@ class HassioHostInfo extends LitElement {
     return network_info.interfaces.find((a) => a.primary)?.ipv4?.address![0];
   });
 
-  private async _handleMenuAction(action: string) {
-    switch (action) {
+  private async _handleMenuAction(ev) {
+    switch ((ev.target as any).action) {
       case "hardware":
         await this._showHardware();
         break;

src/common/translations/localize.ts

@@ -15,8 +15,6 @@ export interface FormatsType {
   time: FormatType;
 }
 
-let loadedPolyfillLocale: Set<string> | undefined;
-
 const polyfillPluralRules = shouldPolyfillPluralRules();
 const polyfillRelativeTime = shouldPolyfillRelativeTime();
 const polyfillDateTime = shouldPolyfillDateTime();
@@ -41,7 +39,6 @@ let polyfillLoaded = polyfills.length === 0;
 export const polyfillsLoaded = polyfillLoaded
   ? undefined
   : Promise.all(polyfills).then(() => {
-      loadedPolyfillLocale = new Set();
       polyfillLoaded = true;
       // Load English so it becomes the default
       return loadPolyfillLocales("en");
@@ -132,19 +129,28 @@ export const computeLocalize = async (
 };
 
 export const loadPolyfillLocales = async (language: string) => {
-  if (!loadedPolyfillLocale || loadedPolyfillLocale.has(language)) {
+  if (!polyfillsLoaded) {
     return;
   }
-  loadedPolyfillLocale.add(language);
+  await polyfillsLoaded;
   try {
     if (polyfillPluralRules) {
-      await import(`@formatjs/intl-pluralrules/locale-data/${language}`);
+      await import(
+        /* webpackExclude: /.+-.+\.js$/ */
+        `@formatjs/intl-pluralrules/locale-data/${language}`
+      );
     }
     if (polyfillRelativeTime) {
-      await import(`@formatjs/intl-relativetimeformat/locale-data/${language}`);
+      await import(
+        /* webpackExclude: /.+-.+\.js$/ */
+        `@formatjs/intl-relativetimeformat/locale-data/${language}`
+      );
     }
     if (polyfillDateTime) {
-      await import(`@formatjs/intl-datetimeformat/locale-data/${language}`);
+      await import(
+        /* webpackExclude: /.+-.+\.js$/ */
+        `@formatjs/intl-datetimeformat/locale-data/${language}`
+      );
     }
   } catch (_e) {
     // Ignore

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

@@ -39,8 +39,8 @@ export class HaAreaSelector extends LitElement {
       .value=${this.value}
       .label=${this.label}
       no-add
-      .deviceFilter=${(device) => this._filterDevices(device)}
-      .entityFilter=${(entity) => this._filterEntities(entity)}
+      .deviceFilter=${this._filterDevices}
+      .entityFilter=${this._filterEntities}
       .includeDeviceClasses=${this.selector.area.entity?.device_class
         ? [this.selector.area.entity.device_class]
         : undefined}
@@ -51,16 +51,16 @@ export class HaAreaSelector extends LitElement {
     ></ha-area-picker>`;
   }
 
-  private _filterEntities(entity: EntityRegistryEntry): boolean {
+  private _filterEntities = (entity: EntityRegistryEntry): boolean => {
     if (this.selector.area.entity?.integration) {
       if (entity.platform !== this.selector.area.entity.integration) {
         return false;
       }
     }
     return true;
-  }
+  };
 
-  private _filterDevices(device: DeviceRegistryEntry): boolean {
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
     if (
       this.selector.area.device?.manufacturer &&
       device.manufacturer !== this.selector.area.device.manufacturer
@@ -84,7 +84,7 @@ export class HaAreaSelector extends LitElement {
       }
     }
     return true;
-  }
+  };
 
   private async _loadConfigEntries() {
     this._configEntries = (await getConfigEntries(this.hass)).filter(

src/data/light.ts

@@ -3,7 +3,7 @@ import {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 
-export enum LightColorModes {
+export const enum LightColorModes {
   UNKNOWN = "unknown",
   ONOFF = "onoff",
   BRIGHTNESS = "brightness",

src/data/zwave_js.ts

@@ -2,7 +2,7 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 import { DeviceRegistryEntry } from "./device_registry";
 
-export enum InclusionStrategy {
+export const enum InclusionStrategy {
   /**
    * Always uses Security S2 if supported, otherwise uses Security S0 for certain devices which don't work without encryption and uses no encryption otherwise.
    *
@@ -154,7 +154,7 @@ export interface ZWaveJSRemovedNode {
   label: string;
 }
 
-export enum NodeStatus {
+export const enum NodeStatus {
   Unknown,
   Asleep,
   Awake,

src/panels/lovelace/components/hui-image.ts

@@ -23,7 +23,7 @@ const DEFAULT_FILTER = "grayscale(100%)";
 const MAX_IMAGE_WIDTH = 640;
 const ASPECT_RATIO_DEFAULT = 9 / 16;
 
-enum LoadState {
+const enum LoadState {
   Loading = 1,
   Loaded = 2,
   Error = 3,