@besaitech/ng-design-system 0.0.78 → 0.0.80

package/calendar/index.d.ts

@@ -79,11 +79,24 @@ declare function occursOn(start: Date, end: Date, day: Date): boolean;
  * on a grid that opens at 08:00 should still show, flush to the top, not vanish.
  */
 declare function placeDay<T>(events: readonly SdsCalendarEvent<T>[], day: Date, startHour: number, endHour: number, defaultMinutes: number): PlacedEvent<T>[];
+/**
+ * A dragged minute, snapped to the grid and held inside the visible window.
+ *
+ * <p>Clamping is not cosmetic: without it a drag that leaves the top of the grid proposes a time
+ * before the practice opens, and the host either books it or has to invent the same rule itself.
+ */
+declare function snapMinute(minute: number, stepMinutes: number, startHour: number, endHour: number): number;
 /** The all-day (and multi-day) events touching a given day, in a stable order. */
 declare function allDayOn<T>(events: readonly SdsCalendarEvent<T>[], day: Date, defaultMinutes: number): SdsCalendarEvent<T>[];
 /** Every event touching a day, all-day first then by start — what a month cell lists. */
 declare function eventsOn<T>(events: readonly SdsCalendarEvent<T>[], day: Date, defaultMinutes: number): SdsCalendarEvent<T>[];
 
+/** Where an event was dropped. The component reports; the host decides whether it sticks. */
+interface SdsCalendarDrop<T = unknown> {
+    event: SdsCalendarEvent<T>;
+    start: Date;
+    end: Date;
+}
 /** A click on empty time: what a host turns into "new appointment". */
 interface SdsCalendarSlot {
     start: Date;
@@ -127,6 +140,7 @@ interface SdsCalendarRange {
  */
 declare class SdsEventCalendar<T = unknown> {
     private readonly destroyRef;
+    private readonly host;
     readonly events: _angular_core.InputSignal<readonly SdsCalendarEvent<T>[]>;
     /** Two-way: the host can deep-link or restore a view. */
     readonly view: _angular_core.ModelSignal<SdsEventCalendarView>;
@@ -161,7 +175,26 @@ declare class SdsEventCalendar<T = unknown> {
     readonly weekLabel: _angular_core.InputSignal<string>;
     readonly threeDayLabel: _angular_core.InputSignal<string>;
     readonly dayLabel: _angular_core.InputSignal<string>;
+    /**
+     * Let an event be dragged to another time or day. <b>Opt-in</b>: a calendar whose host does not
+     * persist the move would show an appointment settle somewhere it has not been booked, which is
+     * worse than not offering the gesture.
+     */
+    readonly draggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Drag across empty time to propose a span. The plain click keeps emitting `slotClick`. */
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Both gestures snap to this. 15 minutes is the finest grid anybody reads off a week view. */
+    readonly snapMinutes: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly eventClick: _angular_core.OutputEmitterRef<SdsCalendarEvent<T>>;
+    /**
+     * An event was dragged somewhere else. The component does NOT move it: it reports where it was
+     * dropped and redraws from `events` as before, so the diary only changes once the host says it
+     * did. A drag that moved the chip locally would show a booking that does not exist whenever the
+     * write is refused.
+     */
+    readonly eventDrop: _angular_core.OutputEmitterRef<SdsCalendarDrop<T>>;
+    /** A span was dragged out across empty time — "book something from here to here". */
+    readonly rangeSelect: _angular_core.OutputEmitterRef<SdsCalendarSlot>;
     /** A click on empty time, snapped to the hour that was clicked. */
     readonly slotClick: _angular_core.OutputEmitterRef<SdsCalendarSlot>;
     readonly dayClick: _angular_core.OutputEmitterRef<Date>;
@@ -169,6 +202,18 @@ declare class SdsEventCalendar<T = unknown> {
     readonly rangeChange: _angular_core.OutputEmitterRef<SdsCalendarRange>;
     /** Ticks the now-indicator. One timer, cleared with the component. */
     private readonly now;
+    /** The gesture in flight, if any. Null between gestures — there is never more than one. */
+    private readonly drag;
+    /** Set once the pointer has moved far enough to be a drag rather than a click. */
+    private readonly dragging;
+    /**
+     * A finished drag still produces a click, and it arrives AFTER pointerup — so checking
+     * "am I dragging" inside the click handler is always false by then. Measured: dropping an event
+     * emitted `eventDrop` AND `slotClick`, so a host both moved the appointment and opened a
+     * "new appointment" panel for where the finger lifted. This survives until the click it has to
+     * swallow, and is cleared either way.
+     */
+    private suppressClick;
     constructor();
     protected readonly days: _angular_core.Signal<Date[]>;
     protected readonly hours: _angular_core.Signal<number[]>;
@@ -198,10 +243,35 @@ declare class SdsEventCalendar<T = unknown> {
     protected goToday(): void;
     /** A click on empty grid becomes a slot of `defaultMinutes`, snapped to the hour clicked. */
     protected onGridClick(event: MouseEvent, day: Date): void;
+    protected canDrag(placed: PlacedEvent<T>): boolean;
+    protected isDragging(placed: PlacedEvent<T>): boolean;
+    /** The dashed block: where this drag would land on this column, or null. */
+    protected ghostFor(dayIndex: number): {
+        top: number;
+        height: number;
+        label: string;
+    } | null;
+    protected startSelect(event: PointerEvent, dayIndex: number): void;
+    protected startMove(event: PointerEvent, placed: PlacedEvent<T>, dayIndex: number): void;
+    /**
+     * Listeners are attached for the gesture and removed on release, rather than living on the host
+     * for the component's whole life. A calendar sitting idle on a dashboard should not be handling
+     * every pointer move on the page.
+     */
+    private begin;
+    private finish;
+    private snap;
+    private minuteAt;
+    private atMinute;
+    private columnAt;
+    private columnFor;
+    /** True once, for the click that a just-finished drag is about to produce. */
+    private swallowed;
+    private hhmm;
     protected onEventClick(event: MouseEvent, placed: PlacedEvent<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsEventCalendar<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsEventCalendar<any>, "sds-event-calendar", never, { "events": { "alias": "events"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startHour": { "alias": "startHour"; "required": false; "isSignal": true; }; "endHour": { "alias": "endHour"; "required": false; "isSignal": true; }; "hourHeight": { "alias": "hourHeight"; "required": false; "isSignal": true; }; "defaultMinutes": { "alias": "defaultMinutes"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "nowIndicator": { "alias": "nowIndicator"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showViewSwitcher": { "alias": "showViewSwitcher"; "required": false; "isSignal": true; }; "maxPerCell": { "alias": "maxPerCell"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "allDayLabel": { "alias": "allDayLabel"; "required": false; "isSignal": true; }; "moreLabel": { "alias": "moreLabel"; "required": false; "isSignal": true; }; "viewSwitcherLabel": { "alias": "viewSwitcherLabel"; "required": false; "isSignal": true; }; "monthLabel": { "alias": "monthLabel"; "required": false; "isSignal": true; }; "weekLabel": { "alias": "weekLabel"; "required": false; "isSignal": true; }; "threeDayLabel": { "alias": "threeDayLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; }, { "view": "viewChange"; "date": "dateChange"; "eventClick": "eventClick"; "slotClick": "slotClick"; "dayClick": "dayClick"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsEventCalendar<any>, "sds-event-calendar", never, { "events": { "alias": "events"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startHour": { "alias": "startHour"; "required": false; "isSignal": true; }; "endHour": { "alias": "endHour"; "required": false; "isSignal": true; }; "hourHeight": { "alias": "hourHeight"; "required": false; "isSignal": true; }; "defaultMinutes": { "alias": "defaultMinutes"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "nowIndicator": { "alias": "nowIndicator"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showViewSwitcher": { "alias": "showViewSwitcher"; "required": false; "isSignal": true; }; "maxPerCell": { "alias": "maxPerCell"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "allDayLabel": { "alias": "allDayLabel"; "required": false; "isSignal": true; }; "moreLabel": { "alias": "moreLabel"; "required": false; "isSignal": true; }; "viewSwitcherLabel": { "alias": "viewSwitcherLabel"; "required": false; "isSignal": true; }; "monthLabel": { "alias": "monthLabel"; "required": false; "isSignal": true; }; "weekLabel": { "alias": "weekLabel"; "required": false; "isSignal": true; }; "threeDayLabel": { "alias": "threeDayLabel"; "required": false; "isSignal": true; }; "dayLabel": { "alias": "dayLabel"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "snapMinutes": { "alias": "snapMinutes"; "required": false; "isSignal": true; }; }, { "view": "viewChange"; "date": "dateChange"; "eventClick": "eventClick"; "eventDrop": "eventDrop"; "rangeSelect": "rangeSelect"; "slotClick": "slotClick"; "dayClick": "dayClick"; "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
-export { SdsEventCalendar, allDayOn, eventsOn, minutesOfDay, occursOn, placeDay, startOfWeek, step, toDate, visibleDays, visibleRange };
-export type { PlacedEvent, SdsCalendarEvent, SdsCalendarRange, SdsCalendarSlot, SdsEventCalendarView, SdsEventColor };
+export { SdsEventCalendar, allDayOn, eventsOn, minutesOfDay, occursOn, placeDay, snapMinute, startOfWeek, step, toDate, visibleDays, visibleRange };
+export type { PlacedEvent, SdsCalendarDrop, SdsCalendarEvent, SdsCalendarRange, SdsCalendarSlot, SdsEventCalendarView, SdsEventColor };

package/fesm2022/besaitech-ng-design-system-calendar.mjs

@@ -1,6 +1,6 @@
 import { startOfDay, addDays, isSameDay, SdsIcon, SdsSegmented } from '@besaitech/ng-design-system';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, model, numberAttribute, booleanAttribute, output, signal, effect, untracked, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DestroyRef, ElementRef, input, model, numberAttribute, booleanAttribute, output, signal, effect, untracked, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 
 const MS_PER_MINUTE = 60_000;
 function toDate(value) {
@@ -148,6 +148,16 @@ function placeDay(events, day, startHour, endHour, defaultMinutes) {
     flush();
     return placed;
 }
+/**
+ * A dragged minute, snapped to the grid and held inside the visible window.
+ *
+ * <p>Clamping is not cosmetic: without it a drag that leaves the top of the grid proposes a time
+ * before the practice opens, and the host either books it or has to invent the same rule itself.
+ */
+function snapMinute(minute, stepMinutes, startHour, endHour) {
+    const step = Math.max(1, stepMinutes);
+    return Math.min(endHour * 60, Math.max(startHour * 60, Math.round(minute / step) * step));
+}
 /** The all-day (and multi-day) events touching a given day, in a stable order. */
 function allDayOn(events, day, defaultMinutes) {
     return events
@@ -230,6 +240,7 @@ const DOT = {
  */
 class SdsEventCalendar {
     destroyRef = inject(DestroyRef);
+    host = inject(ElementRef);
     events = input([], ...(ngDevMode ? [{ debugName: "events" }] : []));
     /** Two-way: the host can deep-link or restore a view. */
     view = model('week', ...(ngDevMode ? [{ debugName: "view" }] : []));
@@ -264,7 +275,26 @@ class SdsEventCalendar {
     weekLabel = input('Week', ...(ngDevMode ? [{ debugName: "weekLabel" }] : []));
     threeDayLabel = input('3 days', ...(ngDevMode ? [{ debugName: "threeDayLabel" }] : []));
     dayLabel = input('Day', ...(ngDevMode ? [{ debugName: "dayLabel" }] : []));
+    /**
+     * Let an event be dragged to another time or day. <b>Opt-in</b>: a calendar whose host does not
+     * persist the move would show an appointment settle somewhere it has not been booked, which is
+     * worse than not offering the gesture.
+     */
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Drag across empty time to propose a span. The plain click keeps emitting `slotClick`. */
+    selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Both gestures snap to this. 15 minutes is the finest grid anybody reads off a week view. */
+    snapMinutes = input(15, ...(ngDevMode ? [{ debugName: "snapMinutes", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     eventClick = output();
+    /**
+     * An event was dragged somewhere else. The component does NOT move it: it reports where it was
+     * dropped and redraws from `events` as before, so the diary only changes once the host says it
+     * did. A drag that moved the chip locally would show a booking that does not exist whenever the
+     * write is refused.
+     */
+    eventDrop = output();
+    /** A span was dragged out across empty time — "book something from here to here". */
+    rangeSelect = output();
     /** A click on empty time, snapped to the hour that was clicked. */
     slotClick = output();
     dayClick = output();
@@ -272,6 +302,18 @@ class SdsEventCalendar {
     rangeChange = output();
     /** Ticks the now-indicator. One timer, cleared with the component. */
     now = signal(new Date(), ...(ngDevMode ? [{ debugName: "now" }] : []));
+    /** The gesture in flight, if any. Null between gestures — there is never more than one. */
+    drag = signal(null, ...(ngDevMode ? [{ debugName: "drag" }] : []));
+    /** Set once the pointer has moved far enough to be a drag rather than a click. */
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    /**
+     * A finished drag still produces a click, and it arrives AFTER pointerup — so checking
+     * "am I dragging" inside the click handler is always false by then. Measured: dropping an event
+     * emitted `eventDrop` AND `slotClick`, so a host both moved the appointment and opened a
+     * "new appointment" panel for where the finger lifted. This survives until the click it has to
+     * swallow, and is cleared either way.
+     */
+    suppressClick = false;
     constructor() {
         const timer = setInterval(() => this.now.set(new Date()), 60_000);
         this.destroyRef.onDestroy(() => clearInterval(timer));
@@ -393,6 +435,9 @@ class SdsEventCalendar {
     }
     /** A click on empty grid becomes a slot of `defaultMinutes`, snapped to the hour clicked. */
     onGridClick(event, day) {
+        if (this.swallowed()) {
+            return;
+        }
         const host = event.currentTarget;
         const y = event.clientY - host.getBoundingClientRect().top;
         const minutes = this.startHour() * 60 + (y / this.hourHeight()) * 60;
@@ -403,13 +448,180 @@ class SdsEventCalendar {
             end: new Date(start.getTime() + this.defaultMinutes() * 60_000),
         });
     }
+    // ------------------------------------------------------------------ dragging
+    canDrag(placed) {
+        return this.draggable() && !placed.event.cancelled;
+    }
+    isDragging(placed) {
+        const drag = this.drag();
+        return this.dragging() && drag?.kind === 'move' && drag.placed.event.id === placed.event.id;
+    }
+    /** The dashed block: where this drag would land on this column, or null. */
+    ghostFor(dayIndex) {
+        const drag = this.drag();
+        if (!drag || !this.dragging() || drag.dayIndex !== dayIndex) {
+            return null;
+        }
+        const perMinute = this.hourHeight() / 60;
+        const from = this.startHour() * 60;
+        const [a, b] = drag.kind === 'move'
+            ? [drag.atMin, drag.atMin + drag.durationMin]
+            : [Math.min(drag.fromMin, drag.atMin), Math.max(drag.fromMin, drag.atMin)];
+        const top = (a - from) * perMinute;
+        return {
+            top,
+            height: Math.max((b - a) * perMinute, 2),
+            label: `${this.hhmm(a)} – ${this.hhmm(b)}`,
+        };
+    }
+    startSelect(event, dayIndex) {
+        if (!this.selectable() || event.button !== 0) {
+            return;
+        }
+        const column = event.currentTarget;
+        const minute = this.snap(this.minuteAt(event.clientY, column));
+        this.begin(event, { kind: 'select', dayIndex, fromMin: minute, atMin: minute });
+    }
+    startMove(event, placed, dayIndex) {
+        if (!this.canDrag(placed) || event.button !== 0) {
+            return;
+        }
+        // Stop the column beneath from also starting a range-select under the same finger.
+        event.stopPropagation();
+        const column = event.currentTarget.closest('[data-sds-day]');
+        if (!column) {
+            return;
+        }
+        const startMin = minutesOfDay(placed.start);
+        const durationMin = Math.max(this.snapMinutes(), Math.round((placed.end.getTime() - placed.start.getTime()) / 60_000));
+        this.begin(event, {
+            kind: 'move',
+            dayIndex,
+            placed,
+            durationMin,
+            // Where in the block the finger went down, so it does not jump to the top on the first move.
+            grabOffsetMin: this.minuteAt(event.clientY, column) - startMin,
+            atMin: startMin,
+        });
+    }
+    /**
+     * Listeners are attached for the gesture and removed on release, rather than living on the host
+     * for the component's whole life. A calendar sitting idle on a dashboard should not be handling
+     * every pointer move on the page.
+     */
+    begin(event, state) {
+        this.drag.set(state);
+        this.dragging.set(false);
+        const startY = event.clientY;
+        const startX = event.clientX;
+        const move = (moved) => {
+            const current = this.drag();
+            if (!current) {
+                return;
+            }
+            // A few pixels of slop, so a click with a shaky hand is still a click.
+            if (!this.dragging() &&
+                Math.abs(moved.clientY - startY) < 4 &&
+                Math.abs(moved.clientX - startX) < 4) {
+                return;
+            }
+            this.dragging.set(true);
+            const column = this.columnAt(moved.clientX, moved.clientY);
+            const dayIndex = column ? Number(column.dataset['sdsDay']) : current.dayIndex;
+            const target = column ?? this.columnFor(current.dayIndex);
+            if (!target) {
+                return;
+            }
+            const raw = this.minuteAt(moved.clientY, target);
+            const atMin = current.kind === 'move' ? this.snap(raw - current.grabOffsetMin) : this.snap(raw);
+            this.drag.set({ ...current, dayIndex, atMin });
+        };
+        const up = () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', up);
+            const finished = this.drag();
+            const moved = this.dragging();
+            this.drag.set(null);
+            this.dragging.set(false);
+            if (finished && moved) {
+                this.suppressClick = true;
+                // If no click follows (the pointer left the grid, a touch cancel), do not swallow the
+                // NEXT genuine one — a flag that outlives its gesture is a dead control.
+                setTimeout(() => {
+                    this.suppressClick = false;
+                });
+                this.finish(finished);
+            }
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
+    }
+    finish(drag) {
+        const day = this.days()[drag.dayIndex];
+        if (!day) {
+            return;
+        }
+        if (drag.kind === 'move') {
+            const start = this.atMinute(day, drag.atMin);
+            this.eventDrop.emit({
+                event: drag.placed.event,
+                start,
+                end: new Date(start.getTime() + drag.durationMin * 60_000),
+            });
+            return;
+        }
+        const from = Math.min(drag.fromMin, drag.atMin);
+        const to = Math.max(drag.fromMin, drag.atMin);
+        if (to - from < this.snapMinutes()) {
+            // Not a span — the click handler will treat it as a slot click.
+            return;
+        }
+        this.rangeSelect.emit({ start: this.atMinute(day, from), end: this.atMinute(day, to) });
+    }
+    snap(minute) {
+        return snapMinute(minute, this.snapMinutes(), this.startHour(), this.endHour());
+    }
+    minuteAt(clientY, column) {
+        const y = clientY - column.getBoundingClientRect().top;
+        return this.startHour() * 60 + (y / this.hourHeight()) * 60;
+    }
+    atMinute(day, minute) {
+        return new Date(startOfDay(day).getTime() + minute * 60_000);
+    }
+    columnAt(x, y) {
+        return (document
+            .elementsFromPoint(x, y)
+            .find((el) => el instanceof HTMLElement && !!el.dataset['sdsDay']) ??
+            null);
+    }
+    columnFor(dayIndex) {
+        return this.host.nativeElement.querySelector(`[data-sds-day="${dayIndex}"]`);
+    }
+    /** True once, for the click that a just-finished drag is about to produce. */
+    swallowed() {
+        if (!this.suppressClick) {
+            return false;
+        }
+        this.suppressClick = false;
+        return true;
+    }
+    hhmm(minute) {
+        const h = Math.floor(minute / 60);
+        const m = Math.round(minute % 60);
+        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    }
     onEventClick(event, placed) {
         // Without this the click falls through to the grid and also opens "new appointment".
         event.stopPropagation();
+        if (this.swallowed()) {
+            return;
+        }
         this.eventClick.emit(placed.event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsEventCalendar, isStandalone: true, selector: "sds-event-calendar", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, hourHeight: { classPropertyName: "hourHeight", publicName: "hourHeight", isSignal: true, isRequired: false, transformFunction: null }, defaultMinutes: { classPropertyName: "defaultMinutes", publicName: "defaultMinutes", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, nowIndicator: { classPropertyName: "nowIndicator", publicName: "nowIndicator", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showViewSwitcher: { classPropertyName: "showViewSwitcher", publicName: "showViewSwitcher", isSignal: true, isRequired: false, transformFunction: null }, maxPerCell: { classPropertyName: "maxPerCell", publicName: "maxPerCell", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, allDayLabel: { classPropertyName: "allDayLabel", publicName: "allDayLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, viewSwitcherLabel: { classPropertyName: "viewSwitcherLabel", publicName: "viewSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, threeDayLabel: { classPropertyName: "threeDayLabel", publicName: "threeDayLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", date: "dateChange", eventClick: "eventClick", slotClick: "slotClick", dayClick: "dayClick", rangeChange: "rangeChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsEventCalendar, isStandalone: true, selector: "sds-event-calendar", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, hourHeight: { classPropertyName: "hourHeight", publicName: "hourHeight", isSignal: true, isRequired: false, transformFunction: null }, defaultMinutes: { classPropertyName: "defaultMinutes", publicName: "defaultMinutes", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, nowIndicator: { classPropertyName: "nowIndicator", publicName: "nowIndicator", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showViewSwitcher: { classPropertyName: "showViewSwitcher", publicName: "showViewSwitcher", isSignal: true, isRequired: false, transformFunction: null }, maxPerCell: { classPropertyName: "maxPerCell", publicName: "maxPerCell", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, allDayLabel: { classPropertyName: "allDayLabel", publicName: "allDayLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, viewSwitcherLabel: { classPropertyName: "viewSwitcherLabel", publicName: "viewSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, threeDayLabel: { classPropertyName: "threeDayLabel", publicName: "threeDayLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, snapMinutes: { classPropertyName: "snapMinutes", publicName: "snapMinutes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", date: "dateChange", eventClick: "eventClick", eventDrop: "eventDrop", rangeSelect: "rangeSelect", slotClick: "slotClick", dayClick: "dayClick", rangeChange: "rangeChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div class="flex flex-col overflow-hidden rounded-card border border-border bg-surface">
       @if (showToolbar()) {
         <div class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border px-3 py-2.5">
@@ -588,11 +800,13 @@ class SdsEventCalendar {
                   }
                 </div>
 
-                @for (day of days(); track day.getTime()) {
+                @for (day of days(); track day.getTime(); let dayIndex = $index) {
                   <div
-                    class="relative border-r border-border last:border-r-0"
+                    class="relative touch-none border-r border-border last:border-r-0"
+                    [attr.data-sds-day]="dayIndex"
                     [style.height.px]="bodyHeight()"
                     (click)="onGridClick($event, day)"
+                    (pointerdown)="startSelect($event, dayIndex)"
                   >
                     @for (h of hours(); track h) {
                       <div
@@ -601,6 +815,25 @@ class SdsEventCalendar {
                       ></div>
                     }
 
+                    @if (ghostFor(dayIndex); as ghost) {
+                      <!--
+                        What the drag will produce, drawn where it will land. A drag with no preview
+                        is a guess: you find out what you did once the server has been told.
+                      -->
+                      <div
+                        class="pointer-events-none absolute inset-x-0.5 z-30 rounded border-2 border-dashed border-brand-500 bg-brand-500/15"
+                        [style.top.px]="ghost.top"
+                        [style.height.px]="ghost.height"
+                        aria-hidden="true"
+                      >
+                        <span
+                          class="block px-1 pt-0.5 text-[10px] font-medium text-brand-700 dark:text-brand-200"
+                        >
+                          {{ ghost.label }}
+                        </span>
+                      </div>
+                    }
+
                     @if (nowIndicator() && isToday(day) && nowTop() !== null) {
                       <div
                         class="pointer-events-none absolute inset-x-0 z-20 flex items-center"
@@ -628,7 +861,10 @@ class SdsEventCalendar {
                         [attr.aria-label]="
                           p.event.title + ', ' + clock(p.start) + ' – ' + clock(p.end)
                         "
+                        [class.cursor-grab]="canDrag(p)"
+                        [class.opacity-40]="isDragging(p)"
                         (click)="onEventClick($event, p)"
+                        (pointerdown)="startMove($event, p, dayIndex)"
                       >
                         <span class="block truncate text-[11px] font-medium leading-tight">
                           {{ p.event.title }}
@@ -839,11 +1075,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   }
                 </div>
 
-                @for (day of days(); track day.getTime()) {
+                @for (day of days(); track day.getTime(); let dayIndex = $index) {
                   <div
-                    class="relative border-r border-border last:border-r-0"
+                    class="relative touch-none border-r border-border last:border-r-0"
+                    [attr.data-sds-day]="dayIndex"
                     [style.height.px]="bodyHeight()"
                     (click)="onGridClick($event, day)"
+                    (pointerdown)="startSelect($event, dayIndex)"
                   >
                     @for (h of hours(); track h) {
                       <div
@@ -852,6 +1090,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                       ></div>
                     }
 
+                    @if (ghostFor(dayIndex); as ghost) {
+                      <!--
+                        What the drag will produce, drawn where it will land. A drag with no preview
+                        is a guess: you find out what you did once the server has been told.
+                      -->
+                      <div
+                        class="pointer-events-none absolute inset-x-0.5 z-30 rounded border-2 border-dashed border-brand-500 bg-brand-500/15"
+                        [style.top.px]="ghost.top"
+                        [style.height.px]="ghost.height"
+                        aria-hidden="true"
+                      >
+                        <span
+                          class="block px-1 pt-0.5 text-[10px] font-medium text-brand-700 dark:text-brand-200"
+                        >
+                          {{ ghost.label }}
+                        </span>
+                      </div>
+                    }
+
                     @if (nowIndicator() && isToday(day) && nowTop() !== null) {
                       <div
                         class="pointer-events-none absolute inset-x-0 z-20 flex items-center"
@@ -879,7 +1136,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         [attr.aria-label]="
                           p.event.title + ', ' + clock(p.start) + ' – ' + clock(p.end)
                         "
+                        [class.cursor-grab]="canDrag(p)"
+                        [class.opacity-40]="isDragging(p)"
                         (click)="onEventClick($event, p)"
+                        (pointerdown)="startMove($event, p, dayIndex)"
                       >
                         <span class="block truncate text-[11px] font-medium leading-tight">
                           {{ p.event.title }}
@@ -904,7 +1164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startHour", required: false }] }], endHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endHour", required: false }] }], hourHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourHeight", required: false }] }], defaultMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMinutes", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], nowIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowIndicator", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showViewSwitcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewSwitcher", required: false }] }], maxPerCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPerCell", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], allDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDayLabel", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], viewSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewSwitcherLabel", required: false }] }], monthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthLabel", required: false }] }], weekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekLabel", required: false }] }], threeDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "threeDayLabel", required: false }] }], dayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayLabel", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], slotClick: [{ type: i0.Output, args: ["slotClick"] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startHour", required: false }] }], endHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endHour", required: false }] }], hourHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourHeight", required: false }] }], defaultMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMinutes", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], nowIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowIndicator", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showViewSwitcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewSwitcher", required: false }] }], maxPerCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPerCell", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], allDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDayLabel", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], viewSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewSwitcherLabel", required: false }] }], monthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthLabel", required: false }] }], weekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekLabel", required: false }] }], threeDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "threeDayLabel", required: false }] }], dayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayLabel", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], snapMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapMinutes", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], eventDrop: [{ type: i0.Output, args: ["eventDrop"] }], rangeSelect: [{ type: i0.Output, args: ["rangeSelect"] }], slotClick: [{ type: i0.Output, args: ["slotClick"] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
 
 /*
  * @besaitech/ng-design-system/calendar — the event calendar, kept OUT of the main entry point.
@@ -920,5 +1180,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SdsEventCalendar, allDayOn, eventsOn, minutesOfDay, occursOn, placeDay, startOfWeek, step, toDate, visibleDays, visibleRange };
+export { SdsEventCalendar, allDayOn, eventsOn, minutesOfDay, occursOn, placeDay, snapMinute, startOfWeek, step, toDate, visibleDays, visibleRange };
 //# sourceMappingURL=besaitech-ng-design-system-calendar.mjs.map