@forgebuild/hotal-ui 0.23.1 → 0.23.2

package/dist/hotal-ui.js

@@ -13568,34 +13568,39 @@ function Ag(e, t) {
 			Je(), J(e, t);
 		};
 		X(r, (e) => {
-			G(h) === "connecting" ? e(i) : G(h) === "error" ? e(a, 1) : e(o, -1);
-		}), I(t), W(() => n = Ka(t, 1, "lrf-status svelte-1d6cuoy", null, n, { "lrf-status-error": G(h) === "error" })), J(e, t);
-	}, r = $(t, "heading", 7), i = $(t, "channelName", 7), a = $(t, "ablyAuthUrl", 7), o = $(t, "fetchReservations", 7), s = $(t, "restaurants", 7), c = $(t, "maxItems", 7, 30), l = $(t, "autoLoadMore", 7, !0), d = $(t, "emptyLabel", 7, "No reservations yet."), f = $(t, "showEmail", 7, !0), p = /* @__PURE__ */ B(Gn([])), m = /* @__PURE__ */ B(void 0), h = /* @__PURE__ */ B("connecting"), g = /* @__PURE__ */ B(!0), _ = /* @__PURE__ */ B(!1), v = /* @__PURE__ */ B(!0), y = /* @__PURE__ */ B(void 0), b = /* @__PURE__ */ B(void 0);
-	function x() {
+			G(_) === "connecting" ? e(i) : G(_) === "error" ? e(a, 1) : e(o, -1);
+		}), I(t), W(() => n = Ka(t, 1, "lrf-status svelte-1d6cuoy", null, n, { "lrf-status-error": G(_) === "error" })), J(e, t);
+	}, r = $(t, "heading", 7), i = $(t, "channelName", 7), a = $(t, "ablyAuthUrl", 7), o = $(t, "fetchReservations", 7), s = $(t, "restaurants", 7), c = $(t, "maxItems", 7, 30), l = $(t, "autoLoadMore", 7, !0), d = $(t, "emptyLabel", 7, "No reservations yet."), f = $(t, "showEmail", 7, !0), p = $(t, "filterDateFrom", 7), m = $(t, "filterDateTo", 7), h = /* @__PURE__ */ B(Gn([])), g = /* @__PURE__ */ B(void 0), _ = /* @__PURE__ */ B("connecting"), v = /* @__PURE__ */ B(!0), y = /* @__PURE__ */ B(!1), b = /* @__PURE__ */ B(!0), x = /* @__PURE__ */ B(void 0), S = /* @__PURE__ */ B(void 0);
+	function C() {
 		return typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 	}
-	let S = /* @__PURE__ */ R(() => new Map((s() ?? []).map((e) => [e.id, e.name])));
-	function C(e) {
-		let t = [e, ...G(p).filter((t) => t.id !== e.id)];
-		V(p, l() ? t : t.slice(0, c()), !0);
+	let w = /* @__PURE__ */ R(() => new Map((s() ?? []).map((e) => [e.id, e.name])));
+	function T(e) {
+		return !(p() && e.reservation_date < p() || m() && e.reservation_date > m());
 	}
-	async function w() {
-		if (!(G(_) || !G(v) || !o())) {
-			V(_, !0);
+	function E(e) {
+		let t = [e, ...G(h).filter((t) => t.id !== e.id)];
+		V(h, l() ? t : t.slice(0, c()), !0);
+	}
+	async function D() {
+		if (!(G(y) || !G(b) || !o())) {
+			V(y, !0);
 			try {
-				let e = G(p)[G(p).length - 1]?.created_at, t = await o()({
+				let e = G(h)[G(h).length - 1]?.created_at, t = await o()({
 					cursor: e,
-					limit: c()
-				}), n = new Set(G(p).map((e) => e.id)), r = t.filter((e) => !n.has(e.id));
-				V(p, [...G(p), ...r], !0), V(v, t.length === c() && r.length > 0, !0);
+					limit: c(),
+					filterDateFrom: p(),
+					filterDateTo: m()
+				}), n = new Set(G(h).map((e) => e.id)), r = t.filter((e) => !n.has(e.id));
+				V(h, [...G(h), ...r], !0), V(b, t.length === c() && r.length > 0, !0);
 			} catch (e) {
-				console.error("live-reservations-feed: failed to load more reservations", e), V(v, !1);
+				console.error("live-reservations-feed: failed to load more reservations", e), V(b, !1);
 			} finally {
-				V(_, !1);
+				V(y, !1);
 			}
 		}
 	}
-	function T(e) {
+	function O(e) {
 		try {
 			return (/* @__PURE__ */ new Date(`${e}T00:00:00`)).toLocaleDateString(void 0, {
 				month: "short",
@@ -13606,13 +13611,13 @@ function Ag(e, t) {
 			return e;
 		}
 	}
-	function E(e) {
+	function k(e) {
 		let [t, n] = e.split(":"), r = Number(t);
 		if (Number.isNaN(r) || n === void 0) return e;
 		let i = r >= 12 ? "PM" : "AM";
 		return `${r % 12 == 0 ? 12 : r % 12}:${n} ${i}`;
 	}
-	function D(e) {
+	function A(e) {
 		try {
 			return new Date(e).toLocaleString(void 0, {
 				month: "short",
@@ -13629,37 +13634,43 @@ function Ag(e, t) {
 		let e, t = !1;
 		return (async () => {
 			if (o()) try {
-				let e = await o()({ limit: c() });
-				t || (V(p, e, !0), V(v, e.length === c()));
+				let e = await o()({
+					limit: c(),
+					filterDateFrom: p(),
+					filterDateTo: m()
+				});
+				t || (V(h, e, !0), V(b, e.length === c()));
 			} catch (e) {
 				console.error("live-reservations-feed: failed to load existing reservations", e);
 			} finally {
-				t || V(g, !1);
+				t || V(v, !1);
 			}
-			else V(g, !1);
+			else V(v, !1);
 			try {
 				let { default: n } = await Promise.resolve().then(() => /* @__PURE__ */ u(Th()));
 				if (t) return;
 				e = new n.Realtime({ authUrl: a() });
 				let r = e.channels.get(i());
 				e.connection.on("connected", () => {
-					t || V(h, "connected");
+					t || V(_, "connected");
 				}), e.connection.on("failed", () => {
-					t || V(h, "error");
+					t || V(_, "error");
 				}), await r.subscribe("new-reservation", (e) => {
-					t || C(e.data);
+					let n = e.data;
+					!t && T(n) && E(n);
 				}), await r.subscribe("reservation-status-changed", (e) => {
-					t || C(e.data);
+					let n = e.data;
+					!t && T(n) && E(n);
 				});
 			} catch (e) {
-				console.error("live-reservations-feed: Ably connection failed", e), t || V(h, "error");
+				console.error("live-reservations-feed: Ably connection failed", e), t || V(_, "error");
 			}
 		})(), () => {
 			t = !0, e?.close();
 		};
 	}), gr(() => {
-		if (!G(g) || !G(y) || x()) return;
-		let e = G(y).querySelectorAll(".lrf-skeleton-bar"), t = Ym.to(e, {
+		if (!G(v) || !G(x) || C()) return;
+		let e = G(x).querySelectorAll(".lrf-skeleton-bar"), t = Ym.to(e, {
 			opacity: .35,
 			duration: .7,
 			ease: "sine.inOut",
@@ -13671,16 +13682,16 @@ function Ag(e, t) {
 			t.kill();
 		};
 	});
-	let O = /* @__PURE__ */ new Set();
+	let j = /* @__PURE__ */ new Set();
 	gr(() => {
-		if (G(p).length, G(g) || !G(b)) return;
-		let e = Array.from(G(b).querySelectorAll(".lrf-item")).filter((e) => {
+		if (G(h).length, G(v) || !G(S)) return;
+		let e = Array.from(G(S).querySelectorAll(".lrf-item")).filter((e) => {
 			let t = e.dataset.id;
-			return t !== void 0 && !O.has(t);
+			return t !== void 0 && !j.has(t);
 		});
 		if (e.length) {
-			for (let t of e) t.dataset.id && O.add(t.dataset.id);
-			if (x()) {
+			for (let t of e) t.dataset.id && j.add(t.dataset.id);
+			if (C()) {
 				Ym.set(e, {
 					opacity: 1,
 					y: 0
@@ -13699,13 +13710,13 @@ function Ag(e, t) {
 			});
 		}
 	}), gr(() => {
-		if (!l() || !G(m)) return;
+		if (!l() || !G(g)) return;
 		let e = new IntersectionObserver((e) => {
-			e[0]?.isIntersecting && w();
+			e[0]?.isIntersecting && D();
 		}, { rootMargin: "200px" });
-		return e.observe(G(m)), () => e.disconnect();
+		return e.observe(G(g)), () => e.disconnect();
 	});
-	var k = {
+	var M = {
 		get heading() {
 			return r();
 		},
@@ -13759,35 +13770,47 @@ function Ag(e, t) {
 		},
 		set showEmail(e = !0) {
 			f(e), z();
+		},
+		get filterDateFrom() {
+			return p();
+		},
+		set filterDateFrom(e) {
+			p(e), z();
+		},
+		get filterDateTo() {
+			return m();
+		},
+		set filterDateTo(e) {
+			m(e), z();
 		}
-	}, A = Gg(), j = H(A), M = (e) => {
+	}, N = Gg(), P = H(N), ee = (e) => {
 		var t = Ng(), i = H(t), a = H(i, !0);
 		I(i);
 		var o = U(i, 2);
 		n(o), I(t), W(() => Y(a, r())), J(e, t);
-	}, N = (e) => {
+	}, te = (e) => {
 		n(e);
 	};
-	X(j, (e) => {
-		r() ? e(M) : e(N, -1);
+	X(P, (e) => {
+		r() ? e(ee) : e(te, -1);
 	});
-	var P = U(j, 2), ee = (e) => {
+	var F = U(P, 2), ne = (e) => {
 		var t = Fg();
 		Z(t, 20, () => ({ length: 3 }), _a, (e, t) => {
 			J(e, Pg());
-		}), I(t), wo(t, (e) => V(y, e), () => G(y)), J(e, t);
-	}, te = (e) => {
+		}), I(t), wo(t, (e) => V(x, e), () => G(x)), J(e, t);
+	}, re = (e) => {
 		var t = Ig(), n = H(t, !0);
 		I(t), W(() => Y(n, d())), J(e, t);
-	}, F = (e) => {
+	}, ie = (e) => {
 		var t = Wg(), n = er(t);
-		Z(n, 21, () => G(p), (e) => e.id, (e, t) => {
+		Z(n, 21, () => G(h), (e) => e.id, (e, t) => {
 			var n = Vg(), r = H(n), i = H(r), a = H(i), o = H(a, !0);
 			I(a);
 			var s = U(a, 2), c = (e) => {
 				var n = Lg(), r = H(n, !0);
-				I(n), W((e) => Y(r, e), [() => G(S).get(G(t).restaurant_id)]), J(e, n);
-			}, l = /* @__PURE__ */ R(() => G(t).restaurant_id && G(S).get(G(t).restaurant_id));
+				I(n), W((e) => Y(r, e), [() => G(w).get(G(t).restaurant_id)]), J(e, n);
+			}, l = /* @__PURE__ */ R(() => G(t).restaurant_id && G(w).get(G(t).restaurant_id));
 			X(s, (e) => {
 				G(l) && e(c);
 			}), I(i);
@@ -13799,19 +13822,19 @@ function Ag(e, t) {
 			I(h), I(u), I(r);
 			var _ = U(r, 2), v = H(_), y = H(v), b = H(y, !0);
 			I(y);
-			var x = U(y, 2), C = H(x);
+			var x = U(y, 2), S = H(x);
 			I(x), I(v);
-			var w = U(v, 2), O = H(w), k = U(H(O));
-			I(O);
-			var A = U(O, 2), j = U(H(A));
-			I(A);
-			var M = U(A, 2), N = (e) => {
+			var C = U(v, 2), T = H(C), E = U(H(T));
+			I(T);
+			var D = U(T, 2), j = U(H(D));
+			I(D);
+			var M = U(D, 2), N = (e) => {
 				var n = Rg(), r = H(n);
 				I(n), W(() => Y(r, `Table ${G(t).table_number ?? ""}`)), J(e, n);
 			};
 			X(M, (e) => {
 				G(t).table_number && e(N);
-			}), I(w), I(_);
+			}), I(C), I(_);
 			var P = U(_, 2), ee = (e) => {
 				var n = Bg(), r = H(n), i = (e) => {
 					var n = zg(), r = H(n, !0);
@@ -13836,30 +13859,30 @@ function Ag(e, t) {
 				Q(n, "data-id", G(t).id), Y(o, G(t).contact_name), p = Ka(d, 1, "lrf-item-status svelte-1d6cuoy", null, p, {
 					"lrf-status-cancelled": G(t).status === "cancelled",
 					"lrf-status-confirmed": G(t).status === "confirmed"
-				}), Y(m, G(t).status), Y(g, `Booked ${e ?? ""}`), Y(b, G(t).party_size), Y(C, `guest${G(t).party_size === 1 ? "" : "s"}`), Y(k, ` ${r ?? ""}`), Y(j, ` ${i ?? ""}`);
+				}), Y(m, G(t).status), Y(g, `Booked ${e ?? ""}`), Y(b, G(t).party_size), Y(S, `guest${G(t).party_size === 1 ? "" : "s"}`), Y(E, ` ${r ?? ""}`), Y(j, ` ${i ?? ""}`);
 			}, [
-				() => D(G(t).created_at),
-				() => T(G(t).reservation_date),
-				() => E(G(t).start_time)
+				() => A(G(t).created_at),
+				() => O(G(t).reservation_date),
+				() => k(G(t).start_time)
 			]), J(e, n);
-		}), I(n), wo(n, (e) => V(b, e), () => G(b));
+		}), I(n), wo(n, (e) => V(S, e), () => G(S));
 		var r = U(n, 2), i = (e) => {
 			J(e, Hg());
 		};
 		X(r, (e) => {
-			G(_) && e(i);
+			G(y) && e(i);
 		});
 		var a = U(r, 2), o = (e) => {
 			var t = Ug();
-			wo(t, (e) => V(m, e), () => G(m)), J(e, t);
+			wo(t, (e) => V(g, e), () => G(g)), J(e, t);
 		};
 		X(a, (e) => {
-			l() && G(v) && e(o);
+			l() && G(b) && e(o);
 		}), J(e, t);
 	};
-	return X(P, (e) => {
-		G(g) ? e(ee) : G(p).length === 0 ? e(te, 1) : e(F, -1);
-	}), I(A), J(e, A), dt(k);
+	return X(F, (e) => {
+		G(v) ? e(ne) : G(h).length === 0 ? e(re, 1) : e(ie, -1);
+	}), I(N), J(e, N), dt(M);
 }
 var jg, Mg, Ng, Pg, Fg, Ig, Lg, Rg, zg, Bg, Vg, Hg, Ug, Wg, Gg, Kg, qg = o((() => {
 	f(), Ho(), Xm(), jg = /* @__PURE__ */ q("<span class=\"lrf-live-dot svelte-1d6cuoy\" aria-hidden=\"true\"></span> Live", 1), Mg = /* @__PURE__ */ q("<div><!></div>"), Ng = /* @__PURE__ */ q("<div class=\"lrf-header svelte-1d6cuoy\"><h2 class=\"lrf-heading svelte-1d6cuoy\"> </h2> <!></div>"), Pg = /* @__PURE__ */ q("<li class=\"lrf-item lrf-skeleton-item svelte-1d6cuoy\"><div class=\"lrf-item-header svelte-1d6cuoy\"><span class=\"lrf-skeleton-bar lrf-skeleton-bar-name svelte-1d6cuoy\"></span> <span class=\"lrf-skeleton-bar lrf-skeleton-bar-status svelte-1d6cuoy\"></span></div> <div class=\"lrf-item-meta svelte-1d6cuoy\"><span class=\"lrf-skeleton-bar lrf-skeleton-bar-meta svelte-1d6cuoy\"></span> <span class=\"lrf-skeleton-bar lrf-skeleton-bar-meta svelte-1d6cuoy\"></span> <span class=\"lrf-skeleton-bar lrf-skeleton-bar-meta svelte-1d6cuoy\"></span></div> <div class=\"lrf-item-contact svelte-1d6cuoy\"><span class=\"lrf-skeleton-bar lrf-skeleton-bar-contact svelte-1d6cuoy\"></span></div></li>"), Fg = /* @__PURE__ */ q("<ul class=\"lrf-list svelte-1d6cuoy\" aria-hidden=\"true\"></ul>"), Ig = /* @__PURE__ */ q("<p class=\"lrf-empty svelte-1d6cuoy\"> </p>"), Lg = /* @__PURE__ */ q("<span class=\"lrf-item-restaurant svelte-1d6cuoy\"> </span>"), Rg = /* @__PURE__ */ q("<span class=\"svelte-1d6cuoy\"> </span>"), zg = /* @__PURE__ */ q("<a class=\"svelte-1d6cuoy\"> </a>"), Bg = /* @__PURE__ */ q("<div class=\"lrf-item-contact svelte-1d6cuoy\"><!> <!></div>"), Vg = /* @__PURE__ */ q("<li class=\"lrf-item svelte-1d6cuoy\"><div class=\"lrf-item-header svelte-1d6cuoy\"><div class=\"lrf-item-header-left svelte-1d6cuoy\"><span class=\"lrf-item-name svelte-1d6cuoy\"> </span> <!></div> <div class=\"lrf-item-header-right svelte-1d6cuoy\"><span> </span> <span class=\"lrf-item-received svelte-1d6cuoy\"> </span></div></div> <div class=\"lrf-item-body svelte-1d6cuoy\"><div class=\"lrf-item-guests svelte-1d6cuoy\"><span class=\"lrf-item-guests-number svelte-1d6cuoy\"> </span> <span class=\"lrf-item-guests-label svelte-1d6cuoy\"> </span></div> <div class=\"lrf-item-meta svelte-1d6cuoy\"><span class=\"lrf-meta-item svelte-1d6cuoy\"><svg class=\"lrf-meta-icon svelte-1d6cuoy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" class=\"svelte-1d6cuoy\"></rect><path d=\"M3 10h18M8 3v4M16 3v4\" stroke-linecap=\"round\" class=\"svelte-1d6cuoy\"></path></svg> </span> <span class=\"lrf-meta-item svelte-1d6cuoy\"><svg class=\"lrf-meta-icon svelte-1d6cuoy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" class=\"svelte-1d6cuoy\"></circle><path d=\"M12 7v5l3.5 2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svelte-1d6cuoy\"></path></svg> </span> <!></div></div> <!></li>"), Hg = /* @__PURE__ */ q("<p class=\"lrf-loading-more svelte-1d6cuoy\" aria-live=\"polite\">Loading more…</p>"), Ug = /* @__PURE__ */ q("<div class=\"lrf-sentinel svelte-1d6cuoy\" aria-hidden=\"true\"></div>"), Wg = /* @__PURE__ */ q("<ul class=\"lrf-list svelte-1d6cuoy\"></ul> <!> <!>", 1), Gg = /* @__PURE__ */ q("<section class=\"lrf-root svelte-1d6cuoy\"><!> <!></section>"), Kg = {
@@ -13894,6 +13917,14 @@ var jg, Mg, Ng, Pg, Fg, Ig, Lg, Rg, zg, Bg, Vg, Hg, Ug, Wg, Gg, Kg, qg = o((() =
 			attribute: "show-email",
 			type: "Boolean"
 		},
+		filterDateFrom: {
+			attribute: "filter-date-from",
+			type: "String"
+		},
+		filterDateTo: {
+			attribute: "filter-date-to",
+			type: "String"
+		},
 		fetchReservations: {},
 		restaurants: {}
 	}, [], [], { mode: "open" }));

package/dist/index.d.ts

@@ -259,7 +259,12 @@ export interface LiveReservationsFeedElement extends HTMLElement {
 	 *  subsequent call passes the `created_at` of the oldest loaded
 	 *  reservation so only the next page is fetched. Return fewer than
 	 *  `limit` items to signal there's nothing older left. */
-	fetchReservations?: (params: { cursor?: string; limit: number }) => Promise<LiveReservation[]>;
+	fetchReservations?: (params: {
+		cursor?: string;
+		limit: number;
+		filterDateFrom?: string;
+		filterDateTo?: string;
+	}) => Promise<LiveReservation[]>;
 	restaurants?: LiveReservationRestaurantRef[];
 	maxItems?: number;
 	/** Set false to stop fetching further pages once the first one loads --
@@ -271,6 +276,15 @@ export interface LiveReservationsFeedElement extends HTMLElement {
 	 *  as a JS property to get false -- Boolean-typed custom-element
 	 *  attributes are presence-based. Default true. */
 	showEmail?: boolean;
+	/** Restricts the feed to reservations booked for this date range
+	 *  (inclusive, 'YYYY-MM-DD'), filtering by reservation_date -- not
+	 *  created_at, which stays reserved for pagination. Either bound can be
+	 *  set alone for an open-ended range. Passed through to
+	 *  fetchReservations so the host can scope the query server-side;
+	 *  changing either value triggers a full refetch. Also guards live
+	 *  new-reservation / reservation-status-changed events. */
+	filterDateFrom?: string;
+	filterDateTo?: string;
 }
 
 export interface LiveRoomBooking {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgebuild/hotal-ui",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Reusable Svelte UI components for booking and reservation experiences.",
   "type": "module",
   "license": "MIT",