@forcecalendar/interface 1.3.0 → 1.5.0

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

@@ -677,7 +677,26 @@ var n = class extends HTMLElement {
 		};
 		return e.addEventListener("keydown", i), n?.focus(), () => e.removeEventListener("keydown", i);
 	}
-}, c = class {
+}, c = { slds: {
+	"--fc-primary-color": "#0176d3",
+	"--fc-primary-hover": "#014486",
+	"--fc-primary-light": "#eef4ff",
+	"--fc-accent-color": "#0b5cab",
+	"--fc-text-color": "#181818",
+	"--fc-text-secondary": "#706e6b",
+	"--fc-text-light": "#939393",
+	"--fc-border-color": "#e5e5e5",
+	"--fc-border-color-hover": "#c9c9c9",
+	"--fc-background": "#ffffff",
+	"--fc-background-alt": "#f3f3f3",
+	"--fc-background-hover": "#f3f3f3",
+	"--fc-background-active": "#d8e6fe",
+	"--fc-danger-color": "#ea001e",
+	"--fc-success-color": "#2e844a",
+	"--fc-border-radius": "0.25rem",
+	"--fc-border-radius-sm": "0.125rem",
+	"--fc-font-family": "'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+} }, l = class {
 	static colors = {
 		primary: "#3B82F6",
 		secondary: "#64748B",
@@ -882,7 +901,7 @@ var n = class extends HTMLElement {
 	static getAnimations() {
 		return "\n            @keyframes fc-fade-in {\n                from { opacity: 0; }\n                to { opacity: 1; }\n            }\n\n            @keyframes fc-slide-in-up {\n                from {\n                    opacity: 0;\n                    transform: translateY(10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            @keyframes fc-slide-in-down {\n                from {\n                    opacity: 0;\n                    transform: translateY(-10px);\n                }\n                to {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n            }\n\n            @keyframes fc-scale-in {\n                from {\n                    opacity: 0;\n                    transform: scale(0.95);\n                }\n                to {\n                    opacity: 1;\n                    transform: scale(1);\n                }\n            }\n\n            @keyframes fc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n            }\n\n            .fc-fade-in {\n                animation: fc-fade-in var(--fc-transition);\n            }\n\n            .fc-slide-in-up {\n                animation: fc-slide-in-up var(--fc-transition);\n            }\n\n            .fc-scale-in {\n                animation: fc-scale-in var(--fc-transition);\n            }\n        ";
 	}
-}, l = class {
+}, u = class {
 	constructor(e, t) {
 		this.container = e, this.stateManager = t, this._listeners = [], this._scrolled = !1, this._nowIndicatorTimer = null;
 	}
@@ -921,7 +940,7 @@ var n = class extends HTMLElement {
 		return n === 0 ? `${i} ${r}` : `${i}:${n.toString().padStart(2, "0")} ${r}`;
 	}
 	getContrastingTextColor(e) {
-		return !e || typeof e != "string" || e.charAt(0) !== "#" ? "white" : c.getContrastColor(e);
+		return !e || typeof e != "string" || e.charAt(0) !== "#" ? "white" : l.getContrastColor(e);
 	}
 	renderNowIndicator() {
 		let e = /* @__PURE__ */ new Date();
@@ -996,7 +1015,7 @@ var n = class extends HTMLElement {
         `;
 	}
 	getEventColor(e) {
-		return c.sanitizeColor(e?.backgroundColor, "#2563eb");
+		return l.sanitizeColor(e?.backgroundColor, "#2563eb");
 	}
 	attachCommonEventHandlers() {
 		this.addListener(this.container, "click", (e) => {
@@ -1099,7 +1118,213 @@ var n = class extends HTMLElement {
 			t && e.setAttribute("aria-label", `Event: ${t}`);
 		}
 	}
-}, u = class extends l {
+}, d = 4, f = 15, p = 1;
+function m(e, t = f) {
+	return Math.round(e / t) * t;
+}
+function h(e, t) {
+	return Math.max(0, Math.min(e, 1440 - t));
+}
+function g(e, t) {
+	let n = new Date(e);
+	return n.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), t.getMilliseconds()), n;
+}
+var _ = 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) < d && Math.abs(e.clientY - t.startY) < d) 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 = g(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 = m((e.clientY - t.startY) / p);
+		let r = t.originColumn.getBoundingClientRect(), i = n.getBoundingClientRect();
+		t.eventEl.style.transform = `translate(${i.left - r.left}px, ${t.deltaMinutes * p}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 = g(e.dropColumn ? new Date(e.dropColumn.dataset.date) : n, n), a = h(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 = m((e.clientY - t.startY) / p);
+		t.newHeight = Math.max(f, 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 = m(Math.min(r, i) / p), t.toMinutes = m(Math.max(r, i) / p), t.fromMinutes = Math.max(0, t.fromMinutes), t.toMinutes = Math.min(1440, Math.max(t.toMinutes, t.fromMinutes + f)), 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 * p}px`, this._selectionEl.style.height = `${(t.toMinutes - t.fromMinutes) * p}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);
+		}
+	}
+}, v = class extends u {
 	constructor(e, t) {
 		super(e, t), this.maxEventsToShow = 3;
 	}
@@ -1232,7 +1457,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 _(this).enableMonthMove();
 	}
 	_applyRovingTabindex(e = null) {
 		let t = Array.from(this.container.querySelectorAll(".fc-month-day"));
@@ -1242,7 +1467,7 @@ var n = class extends HTMLElement {
 		for (let e of t) e.setAttribute("tabindex", e === n ? "0" : "-1");
 		return n;
 	}
-}, d = class extends l {
+}, y = class extends u {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1367,14 +1592,14 @@ var n = class extends HTMLElement {
 			day: "numeric",
 			year: "numeric"
 		}).format(n)}`;
-		this._enhanceTimeGridAccessibility(".fc-week-day-column", r);
+		this._enhanceTimeGridAccessibility(".fc-week-day-column", r), new _(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 {
+}, b = class extends u {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1511,14 +1736,14 @@ var n = class extends HTMLElement {
 			day: "numeric",
 			year: "numeric"
 		}).format(t);
-		this._enhanceTimeGridAccessibility(".fc-day-column", n);
+		this._enhanceTimeGridAccessibility(".fc-day-column", n), new _(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 {
+}, x = class extends n {
 	constructor() {
 		super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
 			title: "New Event",
@@ -1565,8 +1790,8 @@ var n = class extends HTMLElement {
 	}
 	getStyles() {
 		return `
-            ${c.getBaseStyles()}
-            ${c.getButtonStyles()}
+            ${l.getBaseStyles()}
+            ${l.getButtonStyles()}
 
             :host {
                 display: none;
@@ -1773,7 +1998,7 @@ var n = class extends HTMLElement {
                             ${this.config.colors.map((e) => `
                                 <button type="button"
                                         class="color-btn ${e.color === this._formData.color ? "selected" : ""}"
-                                        style="background-color: ${c.sanitizeColor(e.color)}"
+                                        style="background-color: ${l.sanitizeColor(e.color)}"
                                         data-color="${s.escapeHTML(e.color)}"
                                         title="${s.escapeHTML(e.label)}"
                                         aria-label="${s.escapeHTML(e.label)}"
@@ -1838,14 +2063,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", x);
 //#endregion
 //#region src/components/ForceCalendar.js
-var m = class e extends n {
+var S = class e extends n {
 	static RENDERERS = {
-		month: u,
-		week: d,
-		day: f
+		month: v,
+		week: y,
+		day: b
 	};
 	static get observedAttributes() {
 		return [
@@ -1854,7 +2079,8 @@ var m = class e extends n {
 			"locale",
 			"timezone",
 			"week-starts-on",
-			"height"
+			"height",
+			"theme"
 		];
 	}
 	constructor() {
@@ -1955,7 +2181,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] || v)(t, this.stateManager);
 				n._viewType = this.currentView, this._currentViewInstance = n, n.render();
 			} catch (e) {
 				console.error("[ForceCalendar] Error switching view:", e);
@@ -1978,10 +2204,10 @@ var m = class e extends n {
 	getStyles() {
 		let e = this.getAttribute("height") || "800px";
 		return `
-            ${c.getBaseStyles()}
-            ${c.getButtonStyles()}
-            ${c.getGridStyles()}
-            ${c.getAnimations()}
+            ${l.getBaseStyles()}
+            ${l.getButtonStyles()}
+            ${l.getGridStyles()}
+            ${l.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -2089,6 +2315,39 @@ var m = class e extends n {
                 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,
@@ -2443,13 +2702,18 @@ var m = class e extends n {
 	renderView() {
 		return "<div id=\"calendar-view-container\"></div>";
 	}
+	_applyTheme(e) {
+		let t = c[e];
+		for (let e of Object.keys(c.slds)) t && t[e] ? this.style.setProperty(e, t[e]) : this.style.removeProperty(e);
+	}
 	afterRender() {
+		this._applyTheme(this.getAttribute("theme"));
 		let t = this.$("#calendar-view-container");
 		if (t && this.stateManager && this.currentView) {
 			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] || v)(t, this.stateManager);
 				n._viewType = this.currentView, this._currentViewInstance = n, n.render();
 			} catch (e) {
 				console.error("[ForceCalendar] Error creating/rendering view:", e);
@@ -2465,6 +2729,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({
@@ -2543,8 +2809,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", S);
 //#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, u as BaseViewRenderer, s as DOMUtils, o as DateUtils, b as DayViewRenderer, r as EventBus, S as ForceCalendar, v as MonthViewRenderer, a as StateManager, l as StyleUtils, y as WeekViewRenderer, i as eventBus };
 
 //# sourceMappingURL=force-calendar-interface.esm.js.map