@forcecalendar/interface 1.2.0 → 1.4.0

package/dist/force-calendar-interface.esm.js

@@ -1012,13 +1012,300 @@ var n = class extends HTMLElement {
 		let t = e.dataset.eventId, n = this.stateManager.getEvents().find((e) => e.id === t);
 		n && this.stateManager.selectEvent(n);
 	}
+	_enhanceTimeGridAccessibility(e, t) {
+		let n = this.container.querySelector(".fc-time-grid");
+		if (!n) return;
+		n.setAttribute("role", "grid"), n.setAttribute("aria-label", t);
+		let r = this.container.querySelector(".fc-time-gutter");
+		r && r.setAttribute("aria-hidden", "true");
+		let i = this.stateManager.getState().config.locale || "en-US", a = new Intl.DateTimeFormat(i, {
+			weekday: "long",
+			month: "long",
+			day: "numeric"
+		}), o = Array.from(this.container.querySelectorAll(e));
+		for (let e of o) {
+			e.setAttribute("role", "row");
+			let t = new Date(e.dataset.date), n = a.format(t);
+			e.setAttribute("aria-label", n);
+			for (let t of e.querySelectorAll(".fc-hour-slot")) t.setAttribute("role", "gridcell"), t.setAttribute("tabindex", "-1"), t.setAttribute("aria-label", `${n}, ${this.formatHour(Number(t.dataset.hour))}`);
+		}
+		if (this._applySlotRovingTabindex(o), this._pendingSlotFocus) {
+			let { colIndex: e, hour: t } = this._pendingSlotFocus;
+			this._pendingSlotFocus = null;
+			let n = this._slotAt(o, e, t);
+			n && (this._applySlotRovingTabindex(o, n), n.focus());
+		}
+		this.addListener(this.container, "keydown", (t) => {
+			let n = t.target.closest(".fc-hour-slot");
+			if (!n || !this.container.contains(n)) return;
+			let r = n.closest(e), i = o.indexOf(r), a = Number(n.dataset.hour), s = null;
+			switch (t.key) {
+				case "ArrowDown":
+					s = this._slotAt(o, i, a + 1);
+					break;
+				case "ArrowUp":
+					s = this._slotAt(o, i, a - 1);
+					break;
+				case "ArrowRight":
+					s = this._slotAt(o, i + 1, a);
+					break;
+				case "ArrowLeft":
+					s = this._slotAt(o, i - 1, a);
+					break;
+				case "Home":
+					s = this._slotAt(o, i, 0);
+					break;
+				case "End":
+					s = this._slotAt(o, i, 23);
+					break;
+				case "PageUp":
+				case "PageDown":
+					t.preventDefault(), this._pendingSlotFocus = {
+						colIndex: i,
+						hour: a
+					}, t.key === "PageDown" ? this.stateManager.next() : this.stateManager.previous();
+					return;
+				case "Enter":
+				case " ": {
+					t.preventDefault();
+					let e = new Date(r.dataset.date);
+					e.setHours(a, 0, 0, 0), this._pendingSlotFocus = {
+						colIndex: i,
+						hour: a
+					}, this.stateManager.selectDate(e);
+					return;
+				}
+				default: return;
+			}
+			t.preventDefault(), s && (this._applySlotRovingTabindex(o, s), s.scrollIntoView?.({ block: "nearest" }), s.focus());
+		});
+	}
+	_slotAt(e, t, n) {
+		return t < 0 || t >= e.length || n < 0 || n > 23 ? null : e[t].querySelector(`.fc-hour-slot[data-hour="${n}"]`);
+	}
+	_applySlotRovingTabindex(e, t = null) {
+		let n = this.container.querySelectorAll(".fc-hour-slot");
+		if (n.length !== 0) {
+			if (!t) {
+				let r = e.find((e) => this.isToday(new Date(e.dataset.date))) || e[0];
+				t = r && r.querySelector(".fc-hour-slot[data-hour=\"9\"]"), t ||= n[0];
+			}
+			for (let e of n) e.setAttribute("tabindex", e === t ? "0" : "-1");
+		}
+	}
 	_enhanceEventAccessibility() {
 		for (let e of this.container.querySelectorAll(".fc-event")) if (e.setAttribute("role", "button"), e.setAttribute("tabindex", "0"), !e.hasAttribute("aria-label")) {
 			let t = (e.getAttribute("title") || e.textContent || "").trim();
 			t && e.setAttribute("aria-label", `Event: ${t}`);
 		}
 	}
-}, u = class extends l {
+}, u = 4, d = 15, f = 1;
+function p(e, t = d) {
+	return Math.round(e / t) * t;
+}
+function m(e, t) {
+	return Math.max(0, Math.min(e, 1440 - t));
+}
+function h(e, t) {
+	let n = new Date(e);
+	return n.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), t.getMilliseconds()), n;
+}
+var g = class {
+	constructor(e) {
+		this.renderer = e, this.container = e.container, this.stateManager = e.stateManager, this._active = null, this._docListeners = [];
+	}
+	enableMonthMove() {
+		this.renderer.addListener(this.container, "pointerdown", (e) => {
+			if (e.button !== 0) return;
+			let t = e.target.closest(".fc-event");
+			!t || !this.container.contains(t) || t.closest(".fc-month-day") && this._arm(e, {
+				mode: "month-move",
+				eventEl: t,
+				eventId: t.dataset.eventId,
+				onDragMove: (e) => this._monthDragMove(e),
+				onDrop: (e) => this._monthDrop(e)
+			});
+		});
+	}
+	enableTimeGrid(e) {
+		this._columnSelector = e, this._injectResizeHandles(), this.renderer.addListener(this.container, "pointerdown", (t) => {
+			if (t.button !== 0) return;
+			let n = t.target.closest(".fc-resize-handle");
+			if (n) {
+				let e = n.closest(".fc-timed-event");
+				if (!e) return;
+				t.preventDefault(), this._arm(t, {
+					mode: "resize",
+					eventEl: e,
+					eventId: e.dataset.eventId,
+					originTop: parseFloat(e.style.top) || 0,
+					originHeight: parseFloat(e.style.height) || 30,
+					onDragMove: (e) => this._resizeDragMove(e),
+					onDrop: () => this._resizeDrop()
+				});
+				return;
+			}
+			let r = t.target.closest(".fc-timed-event");
+			if (r && this.container.contains(r)) {
+				this._arm(t, {
+					mode: "time-move",
+					eventEl: r,
+					eventId: r.dataset.eventId,
+					originTop: parseFloat(r.style.top) || 0,
+					originColumn: r.closest(e),
+					onDragMove: (e) => this._timeMoveDragMove(e),
+					onDrop: () => this._timeMoveDrop()
+				});
+				return;
+			}
+			let i = t.target.closest(e);
+			i && !t.target.closest(".fc-event") && this._arm(t, {
+				mode: "create",
+				column: i,
+				onDragMove: (e) => this._createDragMove(e),
+				onDrop: () => this._createDrop()
+			});
+		});
+	}
+	_arm(e, t) {
+		this._active = {
+			...t,
+			startX: e.clientX,
+			startY: e.clientY,
+			dragging: !1
+		};
+		let n = (e) => this._onPointerMove(e), r = (e) => this._onPointerUp(e), i = () => this._cancel(), a = (e) => {
+			e.key === "Escape" && this._cancel();
+		}, o = this.container.ownerDocument;
+		o.addEventListener("pointermove", n), o.addEventListener("pointerup", r), o.addEventListener("pointercancel", i), o.addEventListener("keydown", a), this._docListeners = [
+			["pointermove", n],
+			["pointerup", r],
+			["pointercancel", i],
+			["keydown", a]
+		];
+	}
+	_onPointerMove(e) {
+		let t = this._active;
+		if (t) {
+			if (!t.dragging) {
+				if (Math.abs(e.clientX - t.startX) < u && Math.abs(e.clientY - t.startY) < u) return;
+				t.dragging = !0, t.eventEl && t.eventEl.classList.add("fc-dragging");
+			}
+			e.preventDefault(), t.onDragMove(e);
+		}
+	}
+	_onPointerUp(e) {
+		let t = this._active;
+		if (this._teardownDocListeners(), t) {
+			if (t.dragging) {
+				let n = this.container.ownerDocument, r = (e) => {
+					e.stopPropagation(), e.preventDefault();
+				};
+				n.addEventListener("click", r, {
+					capture: !0,
+					once: !0
+				}), setTimeout(() => n.removeEventListener("click", r, { capture: !0 }), 0), t.onDrop(e);
+			}
+			this._cleanupVisuals(t), this._active = null;
+		}
+	}
+	_cancel() {
+		let e = this._active;
+		this._teardownDocListeners(), this._active = null, e && this._cleanupVisuals(e);
+	}
+	_teardownDocListeners() {
+		let e = this.container.ownerDocument;
+		for (let [t, n] of this._docListeners) e.removeEventListener(t, n);
+		this._docListeners = [];
+	}
+	_cleanupVisuals(e) {
+		e.eventEl && (e.eventEl.classList.remove("fc-dragging"), e.eventEl.style.transform = ""), this.container.querySelectorAll(".fc-drop-target").forEach((e) => e.classList.remove("fc-drop-target")), this._selectionEl?.remove(), this._selectionEl = null;
+	}
+	_cellAtPoint(e, t) {
+		for (let n of this.container.querySelectorAll(".fc-month-day")) {
+			let r = n.getBoundingClientRect();
+			if (e >= r.left && e < r.right && t >= r.top && t < r.bottom) return n;
+		}
+		return null;
+	}
+	_monthDragMove(e) {
+		let t = this._active;
+		t.eventEl.style.transform = `translate(${e.clientX - t.startX}px, ${e.clientY - t.startY}px)`;
+		let n = this._cellAtPoint(e.clientX, e.clientY);
+		n !== t.dropCell && (t.dropCell?.classList.remove("fc-drop-target"), n?.classList.add("fc-drop-target"), t.dropCell = n);
+	}
+	_monthDrop() {
+		let e = this._active ?? {}, t = e.dropCell;
+		if (!t) return;
+		let n = this.stateManager.getEvents().find((t) => t.id === e.eventId);
+		if (!n) return;
+		let r = new Date(n.start), i = h(new Date(t.dataset.date), r), a = i.getTime() - r.getTime();
+		a !== 0 && this.stateManager.updateEvent(e.eventId, {
+			start: i,
+			end: new Date(new Date(n.end).getTime() + a)
+		});
+	}
+	_columnAtPoint(e) {
+		for (let t of this.container.querySelectorAll(this._columnSelector)) {
+			let n = t.getBoundingClientRect();
+			if (e >= n.left && e < n.right) return t;
+		}
+		return null;
+	}
+	_timeMoveDragMove(e) {
+		let t = this._active, n = this._columnAtPoint(e.clientX) || t.originColumn;
+		t.dropColumn = n, t.deltaMinutes = p((e.clientY - t.startY) / f);
+		let r = t.originColumn.getBoundingClientRect(), i = n.getBoundingClientRect();
+		t.eventEl.style.transform = `translate(${i.left - r.left}px, ${t.deltaMinutes * f}px)`;
+	}
+	_timeMoveDrop() {
+		let e = this._active ?? {}, t = this.stateManager.getEvents().find((t) => t.id === e.eventId);
+		if (!t || !e.deltaMinutes && e.dropColumn === e.originColumn) return;
+		let n = new Date(t.start), r = new Date(t.end).getTime() - n.getTime(), i = h(e.dropColumn ? new Date(e.dropColumn.dataset.date) : n, n), a = m(i.getHours() * 60 + i.getMinutes() + (e.deltaMinutes || 0), Math.round(r / 6e4)), o = new Date(i);
+		o.setHours(Math.floor(a / 60), a % 60, 0, 0), o.getTime() !== n.getTime() && this.stateManager.updateEvent(e.eventId, {
+			start: o,
+			end: new Date(o.getTime() + r)
+		});
+	}
+	_resizeDragMove(e) {
+		let t = this._active, n = p((e.clientY - t.startY) / f);
+		t.newHeight = Math.max(d, t.originHeight + n), t.newHeight = Math.min(t.newHeight, 1440 - t.originTop), t.eventEl.style.height = `${t.newHeight}px`;
+	}
+	_resizeDrop() {
+		let e = this._active ?? {};
+		if (!e.newHeight || e.newHeight === e.originHeight) return;
+		let t = this.stateManager.getEvents().find((t) => t.id === e.eventId);
+		if (!t) return;
+		let n = new Date(new Date(t.start).getTime() + e.newHeight * 6e4);
+		this.stateManager.updateEvent(e.eventId, { end: n });
+	}
+	_createDragMove(e) {
+		let t = this._active, n = t.column.getBoundingClientRect(), r = t.startY - n.top, i = e.clientY - n.top;
+		t.fromMinutes = p(Math.min(r, i) / f), t.toMinutes = p(Math.max(r, i) / f), t.fromMinutes = Math.max(0, t.fromMinutes), t.toMinutes = Math.min(1440, Math.max(t.toMinutes, t.fromMinutes + d)), this._selectionEl || (this._selectionEl = this.container.ownerDocument.createElement("div"), this._selectionEl.className = "fc-drag-selection", t.column.appendChild(this._selectionEl)), this._selectionEl.style.top = `${t.fromMinutes * f}px`, this._selectionEl.style.height = `${(t.toMinutes - t.fromMinutes) * f}px`;
+	}
+	_createDrop() {
+		let e = this._active ?? {};
+		if (e.fromMinutes == null) return;
+		let t = new Date(e.column.dataset.date);
+		t.setHours(Math.floor(e.fromMinutes / 60), e.fromMinutes % 60, 0, 0);
+		let n = new Date(e.column.dataset.date);
+		n.setHours(Math.floor(e.toMinutes / 60), e.toMinutes % 60, 0, 0), this.container.dispatchEvent(new CustomEvent("range-select", {
+			detail: {
+				start: t,
+				end: n
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_injectResizeHandles() {
+		for (let e of this.container.querySelectorAll(".fc-timed-event")) {
+			if (e.querySelector(".fc-resize-handle")) continue;
+			let t = this.container.ownerDocument.createElement("div");
+			t.className = "fc-resize-handle", t.setAttribute("aria-hidden", "true"), e.appendChild(t);
+		}
+	}
+}, _ = class extends l {
 	constructor(e, t) {
 		super(e, t), this.maxEventsToShow = 3;
 	}
@@ -1151,7 +1438,7 @@ var n = class extends HTMLElement {
 				let e = new Date(t.dataset.date);
 				e.setDate(e.getDate() + (i - r)), this._pendingFocusMs = e.getTime(), i < 0 ? this.stateManager.previous() : this.stateManager.next();
 			}
-		}), this.attachCommonEventHandlers();
+		}), this.attachCommonEventHandlers(), new g(this).enableMonthMove();
 	}
 	_applyRovingTabindex(e = null) {
 		let t = Array.from(this.container.querySelectorAll(".fc-month-day"));
@@ -1161,7 +1448,7 @@ var n = class extends HTMLElement {
 		for (let e of t) e.setAttribute("tabindex", e === n ? "0" : "-1");
 		return n;
 	}
-}, d = class extends l {
+}, v = class extends l {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1258,7 +1545,7 @@ var n = class extends HTMLElement {
 		return `
             <div class="fc-week-day-column" data-date="${e.date.toISOString()}" style="border-right: 1px solid var(--fc-border-color); position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${t.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
+                ${t.map((e) => `<div class="fc-hour-slot" data-hour="${e}" style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
 
                 <!-- Now indicator for today -->
                 ${e.isToday ? this.renderNowIndicator() : ""}
@@ -1281,13 +1568,19 @@ var n = class extends HTMLElement {
 			let n = new Date(t.dataset.date), r = this.container.querySelector("#week-scroll-container"), i = t.offsetTop, a = e.clientY - t.getBoundingClientRect().top + (r ? r.scrollTop : 0) - i, o = Math.max(0, Math.min(a + i, this.totalHeight));
 			n.setHours(Math.floor(o / this.hourHeight), Math.floor(o % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(n);
 		}), this.attachCommonEventHandlers();
+		let e = this.stateManager.getViewData()?.days || [], t = this.stateManager.getState().config.locale || "en-US", n = e[0] ? new Date(e[0].date) : /* @__PURE__ */ new Date(), r = `Week of ${new Intl.DateTimeFormat(t, {
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		}).format(n)}`;
+		this._enhanceTimeGridAccessibility(".fc-week-day-column", r), new g(this).enableTimeGrid(".fc-week-day-column");
 	}
 	_scrollToCurrentTime() {
 		if (this._scrolled) return;
 		let e = this.container.querySelector("#week-scroll-container");
 		e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
 	}
-}, f = class extends l {
+}, y = class extends l {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1395,7 +1688,7 @@ var n = class extends HTMLElement {
 		return `
             <div class="fc-day-column" data-date="${n.toISOString()}" style="position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${r.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
+                ${r.map((e) => `<div class="fc-hour-slot" data-hour="${e}" style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
 
                 <!-- Now indicator for today -->
                 ${t ? this.renderNowIndicator() : ""}
@@ -1418,13 +1711,20 @@ var n = class extends HTMLElement {
 			let n = new Date(t.dataset.date), r = this.container.querySelector("#day-scroll-container"), i = t.offsetTop, a = e.clientY - t.getBoundingClientRect().top + (r ? r.scrollTop : 0) - i, o = Math.max(0, Math.min(a + i, this.totalHeight));
 			n.setHours(Math.floor(o / this.hourHeight), Math.floor(o % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(n);
 		}), this.attachCommonEventHandlers();
+		let e = this.stateManager.getState().config.locale || "en-US", t = this.stateManager.getState().currentDate || /* @__PURE__ */ new Date(), n = new Intl.DateTimeFormat(e, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		}).format(t);
+		this._enhanceTimeGridAccessibility(".fc-day-column", n), new g(this).enableTimeGrid(".fc-day-column");
 	}
 	_scrollToCurrentTime() {
 		if (this._scrolled) return;
 		let e = this.container.querySelector("#day-scroll-container");
 		e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
 	}
-}, p = class extends n {
+}, b = class extends n {
 	constructor() {
 		super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
 			title: "New Event",
@@ -1744,14 +2044,14 @@ var n = class extends HTMLElement {
 		this._cleanupFocusTrap && this._cleanupFocusTrap(), this._handleKeyDown && (window.removeEventListener("keydown", this._handleKeyDown), this._handleKeyDown = null, this._keydownListenerAdded = !1);
 	}
 };
-customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", p);
+customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", b);
 //#endregion
 //#region src/components/ForceCalendar.js
-var m = class e extends n {
+var x = class e extends n {
 	static RENDERERS = {
-		month: u,
-		week: d,
-		day: f
+		month: _,
+		week: v,
+		day: y
 	};
 	static get observedAttributes() {
 		return [
@@ -1861,7 +2161,7 @@ var m = class e extends n {
 		if (t) {
 			this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
 			try {
-				let n = new (e.RENDERERS[this.currentView] || u)(t, this.stateManager);
+				let n = new (e.RENDERERS[this.currentView] || _)(t, this.stateManager);
 				n._viewType = this.currentView, this._currentViewInstance = n, n.render();
 			} catch (e) {
 				console.error("[ForceCalendar] Error switching view:", e);
@@ -1989,11 +2289,45 @@ var m = class e extends n {
             }
 
             .fc-month-day:focus-visible,
+            .fc-hour-slot:focus-visible,
             .fc-event:focus-visible {
                 outline: 2px solid var(--fc-primary-color);
                 outline-offset: -2px;
             }
 
+            .fc-event { touch-action: none; }
+
+            .fc-dragging {
+                opacity: 0.6;
+                z-index: 30;
+                pointer-events: none;
+            }
+
+            .fc-drop-target {
+                outline: 2px dashed var(--fc-primary-color);
+                outline-offset: -2px;
+            }
+
+            .fc-resize-handle {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 6px;
+                cursor: ns-resize;
+            }
+
+            .fc-drag-selection {
+                position: absolute;
+                left: 2px;
+                right: 2px;
+                background: color-mix(in srgb, var(--fc-primary-color) 18%, transparent);
+                border: 1px solid var(--fc-primary-color);
+                border-radius: 4px;
+                pointer-events: none;
+                z-index: 20;
+            }
+
             .fc-nav-arrow:focus-visible,
             .fc-btn:focus-visible,
             .fc-btn-today:focus-visible,
@@ -2354,7 +2688,7 @@ var m = class e extends n {
 			if (this._currentViewInstance && this._currentViewInstance._viewType === this.currentView && t.children.length > 0) return;
 			this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe &&= (this._viewUnsubscribe(), null));
 			try {
-				let n = new (e.RENDERERS[this.currentView] || u)(t, this.stateManager);
+				let n = new (e.RENDERERS[this.currentView] || _)(t, this.stateManager);
 				n._viewType = this.currentView, this._currentViewInstance = n, n.render();
 			} catch (e) {
 				console.error("[ForceCalendar] Error creating/rendering view:", e);
@@ -2370,6 +2704,8 @@ var m = class e extends n {
 			n.open(/* @__PURE__ */ new Date());
 		}), this.addListener(this.shadowRoot, "day-click", (e) => {
 			n && n.open(e.detail.date);
+		}), this.addListener(this.shadowRoot, "range-select", (e) => {
+			this.emit("calendar-range-select", e.detail), n && n.open(e.detail.start);
 		}), n && this.addListener(n, "save", (e) => {
 			let t = e.detail, n = window.crypto && typeof window.crypto.randomUUID == "function" ? window.crypto.randomUUID() : Math.random().toString(36).substring(2, 15);
 			this.stateManager.addEvent({
@@ -2448,8 +2784,8 @@ var m = class e extends n {
 		this._busUnsubscribers.forEach((e) => e()), this._busUnsubscribers = [], this._stateUnsubscribe &&= (this._stateUnsubscribe(), null), this._currentViewInstance && this._currentViewInstance.cleanup && (this._currentViewInstance.cleanup(), this._currentViewInstance = null), this.stateManager && this.stateManager.destroy(), super.cleanup();
 	}
 };
-customElements.get("forcecal-main") || customElements.define("forcecal-main", m);
+customElements.get("forcecal-main") || customElements.define("forcecal-main", x);
 //#endregion
-export { n as BaseComponent, l as BaseViewRenderer, s as DOMUtils, o as DateUtils, f as DayViewRenderer, r as EventBus, m as ForceCalendar, u as MonthViewRenderer, a as StateManager, c as StyleUtils, d as WeekViewRenderer, i as eventBus };
+export { n as BaseComponent, l as BaseViewRenderer, s as DOMUtils, o as DateUtils, y as DayViewRenderer, r as EventBus, x as ForceCalendar, _ as MonthViewRenderer, a as StateManager, c as StyleUtils, v as WeekViewRenderer, i as eventBus };
 
 //# sourceMappingURL=force-calendar-interface.esm.js.map