Migrate new backup dialog to ha-wa-dialog (#27430)

src/panels/config/backup/dialogs/dialog-new-backup.ts

@@ -1,14 +1,11 @@
-import { mdiCalendarSync, mdiClose, mdiGestureTap } from "@mdi/js";
+import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-next";
-import "../../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-svg-icon";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
@@ -24,92 +21,80 @@ class DialogNewBackup extends LitElement implements HassDialog {
 
   @state() private _params?: NewBackupDialogParams;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
   public showDialog(params: NewBackupDialogParams): void {
     this._opened = true;
     this._params = params;
   }
 
   public closeDialog() {
-    this._dialog?.close();
+    this._opened = false;
     return true;
   }
 
   private _dialogClosed() {
-    if (this._params!.cancel) {
+    if (this._params?.cancel) {
-      this._params!.cancel();
+      this._params.cancel();
     }
-    if (this._opened) {
-      fireEvent(this, "dialog-closed", { dialog: this.localName });
-    }
-    this._opened = false;
     this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render() {
-    if (!this._opened || !this._params) {
+    if (!this._params) {
       return nothing;
     }
 
     return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
+      <ha-wa-dialog
-        <ha-dialog-header slot="headline">
+        .hass=${this.hass}
-          <ha-icon-button
+        .open=${this._opened}
-            slot="navigationIcon"
+        header-title=${this.hass.localize(
-            @click=${this.closeDialog}
+          "ui.panel.config.backup.dialogs.new.title"
-            .label=${this.hass.localize("ui.common.close")}
+        )}
-            .path=${mdiClose}
+        @closed=${this._dialogClosed}
-          ></ha-icon-button>
+      >
-          <span slot="title">
+        <ha-md-list
-            ${this.hass.localize("ui.panel.config.backup.dialogs.new.title")}
+          innerRole="listbox"
-          </span>
+          itemRoles="option"
-        </ha-dialog-header>
+          .innerAriaLabel=${this.hass.localize(
-        <div slot="content">
+            "ui.panel.config.backup.dialogs.new.options"
-          <ha-md-list
+          )}
-            innerRole="listbox"
+          rootTabbable
-            itemRoles="option"
+        >
-            .innerAriaLabel=${this.hass.localize(
+          <ha-md-list-item
-              "ui.panel.config.backup.dialogs.new.options"
+            @click=${this._automatic}
-            )}
+            type="button"
-            rootTabbable
+            .disabled=${!this._params.config.create_backup.password}
-            dialogInitialFocus
           >
-            <ha-md-list-item
+            <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
-              @click=${this._automatic}
+            <span slot="headline">
-              type="button"
+              ${this.hass.localize(
-              .disabled=${!this._params.config.create_backup.password}
+                "ui.panel.config.backup.dialogs.new.automatic.title"
-            >
+              )}
-              <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
+            </span>
-              <span slot="headline">
+            <span slot="supporting-text">
-                ${this.hass.localize(
+              ${this.hass.localize(
-                  "ui.panel.config.backup.dialogs.new.automatic.title"
+                "ui.panel.config.backup.dialogs.new.automatic.description"
-                )}
+              )}
-              </span>
+            </span>
-              <span slot="supporting-text">
+            <ha-icon-next slot="end"></ha-icon-next>
-                ${this.hass.localize(
+          </ha-md-list-item>
-                  "ui.panel.config.backup.dialogs.new.automatic.description"
+          <ha-md-list-item @click=${this._manual} type="button">
-                )}
+            <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
-              </span>
+            <span slot="headline">
-              <ha-icon-next slot="end"></ha-icon-next>
+              ${this.hass.localize(
-            </ha-md-list-item>
+                "ui.panel.config.backup.dialogs.new.manual.title"
-            <ha-md-list-item @click=${this._manual} type="button">
+              )}
-              <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
+            </span>
-              <span slot="headline">
+            <span slot="supporting-text">
-                ${this.hass.localize(
+              ${this.hass.localize(
-                  "ui.panel.config.backup.dialogs.new.manual.title"
+                "ui.panel.config.backup.dialogs.new.manual.description"
-                )}
+              )}
-              </span>
+            </span>
-              <span slot="supporting-text">
+            <ha-icon-next slot="end"></ha-icon-next>
-                ${this.hass.localize(
+          </ha-md-list-item>
-                  "ui.panel.config.backup.dialogs.new.manual.description"
+        </ha-md-list>
-                )}
+      </ha-wa-dialog>
-              </span>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-          </ha-md-list>
-        </div>
-      </ha-md-dialog>
     `;
   }
 
@@ -128,24 +113,13 @@ class DialogNewBackup extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        ha-md-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
-          max-width: 500px;
-        }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-md-dialog {
-            max-width: none;
-          }
-          div[slot="content"] {
-            margin-top: 0;
-          }
         }
 
         ha-md-list {
           background: none;
         }
-        ha-md-list-item {
-        }
         ha-icon-next {
           width: 24px;
         }