Migrate cropper dialog to wa

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -5,14 +5,20 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
-import "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
+import "../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import type { HassDialog } from "../make-dialog-manager";
 import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
 
 @customElement("image-cropper-dialog")
-export class HaImagecropperDialog extends LitElement {
+export class HaImagecropperDialog
+  extends LitElement
+  implements HassDialog<HaImageCropperDialogParams>
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: HaImageCropperDialogParams;
@@ -30,12 +36,17 @@ export class HaImagecropperDialog extends LitElement {
     this._open = true;
   }
 
-  public closeDialog() {
+  public closeDialog(): boolean {
     this._open = false;
-    this._params = undefined;
     this._cropper?.destroy();
     this._cropper = undefined;
     this._isTargetAspectRatio = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected updated(changedProperties: PropertyValues) {
@@ -78,41 +89,54 @@ export class HaImagecropperDialog extends LitElement {
     return Math.abs(targetWidth - imageData.naturalWidth) <= 1;
   }
 
-  protected render(): TemplateResult {
-    return html`<ha-dialog
-      @closed=${this.closeDialog}
-      scrimClickAction
-      escapeKeyAction
-      .open=${this._open}
-    >
-      <div
-        class="container ${classMap({
-          round: Boolean(this._params?.options.round),
-        })}"
-      >
-        <img alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")} />
-      </div>
-      <ha-button
-        appearance="plain"
-        slot="primaryAction"
-        @click=${this.closeDialog}
-      >
-        ${this.hass.localize("ui.common.cancel")}
-      </ha-button>
-      ${this._isTargetAspectRatio
-        ? html`<ha-button
-            appearance="plain"
-            slot="primaryAction"
-            @click=${this._useOriginal}
-          >
-            ${this.hass.localize("ui.dialogs.image_cropper.use_original")}
-          </ha-button>`
-        : nothing}
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._params) {
+      return nothing;
+    }
 
-      <ha-button slot="primaryAction" @click=${this._cropImage}>
-        ${this.hass.localize("ui.dialogs.image_cropper.crop")}
-      </ha-button>
-    </ha-dialog>`;
+    return html`
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.dialogs.image_cropper.crop_image"
+        )}
+        @closed=${this._dialogClosed}
+      >
+        <div
+          class="container ${classMap({
+            round: Boolean(this._params?.options.round),
+          })}"
+        >
+          <img
+            alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")}
+          />
+        </div>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          ${this._isTargetAspectRatio
+            ? html`
+                <ha-button
+                  slot="secondaryAction"
+                  appearance="plain"
+                  @click=${this._useOriginal}
+                >
+                  ${this.hass.localize("ui.dialogs.image_cropper.use_original")}
+                </ha-button>
+              `
+            : nothing}
+          <ha-button slot="primaryAction" @click=${this._cropImage}>
+            ${this.hass.localize("ui.dialogs.image_cropper.crop")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
   }
 
   private _cropImage() {