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 {
+  protected render(): TemplateResult | typeof nothing {
-    return html`<ha-dialog
+    if (!this._params) {
-      @closed=${this.closeDialog}
+      return nothing;
-      scrimClickAction
+    }
-      escapeKeyAction
+
+    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")} />
+          <img
+            alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")}
+          />
         </div>
+        <ha-dialog-footer slot="footer">
           <ha-button
+            slot="secondaryAction"
             appearance="plain"
-        slot="primaryAction"
             @click=${this.closeDialog}
           >
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
           ${this._isTargetAspectRatio
-        ? html`<ha-button
+            ? html`
+                <ha-button
+                  slot="secondaryAction"
                   appearance="plain"
-            slot="primaryAction"
                   @click=${this._useOriginal}
                 >
                   ${this.hass.localize("ui.dialogs.image_cropper.use_original")}
-          </ha-button>`
+                </ha-button>
+              `
             : nothing}
-
           <ha-button slot="primaryAction" @click=${this._cropImage}>
             ${this.hass.localize("ui.dialogs.image_cropper.crop")}
           </ha-button>
-    </ha-dialog>`;
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
   }
 
   private _cropImage() {