@forcecalendar/interface 1.4.0 → 1.6.0

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

@@ -8,7 +8,7 @@ var n = class extends HTMLElement {
 		this._initialized ||= (this.initialize(), !0), this.mount();
 	}
 	disconnectedCallback() {
-		this.unmount(), this.cleanup(), this._styleEl = null, this._contentWrapper = null;
+		this.unmount(), this.cleanup(), this._styleEl && this._styleEl.remove(), this._contentWrapper && this._contentWrapper.remove(), this._styleEl = null, this._contentWrapper = null;
 	}
 	initialize() {}
 	mount() {
@@ -236,7 +236,7 @@ var n = class extends HTMLElement {
 			loading: !1,
 			error: null,
 			config: { ...t }
-		}, this.subscribers = /* @__PURE__ */ new Set(), this.subscribe = this.subscribe.bind(this), this.unsubscribe = this.unsubscribe.bind(this), this.setState = this.setState.bind(this), this._syncEventsFromCore({ silent: !0 });
+		}, this.subscribers = /* @__PURE__ */ new Set(), this.subscribe = this.subscribe.bind(this), this.unsubscribe = this.unsubscribe.bind(this), this.setState = this.setState.bind(this), this._syncEventsFromCore({ silent: !0 }), this._visibleRangeKey = this._rangeKey(this.getVisibleRange());
 	}
 	_syncEventsFromCore(e = {}) {
 		let { force: t = !1 } = e, n = this.calendar.getEvents() || [];
@@ -299,28 +299,28 @@ var n = class extends HTMLElement {
 		});
 	}
 	setView(e) {
-		this.calendar.setView(e), this.setState({ view: e }), this.eventBus.emit("view:changed", { view: e });
+		this.calendar.setView(e), this.setState({ view: e }), this.eventBus.emit("view:changed", { view: e }), this._syncVisibleRange();
 	}
 	getView() {
 		return this.state.view;
 	}
 	setDate(e) {
-		this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("date:changed", { date: this.state.currentDate });
+		this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("date:changed", { date: this.state.currentDate }), this._syncVisibleRange();
 	}
 	getCurrentDate() {
 		return this.state.currentDate;
 	}
 	next() {
-		this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:next", { date: this.state.currentDate });
+		this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:next", { date: this.state.currentDate }), this._syncVisibleRange();
 	}
 	previous() {
-		this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:previous", { date: this.state.currentDate });
+		this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:previous", { date: this.state.currentDate }), this._syncVisibleRange();
 	}
 	today() {
-		this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:today", { date: this.state.currentDate });
+		this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:today", { date: this.state.currentDate }), this._syncVisibleRange();
 	}
 	goToDate(e) {
-		this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:goto", { date: this.state.currentDate });
+		this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), this.eventBus.emit("navigation:goto", { date: this.state.currentDate }), this._syncVisibleRange();
 	}
 	addEvent(e) {
 		let t = this.calendar.addEvent(e);
@@ -350,6 +350,69 @@ var n = class extends HTMLElement {
 	getEvents() {
 		return this.calendar.getEvents() || [];
 	}
+	setEvents(e, t = {}) {
+		let { removeMissing: n = !0 } = t, r = e ? Array.from(e) : [], i;
+		try {
+			i = typeof this.calendar.reconcileEvents == "function" ? this.calendar.setEvents(r, {
+				reconcile: !0,
+				removeMissing: n
+			}) : this._reconcileFallback(r, n);
+		} catch (e) {
+			throw this.eventBus.emit("event:error", {
+				action: "set",
+				events: r,
+				error: e
+			}), e;
+		}
+		let { added: a, updated: o, removed: s, unchanged: c } = i, l = {
+			events: this.getEvents(),
+			added: a,
+			updated: o,
+			removed: s,
+			unchanged: c
+		};
+		return (a.length > 0 || o.length > 0 || s.length > 0) && this.setState({ events: [...l.events] }), this.eventBus.emit("events:set", l), l;
+	}
+	_reconcileFallback(e, t) {
+		let n = /* @__PURE__ */ new Map();
+		e.forEach((e) => {
+			let t = e && e.id;
+			if (t == null || t === "") throw Error("Every event in a snapshot must have an id");
+			if (n.has(t)) throw Error(`Duplicate event id in snapshot: ${t}`);
+			n.set(t, e);
+		});
+		let r = {
+			added: [],
+			updated: [],
+			removed: [],
+			unchanged: []
+		}, i = new Map(this.getEvents().map((e) => [e.id, e]));
+		return t && i.forEach((e, t) => {
+			!n.has(t) && this.calendar.removeEvent(t) && r.removed.push(e);
+		}), n.forEach((e, t) => {
+			let n = i.get(t), a = typeof e.toObject == "function" ? e.toObject() : e;
+			if (!n) {
+				let n = this.calendar.addEvent(e);
+				if (!n) throw Error(`Failed to add event: ${t}`);
+				r.added.push(n);
+			} else if (n === e || this._isEquivalentFallback(n, a)) r.unchanged.push(n);
+			else {
+				let e = this.calendar.updateEvent(t, a);
+				if (!e) throw Error(`Failed to update event: ${t}`);
+				r.updated.push({
+					event: e,
+					oldEvent: n
+				});
+			}
+		}), r;
+	}
+	_isEquivalentFallback(e, t) {
+		let n = (e) => e instanceof Date ? e.getTime() : e == null ? NaN : new Date(e).getTime();
+		return Object.keys(t).every((r) => {
+			let i = e[r], a = t[r];
+			return r === "start" || r === "end" ? n(i) === n(a) : i === a ? !0 : i == null || a == null ? !1 : JSON.stringify(i) === JSON.stringify(a);
+		});
+	}
 	syncEvents() {
 		return this._syncEventsFromCore();
 	}
@@ -388,6 +451,41 @@ var n = class extends HTMLElement {
 		}
 		return t;
 	}
+	getVisibleRange() {
+		let e = this.calendar.getView(), t = this.calendar.getCurrentDate();
+		if (e !== "day") {
+			let e = this.calendar.getViewData() || {};
+			if (e.startDate instanceof Date && e.endDate instanceof Date) {
+				let t = new Date(e.startDate), n = new Date(e.endDate);
+				return e.type === "list" && (n = /* @__PURE__ */ new Date(n.getTime() - 1)), {
+					start: t,
+					end: n
+				};
+			}
+		}
+		let n = new Date(t);
+		n.setHours(0, 0, 0, 0);
+		let r = new Date(n);
+		return r.setDate(r.getDate() + 1), r.setMilliseconds(-1), {
+			start: n,
+			end: r
+		};
+	}
+	_rangeKey(e) {
+		return `${e.start.getTime()}:${e.end.getTime()}`;
+	}
+	_syncVisibleRange() {
+		if (!this.calendar) return;
+		let e = this.getVisibleRange(), t = this._rangeKey(e);
+		if (t === this._visibleRangeKey) return;
+		this._visibleRangeKey = t;
+		let n = {
+			...e,
+			view: this.state.view,
+			date: this.state.currentDate
+		};
+		this.eventBus.emit("range:changed", n);
+	}
 	selectEvent(e) {
 		this.setState({ selectedEvent: e }), this.eventBus.emit("event:selected", { event: e });
 	}
@@ -428,7 +526,7 @@ var n = class extends HTMLElement {
 		this.setState({ config: {
 			...this.state.config,
 			...e
-		} }), e.weekStartsOn !== void 0 && this.calendar.setWeekStartsOn(e.weekStartsOn), e.locale !== void 0 && this.calendar.setLocale(e.locale), e.timeZone !== void 0 && this.calendar.setTimezone(e.timeZone);
+		} }), e.weekStartsOn !== void 0 && (this.calendar.setWeekStartsOn(e.weekStartsOn), this._syncVisibleRange()), e.locale !== void 0 && this.calendar.setLocale(e.locale), e.timeZone !== void 0 && this.calendar.setTimezone(e.timeZone);
 	}
 	destroy() {
 		this.subscribers.clear(), this._subscriberIds &&= (this._subscriberIds.clear(), null), this.eventBus &&= (this.eventBus.clear(), null), this.state = null, this.calendar = null;
@@ -677,7 +775,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 +999,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 +1038,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 +1113,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,18 +1216,18 @@ var n = class extends HTMLElement {
 			t && e.setAttribute("aria-label", `Event: ${t}`);
 		}
 	}
-}, u = 4, d = 15, f = 1;
-function p(e, t = d) {
+}, d = 4, f = 15, p = 1;
+function m(e, t = f) {
 	return Math.round(e / t) * t;
 }
-function m(e, t) {
+function h(e, t) {
 	return Math.max(0, Math.min(e, 1440 - t));
 }
-function h(e, t) {
+function g(e, t) {
 	let n = new Date(e);
 	return n.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), t.getMilliseconds()), n;
 }
-var g = class {
+var _ = class {
 	constructor(e) {
 		this.renderer = e, this.container = e.container, this.stateManager = e.stateManager, this._active = null, this._docListeners = [];
 	}
@@ -1188,7 +1305,7 @@ var g = class {
 		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;
+				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);
@@ -1239,7 +1356,7 @@ var g = class {
 		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();
+		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)
@@ -1254,22 +1371,22 @@ var g = class {
 	}
 	_timeMoveDragMove(e) {
 		let t = this._active, n = this._columnAtPoint(e.clientX) || t.originColumn;
-		t.dropColumn = n, t.deltaMinutes = p((e.clientY - t.startY) / f);
+		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 * f}px)`;
+		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 = 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);
+		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 = 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`;
+		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 ?? {};
@@ -1281,7 +1398,7 @@ var g = class {
 	}
 	_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`;
+		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 ?? {};
@@ -1305,7 +1422,7 @@ var g = class {
 			t.className = "fc-resize-handle", t.setAttribute("aria-hidden", "true"), e.appendChild(t);
 		}
 	}
-}, _ = class extends l {
+}, v = class extends u {
 	constructor(e, t) {
 		super(e, t), this.maxEventsToShow = 3;
 	}
@@ -1438,7 +1555,7 @@ var g = class {
 				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(), new g(this).enableMonthMove();
+		}), this.attachCommonEventHandlers(), new _(this).enableMonthMove();
 	}
 	_applyRovingTabindex(e = null) {
 		let t = Array.from(this.container.querySelectorAll(".fc-month-day"));
@@ -1448,7 +1565,7 @@ var g = class {
 		for (let e of t) e.setAttribute("tabindex", e === n ? "0" : "-1");
 		return n;
 	}
-}, v = class extends l {
+}, y = class extends u {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1573,14 +1690,14 @@ var g = class {
 			day: "numeric",
 			year: "numeric"
 		}).format(n)}`;
-		this._enhanceTimeGridAccessibility(".fc-week-day-column", r), new g(this).enableTimeGrid(".fc-week-day-column");
+		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);
 	}
-}, y = class extends l {
+}, b = class extends u {
 	constructor(e, t) {
 		super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
 	}
@@ -1717,14 +1834,14 @@ var g = class {
 			day: "numeric",
 			year: "numeric"
 		}).format(t);
-		this._enhanceTimeGridAccessibility(".fc-day-column", n), new g(this).enableTimeGrid(".fc-day-column");
+		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);
 	}
-}, b = class extends n {
+}, x = class extends n {
 	constructor() {
 		super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
 			title: "New Event",
@@ -1771,8 +1888,8 @@ var g = class {
 	}
 	getStyles() {
 		return `
-            ${c.getBaseStyles()}
-            ${c.getButtonStyles()}
+            ${l.getBaseStyles()}
+            ${l.getButtonStyles()}
 
             :host {
                 display: none;
@@ -1979,7 +2096,7 @@ var g = class {
                             ${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)}"
@@ -2044,14 +2161,14 @@ var g = class {
 		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", b);
+customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", x);
 //#endregion
 //#region src/components/ForceCalendar.js
-var x = class e extends n {
+var S = class e extends n {
 	static RENDERERS = {
-		month: _,
-		week: v,
-		day: y
+		month: v,
+		week: y,
+		day: b
 	};
 	static get observedAttributes() {
 		return [
@@ -2060,11 +2177,12 @@ var x = class e extends n {
 			"locale",
 			"timezone",
 			"week-starts-on",
-			"height"
+			"height",
+			"theme"
 		];
 	}
 	constructor() {
-		super(), this.stateManager = null, this.currentView = null, this._hasRendered = !1, this._busUnsubscribers = [];
+		super(), this.stateManager = null, this.currentView = null, this._hasRendered = !1, this._busUnsubscribers = [], this._pendingEvents = null;
 	}
 	propChanged(e, t, n) {
 		if (!(!this.stateManager || t === n)) switch (e) {
@@ -2097,7 +2215,16 @@ var x = class e extends n {
 			timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
 			weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
 		};
-		this.stateManager = new a(e), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
+		if (this.stateManager = new a(e), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners(), this._upgradeProperty("events"), this._pendingEvents) {
+			let e = this._pendingEvents;
+			this._pendingEvents = null, this.stateManager.setEvents(e.events, e.options);
+		}
+	}
+	_upgradeProperty(e) {
+		if (Object.prototype.hasOwnProperty.call(this, e)) {
+			let t = this[e];
+			delete this[e], this[e] = t;
+		}
 	}
 	setupEventListeners() {
 		this._busUnsubscribers.forEach((e) => e()), this._busUnsubscribers = [];
@@ -2125,6 +2252,10 @@ var x = class e extends n {
 			this.emit("calendar-event-updated", e);
 		})), this._busUnsubscribers.push(e.on("event:deleted", (e) => {
 			this.emit("calendar-event-deleted", e);
+		})), this._busUnsubscribers.push(e.on("events:set", (e) => {
+			this.emit("calendar-events-set", e);
+		})), this._busUnsubscribers.push(e.on("range:changed", (e) => {
+			this.emit("calendar-range-change", e);
 		})), this._busUnsubscribers.push(e.on("date:selected", (e) => {
 			this.emit("calendar-date-select", e);
 		}));
@@ -2161,7 +2292,7 @@ var x = class e extends n {
 		if (t) {
 			this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
 			try {
-				let n = new (e.RENDERERS[this.currentView] || _)(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);
@@ -2176,7 +2307,7 @@ var x = class e extends n {
 		t && (t.style.display = e ? "flex" : "none"), n && (n.style.display = e ? "none" : "flex");
 	}
 	mount() {
-		this.currentView = this.stateManager.getView(), super.mount();
+		(!this.stateManager || !this.stateManager.state) && this.initialize(), this._stateUnsubscribe || (this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners()), this.currentView = this.stateManager.getView(), super.mount();
 	}
 	loadView(e) {
 		!e || this.currentView === e || (this.currentView = e, this._switchView(), this._updateViewButtons(), this._updateTitle());
@@ -2184,10 +2315,10 @@ var x = 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};
@@ -2682,13 +2813,18 @@ var x = 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] || _)(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);
@@ -2712,7 +2848,16 @@ var x = class e extends n {
 				id: n,
 				...t
 			});
-		}), this._hasRendered = !0;
+		});
+		let i = !this._hasRendered;
+		if (this._hasRendered = !0, i && this.stateManager) {
+			let e = this.stateManager.getState();
+			this.emit("calendar-range-change", {
+				...this.stateManager.getVisibleRange(),
+				view: e.view,
+				date: e.currentDate
+			});
+		}
 	}
 	handleNavigation(e) {
 		switch (e.currentTarget.dataset.action) {
@@ -2762,6 +2907,21 @@ var x = class e extends n {
 	getEvents() {
 		return this.stateManager.getEvents();
 	}
+	setEvents(e, t = {}) {
+		return this.stateManager ? this.stateManager.setEvents(e, t) : (this._pendingEvents = {
+			events: e ? Array.from(e) : [],
+			options: t
+		}, null);
+	}
+	get events() {
+		return this.stateManager ? this.stateManager.getEvents() : this._pendingEvents ? this._pendingEvents.events : [];
+	}
+	set events(e) {
+		this.setEvents(e);
+	}
+	getVisibleRange() {
+		return this.stateManager ? this.stateManager.getVisibleRange() : null;
+	}
 	setView(e) {
 		this.stateManager.setView(e);
 	}
@@ -2778,14 +2938,17 @@ var x = class e extends n {
 		this.stateManager.today();
 	}
 	unmount() {
-		this.destroy();
+		this._releaseBindings();
 	}
 	destroy() {
-		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();
+		this._releaseBindings(), this.stateManager && this.stateManager.destroy();
+	}
+	_releaseBindings() {
+		this._busUnsubscribers.forEach((e) => e()), this._busUnsubscribers = [], this._stateUnsubscribe &&= (this._stateUnsubscribe(), null), this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._currentViewInstance = null, this._hasRendered = !1, super.cleanup();
 	}
 };
-customElements.get("forcecal-main") || customElements.define("forcecal-main", x);
+customElements.get("forcecal-main") || customElements.define("forcecal-main", S);
 //#endregion
-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 };
+export { n as BaseComponent, u as BaseViewRenderer, s as DOMUtils, o as DateUtils, b as DayViewRenderer, r as EventBus, x as EventForm, 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