Migrate enter code dialog to wa (#29592)

* Move enter code dialog migration to dedicated branch

* Fix

* Make small

* Small

src/dialogs/enter-code/dialog-enter-code.ts

@@ -5,8 +5,9 @@ import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
 import "../../components/ha-control-button";
-import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
 import "../../components/ha-textfield";
+import "../../components/ha-wa-dialog";
 import type { HaTextField } from "../../components/ha-textfield";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
@@ -36,34 +37,51 @@ export class DialogEnterCode
 
   @state() private _dialogParams?: EnterCodeDialogParams;
 
+  @state() private _open = false;
+
   @query("#code") private _input?: HaTextField;
 
   @state() private _showClearButton = false;
 
   @state() private _narrow = false;
 
+  private _closeAction?: "submit" | "cancel";
+
   public async showDialog(dialogParams: EnterCodeDialogParams): Promise<void> {
     this._dialogParams = dialogParams;
+    this._open = true;
+    this._showClearButton = false;
+    this._closeAction = undefined;
     this._narrow = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
     await this.updateComplete;
   }
 
-  public closeDialog() {
+  public closeDialog(): boolean {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    if (!this._closeAction) {
+      this._dialogParams?.cancel?.();
+    }
     this._dialogParams = undefined;
     this._showClearButton = false;
+    this._closeAction = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   private _submit(): void {
     this._dialogParams?.submit?.(this._input?.value ?? "");
+    this._closeAction = "submit";
     this.closeDialog();
   }
 
   private _cancel(): void {
     this._dialogParams?.cancel?.();
+    this._closeAction = "cancel";
     this.closeDialog();
   }
 
@@ -93,15 +111,17 @@ export class DialogEnterCode
 
     if (isText) {
       return html`
-        <ha-dialog
-          open
-          @closed=${this._cancel}
-          .heading=${this._dialogParams.title ??
+        <ha-wa-dialog
+          .hass=${this.hass}
+          .open=${this._open}
+          header-title=${this._dialogParams.title ??
           this.hass.localize("ui.dialogs.enter_code.title")}
+          width="small"
+          @closed=${this._dialogClosed}
         >
           <ha-textfield
             class="input"
-            ?dialogInitialFocus=${!this._narrow}
+            ?autofocus=${!this._narrow}
             id="code"
             .label=${this.hass.localize("ui.dialogs.enter_code.input_label")}
             type="password"
@@ -110,31 +130,31 @@ export class DialogEnterCode
             pattern=${ifDefined(this._dialogParams.codePattern)}
             inputmode="text"
           ></ha-textfield>
-          <ha-button
-            appearance="plain"
-            slot="secondaryAction"
-            dialogAction="cancel"
-          >
-            ${this._dialogParams.cancelText ??
-            this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button @click=${this._submit} slot="primaryAction">
-            ${this._dialogParams.submitText ??
-            this.hass.localize("ui.common.submit")}
-          </ha-button>
-        </ha-dialog>
+          <ha-dialog-footer slot="footer">
+            <ha-button
+              slot="secondaryAction"
+              appearance="plain"
+              @click=${this._cancel}
+            >
+              ${this._dialogParams.cancelText ??
+              this.hass.localize("ui.common.cancel")}
+            </ha-button>
+            <ha-button slot="primaryAction" @click=${this._submit}>
+              ${this._dialogParams.submitText ??
+              this.hass.localize("ui.common.submit")}
+            </ha-button>
+          </ha-dialog-footer>
+        </ha-wa-dialog>
       `;
     }
 
     return html`
-      <ha-dialog
-        open
-        .heading=${createCloseHeading(
-          this.hass,
-          this._dialogParams.title ?? "Enter code"
-        )}
-        @closed=${this._cancel}
-        hideActions
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._dialogParams.title ?? "Enter code"}
+        width="small"
+        @closed=${this._dialogClosed}
       >
         <div class="container">
           <ha-textfield
@@ -143,7 +163,7 @@ export class DialogEnterCode
             .label=${this.hass.localize("ui.dialogs.enter_code.input_label")}
             type="password"
             inputmode="numeric"
-            ?dialogInitialFocus=${!this._narrow}
+            ?autofocus=${!this._narrow}
           ></ha-textfield>
           <div class="keypad">
             ${BUTTONS.map((value) =>
@@ -183,18 +203,17 @@ export class DialogEnterCode
             )}
           </div>
         </div>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
   static styles = css`
-    ha-dialog {
+    ha-wa-dialog {
       /* Place above other dialogs */
       --dialog-z-index: 104;
     }
     ha-textfield {
       width: 100%;
-      max-width: 300px;
       margin: auto;
     }
     .container {