@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/features/scheduler/calendar/calendar.js

@@ -17,7 +17,7 @@ import { renderSchedulerWeekView } from "../shared/scheduler-week-view.js";
 import { MONTH_EVENT_ROW_HEIGHT, renderSchedulerMonthView, } from "../shared/scheduler-month-view.js";
 import { renderSchedulerYearView } from "../shared/scheduler-year-view.js";
 import { EunomiaSchedulerEventCardTagName, } from "../scheduler-event/scheduler-event.js";
-import { addPeriod, getVisibleRange } from "../shared/scheduler.utils.js";
+import { addPeriod, getVisibleRange, } from "../shared/scheduler.utils.js";
 import { EventClickEvent } from "../../../events/event-click.event.js";
 import { SlotClickEvent } from "../../../events/slot-click.event.js";
 import { PeriodChangeEvent } from "../../../events/period-change.event.js";
@@ -99,7 +99,7 @@ const HOUR_GRID_SLOT_HEIGHT = 24;
  * @prop {number} [dayStartHour=0] - The first visible hour row in day, week, and work week
  * @prop {number} [dayEndHour=24] - The last visible hour row, exclusive, in day, week, and work week
  * @prop {number} [slotDuration=30] - The grid's row granularity, in minutes
- * @prop {string} [locale] - The locale used throughout. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used throughout. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {boolean} [readonly=false] - Disables the slot click event, removing the create-here affordance, and event-chip dragging. View only
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation
  * @prop {boolean} [hideNowLine=false] - Hides the line marking the current time in day, week and work week views
@@ -110,13 +110,14 @@ const HOUR_GRID_SLOT_HEIGHT = 24;
  * @fires {EventClickEvent} euneventclick - Fired when an event chip is clicked
  * @fires {SlotClickEvent} eunslotclick - Fired when an empty hour-grid slot is clicked
  * @fires {EventUpdateEvent} euneventupdate - Fired when a day, week, or work week event chip is dragged to a new time or day and dropped
- * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from a swipe, a drill-down, or an external view or displayedDate assignment
+ * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from a swipe, a drill-down, a navigation method, or an external view or displayedDate assignment. Not fired for the initial render, read visibleRange instead
  * @cssprop [--scheduler-slot-height] - Sets the pixel height per slotDuration row in day, week, and work week
  * @cssprop [--scheduler-gutter-width] - Sets the width of the hour-label gutter
- * @cssprop [--scheduler-body-max-height=640px] - Sets the maximum height, with scroll, of the day, week, and work week grid body and the year view. Below a small viewport, the grid also fills its own host's height first, still capped at this same value
+ * @cssprop [--scheduler-body-max-height=640px] - Sets the maximum height, with scroll, of the day, week, and work week grid body and the year view, and of the month view when set (uncapped by default). Below a small viewport, the grid also fills its own host's height first, still capped at this same value
  * @cssprop [--scheduler-month-cell-height] - Sets the height of month view cells
  * @cssprop [--scheduler-swipe-duration=200ms] - Sets the duration of the mobile swipe slide animation
  * @cssprop [--scheduler-accent-color] - Sets the color marking today, the selected day and the focus ring. Defaults to the theme's primary color
+ * @cssprop [--scheduler-focus-outline-color] - Sets the keyboard focus outline color, falling back to --scheduler-accent-color
  * @cssprop [--scheduler-accent-text-color] - Sets the text color shown on the accent color, such as today's number in month view
  * @cssprop [--scheduler-now-line-color] - Sets the color of the line marking the current time. Defaults to the critical color
  * @element eun-calendar
@@ -653,24 +654,55 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
         this.syncDisplayedMonth();
         void this.updateComplete.then(() => this.focusMonthCell());
     }
+    /**
+     * The range currently visible for {@link view} and {@link displayedDate},
+     * the same one `eunperiodchange` reports. In `month` view, it covers the
+     * whole 6-week grid, leading and trailing days included.
+     */
+    get visibleRange() {
+        return getVisibleRange(this.view, this.displayedDate, this.weekStartsOn);
+    }
+    /**
+     * Moves the displayed period one `view`-sized unit forward.
+     */
+    next() {
+        this.navigate(1);
+    }
+    /**
+     * Moves the displayed period one `view`-sized unit back.
+     */
+    previous() {
+        this.navigate(-1);
+    }
+    /**
+     * Brings the period containing today into view.
+     */
+    today() {
+        this.displayedDate = new Date();
+    }
     /**
      * Re-dispatches `eunperiodchange` whenever the visible period changes.
+     * Skipped on the first update (every old value is still `undefined`
+     * then), since a listener attached after the upgrade could never catch
+     * it : {@link visibleRange} gives the initial range instead.
      *
      * @param changed the changed properties.
      */
     updated(changed) {
         super.updated(changed);
-        if (changed.has("view") ||
-            changed.has("displayedDate") ||
-            changed.has("weekStartsOn")) {
-            const range = getVisibleRange(this.view, this.displayedDate, this.weekStartsOn);
-            this.dispatchEvent(new PeriodChangeEvent(this.view, range.start, range.end));
+        const periodChanged = ["view", "displayedDate", "weekStartsOn"].some((key) => changed.has(key) && changed.get(key) !== undefined);
+        if (periodChanged) {
+            const range = this.visibleRange;
+            this.dispatchEvent(new PeriodChangeEvent(this.view, range.start, range.end, this.displayedDate));
+        }
+        if (changed.has("view") && changed.get("view") !== undefined) {
+            this.scrollToCurrentPeriod();
         }
         this.syncMonthCellObserver();
     }
     /**
-     * Positions the very first render on "now" instead of opening scrolled
-     * to midnight/January : {@link displayedDate} already defaults to today
+     * Positions the very first render, and every later view change, on
+     * "now" instead of opening scrolled to midnight/January : {@link displayedDate} already defaults to today
      * (see its own doc), which is enough for `month` view, but the
      * scrollable views need their own scroll position set explicitly.
      * Deferred to {@link runOnceVisible} rather than applied directly here,
@@ -679,14 +711,22 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
      * zero layout at this point — `scrollTop` silently no-ops on a
      * zero-height/`display: none` box, so scrolling only once the box
      * actually has size is what makes this work regardless of where the
-     * calendar happens to live. Runs once total, matching "open the
-     * calendar and land on the current period" rather than fighting the
-     * user's own scroll position on every later render.
+     * calendar happens to live. Runs on the first render and on view
+     * changes only, matching "open a view and land on the current period"
+     * rather than fighting the user's own scroll position on every other
+     * render.
      *
      * @param changed the changed properties.
      */
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.scrollToCurrentPeriod();
+    }
+    /**
+     * Scrolls the current view to "now", see {@link firstUpdated}.
+     * @private
+     */
+    scrollToCurrentPeriod() {
         if (this.view === "year") {
             this.runOnceVisible(".year-scroll", () => this.scrollYearViewToCurrentMonth());
         }
@@ -699,7 +739,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
      * shadow root actually has layout (`clientHeight > 0`) — immediately, if
      * it already does, otherwise once a {@link ResizeObserver} sees it gain
      * size (e.g. its `eun-tab-panel` ancestor becomes the active tab) —
-     * and only once, ever. See {@link firstUpdated}'s own doc for why this
+     * and only once per call. See {@link firstUpdated}'s own doc for why this
      * indirection exists.
      * @param selector a shadow-root selector for the element to watch.
      * @param action called exactly once, as soon as that element is visible.
@@ -726,7 +766,8 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
     }
     /**
      * Scrolls day/week/work-week's `#hour-grid-scroll` so the current time
-     * sits roughly a third of the way down the visible area, rather than
+     * sits roughly a third of the way down the area left visible below the
+     * sticky header and all-day rows, rather than
      * opening scrolled to {@link dayStartHour}. Computed from the time math
      * directly (not the `.hour-grid-now-line` element, which only renders
      * within {@link dayStartHour}/{@link dayEndHour}'s own bounds) so a
@@ -752,25 +793,27 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
         const bodyOffsetTop = bodyEl.getBoundingClientRect().top -
             scrollEl.getBoundingClientRect().top +
             scrollEl.scrollTop;
-        scrollEl.scrollTop = Math.max(0, bodyOffsetTop + topWithinBody - scrollEl.clientHeight / 3);
+        // The sticky header and all-day rows cover the top of the scroll area.
+        const stickyHeight = this.shadowRoot
+            ?.querySelector(".hour-grid-top")
+            ?.getBoundingClientRect().height ?? 0;
+        const visibleHeight = scrollEl.clientHeight - stickyHeight;
+        scrollEl.scrollTop = Math.max(0, bodyOffsetTop + topWithinBody - stickyHeight - visibleHeight / 3);
     }
     /**
-     * Scrolls `year` view's `.year-scroll` so the current month's section
-     * starts right below the sticky weekday header, rather than opening
-     * scrolled to January. The header's own height is subtracted from the
-     * target, since it stays pinned to the top of the scroll container and
-     * would otherwise overlap the very section just scrolled into view. A
-     * no-op if {@link displayedDate} isn't showing the current year.
+     * Scrolls `year` view's `.year-scroll` so {@link displayedDate}'s month
+     * section (the current month by default, or the month just left when
+     * coming back from `month` view) starts right below the sticky weekday
+     * header, rather than opening scrolled to January. The header's own
+     * height is subtracted from the target, since it stays pinned to the top
+     * of the scroll container and would otherwise overlap the very section
+     * just scrolled into view.
      * @private
      */
     scrollYearViewToCurrentMonth() {
-        const now = new Date();
-        if (this.displayedDate.getFullYear() !== now.getFullYear()) {
-            return;
-        }
         const scrollEl = this.shadowRoot?.querySelector(".year-scroll");
         const sections = this.shadowRoot?.querySelectorAll(".year-month-section");
-        const currentSection = sections?.[now.getMonth()];
+        const currentSection = sections?.[this.displayedDate.getMonth()];
         if (!scrollEl || !currentSection) {
             return;
         }
@@ -866,9 +909,9 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
         super.disconnectedCallback?.();
     }
     /**
-     * Moves the displayed period by one `view`-sized unit — swipe only ; the
-     * header's own prev/next/"Today" buttons live in the consumer (see
-     * `eun-scheduler`) and simply reassign {@link displayedDate} from outside.
+     * Moves the displayed period by one `view`-sized unit — swipe and
+     * {@link next}/{@link previous}, the header itself living in the consumer
+     * (see `eun-scheduler`).
      * @private
      */
     navigate(direction) {
@@ -1019,7 +1062,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
             dayStartHour: this.dayStartHour,
             dayEndHour: this.dayEndHour,
             slotDuration: this.slotDuration,
-            locale: this.locale,
+            locale: this.resolvedLocale,
             slotHeight: HOUR_GRID_SLOT_HEIGHT,
             eventAppearance: this.eventAppearance,
             onSlotClick: this.handleSlotClick,
@@ -1040,7 +1083,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
                     events: this.events,
                     weekStartsOn: this.weekStartsOn,
                     focusedDate: this.focusedDate,
-                    locale: this.locale,
+                    locale: this.resolvedLocale,
                     desktop: !this.isMobile,
                     maxEventsPerCell: this.monthMaxEventsPerCell,
                     moreLabel: (count) => (this.moreEventsLabel ?? this.dictionary.calendar.moreEvents).replace("{count}", String(count)),
@@ -1053,7 +1096,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
                     displayedYear: this.displayedDate,
                     events: this.events,
                     weekStartsOn: this.weekStartsOn,
-                    locale: this.locale,
+                    locale: this.resolvedLocale,
                     onDayClick: this.goToDayView,
                     onMonthLabelClick: (month) => {
                         this.view = "month";
@@ -1083,7 +1126,10 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
             : (days.find((day) => isToday(day)) ?? days[0]);
         return html `
       ${this.renderWeekDayStrip(days, selected)}
-      ${renderSchedulerDayView(selected, hourGridProps)}
+      ${renderSchedulerDayView(selected, {
+            ...hourGridProps,
+            hideDayHeader: true,
+        })}
     `;
     }
     /** @private */
@@ -1107,7 +1153,9 @@ let EunomiaCalendar = class EunomiaCalendar extends LocalizableMixin(LitElement)
             }}
             >
               <span class="week-day-strip-weekday">
-                ${day.toLocaleDateString(this.locale, { weekday: "short" })}
+                ${day.toLocaleDateString(this.resolvedLocale, {
+                weekday: "short",
+            })}
               </span>
               <span class="week-day-strip-daynum">${day.getDate()}</span>
             </button>

package/dist/features/scheduler/calendar/calendar.styles.js

@@ -95,7 +95,7 @@ const base = css `
 
   .week-day-strip-weekday {
     font-size: 11px;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
 
   .week-day-strip-daynum {
@@ -128,7 +128,10 @@ const base = css `
 
   .week-day-strip-day:focus-visible {
     outline: 2px solid
-      var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff));
+      var(
+        --scheduler-focus-outline-color,
+        var(--scheduler-accent-color, var(--eun-color-primary-500, #3d6fff))
+      );
     outline-offset: 1px;
   }
 

package/dist/features/scheduler/scheduler/scheduler.d.ts

@@ -1,6 +1,7 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { WeekStartsOn } from "../../../utils/date.utils.js";
 import { EunomiaSchedulerEvent, EunomiaSchedulerView } from "../shared/scheduler.types.js";
+import { DateRange } from "../shared/scheduler.utils.js";
 import type { EunomiaSchedulerEventAppearance } from "../scheduler-event/scheduler-event.js";
 /**
  * Tag name of the scheduler component.
@@ -38,7 +39,7 @@ declare const EunomiaScheduler_base: import("../../../utils/constructor.type.js"
  * @prop {number} [dayStartHour=0] - The first visible hour row in day, week, and work week
  * @prop {number} [dayEndHour=24] - The last visible hour row, exclusive, in day, week, and work week
  * @prop {number} [slotDuration=30] - The grid's row granularity, in minutes, also the default duration for a newly created event
- * @prop {string} [locale] - The locale used throughout. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used throughout. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {boolean} [readonly=false] - Disables creating, editing, and deleting. View only
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation and the drawer or modal's own transitions
  * @prop {boolean} [hideNowLine=false] - Hides the line marking the current time in day, week and work week views
@@ -54,21 +55,23 @@ declare const EunomiaScheduler_base: import("../../../utils/constructor.type.js"
  * @prop {string} [viewYearLabel] - The label of the year view switcher option. Defaults to the localized string for the current locale (English: "Year")
  * @prop {string} [applyLabel] - The label of the event editor's save button. Defaults to the localized string for the current locale (English: "Apply")
  * @prop {string} [deleteLabel] - The label of the delete button, in the event editor and the read-only event popover. Defaults to the localized string for the current locale (English: "Delete")
+ * @prop {string} [deleteConfirmLabel] - The question the read-only event popover asks before deleting. Defaults to the localized string for the current locale (English: "Delete this event?")
  * @prop {string} [moreEventsLabel] - The template for the month view's overflow affordance, with the placeholder replaced by the hidden event count. Defaults to the localized string for the current locale (English: "+{count} more")
  * @prop {'default' | 'transparent' | 'ghost'} [eventAppearance='default'] - The appearance applied to day, week, and work week event chips. Month view is unaffected, always picking ghost, or default for multi-day bars, itself
  * @attr {'default' | 'transparent' | 'ghost'} [event-appearance='default'] - The visual variant applied to day, week, and work week event chips
  * @fires {EventCreateEvent} euneventcreate - Fired when a new event is saved
  * @fires {EventUpdateEvent} euneventupdate - Fired when an existing event is saved, or a day, week, or work week chip is dragged to a new time or day
  * @fires {EventDeleteEvent} euneventdelete - Fired when an event is deleted
- * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from navigation, a swipe, a view switch, or an external view or displayedDate assignment
+ * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from navigation, a swipe, a view switch, or an external view or displayedDate assignment. Not fired for the initial render, read visibleRange instead
  * @cssprop [--scheduler-border-color] - Sets the border color throughout the shell and grids
  * @cssprop [--scheduler-background] - Sets the background color
  * @cssprop [--scheduler-slot-height] - Sets the pixel height per slotDuration row in day, week, and work week
  * @cssprop [--scheduler-gutter-width] - Sets the width of the hour-label gutter
- * @cssprop [--scheduler-body-max-height] - Sets the maximum height, with scroll, of the day, week, and work week grid body
+ * @cssprop [--scheduler-body-max-height] - Sets the maximum height, with scroll, of the day, week, and work week grid body and the year view, and of the month view when set (uncapped by default)
  * @cssprop [--scheduler-month-cell-min-height] - Sets the minimum height of month view cells
  * @cssprop [--scheduler-swipe-duration=200ms] - Sets the duration of the mobile swipe slide animation
  * @cssprop [--scheduler-accent-color] - Sets the color marking today, the selected day and the focus ring. Defaults to the theme's primary color
+ * @cssprop [--scheduler-focus-outline-color] - Sets the keyboard focus outline color, falling back to --scheduler-accent-color, or to each event's own color on an event
  * @cssprop [--scheduler-accent-text-color] - Sets the text color shown on the accent color, such as today's number in month view
  * @cssprop [--scheduler-now-line-color] - Sets the color of the line marking the current time. Defaults to the critical color
  * @element eun-scheduler
@@ -176,6 +179,10 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
      * Falls back to the localized string for the current locale when unset.
      */
     deleteLabel?: string;
+    /**
+     * Falls back to the localized string for the current locale when unset.
+     */
+    deleteConfirmLabel?: string;
     /**
      * Label of the read-only event popover's "switch to editing" button.
      * Falls back to the localized string for the current locale when unset.
@@ -281,6 +288,18 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
      * @internal
      */
     private selectedEvent;
+    /**
+     * Whether the popover's Delete was pressed once and now waits for its
+     * confirmation. Reset on every {@link openEventPopover}.
+     * @internal
+     */
+    private confirmingDelete;
+    /**
+     * Whether the drawer or modal footer's Delete was pressed once and now
+     * waits for its confirmation. Reset whenever the editor opens.
+     * @internal
+     */
+    private confirmingEditorDelete;
     /**
      * The chip element the popover is currently anchored to, so it can be
      * refocused on close (same "return focus to the trigger" pattern
@@ -307,10 +326,18 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
      * @readonly
      */
     private readonly calendarEl?;
+    /**
+     * The range currently visible for {@link view} and {@link displayedDate},
+     * the same one `eunperiodchange` reports. In `month` view, it covers the
+     * whole 6-week grid, leading and trailing days included.
+     */
+    get visibleRange(): DateRange;
     /**
      * Re-dispatches `eunperiodchange` whenever the visible period changes —
      * `view`/`displayedDate` are otherwise entirely self-managed (nav
      * buttons, swipe, view switch) but always overridable from outside.
+     * Skipped on the first update, same as `eun-calendar` : {@link
+     * visibleRange} gives the initial range instead.
      *
      * @param changed the changed properties.
      */
@@ -374,6 +401,12 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     private handleCalendarEventClick;
     /** @private */
     private handleCalendarSlotClick;
+    /**
+     * The end a new event starting at `start` is seeded with, one
+     * {@link slotDuration} later.
+     * @private
+     */
+    private defaultCreateEnd;
     /**
      * Opens the editor in "create" mode, seeded at `start`.
      * @private
@@ -481,9 +514,19 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     private handleEventPopoverToggle;
     /** @private */
     private handlePopoverEdit;
-    /** @private */
+    /**
+     * Swaps the popover's actions for the delete confirmation, moving focus
+     * onto its Cancel button since the pressed Delete button goes away.
+     * @private
+     */
     private handlePopoverDelete;
     /** @private */
+    private handlePopoverConfirmDelete;
+    /** @private */
+    private handlePopoverCancelDelete;
+    /** @private */
+    private focusPopoverButton;
+    /** @private */
     private handlePopoverClose;
     /** @private */
     private openEditorSurface;
@@ -541,6 +584,28 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     private handleModalDelete;
     /** @private */
     private handleModalCancel;
+    /**
+     * Renders the drawer or modal footer : Delete/Cancel/Apply, or the delete
+     * confirmation that replaces them once Delete was pressed, same as the
+     * event popover. Apply stays disabled while an edited event has no
+     * changes.
+     * @private
+     */
+    private renderEditorFooter;
+    /**
+     * Swaps the open footer for the delete confirmation, moving focus onto
+     * its Cancel button since the pressed Delete button goes away.
+     * @private
+     */
+    private handleEditorDeleteClick;
+    /** @private */
+    private handleEditorCancelDelete;
+    /**
+     * Focuses `selector` inside whichever editor surface is open, the drawer
+     * and the modal rendering the same footer.
+     * @private
+     */
+    private focusOpenFooterButton;
     /**
      * The prev/today/next navigation cluster, shared verbatim between the
      * desktop header (inside `#header-nav`) and the mobile one (inside