Migrate siren advanced controls to wa-dialog (more info) (#29369)

* Migrate siren advanced controls to wa (more info)

* Fix footer

* Update src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -1,21 +1,17 @@
-import { mdiClose, mdiPlay, mdiStop } from "@mdi/js";
+import { mdiPlay, mdiStop } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, 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 { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-button";
 import "../../../../components/ha-control-button";
-import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
-import {
-  getMobileCloseToBottomAnimation,
-  getMobileOpenFromBottomAnimation,
-} from "../../../../components/ha-md-dialog";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-select";
 import "../../../../components/ha-textfield";
 import { SirenEntityFeature } from "../../../../data/siren";
@@ -28,23 +24,25 @@ class MoreInfoSirenAdvancedControls extends LitElement {
 
   @state() _stateObj?: HassEntity;
 
+  @state() private _open = false;
+
   @state() _tone?: string;
 
   @state() _volume?: number;
 
   @state() _duration?: number;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
   public showDialog({ stateObj }: { stateObj: HassEntity }) {
     this._stateObj = stateObj;
+    this._open = true;
   }
 
   public closeDialog(): void {
-    this._dialog?.close();
+    this._open = false;
   }
 
   private _dialogClosed(): void {
+    this._open = false;
     this._stateObj = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -65,27 +63,15 @@ class MoreInfoSirenAdvancedControls extends LitElement {
       SirenEntityFeature.DURATION
     );
     return html`
-      <ha-md-dialog
-        open
+      <ha-wa-dialog
+        .open=${this._open}
+        .hass=${this.hass}
+        header-title=${this.hass.localize(
+          "ui.components.siren.advanced_controls"
+        )}
         @closed=${this._dialogClosed}
-        aria-labelledby="dialog-light-color-favorite-title"
-        .getOpenAnimation=${getMobileOpenFromBottomAnimation}
-        .getCloseAnimation=${getMobileCloseToBottomAnimation}
       >
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            @click=${this.closeDialog}
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-          <span slot="title" id="dialog-light-color-favorite-title"
-            >${this.hass.localize(
-              "ui.components.siren.advanced_controls"
-            )}</span
-          >
-        </ha-dialog-header>
-        <div slot="content">
+        <div>
           <div class="options">
             ${supportsTones
               ? html`
@@ -153,12 +139,16 @@ class MoreInfoSirenAdvancedControls extends LitElement {
             </ha-control-button>
           </div>
         </div>
-        <div slot="actions">
-          <ha-button @click=${this.closeDialog}>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
             ${this.hass.localize("ui.common.close")}
           </ha-button>
-        </div>
-      </ha-md-dialog>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }