Migrate more-info-dialog to ha-wa-dialog

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -36,7 +36,7 @@ import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-reques
 import { navigate } from "../../common/navigate";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-button-menu";
-import "../../components/ha-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
@@ -107,6 +107,8 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
+  @state() private _open = false;
+
   @state() private _parentEntityIds: string[] = [];
 
   @query(".content") private _contentElement?: HTMLDivElement;
@@ -147,6 +149,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._initialView = params.view || DEFAULT_VIEW;
     this._childView = undefined;
     this.large = false;
+    this._open = true;
     this._loadEntityRegistryEntry();
   }
 
@@ -165,6 +168,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._entityId = undefined;
     this._parentEntityIds = [];
     this._entry = undefined;
@@ -391,21 +398,21 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     const isRTL = computeRTL(this.hass);
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .width=${this.large ? "full" : "medium"}
+        @closed=${this._dialogClosed}
         @opened=${this._handleOpened}
-        .escapeKeyAction=${this._isEscapeEnabled ? undefined : ""}
-        .heading=${title}
-        hideActions
-        flexContent
+        ?prevent-scrim-close=${!this._isEscapeEnabled}
+        flexcontent
       >
-        <ha-dialog-header slot="heading">
+        <ha-dialog-header slot="header">
           ${showCloseIcon
             ? html`
                 <ha-icon-button
                   slot="navigationIcon"
-                  dialogAction="cancel"
+                  data-dialog="close"
                   .label=${this.hass.localize("ui.common.close")}
                   .path=${mdiClose}
                 ></ha-icon-button>
@@ -640,7 +647,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                     : this._currView === "info"
                       ? html`
                           <ha-more-info-info
-                            dialogInitialFocus
                             .hass=${this.hass}
                             .entityId=${this._entityId}
                             .entry=${this._entry}
@@ -688,7 +694,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
           )}
           ${this.renderScrollableFades()}
         </div>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -747,7 +753,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
       haStyleDialogFixedTop,
       haStyleScrollbar,
       css`
-        ha-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
 
@@ -781,23 +787,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
           display: block;
         }
 
-        @media all and (min-width: 600px) and (min-height: 501px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 580px;
-            --mdc-dialog-max-width: 580px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-
-          .main-title {
-            cursor: default;
-          }
-
-          :host([large]) ha-dialog {
-            --mdc-dialog-min-width: 90vw;
-            --mdc-dialog-max-width: 90vw;
-          }
-        }
-
         .title {
           display: flex;
           flex-direction: column;