Convert ha-init-page to lit/ts (#2583)

src/layouts/ha-init-page.js

@@ -1,48 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-spinner/paper-spinner";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import LocalizeMixin from "../mixins/localize-mixin";
-import EventsMixin from "../mixins/events-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaInitPage extends EventsMixin(LocalizeMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-positioning"></style>
-      <style>
-        paper-spinner {
-          margin-bottom: 10px;
-        }
-      </style>
-
-      <div class="layout vertical center center-center fit">
-        <img src="/static/icons/favicon-192x192.png" height="192" />
-        <paper-spinner active="[[!error]]"></paper-spinner>
-        <template is="dom-if" if="[[error]]">
-          Unable to connect to Home Assistant.
-          <paper-button on-click="_retry">Retry</paper-button>
-        </template>
-        <template is="dom-if" if="[[!error]]">
-          Loading data
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      error: Boolean,
-    };
-  }
-
-  _retry() {
-    location.reload();
-  }
-}
-
-customElements.define("ha-init-page", HaInitPage);

src/layouts/ha-init-page.ts

@@ -0,0 +1,70 @@
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-spinner/paper-spinner-lite";
+
+import {
+  LitElement,
+  PropertyDeclarations,
+  html,
+  CSSResult,
+  css,
+} from "lit-element";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaInitPage extends LitElement {
+  public error?: boolean;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      error: {
+        type: Boolean,
+      },
+    };
+  }
+
+  protected render() {
+    return html`
+      <div>
+        <img src="/static/icons/favicon-192x192.png" height="192" />
+        <paper-spinner-lite .active=${!this.error}></paper-spinner-lite>
+        ${this.error
+          ? html`
+              Unable to connect to Home Assistant.
+              <paper-button @click=${this._retry}>Retry</paper-button>
+            `
+          : "Loading data"}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      paper-spinner-lite {
+        margin-bottom: 10px;
+      }
+      paper-button {
+        font-weight: 500;
+        color: var(--primary-color);
+      }
+    `;
+  }
+
+  private _retry() {
+    location.reload();
+  }
+}
+
+customElements.define("ha-init-page", HaInitPage);