@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.js

@@ -11,29 +11,16 @@ import { schedulerEventEditorStyles } from "./scheduler-event-editor.styles.js";
 import { EventCreateEvent } from "../../../events/event-create.event.js";
 import { EventUpdateEvent } from "../../../events/event-update.event.js";
 import { EventDeleteEvent } from "../../../events/event-delete.event.js";
+import { EventCancelEvent } from "../../../events/event-cancel.event.js";
+import { EditorStateChangeEvent } from "../../../events/editor-state-change.event.js";
 import { GuestInviteEvent } from "../../../events/event-guest-invite.event.js";
-import { addHours, endOfDay, startOfDay } from "../../../utils/date.utils.js";
-import { GUEST_STATUS_ICON, GUEST_STATUS_SEMANTIC_STATE, } from "../shared/scheduler.utils.js";
+import { addDays, addHours, endOfDay, startOfDay, } from "../../../utils/date.utils.js";
+import { EVENT_COLOR_PRESETS, GUEST_STATUS_ICON, GUEST_STATUS_SEMANTIC_STATE, toEventColorHex, } from "../shared/scheduler.utils.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the scheduler event editor component.
  */
 export const EunomiaSchedulerEventEditorTagName = "eun-scheduler-event-editor";
-/**
- * The six preset colors offered by the color picker's `option` swatches,
- * keyed by the same names {@link colorLabels} uses for their accessible
- * labels. Hex values match `scheduler-event.styles.ts`'s own tuned `500`
- * shade for each preset name, so picking one here renders identically to
- * setting `color` to the bare preset name directly (e.g. `"blue"`).
- */
-const COLOR_PRESETS = [
-    { name: "red", value: "#f14959" },
-    { name: "purple", value: "#9562e3" },
-    { name: "yellow", value: "#f0f050" },
-    { name: "blue", value: "#3bb3b9" },
-    { name: "green", value: "#49f15f" },
-    { name: "pink", value: "#d05df3" },
-];
 const PRIORITIES = [
     "low",
     "medium",
@@ -80,13 +67,13 @@ const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  * @prop {EunomiaSchedulerEvent | null} [event] - The event being edited. Unset, or null, puts the form in create mode instead, seeded from initialStart and initialEnd
  * @prop {Date} [initialStart] - The start time to seed a new event with, in create mode. Defaults to the next hour
  * @prop {Date} [initialEnd] - The end time to seed a new event with, in create mode. Defaults to one hour after initialStart
- * @prop {string} [locale] - The locale used by the nested date and time fields. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used by the nested date and time fields. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {boolean} [hideActions=false] - Hides the built-in save, cancel, and delete footer, for a host that drives the form itself
  * @prop {string} [titleLabel] - The label of the title field. Defaults to the localized string for the current locale (English: "Title")
  * @prop {string} [descriptionLabel] - The label of the description field. Defaults to the localized string for the current locale (English: "Description")
  * @prop {string} [allDayLabel] - The label of the all day checkbox. Defaults to the localized string for the current locale (English: "All day")
  * @prop {string} [dateLabel] - The label of the date field. Defaults to the localized string for the current locale (English: "Date")
- * @prop {string} [endDateLabel] - The label of the end date field, shown in place of the start and end time fields while all day is checked. Defaults to the localized string for the current locale (English: "End date")
+ * @prop {string} [endDateLabel] - The label of the end date field. Defaults to the localized string for the current locale (English: "End date")
  * @prop {string} [startTimeLabel] - The label of the start time field. Defaults to the localized string for the current locale (English: "Start time")
  * @prop {string} [endTimeLabel] - The label of the end time field. Defaults to the localized string for the current locale (English: "End time")
  * @prop {string} [locationLabel] - The label of the location field. Defaults to the localized string for the current locale (English: "Location")
@@ -95,13 +82,18 @@ const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  * @prop {string} [colorLabel] - The label of the color swatch picker. Defaults to the localized string for the current locale (English: "Color")
  * @prop {string} [guestsLabel] - The label of the guest-sharing field. Defaults to the localized string for the current locale (English: "Guests")
  * @prop {string} [addGuestLabel] - The accessible label of the guest email input's add button. Defaults to the localized string for the current locale (English: "Add guest")
+ * @prop {string} [rangeErrorLabel] - The error shown under the time fields when the end isn't after the start. Defaults to the localized string for the current locale (English: "The end must be after the start")
+ * @prop {string} [guestErrorLabel] - The error shown under the guest email field when the entered address is malformed. Defaults to the localized string for the current locale (English: "Enter a valid email address")
  * @prop {string} [removeGuestLabel] - A prefix combined with the guest's email to build each guest chip's delete button accessible name, such as "Remove alice@example.com". Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [saveLabel] - The label of the built-in save button. Defaults to the localized string for the current locale (English: "Save")
- * @prop {string} [cancelLabel] - The label of the built-in cancel button. Resets the form to its last-seeded values. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [cancelLabel] - The label of the built-in cancel button. Resets the form to its last-seeded values and fires the cancel event. Defaults to the localized string for the current locale (English: "Cancel")
  * @prop {string} [deleteLabel] - The label of the built-in delete button. Only shown while editing an existing event. Defaults to the localized string for the current locale (English: "Delete")
+ * @prop {string} [deleteConfirmLabel] - The question the built-in footer asks before deleting. Defaults to the localized string for the current locale (English: "Delete this event?")
  * @fires {EventCreateEvent} euneventcreate - Fired on a valid save, in create mode
- * @fires {EventUpdateEvent} euneventupdate - Fired on a valid save, in edit mode
+ * @fires {EventUpdateEvent} euneventupdate - Fired on a valid save, in edit mode, unless nothing changed
  * @fires {EventDeleteEvent} euneventdelete - Fired when the built-in delete button is activated
+ * @fires {EventCancelEvent} euneventcancel - Fired when the built-in cancel button, or requestCancel, resets the form
+ * @fires {EditorStateChangeEvent} euneditorstatechange - Fired whenever dirty or valid changes value. Not fired for the initial render
  * @fires {GuestInviteEvent} eunguestinvite - Fired whenever a guest email is added, so a consumer can actually send the share invite
  * @cssprop [--scheduler-event-editor-gap] - Sets the gap between fields
  * @element eun-scheduler-event-editor
@@ -114,6 +106,12 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
          * @default false
          */
         this.hideActions = false;
+        /**
+         * Whether the built-in Delete was pressed once and now waits for its
+         * confirmation. Reset whenever the form is seeded.
+         * @internal
+         */
+        this.confirmingDelete = false;
         /** @internal */
         this.formTitle = "";
         /** @internal */
@@ -127,9 +125,9 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
         /** @internal */
         this.formDate = startOfDay(new Date());
         /**
-         * The end date of an all-day/multi-day span, only shown/used while
-         * {@link formAllDay} is set — a single-day all-day event has this equal
-         * to {@link formDate}.
+         * The end date of the event — a single-day event has this equal to
+         * {@link formDate}. Combined with {@link formEnd}'s time outside
+         * all-day mode.
          * @internal
          */
         this.formEndDate = startOfDay(new Date());
@@ -148,11 +146,10 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
          */
         this.formPriority = "medium";
         /**
-         * Defaults to the `blue` preset's own hex value, matching
-         * {@link COLOR_PRESETS}, rather than the bare keyword `"blue"` : both
-         * render identically (see `scheduler-event.styles.ts`), but the hex form
-         * is what lets the `eun-color-picker` rendered in {@link render} below
-         * show the matching preset swatch as picked in its own radiogroup.
+         * Always held as hex (see `toEventColorHex`), seeded from a preset name
+         * or hex alike, so the `eun-color-picker` rendered in {@link render}
+         * below shows the matching preset swatch as picked, and saved events
+         * always carry hex. Defaults to the `blue` preset's hex.
          * @internal
          */
         this.formColor = "#3bb3b9";
@@ -181,13 +178,38 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
          * @internal
          */
         this.seedSnapshot = "";
+        /**
+         * The `dirty`/`valid` pair last reported by `EditorStateChangeEvent`,
+         * `null` until the first update records it without dispatching.
+         * @internal
+         */
+        this.reportedState = null;
         /** @private */
         this.handleSaveClick = () => {
             this.requestSave();
         };
         /** @private */
         this.handleCancelClick = () => {
-            this.seedForm();
+            this.requestCancel();
+        };
+        /**
+         * Swaps the built-in footer for the delete confirmation, moving focus
+         * onto its Cancel button since the pressed Delete button goes away.
+         * @private
+         */
+        this.handleDeleteClick = () => {
+            this.confirmingDelete = true;
+            void this.updateComplete.then(() => this.focusAction("#confirm-cancel"));
+        };
+        /** @private */
+        this.handleConfirmDeleteClick = () => {
+            this.confirmingDelete = false;
+            this.requestDelete();
+        };
+        /** @private */
+        this.handleCancelDeleteClick = () => {
+            this.confirmingDelete = false;
+            void this.updateComplete.then(() => this.focusAction("#delete"));
         };
         /**
          * Reads the priority picker's new selection back into {@link formPriority}
@@ -272,6 +294,22 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
         if (formFields.some((field) => changed.has(field))) {
             this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
         }
+        this.reportStateChange();
+    }
+    /**
+     * Dispatches `EditorStateChangeEvent` when {@link dirty} or
+     * {@link valid} differs from what was last reported. The first call only
+     * records the initial pair.
+     * @private
+     */
+    reportStateChange() {
+        const state = { dirty: this.dirty, valid: this.valid };
+        const previous = this.reportedState;
+        this.reportedState = state;
+        if (previous &&
+            (previous.dirty !== state.dirty || previous.valid !== state.valid)) {
+            this.dispatchEvent(new EditorStateChangeEvent(state.dirty, state.valid));
+        }
     }
     /**
      * Seeds every form field from {@link event} (edit mode) or
@@ -292,7 +330,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             this.formLocation = source.location ?? "";
             this.formNotes = source.notes ?? "";
             this.formPriority = source.priority ?? "medium";
-            this.formColor = source.color;
+            this.formColor = toEventColorHex(source.color);
             this.formGuests = source.guests
                 ? source.guests.map((g) => ({ ...g }))
                 : [];
@@ -310,12 +348,13 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             this.formLocation = "";
             this.formNotes = "";
             this.formPriority = "medium";
-            this.formColor = "blue";
+            this.formColor = toEventColorHex("blue");
             this.formGuests = [];
         }
         this.guestInputValue = "";
         this.guestInputError = false;
         this.showErrors = false;
+        this.confirmingDelete = false;
         this.seedSnapshot = this.snapshot();
     }
     /** @private */
@@ -354,8 +393,9 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
      * Composes the current form fields into the final `start`/`end` instants
      * — in all-day mode, {@link formDate}/{@link formEndDate} at their own
      * day boundaries (no time-of-day involved) ; otherwise
-     * {@link formDate}'s calendar day with {@link formStart}/{@link formEnd}'s
-     * hour/minute, as before.
+     * {@link formDate}/{@link formEndDate}'s calendar days with
+     * {@link formStart}/{@link formEnd}'s hour/minute. Never rolls the end
+     * over to the next day : an end before the start stays invalid.
      * @private
      */
     composeStartEnd() {
@@ -370,11 +410,8 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
         }
         const start = new Date(this.formDate);
         start.setHours(this.formStart.getHours(), this.formStart.getMinutes(), 0, 0);
-        const end = new Date(this.formDate);
+        const end = new Date(this.formEndDate);
         end.setHours(this.formEnd.getHours(), this.formEnd.getMinutes(), 0, 0);
-        if (end.getTime() <= start.getTime()) {
-            end.setDate(end.getDate() + 1);
-        }
         return { start, end };
     }
     /**
@@ -392,7 +429,8 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
      * Validates the form and, if valid, dispatches
      * `EventCreateEvent`/`EventUpdateEvent` as appropriate. Otherwise turns
      * on inline error messages and returns `false` without dispatching
-     * anything.
+     * anything. Editing an event without changing anything succeeds without
+     * dispatching either, so the consumer's data is left untouched.
      *
      * @returns whether the save succeeded.
      */
@@ -401,6 +439,9 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             this.showErrors = true;
             return false;
         }
+        if (this.event && !this.dirty) {
+            return true;
+        }
         const range = this.composeStartEnd();
         const event = {
             id: this.event?.id ?? crypto.randomUUID(),
@@ -411,7 +452,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             end: range.end,
             location: this.formLocation || undefined,
             notes: this.formNotes || undefined,
-            color: this.formColor,
+            color: this.savedColor(),
             priority: this.formPriority,
             guests: this.formGuests.length ? this.formGuests : undefined,
         };
@@ -420,6 +461,34 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
         this.seedSnapshot = this.snapshot();
         return true;
     }
+    /**
+     * The color to save : the edited event's own value, in whatever form it
+     * was given (a preset name, say), while the picked swatch still matches
+     * it, {@link formColor}'s hex otherwise.
+     * @private
+     */
+    savedColor() {
+        const original = this.event?.color;
+        return original && toEventColorHex(original) === this.formColor
+            ? original
+            : this.formColor;
+    }
+    /**
+     * Whether the composed end falls at or before the start.
+     * @private
+     */
+    get rangeInvalid() {
+        const range = this.composeStartEnd();
+        return !!range && range.end.getTime() <= range.start.getTime();
+    }
+    /**
+     * Resets the form to its last-seeded values and dispatches
+     * `EventCancelEvent`, for a host modal or drawer to close itself.
+     */
+    requestCancel() {
+        this.seedForm();
+        this.dispatchEvent(new EventCancelEvent());
+    }
     /**
      * Dispatches `EventDeleteEvent` for the event currently being edited. A
      * no-op in "create" mode (there's nothing to delete yet).
@@ -429,6 +498,20 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             this.dispatchEvent(new EventDeleteEvent(this.event.id));
         }
     }
+    /** @private */
+    focusAction(selector) {
+        this.shadowRoot?.querySelector(selector)?.focus();
+    }
+    /**
+     * Moves {@link formDate} to `date`, shifting {@link formEndDate} by the
+     * same number of days so the event keeps its length.
+     * @private
+     */
+    moveStartDate(date) {
+        const delta = Math.round((startOfDay(date).getTime() - this.formDate.getTime()) / 86_400_000);
+        this.formDate = startOfDay(date);
+        this.formEndDate = addDays(this.formEndDate, delta);
+    }
     /**
      * Validates {@link guestInputValue} and, if it's a well-formed email not
      * already in {@link formGuests}, adds it as a new `pending` guest and
@@ -477,9 +560,11 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             ? html `<span
               role="alert"
               style="color: var(--eun-color-critical-100, #aa0014); font-size: 12px;"
-              >${this.titleLabel ?? this.dictionary.schedulerEventEditor.title}
-              ${this.requiredLabel ??
-                this.dictionary.schedulerEventEditor.required}</span
+              >${this.titleLabel === undefined &&
+                this.requiredLabel === undefined
+                ? this.dictionary.schedulerEventEditor.titleRequired
+                : `${this.titleLabel ?? this.dictionary.schedulerEventEditor.title} ${this.requiredLabel ??
+                    this.dictionary.schedulerEventEditor.required}`}</span
             >`
             : nothing}
 
@@ -501,52 +586,37 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
         }}
         ></eun-checkbox>
 
+        <div class="row">
+          <eun-date-picker
+            ?required=${true}
+            label=${this.dateLabel ?? this.dictionary.schedulerEventEditor.date}
+            .value=${this.formDate}
+            locale=${ifDefined(this.locale)}
+            @eunchange=${(e) => {
+            const value = e.target.value;
+            if (value) {
+                this.moveStartDate(value);
+            }
+        }}
+          ></eun-date-picker>
+          <eun-date-picker
+            ?required=${true}
+            label=${this.endDateLabel ??
+            this.dictionary.schedulerEventEditor.endDate}
+            .value=${this.formEndDate}
+            locale=${ifDefined(this.locale)}
+            @eunchange=${(e) => {
+            const value = e.target.value;
+            if (value) {
+                this.formEndDate = startOfDay(value);
+            }
+        }}
+          ></eun-date-picker>
+        </div>
+
         ${this.formAllDay
-            ? html `
-              <div class="row">
-                <eun-date-picker
-                  ?required=${true}
-                  label=${this.dateLabel ??
-                this.dictionary.schedulerEventEditor.date}
-                  .value=${this.formDate}
-                  locale=${ifDefined(this.locale)}
-                  @eunchange=${(e) => {
-                const value = e.target.value;
-                if (value) {
-                    this.formDate = startOfDay(value);
-                }
-            }}
-                ></eun-date-picker>
-                <eun-date-picker
-                  ?required=${true}
-                  label=${this.endDateLabel ??
-                this.dictionary.schedulerEventEditor.endDate}
-                  .value=${this.formEndDate}
-                  locale=${ifDefined(this.locale)}
-                  @eunchange=${(e) => {
-                const value = e.target.value;
-                if (value) {
-                    this.formEndDate = startOfDay(value);
-                }
-            }}
-                ></eun-date-picker>
-              </div>
-            `
+            ? nothing
             : html `
-              <eun-date-picker
-                ?required=${true}
-                label=${this.dateLabel ??
-                this.dictionary.schedulerEventEditor.date}
-                .value=${this.formDate}
-                locale=${ifDefined(this.locale)}
-                @eunchange=${(e) => {
-                const value = e.target.value;
-                if (value) {
-                    this.formDate = startOfDay(value);
-                }
-            }}
-              ></eun-date-picker>
-
               <div class="row">
                 <eun-time-picker
                   ?required=${true}
@@ -572,6 +642,12 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
                 ></eun-time-picker>
               </div>
             `}
+        ${this.rangeInvalid
+            ? html `<span role="alert" id="range-error" class="field-error"
+              >${this.rangeErrorLabel ??
+                this.dictionary.schedulerEventEditor.endBeforeStart}</span
+            >`
+            : nothing}
 
         <eun-input
           label=${this.locationLabel ??
@@ -612,9 +688,9 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             </eun-button>
           </div>
           ${this.guestInputError
-            ? html `<span role="alert" class="guest-error"
-                >${this.guestsLabel ??
-                this.dictionary.schedulerEventEditor.guests}</span
+            ? html `<span role="alert" class="field-error"
+                >${this.guestErrorLabel ??
+                this.dictionary.validation.typeMismatch.email}</span
               >`
             : nothing}
           ${this.formGuests.length
@@ -628,6 +704,8 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
                       >
                         <eun-chip
                           appearance="outline"
+                          rounded
+                          removable
                           icon=${GUEST_STATUS_ICON[guest.status]}
                           .severity=${GUEST_STATUS_SEMANTIC_STATE[guest.status]}
                           .removeLabel=${this.removeGuestLabel ??
@@ -684,32 +762,79 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
             this.formColor = e.target.value;
         }}
         >
-          ${COLOR_PRESETS.map((preset) => html `
-              <option value=${preset.value}>${colorLabels[preset.name]}</option>
+          ${EVENT_COLOR_PRESETS.map((preset) => html `
+              <option value=${preset.hex}>${colorLabels[preset.name]}</option>
             `)}
         </eun-color-picker>
       </div>
 
-      ${this.hideActions
-            ? nothing
-            : html `
-            <div id="actions">
-              ${this.event
-                ? html `
-                    <eun-button color="critical" @click=${this.requestDelete}>
-                      ${this.deleteLabel ?? this.dictionary.common.delete}
-                    </eun-button>
-                  `
-                : nothing}
-              <span class="spacer"></span>
-              <eun-button appearance="ghost" @click=${this.handleCancelClick}>
-                ${this.cancelLabel ?? this.dictionary.common.cancel}
-              </eun-button>
-              <eun-button color="primary" @click=${this.handleSaveClick}>
-                ${this.saveLabel ?? this.dictionary.common.save}
-              </eun-button>
-            </div>
-          `}
+      ${this.renderActions()}
+    `;
+    }
+    /**
+     * Renders the built-in footer : Delete/Cancel/Save, or the delete
+     * confirmation that replaces them once Delete was pressed. Save stays
+     * disabled while an edited event has no changes. Nothing with
+     * {@link hideActions}.
+     * @private
+     */
+    renderActions() {
+        if (this.hideActions) {
+            return nothing;
+        }
+        const deleteLabel = this.deleteLabel ?? this.dictionary.common.delete;
+        const cancelLabel = this.cancelLabel ?? this.dictionary.common.cancel;
+        if (this.confirmingDelete) {
+            return html `
+        <div
+          id="actions"
+          class="confirm"
+          role="group"
+          aria-labelledby="confirm-text"
+        >
+          <span id="confirm-text"
+            >${this.deleteConfirmLabel ??
+                this.dictionary.scheduler.deleteConfirm}</span
+          >
+          <eun-button
+            id="confirm-cancel"
+            appearance="ghost"
+            @click=${this.handleCancelDeleteClick}
+            >${cancelLabel}</eun-button
+          >
+          <eun-button
+            id="confirm-delete"
+            color="critical"
+            @click=${this.handleConfirmDeleteClick}
+            >${deleteLabel}</eun-button
+          >
+        </div>
+      `;
+        }
+        return html `
+      <div id="actions">
+        ${this.event
+            ? html `
+              <eun-button
+                id="delete"
+                color="critical"
+                @click=${this.handleDeleteClick}
+                >${deleteLabel}</eun-button
+              >
+            `
+            : nothing}
+        <span class="spacer"></span>
+        <eun-button appearance="ghost" @click=${this.handleCancelClick}
+          >${cancelLabel}</eun-button
+        >
+        <eun-button
+          id="save"
+          color="primary"
+          ?disabled=${!!this.event && !this.dirty}
+          @click=${this.handleSaveClick}
+          >${this.saveLabel ?? this.dictionary.common.save}</eun-button
+        >
+      </div>
     `;
     }
 };
@@ -781,6 +906,12 @@ __decorate([
 __decorate([
     property({ attribute: "add-guest-label" })
 ], EunomiaSchedulerEventEditor.prototype, "addGuestLabel", void 0);
+__decorate([
+    property({ attribute: "guest-error-label" })
+], EunomiaSchedulerEventEditor.prototype, "guestErrorLabel", void 0);
+__decorate([
+    property({ attribute: "range-error-label" })
+], EunomiaSchedulerEventEditor.prototype, "rangeErrorLabel", void 0);
 __decorate([
     property({ attribute: "remove-guest-label" })
 ], EunomiaSchedulerEventEditor.prototype, "removeGuestLabel", void 0);
@@ -793,6 +924,12 @@ __decorate([
 __decorate([
     property({ attribute: "delete-label" })
 ], EunomiaSchedulerEventEditor.prototype, "deleteLabel", void 0);
+__decorate([
+    property({ attribute: "delete-confirm-label" })
+], EunomiaSchedulerEventEditor.prototype, "deleteConfirmLabel", void 0);
+__decorate([
+    state()
+], EunomiaSchedulerEventEditor.prototype, "confirmingDelete", void 0);
 __decorate([
     state()
 ], EunomiaSchedulerEventEditor.prototype, "formTitle", void 0);

package/dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.styles.js

@@ -43,7 +43,7 @@ const base = css `
     flex: 0 0 auto;
   }
 
-  .guest-error {
+  .field-error {
     display: block;
     margin-top: var(--eun-space-xs, 4px);
     color: var(--eun-color-critical-100, #aa0014);
@@ -73,5 +73,15 @@ const base = css `
   #actions .spacer {
     flex: 1 1 auto;
   }
+
+  #actions.confirm {
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  #confirm-text {
+    flex: 1 1 auto;
+    font-weight: 600;
+  }
 `;
 export const schedulerEventEditorStyles = base;

package/dist/features/scheduler/shared/scheduler-event-popover.d.ts

@@ -8,11 +8,17 @@ export interface EventPopoverProps {
     locale?: string;
     editLabel: string;
     deleteLabel: string;
+    deleteConfirmLabel: string;
+    cancelLabel: string;
     closeLabel: string;
+    allDayLabel: string;
     priorityLabels: Record<string, string>;
     readonly: boolean;
+    confirmingDelete: boolean;
     onEdit: () => void;
     onDelete: () => void;
+    onConfirmDelete: () => void;
+    onCancelDelete: () => void;
     onClose: () => void;
 }
 /**
@@ -22,7 +28,9 @@ export interface EventPopoverProps {
  * shared guests, each with a status icon — check/hourglass/cross for
  * confirmed/pending/declined), plus
  * Edit/Delete actions to actually enter the editor and a close (✕) button
- * to dismiss it without acting on the event at all. Deliberately not
+ * to dismiss it without acting on the event at all. Delete asks for a
+ * confirmation in place first, swapping the actions for a question and a
+ * Cancel/Delete pair. Deliberately not
  * `eun-tooltip` : that component is non-interactive (`role="tooltip"`,
  * closes on blur) by ARIA convention, the wrong fit for a panel that needs
  * to hold focusable buttons — this is a small popover instead, positioned