Migrate new label dialog to ha-wa-dialog

src/panels/config/labels/dialog-label-detail.ts

@@ -5,9 +5,10 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-color-picker";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-switch";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-textarea";
 import "../../../components/ha-textfield";
 import type { LabelRegistryEntryMutableParams } from "../../../data/label_registry";
@@ -37,6 +38,8 @@ class DialogLabelDetail
 
   @state() private _submitting = false;
 
+  @state() private _open = false;
+
   public showDialog(params: LabelDetailDialogParams): void {
     this._params = params;
     this._error = undefined;
@@ -51,20 +54,17 @@ class DialogLabelDetail
       this._color = "";
       this._description = "";
     }
-    document.body.addEventListener("keydown", this._handleKeyPress);
+    this._open = true;
   }
 
-  private _handleKeyPress = (ev: KeyboardEvent) => {
-    if (ev.key === "Escape") {
-      ev.stopPropagation();
-    }
-  };
-
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    document.body.removeEventListener("keydown", this._handleKeyPress);
-    return true;
   }
 
   protected render() {
@@ -73,17 +73,13 @@ class DialogLabelDetail
     }
 
     return html`
-      <ha-dialog
+      <ha-wa-dialog
-        open
+        .hass=${this.hass}
-        @closed=${this.closeDialog}
+        .open=${this._open}
-        scrimClickAction
+        header-title=${this._params.entry
-        escapeKeyAction
+          ? this._params.entry.name || this._params.entry.label_id
-        .heading=${createCloseHeading(
+          : this.hass!.localize("ui.panel.config.labels.detail.new_label")}
-          this.hass,
+        @closed=${this._dialogClosed}
-          this._params.entry
-            ? this._params.entry.name || this._params.entry.label_id
-            : this.hass!.localize("ui.panel.config.labels.detail.new_label")
-        )}
       >
         <div>
           ${this._error
@@ -91,7 +87,7 @@ class DialogLabelDetail
             : ""}
           <div class="form">
             <ha-textfield
-              dialogInitialFocus
+              autofocus
               .value=${this._name}
               .configValue=${"name"}
               @input=${this._input}
@@ -131,29 +127,32 @@ class DialogLabelDetail
             ></ha-textarea>
           </div>
         </div>
-        ${this._params.entry && this._params.removeEntry
+
-          ? html`
+        <ha-dialog-footer slot="footer">
-              <ha-button
+          ${this._params.entry && this._params.removeEntry
-                slot="secondaryAction"
+            ? html`
-                variant="danger"
+                <ha-button
-                appearance="plain"
+                  slot="secondaryAction"
-                @click=${this._deleteEntry}
+                  variant="danger"
-                .disabled=${this._submitting}
+                  appearance="plain"
-              >
+                  @click=${this._deleteEntry}
-                ${this.hass!.localize("ui.panel.config.labels.detail.delete")}
+                  .disabled=${this._submitting}
-              </ha-button>
+                >
-            `
+                  ${this.hass!.localize("ui.panel.config.labels.detail.delete")}
-          : nothing}
+                </ha-button>
-        <ha-button
+              `
-          slot="primaryAction"
+            : nothing}
-          @click=${this._updateEntry}
+          <ha-button
-          .disabled=${this._submitting || !this._name}
+            slot="primaryAction"
-        >
+            @click=${this._updateEntry}
-          ${this._params.entry
+            .disabled=${this._submitting || !this._name}
-            ? this.hass!.localize("ui.panel.config.labels.detail.update")
+          >
-            : this.hass!.localize("ui.panel.config.labels.detail.create")}
+            ${this._params.entry
-        </ha-button>
+              ? this.hass!.localize("ui.panel.config.labels.detail.update")
-      </ha-dialog>
+              : this.hass!.localize("ui.panel.config.labels.detail.create")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }