diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
index b936a70f97..1a1c5dfe13 100644
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
@@ -47,11 +47,6 @@ class HassioMarkdownDialog extends LitElement {
haStyleDialog,
hassioStyle,
css`
- ha-paper-dialog {
- min-width: 350px;
- font-size: 14px;
- border-radius: 2px;
- }
app-toolbar {
margin: 0;
padding: 0 16px;
@@ -62,19 +57,6 @@ class HassioMarkdownDialog extends LitElement {
margin-left: 16px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
- ha-paper-dialog {
- max-height: 100%;
- }
- ha-paper-dialog::before {
- content: "";
- position: fixed;
- z-index: -1;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-color: inherit;
- }
app-toolbar {
color: var(--text-primary-color);
background-color: var(--primary-color);
diff --git a/package.json b/package.json
index 16c2a47c0f..ee71475cdb 100644
--- a/package.json
+++ b/package.json
@@ -75,9 +75,6 @@
"@polymer/iron-input": "^3.0.1",
"@polymer/iron-overlay-behavior": "^3.0.3",
"@polymer/iron-resizable-behavior": "^3.0.1",
- "@polymer/paper-dialog": "^3.0.1",
- "@polymer/paper-dialog-behavior": "^3.0.1",
- "@polymer/paper-dialog-scrollable": "^3.0.1",
"@polymer/paper-dropdown-menu": "^3.2.0",
"@polymer/paper-input": "^3.2.1",
"@polymer/paper-item": "^3.0.1",
diff --git a/src/components/dialog/ha-iron-focusables-helper.js b/src/components/dialog/ha-iron-focusables-helper.js
deleted file mode 100644
index 1f75e82c52..0000000000
--- a/src/components/dialog/ha-iron-focusables-helper.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at
-http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
-http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
-found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
-part of the polymer project is also subject to an additional IP rights grant
-found at http://polymer.github.io/PATENTS.txt
-*/
-/*
- Fixes issue with not using shadow dom properly in iron-overlay-behavior/icon-focusables-helper.js
-*/
-import { IronFocusablesHelper } from "@polymer/iron-overlay-behavior/iron-focusables-helper";
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-
-export const HaIronFocusablesHelper = {
- /**
- * Returns a sorted array of tabbable nodes, including the root node.
- * It searches the tabbable nodes in the light and shadow dom of the chidren,
- * sorting the result by tabindex.
- * @param {!Node} node
- * @return {!Array}
- */
- getTabbableNodes: function (node) {
- const result = [];
- // If there is at least one element with tabindex > 0, we need to sort
- // the final array by tabindex.
- const needsSortByTabIndex = this._collectTabbableNodes(node, result);
- if (needsSortByTabIndex) {
- return IronFocusablesHelper._sortByTabIndex(result);
- }
- return result;
- },
-
- /**
- * Searches for nodes that are tabbable and adds them to the `result` array.
- * Returns if the `result` array needs to be sorted by tabindex.
- * @param {!Node} node The starting point for the search; added to `result`
- * if tabbable.
- * @param {!Array} result
- * @return {boolean}
- * @private
- */
- _collectTabbableNodes: function (node, result) {
- // If not an element or not visible, no need to explore children.
- if (
- node.nodeType !== Node.ELEMENT_NODE ||
- !IronFocusablesHelper._isVisible(node)
- ) {
- return false;
- }
- const element = /** @type {!HTMLElement} */ (node);
- const tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
- let needsSort = tabIndex > 0;
- if (tabIndex >= 0) {
- result.push(element);
- }
-
- // In ShadowDOM v1, tab order is affected by the order of distrubution.
- // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B];
- // in ShadowDOM v0 tab order is not affected by the distrubution order,
- // in fact getTabbableNodes(#root) returns [#B, #A].
- //
- //
- //
- //
- //
- //
- //
- //
- // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
- let children;
- if (element.localName === "content" || element.localName === "slot") {
- children = dom(element).getDistributedNodes();
- } else {
- // /////////////////////////
- // Use shadow root if possible, will check for distributed nodes.
- // THIS IS THE CHANGED LINE
- children = dom(element.shadowRoot || element.root || element).children;
- // /////////////////////////
- }
- for (let i = 0; i < children.length; i++) {
- // Ensure method is always invoked to collect tabbable children.
- needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
- }
- return needsSort;
- },
-};
diff --git a/src/components/dialog/ha-paper-dialog.ts b/src/components/dialog/ha-paper-dialog.ts
deleted file mode 100644
index edaeff9315..0000000000
--- a/src/components/dialog/ha-paper-dialog.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import "@polymer/paper-dialog/paper-dialog";
-import type { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import type { Constructor } from "../../types";
-import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper";
-
-const paperDialogClass = customElements.get(
- "paper-dialog"
-) as Constructor;
-
-// behavior that will override existing iron-overlay-behavior and call the fixed implementation
-const haTabFixBehaviorImpl = {
- get _focusableNodes() {
- return HaIronFocusablesHelper.getTabbableNodes(this);
- },
-};
-
-// paper-dialog that uses the haTabFixBehaviorImpl behavior
-// export class HaPaperDialog extends paperDialogClass {}
-// @ts-ignore
-export class HaPaperDialog
- extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass)
- implements PaperDialogElement {}
-
-declare global {
- interface HTMLElementTagNameMap {
- "ha-paper-dialog": HaPaperDialog;
- }
-}
-// @ts-ignore
-customElements.define("ha-paper-dialog", HaPaperDialog);
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index d5f9abcc67..0b1633845d 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -24,7 +24,7 @@ export const createCloseHeading = (
// @ts-expect-error
export class HaDialog extends Dialog {
public scrollToPos(x: number, y: number) {
- this.contentElement.scrollTo(x, y);
+ this.contentElement?.scrollTo(x, y);
}
protected renderHeading() {
@@ -44,6 +44,12 @@ export class HaDialog extends Dialog {
justify-content: var(--justify-action-buttons, flex-end);
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
+ .mdc-dialog__actions span:nth-child(1) {
+ flex: var(--secondary-action-button-flex, unset);
+ }
+ .mdc-dialog__actions span:nth-child(2) {
+ flex: var(--primary-action-button-flex, unset);
+ }
.mdc-dialog__container {
align-items: var(--vertial-align-dialog, center);
}
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index b31095e2c1..e7fcb1572b 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -1,6 +1,5 @@
import "@material/mwc-button";
import { mdiClose } from "@mdi/js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index 7f6cb5e486..4c8fa20780 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -1,7 +1,5 @@
/* eslint-disable lit/prefer-static-styles */
import { mdiMicrophone } from "@mdi/js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
@@ -17,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../common/dom/fire_event";
import { SpeechRecognition } from "../../common/dom/speech-recognition";
import { uid } from "../../common/util/uid";
-import "../../components/dialog/ha-paper-dialog";
import "../../components/ha-icon-button";
import {
AgentInfo,
@@ -27,6 +24,9 @@ import {
} from "../../data/conversation";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
+import "../../components/ha-dialog";
+import type { HaDialog } from "../../components/ha-dialog";
+import "@material/mwc-button/mwc-button";
interface Message {
who: string;
@@ -56,7 +56,7 @@ export class HaVoiceCommandDialog extends LitElement {
@state() private _agentInfo?: AgentInfo;
- @query("#messages", true) private messages!: PaperDialogScrollableElement;
+ @query("ha-dialog", true) private _dialog!: HaDialog;
private recognition!: SpeechRecognition;
@@ -70,74 +70,42 @@ export class HaVoiceCommandDialog extends LitElement {
this._agentInfo = await getAgentInfo(this.hass);
}
+ public async closeDialog(): Promise {
+ this._opened = false;
+ if (this.recognition) {
+ this.recognition.abort();
+ }
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+
protected render(): TemplateResult {
- // CSS custom property mixins only work in render https://github.com/Polymer/lit-element/issues/633
+ if (!this._opened) {
+ return html``;
+ }
return html`
-
-
- ${this._agentInfo && this._agentInfo.onboarding
- ? html`
-