Use ha-dialog for dialog-area-registry-detail (#7508)

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -10,7 +10,8 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import "../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-dialog";
 import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@@ -37,6 +38,12 @@ class DialogAreaDetail extends LitElement {
     await this.updateComplete;
   }
 
+  public closeDialog(): void {
+    this._error = "";
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
@@ -44,17 +51,14 @@ class DialogAreaDetail extends LitElement {
     const entry = this._params.entry;
     const nameInvalid = !this._isNameValid();
     return html`
-      <ha-paper-dialog
+      <ha-dialog
-        with-backdrop
+        open
-        opened
+        @closed=${this.closeDialog}
-        @opened-changed="${this._openedChanged}"
+        .heading=${entry
+          ? entry.name
+          : this.hass.localize("ui.panel.config.areas.editor.default_name")}
       >
-        <h2>
+        <div>
-          ${entry
-            ? entry.name
-            : this.hass.localize("ui.panel.config.areas.editor.default_name")}
-        </h2>
-        <paper-dialog-scrollable>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
           <div class="form">
             ${entry
@@ -79,29 +83,29 @@ class DialogAreaDetail extends LitElement {
               .invalid=${nameInvalid}
             ></paper-input>
           </div>
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          ${entry
-            ? html`
-                <mwc-button
-                  class="warning"
-                  @click="${this._deleteEntry}"
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass.localize("ui.panel.config.areas.editor.delete")}
-                </mwc-button>
-              `
-            : html``}
-          <mwc-button
-            @click="${this._updateEntry}"
-            .disabled=${nameInvalid || this._submitting}
-          >
-            ${entry
-              ? this.hass.localize("ui.panel.config.areas.editor.update")
-              : this.hass.localize("ui.panel.config.areas.editor.create")}
-          </mwc-button>
         </div>
-      </ha-paper-dialog>
+        ${entry
+          ? html`
+              <mwc-button
+                slot="secondaryAction"
+                class="warning"
+                @click="${this._deleteEntry}"
+                .disabled=${this._submitting}
+              >
+                ${this.hass.localize("ui.panel.config.areas.editor.delete")}
+              </mwc-button>
+            `
+          : html``}
+        <mwc-button
+          slot="primaryAction"
+          @click="${this._updateEntry}"
+          .disabled=${nameInvalid || this._submitting}
+        >
+          ${entry
+            ? this.hass.localize("ui.panel.config.areas.editor.update")
+            : this.hass.localize("ui.panel.config.areas.editor.create")}
+        </mwc-button>
+      </ha-dialog>
     `;
   }
 
@@ -152,12 +156,6 @@ class DialogAreaDetail extends LitElement {
     }
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    if (!(ev.detail as any).value) {
-      this._params = undefined;
-    }
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,
@@ -165,9 +163,6 @@ class DialogAreaDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        mwc-button.warning {
-          margin-right: auto;
-        }
         .error {
           color: var(--error-color);
         }