Convert ha-store-auth-card to Lit/TS/ha-card (#9300)

package.json

@@ -71,7 +71,6 @@
     "@polymer/iron-label": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",

src/dialogs/ha-store-auth-card.js

@@ -1,74 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { enableWrite } from "../common/auth/token_storage";
-import LocalizeMixin from "../mixins/localize-mixin";
-import "../styles/polymer-ha-style";
-
-class HaStoreAuth extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        paper-card {
-          position: fixed;
-          padding: 8px 0;
-          bottom: 16px;
-          right: 16px;
-        }
-
-        .card-content {
-          color: var(--primary-text-color);
-        }
-
-        .card-actions {
-          text-align: right;
-          border-top: 0;
-          margin-right: -4px;
-        }
-
-        :host(.small) paper-card {
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-      </style>
-      <paper-card elevation="4">
-        <div class="card-content">[[localize('ui.auth_store.ask')]]</div>
-        <div class="card-actions">
-          <mwc-button on-click="_done"
-            >[[localize('ui.auth_store.decline')]]</mwc-button
-          >
-          <mwc-button raised on-click="_save"
-            >[[localize('ui.auth_store.confirm')]]</mwc-button
-          >
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.classList.toggle("small", window.innerWidth < 600);
-  }
-
-  _save() {
-    enableWrite();
-    this._done();
-  }
-
-  _done() {
-    const card = this.shadowRoot.querySelector("paper-card");
-    card.style.transition = "bottom .25s";
-    card.style.bottom = `-${card.offsetHeight + 8}px`;
-    setTimeout(() => this.parentNode.removeChild(this), 300);
-  }
-}
-
-customElements.define("ha-store-auth-card", HaStoreAuth);

src/dialogs/ha-store-auth-card.ts

@@ -0,0 +1,75 @@
+import { LitElement, TemplateResult, html, css } from "lit";
+import { property } from "lit/decorators";
+import { enableWrite } from "../common/auth/token_storage";
+import { HomeAssistant } from "../types";
+import "../components/ha-card";
+import type { HaCard } from "../components/ha-card";
+import "@material/mwc-button/mwc-button";
+
+class HaStoreAuth extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          ${this.hass.localize("ui.auth_store.ask")}
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._dismiss}>
+            ${this.hass.localize("ui.auth_store.decline")}
+          </mwc-button>
+          <mwc-button raised @click=${this._save}>
+            ${this.hass.localize("ui.auth_store.confirm")}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  firstUpdated() {
+    this.classList.toggle("small", window.innerWidth < 600);
+  }
+
+  private _save(): void {
+    enableWrite();
+    this._dismiss();
+  }
+
+  private _dismiss(): void {
+    const card = this.shadowRoot!.querySelector("ha-card") as HaCard;
+    card.style.bottom = `-${card.offsetHeight + 8}px`;
+    setTimeout(() => this.parentNode!.removeChild(this), 300);
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        position: fixed;
+        padding: 8px 0;
+        bottom: 16px;
+        right: 16px;
+        transition: bottom 0.25s;
+      }
+
+      .card-actions {
+        text-align: right;
+        border-top: 0;
+      }
+
+      :host(.small) ha-card {
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+customElements.define("ha-store-auth-card", HaStoreAuth);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-store-auth-card": HaStoreAuth;
+  }
+}

src/state/auth-mixin.ts

@@ -32,8 +32,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           .then(() => import("../dialogs/ha-store-auth-card"))
           .then(() => {
             const el = document.createElement("ha-store-auth-card");
-            this.shadowRoot!.appendChild(el);
             this.provideHass(el);
+            this.shadowRoot!.appendChild(el);
           });
       }
     }

yarn.lock

@@ -2104,7 +2104,7 @@
     "@polymer/iron-meta" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/iron-image@^3.0.0-pre.26", "@polymer/iron-image@^3.0.1":
+"@polymer/iron-image@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@polymer/iron-image/-/iron-image-3.0.2.tgz#425ee6269634e024dbea726a91a61724ae4402b6"
   integrity sha512-VyYtnewGozDb5sUeoLR1OvKzlt5WAL6b8Od7fPpio5oYL+9t061/nTV8+ZMrpMgF2WgB0zqM/3K53o3pbK5v8Q==
@@ -2226,16 +2226,6 @@
     "@polymer/paper-ripple" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-card@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-card/-/paper-card-3.0.1.tgz#fb5960b3e55fab56d20b7c1c3dee08f0d052ff2a"
-  integrity sha512-ZYzfA4kzP9niRO22wSOBL2RS+URZNUP5XmUCwN91fYPIGO0Qbimh7d1O2HpJD4cRCZhvGYn2CJMDMVmDm35vIg==
-  dependencies:
-    "@polymer/iron-flex-layout" "^3.0.0-pre.26"
-    "@polymer/iron-image" "^3.0.0-pre.26"
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-checkbox@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@polymer/paper-checkbox/-/paper-checkbox-3.1.0.tgz#66b903ae5814db237d027deb4a3f3430f48d905b"