@forcecalendar/interface 1.5.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;
@@ -2084,7 +2182,7 @@ var S = class e extends n {
 		];
 	}
 	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) {
@@ -2117,7 +2215,16 @@ var S = 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 = [];
@@ -2145,6 +2252,10 @@ var S = 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);
 		}));
@@ -2196,7 +2307,7 @@ var S = 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());
@@ -2737,7 +2848,16 @@ var S = 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) {
@@ -2787,6 +2907,21 @@ var S = 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);
 	}
@@ -2803,14 +2938,17 @@ var S = 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", S);
 //#endregion
-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 };
+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