Migrate calendar dialog(s) to wa

src/panels/calendar/confirm-event-dialog-box.ts

@@ -1,9 +1,10 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
 import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
+import "../../components/ha-wa-dialog";
 import { RecurrenceRange } from "../../data/calendar";
 import type { HomeAssistant } from "../../types";
 import type { ConfirmEventDialogBoxParams } from "./show-confirm-event-dialog-box";
@@ -15,11 +16,21 @@ class ConfirmEventDialogBox extends LitElement {
 
   @state() private _params?: ConfirmEventDialogBoxParams;
 
+  @state() private _open = false;
+
+  @state()
+  private _closeState?: "canceled" | "confirmed" | "confirmedFuture";
+
   public async showDialog(params: ConfirmEventDialogBoxParams): Promise<void> {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog(): boolean {
+    if (!this._open) {
+      return true;
+    }
+    this._open = false;
     return true;
   }
 
@@ -29,80 +40,82 @@ class ConfirmEventDialogBox extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.title}
+        width="small"
         @closed=${this._dialogClosed}
-        defaultAction="ignore"
-        .heading=${this._params.title}
       >
         <div>
           <p>${this._params.text}</p>
         </div>
-        <ha-button
-          appearance="plain"
-          @click=${this._dismiss}
-          slot="secondaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._confirm}
-          dialogInitialFocus
-          variant="danger"
-        >
-          ${this._params.confirmText}
-        </ha-button>
-        ${this._params.confirmFutureText
-          ? html`
-              <ha-button
-                @click=${this._confirmFuture}
-                slot="primaryAction"
-                variant="danger"
-              >
-                ${this._params.confirmFutureText}
-              </ha-button>
-            `
-          : ""}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            @click=${this._dismiss}
+            slot="secondaryAction"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._confirm}
+            autofocus
+            variant="danger"
+          >
+            ${this._params.confirmText}
+          </ha-button>
+          ${this._params.confirmFutureText
+            ? html`
+                <ha-button
+                  @click=${this._confirmFuture}
+                  slot="primaryAction"
+                  variant="danger"
+                >
+                  ${this._params.confirmFutureText}
+                </ha-button>
+              `
+            : ""}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
   private _dismiss(): void {
-    if (this._params!.cancel) {
-      this._params!.cancel();
-    }
-    this._close();
+    this._closeState = "canceled";
+    this.closeDialog();
   }
 
   private _confirm(): void {
+    this._closeState = "confirmed";
     if (this._params!.confirm) {
       this._params!.confirm(RecurrenceRange.THISEVENT);
     }
-    this._close();
+    this.closeDialog();
   }
 
   private _confirmFuture(): void {
+    this._closeState = "confirmedFuture";
     if (this._params!.confirm) {
       this._params!.confirm(RecurrenceRange.THISANDFUTURE);
     }
-    this._close();
+    this.closeDialog();
   }
 
-  private _dialogClosed(ev) {
-    if (ev.detail.action === "ignore") {
-      return;
-    }
-    this._dismiss();
-  }
-
-  private _close(): void {
+  private _dialogClosed(): void {
     if (!this._params) {
       return;
     }
+    if (
+      this._closeState !== "confirmed" &&
+      this._closeState !== "confirmedFuture"
+    ) {
+      this._params.cancel?.();
+    }
     this._params = undefined;
+    this._open = false;
+    this._closeState = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -124,15 +137,10 @@ class ConfirmEventDialogBox extends LitElement {
     .secondary {
       color: var(--secondary-text-color);
     }
-    ha-dialog {
+    ha-wa-dialog {
       /* Place above other dialogs */
       --dialog-z-index: 104;
     }
-    @media all and (min-width: 600px) {
-      ha-dialog {
-        --mdc-dialog-min-width: 400px;
-      }
-    }
     ha-textfield {
       width: 100%;
     }

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -13,8 +13,9 @@ import "../../components/entity/state-info";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-date-input";
-import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
 import "../../components/ha-time-input";
+import "../../components/ha-wa-dialog";
 import type { CalendarEventMutableParams } from "../../data/calendar";
 import { deleteCalendarEvent } from "../../data/calendar";
 import { haStyleDialog } from "../../resources/styles";
@@ -32,6 +33,8 @@ class DialogCalendarEventDetail extends LitElement {
 
   @state() private _params?: CalendarEventDetailDialogParams;
 
+  @state() private _open = false;
+
   @state() private _calendarId?: string;
 
   @state() private _submitting = false;
@@ -44,6 +47,7 @@ class DialogCalendarEventDetail extends LitElement {
     params: CalendarEventDetailDialogParams
   ): Promise<void> {
     this._params = params;
+    this._open = true;
     if (params.entry) {
       const entry = params.entry!;
       this._data = entry;
@@ -52,9 +56,7 @@ class DialogCalendarEventDetail extends LitElement {
   }
 
   public closeDialog(): void {
-    this._calendarId = undefined;
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    this._open = false;
   }
 
   protected render() {
@@ -63,12 +65,11 @@ class DialogCalendarEventDetail extends LitElement {
     }
     const stateObj = this.hass.states[this._calendarId!];
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(this.hass, this._data!.summary)}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._data!.summary}
+        @closed=${this._dialogClosed}
       >
         <div class="content">
           ${this._error
@@ -100,32 +101,41 @@ class DialogCalendarEventDetail extends LitElement {
             ></state-info>
           </div>
         </div>
-        ${this._params.canDelete
-          ? html`
-              <ha-button
-                slot="secondaryAction"
-                variant="danger"
-                appearance="plain"
-                @click=${this._deleteEvent}
+        <ha-dialog-footer slot="footer">
+          ${this._params.canDelete
+            ? html`
+                <ha-button
+                  slot="secondaryAction"
+                  variant="danger"
+                  appearance="plain"
+                  @click=${this._deleteEvent}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass.localize("ui.components.calendar.event.delete")}
+                </ha-button>
+              `
+            : ""}
+          ${this._params.canEdit
+            ? html`<ha-button
+                slot="primaryAction"
+                @click=${this._editEvent}
                 .disabled=${this._submitting}
               >
-                ${this.hass.localize("ui.components.calendar.event.delete")}
-              </ha-button>
-            `
-          : ""}
-        ${this._params.canEdit
-          ? html`<ha-button
-              slot="primaryAction"
-              @click=${this._editEvent}
-              .disabled=${this._submitting}
-            >
-              ${this.hass.localize("ui.components.calendar.event.edit")}
-            </ha-button>`
-          : ""}
-      </ha-dialog>
+                ${this.hass.localize("ui.components.calendar.event.edit")}
+              </ha-button>`
+            : ""}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
+  private _dialogClosed(): void {
+    this._calendarId = undefined;
+    this._params = undefined;
+    this._open = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   private _renderRRuleAsText(value: string) {
     if (!value) {
       return "";

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -19,12 +19,13 @@ import "../../components/entity/ha-entity-picker";
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-date-input";
-import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
 import "../../components/ha-textarea";
 import "../../components/ha-textfield";
 import "../../components/ha-time-input";
+import "../../components/ha-wa-dialog";
 import type { CalendarEventMutableParams } from "../../data/calendar";
 import {
   CalendarEntityFeature,
@@ -57,6 +58,8 @@ class DialogCalendarEventEditor extends LitElement {
 
   @state() private _params?: CalendarEventEditDialogParams;
 
+  @state() private _open = false;
+
   @state() private _calendarId?: string;
 
   @state() private _summary = "";
@@ -87,6 +90,7 @@ class DialogCalendarEventEditor extends LitElement {
     this._error = undefined;
     this._info = undefined;
     this._params = params;
+    this._open = true;
     this._calendarId =
       params.calendarId ||
       Object.values(this.hass.states).find(
@@ -129,19 +133,7 @@ class DialogCalendarEventEditor extends LitElement {
   }
 
   public closeDialog(): void {
-    if (!this._params) {
-      return;
-    }
-    this._calendarId = undefined;
-    this._params = undefined;
-    this._dtstart = undefined;
-    this._dtend = undefined;
-    this._summary = "";
-    this._description = "";
-    this._location = "";
-    this._hasLocation = false;
-    this._rrule = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    this._open = false;
   }
 
   protected render() {
@@ -156,17 +148,14 @@ class DialogCalendarEventEditor extends LitElement {
     );
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            `ui.components.calendar.event.${isCreate ? "add" : "edit"}`
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          `ui.components.calendar.event.${isCreate ? "add" : "edit"}`
         )}
+        width="large"
+        @closed=${this._dialogClosed}
       >
         <div class="content">
           ${this._error
@@ -189,7 +178,7 @@ class DialogCalendarEventEditor extends LitElement {
             required
             @input=${this._handleSummaryChanged}
             .validationMessage=${this.hass.localize("ui.common.error_required")}
-            dialogInitialFocus
+            autofocus
           ></ha-textfield>
           <ha-textfield
             class="location"
@@ -283,44 +272,63 @@ class DialogCalendarEventEditor extends LitElement {
           >
           </ha-recurrence-rule-editor>
         </div>
-        ${isCreate
-          ? html`
-              <ha-button
-                slot="primaryAction"
-                @click=${this._createEvent}
-                .disabled=${this._submitting}
-              >
-                ${this.hass.localize("ui.components.calendar.event.add")}
-              </ha-button>
-            `
-          : html`
-              <ha-button
-                slot="primaryAction"
-                @click=${this._saveEvent}
-                .disabled=${this._submitting}
-              >
-                ${this.hass.localize("ui.components.calendar.event.save")}
-              </ha-button>
-              ${this._params.canDelete
-                ? html`
-                    <ha-button
-                      slot="secondaryAction"
-                      appearance="plain"
-                      variant="danger"
-                      @click=${this._deleteEvent}
-                      .disabled=${this._submitting}
-                    >
-                      ${this.hass.localize(
-                        "ui.components.calendar.event.delete"
-                      )}
-                    </ha-button>
-                  `
-                : ""}
-            `}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${isCreate
+            ? html`
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._createEvent}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass.localize("ui.components.calendar.event.add")}
+                </ha-button>
+              `
+            : html`
+                ${this._params.canDelete
+                  ? html`
+                      <ha-button
+                        slot="secondaryAction"
+                        appearance="plain"
+                        variant="danger"
+                        @click=${this._deleteEvent}
+                        .disabled=${this._submitting}
+                      >
+                        ${this.hass.localize(
+                          "ui.components.calendar.event.delete"
+                        )}
+                      </ha-button>
+                    `
+                  : ""}
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._saveEvent}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass.localize("ui.components.calendar.event.save")}
+                </ha-button>
+              `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
+  private _dialogClosed(): void {
+    if (!this._params) {
+      return;
+    }
+    this._calendarId = undefined;
+    this._params = undefined;
+    this._dtstart = undefined;
+    this._dtend = undefined;
+    this._summary = "";
+    this._description = "";
+    this._location = "";
+    this._hasLocation = false;
+    this._rrule = undefined;
+    this._open = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   private _isEditableCalendar = (entityStateObj: HassEntity) =>
     supportsFeature(entityStateObj, CalendarEntityFeature.CREATE_EVENT);
 
@@ -609,12 +617,6 @@ class DialogCalendarEventEditor extends LitElement {
     return [
       haStyleDialog,
       css`
-        @media all and (min-width: 450px) and (min-height: 500px) {
-          ha-dialog {
-            --mdc-dialog-min-width: min(600px, 95vw);
-            --mdc-dialog-max-width: min(600px, 95vw);
-          }
-        }
         state-info {
           line-height: 40px;
         }