Converted paper-dialog to ha-paper-dialog (#3055)

* Converted paper-dialog to ha-paper-dialog * Fixed paths * Fixed double import * Fixed orphan tags * Moved to /components and renamed * Fixed hassio * Fix travis issue
2025-07-24 09:46:36 +00:00 · 2019-04-05 01:11:43 +03:00 · 2019-04-05 01:11:43 +03:00 · 8c7cdda3d3
commit 8c7cdda3d3
parent 8c222bb467
24 changed files with 192 additions and 200 deletions
--- a/hassio/src/hassio-markdown-dialog.js
+++ b/hassio/src/hassio-markdown-dialog.js
@ -1,18 +1,18 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

 import "../../src/components/ha-markdown";
 import "../../src/resources/ha-style";
+import "../../src/components/dialog/ha-paper-dialog";

 class HassioMarkdownDialog extends PolymerElement {
  static get template() {
    return html`
      <style include="ha-style-dialog">
-        paper-dialog {
+        ha-paper-dialog {
          min-width: 350px;
          font-size: 14px;
          border-radius: 2px;
@ -31,10 +31,10 @@ class HassioMarkdownDialog extends PolymerElement {
          margin: 4px;
        }
        @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
            max-height: 100%;
          }
-          paper-dialog::before {
+          ha-paper-dialog::before {
            content: "";
            position: fixed;
            z-index: -1;
@ -50,7 +50,7 @@ class HassioMarkdownDialog extends PolymerElement {
          }
        }
      </style>
-      <paper-dialog id="dialog" with-backdrop="">
+      <ha-paper-dialog id="dialog" with-backdrop="">
        <app-toolbar>
          <paper-icon-button
            icon="hassio:close"
@ -61,7 +61,7 @@ class HassioMarkdownDialog extends PolymerElement {
        <paper-dialog-scrollable>
          <ha-markdown content="[[content]]"></ha-markdown>
        </paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

--- a/hassio/src/snapshots/hassio-snapshot.js
+++ b/hassio/src/snapshots/hassio-snapshot.js
@ -2,7 +2,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -10,12 +9,13 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { getSignedPath } from "../../../src/auth/data";

 import "../../../src/resources/ha-style";
+import "../../../src/components/dialog/ha-paper-dialog";

 class HassioSnapshot extends PolymerElement {
  static get template() {
    return html`
      <style include="ha-style-dialog">
-        paper-dialog {
+        ha-paper-dialog {
          min-width: 350px;
          font-size: 14px;
          border-radius: 2px;
@ -29,7 +29,7 @@ class HassioSnapshot extends PolymerElement {
        app-toolbar [main-title] {
          margin-left: 16px;
        }
-        paper-dialog-scrollable {
+        ha-paper-dialog-scrollable {
          margin: 0;
        }
        paper-checkbox {
@ -37,7 +37,7 @@ class HassioSnapshot extends PolymerElement {
          margin: 4px;
        }
        @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
            max-height: 100%;
            height: 100%;
          }
@ -57,7 +57,7 @@ class HassioSnapshot extends PolymerElement {
          color: var(--google-red-500);
        }
      </style>
-      <paper-dialog
+      <ha-paper-dialog
        id="dialog"
        with-backdrop=""
        on-iron-overlay-closed="_dialogClosed"
@ -132,7 +132,7 @@ class HassioSnapshot extends PolymerElement {
            >
          </template>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

--- a/src/panels/lovelace/components/dialog/ha-iron-focusables-helper.js
+++ b/src/panels/lovelace/components/dialog/ha-iron-focusables-helper.js
--- a/src/panels/lovelace/components/dialog/ha-dialog.ts
+++ b/src/panels/lovelace/components/dialog/ha-dialog.ts
@ -1,6 +1,8 @@
 import "@polymer/paper-dialog/paper-dialog";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper.js";
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";

 const paperDialogClass = customElements.get("paper-dialog");

@ -13,10 +15,10 @@ const haTabFixBehaviorImpl = {

 // paper-dialog that uses the haTabFixBehaviorImpl behvaior
 // export class HaPaperDialog extends paperDialogClass {}
-export class HaPaperDialog extends mixinBehaviors(
-  [haTabFixBehaviorImpl],
-  paperDialogClass
-) {}
+// @ts-ignore
+export class HaPaperDialog
+  extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass)
+  implements PaperDialogElement {}

 declare global {
  interface HTMLElementTagNameMap {
--- a/src/dialogs/config-flow/dialog-config-flow.ts
+++ b/src/dialogs/config-flow/dialog-config-flow.ts
@ -12,14 +12,14 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-dialog/paper-dialog";
-// Not duplicate, is for typing
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";

 import "../../components/ha-form";
 import "../../components/ha-markdown";
 import "../../resources/ha-style";
+import "../../components/dialog/ha-paper-dialog";
+// Not duplicate, is for typing
+// tslint:disable-next-line
+import { HaPaperDialog } from "../../components/dialog/ha-paper-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import {
  fetchConfigFlow,
@ -108,7 +108,11 @@ class ConfigFlowDialog extends LitElement {
    }

    return html`
-      <paper-dialog with-backdrop opened @opened-changed=${this._openedChanged}>
+      <ha-paper-dialog
+        with-backdrop
+        opened
+        @opened-changed=${this._openedChanged}
+      >
        ${this._loading
          ? html`
              <step-flow-loading></step-flow-loading>
@ -144,7 +148,7 @@ class ConfigFlowDialog extends LitElement {
                .areas=${this._areas}
              ></step-flow-create-entry>
            `}
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -166,8 +170,8 @@ class ConfigFlowDialog extends LitElement {
    }
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  private async _fetchDevices(configEntryId) {
@ -226,10 +230,10 @@ class ConfigFlowDialog extends LitElement {
    return [
      haStyleDialog,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          max-width: 500px;
        }
-        paper-dialog > * {
+        ha-paper-dialog > * {
          margin: 0;
          display: block;
          padding: 0;
--- a/src/dialogs/config-flow/step-flow-abort.ts
+++ b/src/dialogs/config-flow/step-flow-abort.ts
@ -33,20 +33,17 @@ class StepFlowAbort extends LitElement {
    );

    return html`
-        <h2>Aborted</h2>
-        <div class="content">
-          ${
-            description
-              ? html`
-                  <ha-markdown .content=${description} allow-svg></ha-markdown>
-                `
-              : ""
-          }
-        </div>
-        <div class="buttons">
-          <mwc-button @click="${this._flowDone}">Close</mwc-button>
-        </div>
-      </paper-dialog>
+      <h2>Aborted</h2>
+      <div class="content">
+        ${description
+          ? html`
+              <ha-markdown .content=${description} allow-svg></ha-markdown>
+            `
+          : ""}
+      </div>
+      <div class="buttons">
+        <mwc-button @click="${this._flowDone}">Close</mwc-button>
+      </div>
    `;
  }

--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@ -52,71 +52,61 @@ class StepFlowCreateEntry extends LitElement {
    );

    return html`
-        <h2>Success!</h2>
-        <div class="content">
-          ${
-            description
-              ? html`
-                  <ha-markdown .content=${description} allow-svg></ha-markdown>
-                `
-              : ""
-          }
-          <p>Created config for ${step.title}.</p>
-          ${
-            this.devices.length === 0
-              ? ""
-              : html`
-                  <p>We found the following devices:</p>
-                  <div class="devices">
-                    ${this.devices.map(
-                      (device) =>
-                        html`
-                          <div class="device">
-                            <b>${device.name}</b><br />
-                            ${device.model} (${device.manufacturer})
+      <h2>Success!</h2>
+      <div class="content">
+        ${description
+          ? html`
+              <ha-markdown .content=${description} allow-svg></ha-markdown>
+            `
+          : ""}
+        <p>Created config for ${step.title}.</p>
+        ${this.devices.length === 0
+          ? ""
+          : html`
+              <p>We found the following devices:</p>
+              <div class="devices">
+                ${this.devices.map(
+                  (device) =>
+                    html`
+                      <div class="device">
+                        <b>${device.name}</b><br />
+                        ${device.model} (${device.manufacturer})

-                            <paper-dropdown-menu-light
-                              label="Area"
-                              .device=${device.id}
-                              @selected-item-changed=${this._handleAreaChanged}
-                            >
-                              <paper-listbox
-                                slot="dropdown-content"
-                                selected="0"
-                              >
-                                <paper-item>
-                                  ${localize(
-                                    "ui.panel.config.integrations.config_entry.no_area"
-                                  )}
+                        <paper-dropdown-menu-light
+                          label="Area"
+                          .device=${device.id}
+                          @selected-item-changed=${this._handleAreaChanged}
+                        >
+                          <paper-listbox slot="dropdown-content" selected="0">
+                            <paper-item>
+                              ${localize(
+                                "ui.panel.config.integrations.config_entry.no_area"
+                              )}
+                            </paper-item>
+                            ${this.areas.map(
+                              (area) => html`
+                                <paper-item .area=${area.area_id}>
+                                  ${area.name}
                                </paper-item>
-                                ${this.areas.map(
-                                  (area) => html`
-                                    <paper-item .area=${area.area_id}>
-                                      ${area.name}
-                                    </paper-item>
-                                  `
-                                )}
-                              </paper-listbox>
-                            </paper-dropdown-menu-light>
-                          </div>
-                        `
-                    )}
-                  </div>
-                `
-          }
-        </div>
-        <div class="buttons">
-          ${
-            this.devices.length > 0
-              ? html`
-                  <mwc-button @click="${this._addArea}">Add Area</mwc-button>
-                `
-              : ""
-          }
+                              `
+                            )}
+                          </paper-listbox>
+                        </paper-dropdown-menu-light>
+                      </div>
+                    `
+                )}
+              </div>
+            `}
+      </div>
+      <div class="buttons">
+        ${this.devices.length > 0
+          ? html`
+              <mwc-button @click="${this._addArea}">Add Area</mwc-button>
+            `
+          : ""}

-          <mwc-button @click="${this._flowDone}">Finish</mwc-button>
-        </div>
-      </paper-dialog>
+        <mwc-button @click="${this._flowDone}">Finish</mwc-button>
+      </div>
    `;
  }

--- a/src/panels/config/area_registry/dialog-area-registry-detail.ts
+++ b/src/panels/config/area_registry/dialog-area-registry-detail.ts
@ -6,10 +6,10 @@ import {
  CSSResult,
  TemplateResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";

+import "../../../components/dialog/ha-paper-dialog";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@ -47,7 +47,7 @@ class DialogAreaDetail extends LitElement {
    const entry = this._params.entry;
    const nameInvalid = this._name.trim() === "";
    return html`
-      <paper-dialog
+      <ha-paper-dialog
        with-backdrop
        opened
        @opened-changed="${this._openedChanged}"
@ -108,7 +108,7 @@ class DialogAreaDetail extends LitElement {
                )}
          </mwc-button>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -157,7 +157,7 @@ class DialogAreaDetail extends LitElement {
    return [
      haStyleDialog,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          min-width: 400px;
        }
        .form {
--- a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
+++ b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
@ -9,10 +9,10 @@ import {
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
+import "../../../components/dialog/ha-paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 // tslint:disable-next-line
 import { PaperInputElement } from "@polymer/paper-input/paper-input";

@ -49,7 +49,7 @@ export class CloudWebhookManageDialog extends LitElement {
        ? "https://www.home-assistant.io/docs/automation/trigger/#webhook-trigger"
        : `https://www.home-assistant.io/components/${webhook.domain}/`;
    return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
        <h2>Webhook for ${webhook.name}</h2>
        <div>
          <p>The webhook is available at the following url:</p>
@ -80,12 +80,12 @@ export class CloudWebhookManageDialog extends LitElement {
          >
          <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  private get _paperInput(): PaperInputElement {
@ -127,7 +127,7 @@ export class CloudWebhookManageDialog extends LitElement {
    return [
      haStyle,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          width: 650px;
        }
        paper-input {
--- a/src/panels/config/cloud/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate.ts
@ -8,10 +8,10 @@ import {
 } from "lit-element";

 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
+import "../../../components/dialog/ha-paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";

 import { HomeAssistant } from "../../../types";
 import { haStyle } from "../../../resources/styles";
@ -39,7 +39,7 @@ class DialogCloudCertificate extends LitElement {
    const { certificateInfo } = this._params;

    return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
        <h2>Certificate Information</h2>
        <div>
          <p>
@ -58,12 +58,12 @@ class DialogCloudCertificate extends LitElement {
        <div class="paper-dialog-buttons">
          <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  private _closeDialog() {
@ -74,7 +74,7 @@ class DialogCloudCertificate extends LitElement {
    return [
      haStyle,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          width: 535px;
        }
      `,
--- a/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
+++ b/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
@ -6,10 +6,11 @@ import {
  CSSResult,
  TemplateResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";

+import "../../../components/dialog/ha-paper-dialog";
+
 import { EntityRegistryDetailDialogParams } from "./show-dialog-entity-registry-detail";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@ -56,7 +57,7 @@ class DialogEntityRegistryDetail extends LitElement {
      computeDomain(this._params.entry.entity_id);

    return html`
-      <paper-dialog
+      <ha-paper-dialog
        with-backdrop
        opened
        @opened-changed="${this._openedChanged}"
@ -116,7 +117,7 @@ class DialogEntityRegistryDetail extends LitElement {
            )}
          </mwc-button>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -166,7 +167,7 @@ class DialogEntityRegistryDetail extends LitElement {
    return [
      haStyleDialog,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          min-width: 400px;
        }
        .form {
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@ -6,11 +6,12 @@ import {
  TemplateResult,
  property,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import "@material/mwc-button";

+import "../../../components/dialog/ha-paper-dialog";
+
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/user/ha-user-picker";
 import { PersonDetailDialogParams } from "./show-dialog-person-detail";
@ -49,7 +50,7 @@ class DialogPersonDetail extends LitElement {
    }
    const nameInvalid = this._name.trim() === "";
    return html`
-      <paper-dialog
+      <ha-paper-dialog
        with-backdrop
        opened
        @opened-changed="${this._openedChanged}"
@ -114,7 +115,7 @@ class DialogPersonDetail extends LitElement {
            ${this._params.entry ? "UPDATE" : "CREATE"}
          </mwc-button>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -175,7 +176,7 @@ class DialogPersonDetail extends LitElement {
    return [
      haStyleDialog,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          min-width: 400px;
        }
        .form {
--- a/src/panels/config/users/ha-dialog-add-user.js
+++ b/src/panels/config/users/ha-dialog-add-user.js
@ -1,9 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/dialog/ha-paper-dialog";
 import "../../../resources/ha-style";

 import LocalizeMixin from "../../../mixins/localize-mixin";
@ -18,14 +18,14 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
        .error {
          color: red;
        }
-        paper-dialog {
+        ha-paper-dialog {
          max-width: 500px;
        }
        .username {
          margin-top: -8px;
        }
      </style>
-      <paper-dialog
+      <ha-paper-dialog
        id="dialog"
        with-backdrop
        opened="{{_opened}}"
@ -76,7 +76,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
            >
          </template>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

--- a/src/panels/config/zwave/zwave-log-dialog.js
+++ b/src/panels/config/zwave/zwave-log-dialog.js
@ -1,8 +1,8 @@
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/dialog/ha-paper-dialog";
 import "../../../resources/ha-style";

 import EventsMixin from "../../../mixins/events-mixin";
@ -12,12 +12,12 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
    return html`
    <style include="ha-style-dialog">
    </style>
-      <paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
+      <ha-paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
        <h2>OpenZwave internal logfile</h2>
        <paper-dialog-scrollable>
          <pre>[[_ozwLog]]</pre>
        <paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
      `;
  }

--- a/src/panels/config/zwave/zwave-log.js
+++ b/src/panels/config/zwave/zwave-log.js
@ -2,8 +2,6 @@ import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import EventsMixin from "../../../mixins/events-mixin";
--- a/src/panels/dev-info/dialog-system-log-detail.ts
+++ b/src/panels/dev-info/dialog-system-log-detail.ts
@ -6,9 +6,10 @@ import {
  CSSResult,
  TemplateResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";

+import "../../components/dialog/ha-paper-dialog";
+
 import { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
@ -34,7 +35,7 @@ class DialogSystemLogDetail extends LitElement {
    const item = this._params.item;

    return html`
-      <paper-dialog
+      <ha-paper-dialog
        with-backdrop
        opened
        @opened-changed="${this._openedChanged}"
@ -53,7 +54,7 @@ class DialogSystemLogDetail extends LitElement {
              `
            : html``}
        </paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -67,7 +68,7 @@ class DialogSystemLogDetail extends LitElement {
    return [
      haStyleDialog,
      css`
-        paper-dialog {
+        ha-paper-dialog {
          direction: ltr;
        }
      `,
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
@ -7,10 +7,10 @@ import {
  css,
  CSSResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-item/paper-item";
+import "../../../../components/dialog/ha-paper-dialog";
 // tslint:disable-next-line:no-duplicate-imports
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";

 import { moveCard } from "../config-util";
 import { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
@ -30,7 +30,7 @@ export class HuiDialogMoveCardView extends LitElement {
      return html``;
    }
    return html`
-      <paper-dialog
+      <ha-paper-dialog
        with-backdrop
        opened
        @opened-changed="${this._openedChanged}"
@ -46,7 +46,7 @@ export class HuiDialogMoveCardView extends LitElement {
            >
          `;
        })}
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -76,8 +76,8 @@ export class HuiDialogMoveCardView extends LitElement {
    `;
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  private _moveCard(e: Event): void {
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
@ -6,9 +6,10 @@ import {
  CSSResult,
  customElement,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";

+import "../../../../components/dialog/ha-paper-dialog";
+
 import { haStyleDialog } from "../../../../resources/styles";

 import "./hui-card-picker";
@ -23,7 +24,7 @@ export class HuiDialogPickCard extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      <paper-dialog
+      <ha-paper-dialog
        with-backdrop
        opened
        @opened-changed="${this._openedChanged}"
@ -40,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
        <div class="paper-dialog-buttons">
          <mwc-button @click="${this._skipPick}">MANUAL CARD</mwc-button>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -60,19 +61,19 @@ export class HuiDialogPickCard extends LitElement {
      css`
        @media all and (max-width: 450px), all and (max-height: 500px) {
          /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
            max-height: 100%;
            height: 100%;
          }
        }

        @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
            width: 650px;
          }
        }

-        paper-dialog {
+        ha-paper-dialog {
          max-width: 650px;
        }
      `,
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@ -15,10 +15,10 @@ import { haStyleDialog } from "../../../../resources/styles";

 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-dialog/paper-dialog";
-import "../../components/dialog/ha-dialog";
+import "../../../../components/dialog/ha-paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { HaPaperDialog } from "../../components/dialog/ha-dialog";
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { HomeAssistant } from "../../../../types";
@ -428,7 +428,7 @@ export class HuiEditCard extends LitElement {
        }

        @media (min-width: 1200px) {
-          paper-dialog {
+          ha-paper-dialog {
            max-width: none;
            width: 1000px;
          }
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@ -8,10 +8,9 @@ import {
  property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-dialog/paper-dialog";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "../../../components/dialog/ha-paper-dialog";
+// tslint:disable-next-line:no-duplicate-imports
+import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";

 import { haStyleDialog } from "../../../resources/styles";
@ -37,13 +36,13 @@ export class HuiSaveConfig extends LitElement {
    this._dialog.open();
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  protected render(): TemplateResult | void {
    return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
        <h2>
          ${this.hass!.localize("ui.panel.lovelace.editor.save_config.header")}
        </h2>
@ -73,7 +72,7 @@ export class HuiSaveConfig extends LitElement {
            )}</mwc-button
          >
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -104,17 +103,17 @@ export class HuiSaveConfig extends LitElement {
      css`
        @media all and (max-width: 450px), all and (max-height: 500px) {
          /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
            max-height: 100%;
            height: 100%;
          }
        }
        @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
            width: 650px;
          }
        }
-        paper-dialog {
+        ha-paper-dialog {
          max-width: 650px;
        }
        paper-spinner {
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@ -8,10 +8,9 @@ import {
  property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-dialog/paper-dialog";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "../../../../components/dialog/ha-paper-dialog";
+// tslint:disable-next-line:no-duplicate-imports
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";

@ -49,13 +48,13 @@ export class HuiDialogEditLovelace extends LitElement {
    this._dialog.open();
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  protected render(): TemplateResult | void {
    return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
        <h2>Edit Lovelace</h2>
        <paper-dialog-scrollable>
          <hui-lovelace-editor
@ -79,7 +78,7 @@ export class HuiDialogEditLovelace extends LitElement {
            ${this.hass!.localize("ui.common.save")}</mwc-button
          >
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -132,17 +131,17 @@ export class HuiDialogEditLovelace extends LitElement {
      css`
        @media all and (max-width: 450px), all and (max-height: 500px) {
          /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
            max-height: 100%;
            height: 100%;
          }
        }
        @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
            width: 650px;
          }
        }
-        paper-dialog {
+        ha-paper-dialog {
          max-width: 650px;
        }
        mwc-button paper-spinner {
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@ -11,11 +11,10 @@ import {
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button.js";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "../../../../components/dialog/ha-paper-dialog";
+// tslint:disable-next-line:no-duplicate-imports
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";

@ -84,8 +83,8 @@ export class HuiEditView extends LitElement {
    this._dialog.open();
  }

-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
  }

  protected render(): TemplateResult | void {
@ -116,7 +115,7 @@ export class HuiEditView extends LitElement {
        break;
    }
    return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
        <h2>
          ${this.hass!.localize("ui.panel.lovelace.editor.edit_view.header")}
        </h2>
@ -155,7 +154,7 @@ export class HuiEditView extends LitElement {
            ${this.hass!.localize("ui.common.save")}</mwc-button
          >
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

@ -184,7 +183,7 @@ export class HuiEditView extends LitElement {

  private async _resizeDialog(): Promise<void> {
    await this.updateComplete;
-    fireEvent(this._dialog, "iron-resize");
+    fireEvent(this._dialog as HTMLElement, "iron-resize");
  }

  private _closeDialog(): void {
@ -267,17 +266,17 @@ export class HuiEditView extends LitElement {
      css`
        @media all and (max-width: 450px), all and (max-height: 500px) {
          /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
            max-height: 100%;
            height: 100%;
          }
        }
        @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
            width: 650px;
          }
        }
-        paper-dialog {
+        ha-paper-dialog {
          max-width: 650px;
        }
        paper-tabs {
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@ -1,10 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

 import "../../resources/ha-style";
+import "../../components/dialog/ha-paper-dialog";

 import LocalizeMixin from "../../mixins/localize-mixin";

@ -19,7 +19,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
          color: red;
        }
        @media all and (max-width: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
            margin: 0;
            width: 100%;
            max-height: calc(100% - 64px);
@ -34,10 +34,10 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
          }
        }

-        paper-dialog {
+        ha-paper-dialog {
          border-radius: 2px;
        }
-        paper-dialog p {
+        ha-paper-dialog p {
          color: var(--secondary-text-color);
        }

@ -45,7 +45,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
          float: right;
        }
      </style>
-      <paper-dialog
+      <ha-paper-dialog
        id="mp3dialog"
        with-backdrop
        opened="{{_opened}}"
@ -73,7 +73,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
            <source id="mp3src" src="" type="audio/mpeg" />
          </audio>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }

--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@ -1,10 +1,10 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-form";
 import "../../components/ha-markdown";
 import "../../resources/ha-style";
@ -25,7 +25,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
        .error {
          color: red;
        }
-        paper-dialog {
+        ha-paper-dialog {
          max-width: 500px;
        }
        ha-markdown img:first-child:last-child,
@ -44,7 +44,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
          margin-right: 16px;
        }
      </style>
-      <paper-dialog
+      <ha-paper-dialog
        id="dialog"
        with-backdrop=""
        opened="{{_opened}}"
@ -129,7 +129,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
            </template>
          </template>
        </div>
-      </paper-dialog>
+      </ha-paper-dialog>
    `;
  }