diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts
index 5fcfd031c6..62930305d3 100644
--- a/src/components/ha-drawer.ts
+++ b/src/components/ha-drawer.ts
@@ -1,9 +1,3 @@
-import {
- DIRECTION_LEFT,
- DIRECTION_RIGHT,
- Manager,
- Swipe,
-} from "@egjs/hammerjs";
import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
import { styles } from "@material/mwc-drawer/mwc-drawer.css";
import { css, PropertyValues } from "lit";
@@ -40,24 +34,31 @@ export class HaDrawer extends DrawerBase {
this.mdcRoot.dir = this.direction;
}
if (changedProps.has("open") && this.open && this.type === "modal") {
- this._mc = new Manager(document, {
- touchAction: "pan-y",
- });
- this._mc.add(
- new Swipe({
- direction:
- this.direction === "rtl" ? DIRECTION_RIGHT : DIRECTION_LEFT,
- })
- );
- this._mc.on("swipeleft swiperight", () => {
- fireEvent(this, "hass-toggle-menu", { open: false });
- });
+ this._setupSwipe();
} else if (this._mc) {
this._mc.destroy();
this._mc = undefined;
}
}
+ private async _setupSwipe() {
+ const hammer = await import("../resources/hammer");
+ this._mc = new hammer.Manager(document, {
+ touchAction: "pan-y",
+ });
+ this._mc.add(
+ new hammer.Swipe({
+ direction:
+ this.direction === "rtl"
+ ? hammer.DIRECTION_RIGHT
+ : hammer.DIRECTION_LEFT,
+ })
+ );
+ this._mc.on("swipeleft swiperight", () => {
+ fireEvent(this, "hass-toggle-menu", { open: false });
+ });
+ }
+
static override styles = [
styles,
css`
diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts
index f7f607720b..458fc850c2 100644
--- a/src/entrypoints/app.ts
+++ b/src/entrypoints/app.ts
@@ -6,7 +6,6 @@ import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-regi
import "../layouts/home-assistant";
import "../resources/ha-style";
import "../resources/roboto";
-import "../util/legacy-support";
setPassiveTouchGestures(true);
setCancelSyntheticClickEvents(false);
diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts
index 42df3b8d69..4d815bcfdd 100644
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,12 +1,9 @@
-import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { property, state } from "lit/decorators";
class HaInitPage extends LitElement {
@property({ type: Boolean }) public error = false;
- @state() private _showProgressIndicator = false;
-
@state() private _retryInSeconds = 60;
private _showProgressIndicatorTimeout?: NodeJS.Timeout;
@@ -36,9 +33,7 @@ class HaInitPage extends LitElement {
`
: html`
- ${this._showProgressIndicator
- ? html``
- : ""}
+
Loading data
`;
@@ -54,10 +49,15 @@ class HaInitPage extends LitElement {
}
}
+ protected willUpdate(changedProperties: PropertyValues) {
+ if (changedProperties.has("error") && this.error) {
+ import("@material/mwc-button");
+ }
+ }
+
protected firstUpdated() {
- this._showProgressIndicatorTimeout = setTimeout(async () => {
- await import("../components/ha-circular-progress");
- this._showProgressIndicator = true;
+ this._showProgressIndicatorTimeout = setTimeout(() => {
+ import("../components/ha-circular-progress");
}, 5000);
this._retryInterval = setInterval(() => {
diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts
index 6fb01e521f..cf3aca4f78 100644
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@@ -3,8 +3,6 @@ import { property } from "lit/decorators";
import memoizeOne from "memoize-one";
import { navigate } from "../common/navigate";
import { Route } from "../types";
-import "./hass-error-screen";
-import "./hass-loading-screen";
const extractPage = (path: string, defaultPage: string) => {
if (path === "") {
@@ -256,10 +254,12 @@ export class HassRouterPage extends ReactiveElement {
}
protected createLoadingScreen() {
+ import("./hass-loading-screen");
return document.createElement("hass-loading-screen");
}
protected createErrorScreen(error: string) {
+ import("./hass-error-screen");
const errorEl = document.createElement("hass-error-screen");
errorEl.error = error;
return errorEl;
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index bcd99b762d..0e72bbd868 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -65,7 +65,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
`;
}
- update(changedProps) {
+ update(changedProps: PropertyValues) {
if (this.hass?.states && this.hass.config && this.hass.services) {
this.render = this.renderHass;
this.update = super.update;
@@ -74,7 +74,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
super.update(changedProps);
}
- protected firstUpdated(changedProps) {
+ protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
this._initializeHass();
setTimeout(() => registerServiceWorker(this), 1000);
diff --git a/src/resources/hammer.ts b/src/resources/hammer.ts
new file mode 100644
index 0000000000..b7165f3361
--- /dev/null
+++ b/src/resources/hammer.ts
@@ -0,0 +1,6 @@
+export {
+ DIRECTION_LEFT,
+ DIRECTION_RIGHT,
+ Manager,
+ Swipe,
+} from "@egjs/hammerjs";
diff --git a/src/util/legacy-support.js b/src/util/legacy-support.js
deleted file mode 100644
index 869ecbb4f7..0000000000
--- a/src/util/legacy-support.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Provide legacy support to HTML imports by exposing Polymer and
- * Polymer.Element on the window object.
- */
-/* eslint-plugin-disable lit */
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { Polymer } from "@polymer/polymer/polymer-legacy";
-
-const message =
- "WARNING: Polymer will be removed from window in Home Assistant 2023.5. More info: https://developers.home-assistant.io/blog/2023/04/04/deprecating_polymer";
-
-const handler = {
- get(target, prop, receiver) {
- // eslint-disable-next-line no-console
- console.warn(message);
- document
- .querySelector("home-assistant")
- .dispatchEvent(
- new CustomEvent("write_log", { detail: { message, level: "warning" } })
- );
- return Reflect.get(target, prop, receiver);
- },
- apply: function (target, thisArg, argumentsList) {
- // eslint-disable-next-line no-console
- console.warn(message);
- document
- .querySelector("home-assistant")
- .dispatchEvent(
- new CustomEvent("write_log", { detail: { message, level: "warning" } })
- );
- return Reflect.apply(target, thisArg, argumentsList);
- },
-};
-
-Polymer.Element = PolymerElement;
-Polymer.html = html;
-
-window.Polymer = new Proxy(Polymer, handler);