@vadem/ui 0.1.0 → 0.2.0

package/fesm2022/vadem-ui-schedule.mjs

@@ -0,0 +1,1836 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, LOCALE_ID, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, effect, inject, input, model, numberAttribute, output, signal } from "@angular/core";
+import { VdButton } from "@vadem/ui/button";
+import { vdCalendarKey, vdFirstDayOfWeek, vdFormatDate, vdToday, vdWeekdayNames } from "@vadem/ui/calendar";
+import { vdUniqueId } from "@vadem/ui/field";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseDate(value) {
+	const m = ISO_DATE.exec(value);
+	if (!m) return null;
+	const date = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
+	return date.toISOString().slice(0, 10) === value ? date : null;
+}
+function addDays(date, days) {
+	const d = parseDate(date);
+	d.setUTCDate(d.getUTCDate() + days);
+	return d.toISOString().slice(0, 10);
+}
+function addMonths(date, months) {
+	const d = parseDate(date);
+	const target = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + months, 1));
+	const last = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)).getUTCDate();
+	target.setUTCDate(Math.min(d.getUTCDate(), last));
+	return target.toISOString().slice(0, 10);
+}
+function weekday(date) {
+	return parseDate(date).getUTCDay();
+}
+function weekStart(date, firstDay) {
+	return addDays(date, -((weekday(date) - firstDay + 7) % 7));
+}
+const VD_DAY_MINUTES = 1440;
+const DATE_TIME = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})$/;
+function vdScheduleMinutes(value) {
+	const m = DATE_TIME.exec(value);
+	const date = parseDate(m ? m[1] : value);
+	if (!date) return null;
+	if (!m) return date.getTime() / 6e4;
+	const h = +m[2], min = +m[3];
+	if (h > 23 || min > 59) return null;
+	return date.getTime() / 6e4 + h * 60 + min;
+}
+function vdScheduleDateTime(minutes) {
+	return (/* @__PURE__ */ new Date(minutes * 6e4)).toISOString().slice(0, 16);
+}
+function vdScheduleDate(minutes) {
+	return (/* @__PURE__ */ new Date(minutes * 6e4)).toISOString().slice(0, 10);
+}
+function vdScheduleTimeOfDay(minutes) {
+	return (minutes % VD_DAY_MINUTES + VD_DAY_MINUTES) % VD_DAY_MINUTES;
+}
+function vdScheduleNormalize(event) {
+	if (event.allDay) {
+		const start = vdScheduleMinutes(event.start.slice(0, 10));
+		const last = vdScheduleMinutes(event.end.slice(0, 10));
+		if (start === null || last === null || last < start) return null;
+		return {
+			event,
+			allDay: true,
+			startMin: start,
+			endMin: last + VD_DAY_MINUTES,
+			startDate: event.start.slice(0, 10),
+			endDate: event.end.slice(0, 10)
+		};
+	}
+	const start = vdScheduleMinutes(event.start);
+	const end = vdScheduleMinutes(event.end);
+	if (start === null || end === null || end <= start || !event.start.includes("T")) return null;
+	return {
+		event,
+		allDay: false,
+		startMin: start,
+		endMin: end,
+		startDate: vdScheduleDate(start),
+		endDate: vdScheduleDate(end - 1)
+	};
+}
+function vdScheduleValid(events) {
+	const ids = /* @__PURE__ */ new Set();
+	for (const event of events) {
+		if (typeof event.id !== "string" || !event.id.trim() || ids.has(event.id)) return false;
+		if (!vdScheduleNormalize(event)) return false;
+		ids.add(event.id);
+	}
+	return true;
+}
+function vdScheduleItems(events) {
+	return events.map((e) => vdScheduleNormalize(e)).filter((i) => !!i).sort((a, b) => Number(b.allDay) - Number(a.allDay) || a.startMin - b.startMin || b.endMin - a.endMin || a.event.title.localeCompare(b.event.title));
+}
+function vdScheduleOnDay(items, date) {
+	return items.filter((i) => i.startDate <= date && i.endDate >= date);
+}
+function vdScheduleDays(view, date, firstDay, agendaDays = 14) {
+	switch (view) {
+		case "month": {
+			const start = weekStart(date.slice(0, 8) + "01", firstDay);
+			return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+		}
+		case "week": {
+			const start = weekStart(date, firstDay);
+			return Array.from({ length: 7 }, (_, i) => addDays(start, i));
+		}
+		case "day": return [date];
+		case "agenda": return Array.from({ length: Math.max(1, agendaDays) }, (_, i) => addDays(date, i));
+	}
+}
+function vdScheduleStep(view, date, direction, agendaDays = 14) {
+	switch (view) {
+		case "month": return addMonths(date, direction);
+		case "week": return addDays(date, 7 * direction);
+		case "day": return addDays(date, direction);
+		case "agenda": return addDays(date, Math.max(1, agendaDays) * direction);
+	}
+}
+function vdScheduleLayout(items, date, fromMinute = 0, toMinute = VD_DAY_MINUTES) {
+	const dayStart = vdScheduleMinutes(date);
+	if (dayStart === null) return [];
+	const from = dayStart + fromMinute, to = dayStart + toMinute;
+	const visible = items.filter((i) => !i.allDay && i.startMin < to && i.endMin > from).sort((a, b) => a.startMin - b.startMin || b.endMin - a.endMin);
+	const result = [];
+	let cluster = [];
+	let columnEnds = [];
+	let clusterEnd = -Infinity;
+	const flush = () => {
+		for (const { item, column } of cluster) {
+			const start = Math.max(item.startMin, from), end = Math.min(item.endMin, to);
+			result.push({
+				item,
+				top: start - from,
+				bottom: end - from,
+				column,
+				columns: columnEnds.length,
+				clippedStart: item.startMin < from,
+				clippedEnd: item.endMin > to
+			});
+		}
+		cluster = [];
+		columnEnds = [];
+	};
+	for (const item of visible) {
+		if (item.startMin >= clusterEnd) flush();
+		let column = columnEnds.findIndex((end) => end <= item.startMin);
+		if (column < 0) column = columnEnds.push(item.endMin) - 1;
+		else columnEnds[column] = item.endMin;
+		cluster.push({
+			item,
+			column
+		});
+		clusterEnd = Math.max(clusterEnd === -Infinity ? item.endMin : clusterEnd, item.endMin);
+	}
+	flush();
+	return result;
+}
+function vdScheduleSnap(minutes, step) {
+	return step > 0 ? Math.round(minutes / step) * step : minutes;
+}
+function vdScheduleMove(item, deltaMinutes) {
+	if (item.allDay) {
+		const days = Math.round(deltaMinutes / VD_DAY_MINUTES);
+		return {
+			id: item.event.id,
+			start: addDays(item.startDate, days),
+			end: addDays(item.endDate, days),
+			allDay: true,
+			kind: "move"
+		};
+	}
+	return {
+		id: item.event.id,
+		start: vdScheduleDateTime(item.startMin + deltaMinutes),
+		end: vdScheduleDateTime(item.endMin + deltaMinutes),
+		allDay: false,
+		kind: "move"
+	};
+}
+function vdScheduleResize(item, endMin, minimum) {
+	return {
+		id: item.event.id,
+		start: item.event.start,
+		end: vdScheduleDateTime(Math.max(endMin, item.startMin + Math.max(1, minimum))),
+		allDay: false,
+		kind: "resize"
+	};
+}
+function vdScheduleApplyChange(events, change) {
+	if (!events.some((e) => e.id === change.id)) return events;
+	return events.map((e) => e.id === change.id ? {
+		...e,
+		start: change.start,
+		end: change.end,
+		allDay: change.allDay
+	} : e);
+}
+var VdSchedule = class VdSchedule {
+	events = input([], ...ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []);
+	view = model("month", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	date = model(vdToday(), ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+	views = input([
+		"month",
+		"week",
+		"day",
+		"agenda"
+	], ...ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []);
+	locale = input(inject(LOCALE_ID), ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(void 0, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	dayStartHour = input(0, {
+		...ngDevMode ? { debugName: "dayStartHour" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	dayEndHour = input(24, {
+		...ngDevMode ? { debugName: "dayEndHour" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	scrollToHour = input(8, {
+		...ngDevMode ? { debugName: "scrollToHour" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	slotMinutes = input(30, {
+		...ngDevMode ? { debugName: "slotMinutes" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	maxEventsPerDay = input(3, {
+		...ngDevMode ? { debugName: "maxEventsPerDay" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	agendaDays = input(14, {
+		...ngDevMode ? { debugName: "agendaDays" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	now = input(null, ...ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []);
+	editable = input(true, {
+		...ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	todayText = input(...ngDevMode ? [void 0, { debugName: "todayText" }] : /* istanbul ignore next */ []);
+	previousLabel = input(...ngDevMode ? [void 0, { debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input(...ngDevMode ? [void 0, { debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	viewLabel = input(...ngDevMode ? [void 0, { debugName: "viewLabel" }] : /* istanbul ignore next */ []);
+	monthText = input(...ngDevMode ? [void 0, { debugName: "monthText" }] : /* istanbul ignore next */ []);
+	weekText = input(...ngDevMode ? [void 0, { debugName: "weekText" }] : /* istanbul ignore next */ []);
+	dayText = input(...ngDevMode ? [void 0, { debugName: "dayText" }] : /* istanbul ignore next */ []);
+	agendaText = input(...ngDevMode ? [void 0, { debugName: "agendaText" }] : /* istanbul ignore next */ []);
+	allDayText = input(...ngDevMode ? [void 0, { debugName: "allDayText" }] : /* istanbul ignore next */ []);
+	emptyText = input(...ngDevMode ? [void 0, { debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	invalidText = input(...ngDevMode ? [void 0, { debugName: "invalidText" }] : /* istanbul ignore next */ []);
+	moreText = input(...ngDevMode ? [void 0, { debugName: "moreText" }] : /* istanbul ignore next */ []);
+	eventsText = input(...ngDevMode ? [void 0, { debugName: "eventsText" }] : /* istanbul ignore next */ []);
+	changedText = input(...ngDevMode ? [void 0, { debugName: "changedText" }] : /* istanbul ignore next */ []);
+	canceledText = input(...ngDevMode ? [void 0, { debugName: "canceledText" }] : /* istanbul ignore next */ []);
+	eventActivate = output();
+	slotActivate = output();
+	eventChange = output();
+	t = vdTexts("schedule", {
+		label: this.label,
+		todayText: this.todayText,
+		previousLabel: this.previousLabel,
+		nextLabel: this.nextLabel,
+		viewLabel: this.viewLabel,
+		monthText: this.monthText,
+		weekText: this.weekText,
+		dayText: this.dayText,
+		agendaText: this.agendaText,
+		allDayText: this.allDayText,
+		emptyText: this.emptyText,
+		invalidText: this.invalidText,
+		moreText: this.moreText,
+		eventsText: this.eventsText,
+		changedText: this.changedText,
+		canceledText: this.canceledText
+	});
+	baseId = vdUniqueId("vd-schedule");
+	today = computed(() => this.now()?.slice(0, 10) ?? vdToday(), ...ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []);
+	valid = computed(() => vdScheduleValid(this.events()), ...ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []);
+	items = computed(() => this.valid() ? vdScheduleItems(this.events()) : [], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	firstDay = computed(() => this.firstDayOfWeek() ?? vdFirstDayOfWeek(this.locale()), ...ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []);
+	days = computed(() => vdScheduleDays(this.view(), this.date(), this.firstDay(), this.agendaDays()), ...ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []);
+	weeks = computed(() => {
+		const days = this.days();
+		return Array.from({ length: days.length / 7 }, (_, i) => days.slice(i * 7, i * 7 + 7));
+	}, ...ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []);
+	weekdays = computed(() => {
+		const short = vdWeekdayNames(this.locale(), this.firstDay(), "short");
+		const long = vdWeekdayNames(this.locale(), this.firstDay(), "long");
+		return short.map((s, i) => ({
+			short: s,
+			long: long[i]
+		}));
+	}, ...ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []);
+	hours = computed(() => {
+		const from = Math.max(0, Math.min(23, this.dayStartHour()));
+		const to = Math.max(from + 1, Math.min(24, this.dayEndHour()));
+		return Array.from({ length: to - from }, (_, i) => from + i);
+	}, ...ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []);
+	month = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		if (this.view() !== "month") return map;
+		const max = Math.max(1, this.maxEventsPerDay());
+		for (const day of this.days()) {
+			const all = vdScheduleOnDay(this.items(), day);
+			if (!all.length) continue;
+			const visible = all.length > max ? all.slice(0, max - 1) : all;
+			map.set(day, {
+				visible,
+				more: all.length - visible.length
+			});
+		}
+		return map;
+	}, ...ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []);
+	layout = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		const from = this.hours()[0] * 60, to = (this.hours().at(-1) + 1) * 60;
+		for (const day of this.days()) map.set(day, vdScheduleLayout(this.items(), day, from, to));
+		return map;
+	}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	agenda = computed(() => this.days().map((date) => ({
+		date,
+		items: vdScheduleOnDay(this.items(), date)
+	})).filter((group) => group.items.length), ...ngDevMode ? [{ debugName: "agenda" }] : /* istanbul ignore next */ []);
+	title = computed(() => {
+		const days = this.days(), locale = this.locale();
+		switch (this.view()) {
+			case "month": return vdFormatDate(this.date(), locale, {
+				month: "long",
+				year: "numeric"
+			});
+			case "day": return this.longDate(this.date());
+			default: return new Intl.DateTimeFormat(locale, {
+				day: "numeric",
+				month: "long",
+				year: "numeric",
+				timeZone: "UTC"
+			}).formatRange(new Date(days[0]), new Date(days.at(-1)));
+		}
+	}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	focusDate = signal(this.date(), ...ngDevMode ? [{ debugName: "focusDate" }] : /* istanbul ignore next */ []);
+	draggingId = signal(null, ...ngDevMode ? [{ debugName: "draggingId" }] : /* istanbul ignore next */ []);
+	preview = signal(null, ...ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []);
+	messages = signal([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef).nativeElement;
+	drag = null;
+	moveFocus = false;
+	suppressClick = false;
+	serial = 0;
+	scrolledView = null;
+	constructor() {
+		effect(() => {
+			const days = this.days();
+			const focus = this.focusDate();
+			if (this.view() === "month" && !days.includes(focus)) this.focusDate.set(days.includes(this.date()) ? this.date() : days[7]);
+		});
+		effect(() => {
+			const events = this.events();
+			if (this.drag && events !== this.drag.events) this.finish(true);
+		});
+		afterRenderEffect(() => {
+			const focus = this.focusDate();
+			if (!this.moveFocus) return;
+			this.moveFocus = false;
+			this.host.querySelector(`.vd-schedule__cell[data-date="${focus}"] .vd-schedule__day`)?.focus();
+		});
+		afterRenderEffect(() => {
+			const key = this.view() + this.days()[0];
+			if (this.view() !== "week" && this.view() !== "day") return;
+			if (this.scrolledView === key) return;
+			this.scrolledView = key;
+			const scroller = this.host.querySelector(".vd-schedule__scroll");
+			const grid = this.host.querySelector(".vd-schedule__grid");
+			if (!scroller || !grid) return;
+			const offset = Math.max(0, this.scrollToHour() - this.hours()[0]);
+			scroller.scrollTop = grid.scrollHeight / this.hours().length * offset;
+		});
+		const destroyRef = inject(DestroyRef);
+		destroyRef.onDestroy(() => this.finish(false));
+		afterNextRender(() => {
+			const click = (event) => {
+				if (!this.suppressClick) return;
+				this.suppressClick = false;
+				event.preventDefault();
+				event.stopPropagation();
+			};
+			const press = () => this.suppressClick = false;
+			this.host.addEventListener("click", click, true);
+			this.host.addEventListener("pointerdown", press, true);
+			destroyRef.onDestroy(() => {
+				this.host.removeEventListener("click", click, true);
+				this.host.removeEventListener("pointerdown", press, true);
+			});
+		});
+	}
+	goToday() {
+		this.date.set(this.today());
+		this.focusDate.set(this.today());
+	}
+	step(direction) {
+		const next = vdScheduleStep(this.view(), this.date(), direction, this.agendaDays());
+		this.date.set(next);
+		this.focusDate.set(next);
+	}
+	openDay(date) {
+		this.date.set(date);
+		this.focusDate.set(date);
+		if (this.views().includes("day")) this.view.set("day");
+	}
+	monthKey(event) {
+		if (!event.target.classList.contains("vd-schedule__day")) return;
+		const rtl = this.host.ownerDocument.defaultView?.getComputedStyle(this.host).direction === "rtl";
+		const next = vdCalendarKey(event.key, this.focusDate(), {
+			firstDay: this.firstDay(),
+			rtl,
+			shift: event.shiftKey
+		});
+		if (!next) return;
+		event.preventDefault();
+		if (!this.days().includes(next)) this.date.set(next);
+		this.focusDate.set(next);
+		this.moveFocus = true;
+	}
+	activate(event) {
+		this.eventActivate.emit(event);
+	}
+	emptyClick(event) {
+		const target = event.target;
+		if (target.closest("button")) return;
+		const cell = target.closest(".vd-schedule__cell, .vd-schedule__allday-cell");
+		if (cell) {
+			this.slotActivate.emit({
+				date: cell.dataset["date"],
+				time: null
+			});
+			return;
+		}
+		const column = target.closest(".vd-schedule__column");
+		if (column) this.slotClick(event, column, column.dataset["date"]);
+	}
+	slotClick(event, column, date) {
+		const minute = this.minuteAt(column, event.clientY);
+		const snapped = Math.min(VD_DAY_MINUTES - this.slot(), Math.floor(minute / this.slot()) * this.slot());
+		this.slotActivate.emit({
+			date,
+			time: this.clock(snapped)
+		});
+	}
+	dragStart(event, item, kind) {
+		if (!this.editable() || !event.isPrimary || event.button !== 0 || event.pointerType === "touch" || this.drag) return;
+		if (kind === "resize") event.stopPropagation();
+		const element = kind === "resize" ? event.currentTarget.closest(".vd-schedule__block") : event.currentTarget;
+		try {
+			element.setPointerCapture(event.pointerId);
+		} catch {
+			return;
+		}
+		event.preventDefault();
+		this.drag = {
+			pointer: event.pointerId,
+			element,
+			item,
+			kind,
+			events: this.events(),
+			x: event.clientX,
+			y: event.clientY,
+			origin: this.pointAt(event.clientX, event.clientY, item.allDay),
+			active: false
+		};
+	}
+	dragMove(event) {
+		const drag = this.drag;
+		if (!drag || drag.pointer !== event.pointerId) return;
+		if (event.buttons === 0) {
+			this.finish(false);
+			return;
+		}
+		if (!drag.active && Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 4) return;
+		if (!drag.active) {
+			drag.active = true;
+			if (!drag.element.contains(this.host.ownerDocument.activeElement)) drag.element.focus({ preventScroll: true });
+			this.draggingId.set(drag.item.event.id);
+		}
+		const change = this.changeAt(drag, event.clientX, event.clientY);
+		this.preview.set(change ? {
+			change,
+			item: drag.item
+		} : null);
+	}
+	dragEnd(event) {
+		const drag = this.drag;
+		if (!drag || drag.pointer !== event.pointerId) return;
+		const change = drag.active ? this.changeAt(drag, event.clientX, event.clientY) : null;
+		this.suppressClick = drag.active;
+		this.finish(drag.active && !change);
+		if (change) {
+			this.announce(this.t().changedText(drag.item.event.title, this.whenText(change)));
+			this.eventChange.emit(change);
+		}
+	}
+	dragCancel(event) {
+		if (event.pointerId === this.drag?.pointer) this.finish(!!this.drag?.active);
+	}
+	key(event) {
+		if (!this.drag) {
+			if (this.view() === "month") this.monthKey(event);
+			return;
+		}
+		if (event.isComposing) return;
+		if (event.key === "Escape" || event.key === "Tab") {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			this.suppressClick = this.drag.active;
+			this.finish(true);
+		}
+	}
+	changeAt(drag, x, y) {
+		const point = this.pointAt(x, y, drag.item.allDay);
+		if (!point || !drag.origin) return null;
+		const dayDelta = (vdScheduleMinutes(point.date) - vdScheduleMinutes(drag.origin.date)) / VD_DAY_MINUTES;
+		let change;
+		if (drag.kind === "resize") {
+			const end = vdScheduleMinutes(point.date) + vdScheduleSnap(point.minute, this.slot());
+			change = vdScheduleResize(drag.item, end, this.slot());
+		} else if (drag.item.allDay || this.view() === "month") change = vdScheduleMove(drag.item, dayDelta * VD_DAY_MINUTES);
+		else {
+			const minutes = vdScheduleSnap(point.minute - drag.origin.minute, this.slot());
+			change = vdScheduleMove(drag.item, dayDelta * VD_DAY_MINUTES + minutes);
+		}
+		return change.start === drag.item.event.start && change.end === drag.item.event.end ? null : change;
+	}
+	pointAt(x, y, allDay) {
+		const selector = this.view() === "month" ? ".vd-schedule__cell[data-date]" : allDay ? ".vd-schedule__allday-cell[data-date]" : ".vd-schedule__column[data-date]";
+		for (const el of Array.from(this.host.querySelectorAll(selector))) {
+			const r = el.getBoundingClientRect();
+			if (!(x >= r.left && x <= r.right && (allDay || this.view() === "month" ? y >= r.top && y <= r.bottom : true))) continue;
+			const minute = this.view() === "month" || allDay ? 0 : this.minuteAt(el, y);
+			return {
+				date: el.dataset["date"],
+				minute
+			};
+		}
+		return null;
+	}
+	minuteAt(column, y) {
+		const r = column.getBoundingClientRect();
+		const from = this.hours()[0] * 60;
+		const span = this.hours().length * 60;
+		return from + Math.max(0, Math.min(1, (y - r.top) / r.height)) * span;
+	}
+	finish(announce) {
+		const drag = this.drag;
+		this.drag = null;
+		this.draggingId.set(null);
+		this.preview.set(null);
+		if (!drag) return;
+		if (drag.element.hasPointerCapture?.(drag.pointer)) drag.element.releasePointerCapture(drag.pointer);
+		if (announce && drag.active) this.announce(this.t().canceledText(drag.item.event.title));
+	}
+	ghost(day) {
+		const pv = this.preview();
+		if (!pv || pv.change.allDay || this.view() === "month") return null;
+		const start = vdScheduleMinutes(pv.change.start), end = vdScheduleMinutes(pv.change.end);
+		const dayStart = vdScheduleMinutes(day);
+		const from = dayStart + this.hours()[0] * 60, to = dayStart + (this.hours().at(-1) + 1) * 60;
+		if (end <= from || start >= to) return null;
+		const top = Math.max(start, from) - from;
+		return {
+			top,
+			span: Math.min(end, to) - from - top,
+			startMin: start
+		};
+	}
+	nowLine(day) {
+		const now = this.now();
+		if (!now || now.slice(0, 10) !== day) return null;
+		const minute = vdScheduleMinutes(now);
+		if (minute === null) return null;
+		const offset = vdScheduleTimeOfDay(minute) - this.hours()[0] * 60;
+		return offset >= 0 && offset <= this.hours().length * 60 ? offset : null;
+	}
+	allDay(day) {
+		return vdScheduleOnDay(this.items(), day).filter((i) => i.allDay);
+	}
+	viewText(view) {
+		const t = this.t();
+		return {
+			month: t.monthText,
+			week: t.weekText,
+			day: t.dayText,
+			agenda: t.agendaText
+		}[view];
+	}
+	sameMonth(day) {
+		return day.slice(0, 7) === this.date().slice(0, 7);
+	}
+	dayNumber(day) {
+		return vdFormatDate(day, this.locale(), { day: "numeric" });
+	}
+	weekdayShort(day) {
+		return vdFormatDate(day, this.locale(), { weekday: "short" });
+	}
+	longDate(day) {
+		return vdFormatDate(day, this.locale(), {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		});
+	}
+	dayLabel(day) {
+		const count = vdScheduleOnDay(this.items(), day).length;
+		return `${this.longDate(day)}, ${this.t().eventsText(count)}`;
+	}
+	time(minutes) {
+		return new Intl.DateTimeFormat(this.locale(), {
+			hour: "numeric",
+			minute: "2-digit",
+			timeZone: "UTC"
+		}).format(/* @__PURE__ */ new Date(minutes * 6e4));
+	}
+	hourLabel(hour) {
+		return new Intl.DateTimeFormat(this.locale(), {
+			hour: "numeric",
+			timeZone: "UTC"
+		}).format(new Date(Date.UTC(2026, 0, 1, hour)));
+	}
+	rangeText(item, day) {
+		if (item.allDay) return this.t().allDayText;
+		return `${item.startDate === day ? this.time(item.startMin) : "…"} – ${vdScheduleDate(item.endMin - 1) === day ? this.time(item.endMin) : "…"}`;
+	}
+	eventLabel(item) {
+		const date = this.longDate(item.startDate);
+		if (item.allDay) {
+			const last = item.endDate !== item.startDate ? ` – ${this.longDate(item.endDate)}` : "";
+			return `${item.event.title}, ${date}${last}, ${this.t().allDayText}`;
+		}
+		const end = item.endDate !== item.startDate ? `${this.longDate(item.endDate)} ${this.time(item.endMin)}` : this.time(item.endMin);
+		return `${item.event.title}, ${date}, ${this.time(item.startMin)} – ${end}`;
+	}
+	whenText(change) {
+		if (change.allDay) return this.longDate(change.start);
+		const start = vdScheduleMinutes(change.start);
+		return `${this.longDate(change.start.slice(0, 10))}, ${this.time(start)}`;
+	}
+	clock(minutes) {
+		const h = Math.floor(minutes / 60), m = Math.round(minutes % 60);
+		return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+	}
+	slot() {
+		return Math.max(5, Math.min(120, this.slotMinutes()));
+	}
+	announce(text) {
+		this.messages.set([{
+			serial: ++this.serial,
+			text
+		}]);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSchedule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdSchedule,
+		isStandalone: true,
+		selector: "vd-schedule",
+		inputs: {
+			events: {
+				classPropertyName: "events",
+				publicName: "events",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			view: {
+				classPropertyName: "view",
+				publicName: "view",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			date: {
+				classPropertyName: "date",
+				publicName: "date",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			views: {
+				classPropertyName: "views",
+				publicName: "views",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dayStartHour: {
+				classPropertyName: "dayStartHour",
+				publicName: "dayStartHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dayEndHour: {
+				classPropertyName: "dayEndHour",
+				publicName: "dayEndHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollToHour: {
+				classPropertyName: "scrollToHour",
+				publicName: "scrollToHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			slotMinutes: {
+				classPropertyName: "slotMinutes",
+				publicName: "slotMinutes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxEventsPerDay: {
+				classPropertyName: "maxEventsPerDay",
+				publicName: "maxEventsPerDay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			agendaDays: {
+				classPropertyName: "agendaDays",
+				publicName: "agendaDays",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			now: {
+				classPropertyName: "now",
+				publicName: "now",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			editable: {
+				classPropertyName: "editable",
+				publicName: "editable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			todayText: {
+				classPropertyName: "todayText",
+				publicName: "todayText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			viewLabel: {
+				classPropertyName: "viewLabel",
+				publicName: "viewLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			monthText: {
+				classPropertyName: "monthText",
+				publicName: "monthText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weekText: {
+				classPropertyName: "weekText",
+				publicName: "weekText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dayText: {
+				classPropertyName: "dayText",
+				publicName: "dayText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			agendaText: {
+				classPropertyName: "agendaText",
+				publicName: "agendaText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allDayText: {
+				classPropertyName: "allDayText",
+				publicName: "allDayText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalidText: {
+				classPropertyName: "invalidText",
+				publicName: "invalidText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moreText: {
+				classPropertyName: "moreText",
+				publicName: "moreText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			eventsText: {
+				classPropertyName: "eventsText",
+				publicName: "eventsText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			changedText: {
+				classPropertyName: "changedText",
+				publicName: "changedText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			canceledText: {
+				classPropertyName: "canceledText",
+				publicName: "canceledText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			view: "viewChange",
+			date: "dateChange",
+			eventActivate: "eventActivate",
+			slotActivate: "slotActivate",
+			eventChange: "eventChange"
+		},
+		host: {
+			listeners: {
+				"keydown": "key($event)",
+				"click": "emptyClick($event)"
+			},
+			properties: {
+				"attr.data-view": "view()",
+				"attr.data-state": "!valid() ? \"invalid\" : draggingId() ? \"dragging\" : \"idle\""
+			},
+			classAttribute: "vd-schedule"
+		},
+		ngImport: i0,
+		template: `
+    <div class="vd-schedule__toolbar">
+      <div class="vd-schedule__nav">
+        <button vdButton size="sm" variant="secondary" type="button" (click)="goToday()">
+          {{ t().todayText }}
+        </button>
+        <button
+          vdButton
+          size="sm"
+          variant="ghost"
+          iconOnly
+          type="button"
+          [attr.aria-label]="t().previousLabel"
+          (click)="step(-1)"
+        >
+          <vd-icon name="chevron-left" />
+        </button>
+        <button
+          vdButton
+          size="sm"
+          variant="ghost"
+          iconOnly
+          type="button"
+          [attr.aria-label]="t().nextLabel"
+          (click)="step(1)"
+        >
+          <vd-icon name="chevron-right" />
+        </button>
+        <p class="vd-schedule__title" [id]="baseId + '-title'" aria-live="polite">{{ title() }}</p>
+      </div>
+      @if (views().length > 1) {
+        <div class="vd-schedule__views" role="group" [attr.aria-label]="t().viewLabel">
+          @for (option of views(); track option) {
+            <button
+              vdButton
+              size="sm"
+              type="button"
+              [variant]="option === view() ? 'secondary' : 'ghost'"
+              [attr.aria-pressed]="option === view()"
+              (click)="view.set(option)"
+            >
+              {{ viewText(option) }}
+            </button>
+          }
+        </div>
+      }
+    </div>
+
+    @if (!valid()) {
+      <p class="vd-schedule__invalid">{{ t().invalidText }}</p>
+    } @else {
+      @switch (view()) {
+        @case ('month') {
+          <table class="vd-schedule__month" [attr.aria-labelledby]="baseId + '-title'">
+            <thead>
+              <tr>
+                @for (name of weekdays(); track $index) {
+                  <th scope="col">
+                    <abbr [attr.title]="name.long">{{ name.short }}</abbr>
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of weeks(); track week[0]) {
+                <tr>
+                  @for (day of week; track day) {
+                    <td
+                      class="vd-schedule__cell"
+                      [attr.data-date]="day"
+                      [attr.data-outside]="!sameMonth(day) ? '' : null"
+                      [attr.data-today]="day === today() ? '' : null"
+                      [attr.data-drop-target]="
+                        preview()?.change?.start?.slice(0, 10) === day ? '' : null
+                      "
+                    >
+                      <button
+                        type="button"
+                        class="vd-schedule__day"
+                        [attr.tabindex]="day === focusDate() ? 0 : -1"
+                        [attr.aria-label]="dayLabel(day)"
+                        [attr.aria-current]="day === today() ? 'date' : null"
+                        (click)="openDay(day)"
+                        (focus)="focusDate.set(day)"
+                      >
+                        {{ dayNumber(day) }}
+                        @if (month().has(day)) {
+                          <span class="vd-schedule__dot" aria-hidden="true"></span>
+                        }
+                      </button>
+                      @let cell = month().get(day);
+                      @if (cell) {
+                        <ul class="vd-schedule__chips" role="list">
+                          @for (item of cell.visible; track item.event.id) {
+                            <li>
+                              <button
+                                type="button"
+                                class="vd-schedule__event"
+                                [attr.tabindex]="day === focusDate() ? 0 : -1"
+                                [attr.data-color]="item.event.color ?? 'accent'"
+                                [attr.data-all-day]="item.allDay ? '' : null"
+                                [attr.data-dragging]="draggingId() === item.event.id ? '' : null"
+                                [attr.aria-label]="eventLabel(item)"
+                                (click)="activate(item.event)"
+                                (pointerdown)="dragStart($event, item, 'move')"
+                                (pointermove)="dragMove($event)"
+                                (pointerup)="dragEnd($event)"
+                                (pointercancel)="dragCancel($event)"
+                                (lostpointercapture)="dragCancel($event)"
+                              >
+                                @if (!item.allDay && item.startDate === day) {
+                                  <span class="vd-schedule__time">{{ time(item.startMin) }}</span>
+                                }
+                                <span class="vd-schedule__name">{{ item.event.title }}</span>
+                              </button>
+                            </li>
+                          }
+                          @if (cell.more) {
+                            <li>
+                              <button
+                                type="button"
+                                class="vd-schedule__more"
+                                [attr.tabindex]="day === focusDate() ? 0 : -1"
+                                (click)="openDay(day)"
+                              >
+                                {{ t().moreText(cell.more) }}
+                              </button>
+                            </li>
+                          }
+                        </ul>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+        @case ('agenda') {
+          <div class="vd-schedule__agenda" [attr.aria-labelledby]="baseId + '-title'" role="region">
+            @for (group of agenda(); track group.date; let g = $index) {
+              <section
+                class="vd-schedule__agenda-day"
+                [attr.aria-labelledby]="baseId + '-agenda-' + g"
+              >
+                <p
+                  class="vd-schedule__agenda-date"
+                  [id]="baseId + '-agenda-' + g"
+                  [attr.data-today]="group.date === today() ? '' : null"
+                >
+                  {{ longDate(group.date) }}
+                </p>
+                <ul class="vd-schedule__agenda-list" role="list">
+                  @for (item of group.items; track item.event.id) {
+                    <li>
+                      <button
+                        type="button"
+                        class="vd-schedule__agenda-event"
+                        [attr.data-color]="item.event.color ?? 'accent'"
+                        (click)="activate(item.event)"
+                      >
+                        <span class="vd-schedule__agenda-time">{{
+                          rangeText(item, group.date)
+                        }}</span>
+                        <span class="vd-schedule__name">{{ item.event.title }}</span>
+                      </button>
+                    </li>
+                  }
+                </ul>
+              </section>
+            } @empty {
+              <p class="vd-schedule__empty">{{ t().emptyText }}</p>
+            }
+          </div>
+        }
+        @default {
+          <div
+            class="vd-schedule__timegrid"
+            [attr.data-view]="view()"
+            [style.--vd-schedule-days]="days().length"
+          >
+            <div class="vd-schedule__head">
+              <span class="vd-schedule__gutter"></span>
+              @for (day of days(); track day) {
+                <button
+                  type="button"
+                  class="vd-schedule__colhead"
+                  [attr.data-today]="day === today() ? '' : null"
+                  [attr.aria-label]="dayLabel(day)"
+                  [attr.aria-current]="day === today() ? 'date' : null"
+                  (click)="openDay(day)"
+                >
+                  <span class="vd-schedule__weekday">{{ weekdayShort(day) }}</span>
+                  <span class="vd-schedule__date">{{ dayNumber(day) }}</span>
+                </button>
+              }
+            </div>
+            <div class="vd-schedule__allday">
+              <span class="vd-schedule__gutter vd-schedule__allday-label">{{
+                t().allDayText
+              }}</span>
+              @for (day of days(); track day) {
+                <div
+                  class="vd-schedule__allday-cell"
+                  [attr.data-date]="day"
+                  [attr.data-drop-target]="
+                    preview()?.item?.allDay && preview()?.change?.start === day ? '' : null
+                  "
+                >
+                  @for (item of allDay(day); track item.event.id) {
+                    <button
+                      type="button"
+                      class="vd-schedule__event"
+                      data-all-day
+                      [attr.data-color]="item.event.color ?? 'accent'"
+                      [attr.data-dragging]="draggingId() === item.event.id ? '' : null"
+                      [attr.aria-label]="eventLabel(item)"
+                      (click)="activate(item.event)"
+                      (pointerdown)="dragStart($event, item, 'move')"
+                      (pointermove)="dragMove($event)"
+                      (pointerup)="dragEnd($event)"
+                      (pointercancel)="dragCancel($event)"
+                      (lostpointercapture)="dragCancel($event)"
+                    >
+                      <span class="vd-schedule__name">{{ item.event.title }}</span>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+            <div
+              class="vd-schedule__scroll"
+              role="region"
+              tabindex="0"
+              [attr.aria-labelledby]="baseId + '-title'"
+            >
+              <div class="vd-schedule__grid" [style.--vd-schedule-hours]="hours().length">
+                <div class="vd-schedule__hours" aria-hidden="true">
+                  @for (hour of hours(); track hour) {
+                    <span class="vd-schedule__hour">{{ hourLabel(hour) }}</span>
+                  }
+                </div>
+                @for (day of days(); track day) {
+                  <div
+                    class="vd-schedule__column"
+                    [attr.data-date]="day"
+                    [attr.data-today]="day === today() ? '' : null"
+                  >
+                    @for (p of layout().get(day); track p.item.event.id) {
+                      <button
+                        type="button"
+                        class="vd-schedule__block"
+                        [attr.data-color]="p.item.event.color ?? 'accent'"
+                        [attr.data-dragging]="draggingId() === p.item.event.id ? '' : null"
+                        [attr.data-clipped-start]="p.clippedStart ? '' : null"
+                        [attr.data-clipped-end]="p.clippedEnd ? '' : null"
+                        [attr.data-short]="p.bottom - p.top < 45 ? '' : null"
+                        [style.--vd-schedule-top]="p.top"
+                        [style.--vd-schedule-span]="p.bottom - p.top"
+                        [style.--vd-schedule-col]="p.column"
+                        [style.--vd-schedule-cols]="p.columns"
+                        [attr.aria-label]="eventLabel(p.item)"
+                        (click)="activate(p.item.event)"
+                        (pointerdown)="dragStart($event, p.item, 'move')"
+                        (pointermove)="dragMove($event)"
+                        (pointerup)="dragEnd($event)"
+                        (pointercancel)="dragCancel($event)"
+                        (lostpointercapture)="dragCancel($event)"
+                      >
+                        <span class="vd-schedule__name">{{ p.item.event.title }}</span>
+                        <span class="vd-schedule__time">{{ rangeText(p.item, day) }}</span>
+                        @if (editable() && !p.clippedEnd) {
+                          <span
+                            class="vd-schedule__resize"
+                            aria-hidden="true"
+                            (pointerdown)="dragStart($event, p.item, 'resize')"
+                          ></span>
+                        }
+                      </button>
+                    }
+                    @if (preview(); as pv) {
+                      @if (ghost(day); as g) {
+                        <span
+                          class="vd-schedule__preview"
+                          aria-hidden="true"
+                          [style.--vd-schedule-top]="g.top"
+                          [style.--vd-schedule-span]="g.span"
+                        >
+                          {{ time(g.startMin) }}
+                        </span>
+                      }
+                    }
+                    @if (nowLine(day); as line) {
+                      <span
+                        class="vd-schedule__now"
+                        aria-hidden="true"
+                        [style.--vd-schedule-top]="line"
+                      ></span>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        }
+      }
+    }
+    <p class="vd-visually-hidden" role="status" aria-atomic="true">
+      @for (message of messages(); track message.serial) {
+        <span>{{ message.text }}</span>
+      }
+    </p>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdButton,
+			selector: "button[vdButton], a[vdButton]",
+			inputs: [
+				"variant",
+				"size",
+				"disabled",
+				"loading",
+				"iconOnly",
+				"type"
+			]
+		}, {
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSchedule,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-schedule",
+			imports: [VdButton, VdIcon],
+			template: `
+    <div class="vd-schedule__toolbar">
+      <div class="vd-schedule__nav">
+        <button vdButton size="sm" variant="secondary" type="button" (click)="goToday()">
+          {{ t().todayText }}
+        </button>
+        <button
+          vdButton
+          size="sm"
+          variant="ghost"
+          iconOnly
+          type="button"
+          [attr.aria-label]="t().previousLabel"
+          (click)="step(-1)"
+        >
+          <vd-icon name="chevron-left" />
+        </button>
+        <button
+          vdButton
+          size="sm"
+          variant="ghost"
+          iconOnly
+          type="button"
+          [attr.aria-label]="t().nextLabel"
+          (click)="step(1)"
+        >
+          <vd-icon name="chevron-right" />
+        </button>
+        <p class="vd-schedule__title" [id]="baseId + '-title'" aria-live="polite">{{ title() }}</p>
+      </div>
+      @if (views().length > 1) {
+        <div class="vd-schedule__views" role="group" [attr.aria-label]="t().viewLabel">
+          @for (option of views(); track option) {
+            <button
+              vdButton
+              size="sm"
+              type="button"
+              [variant]="option === view() ? 'secondary' : 'ghost'"
+              [attr.aria-pressed]="option === view()"
+              (click)="view.set(option)"
+            >
+              {{ viewText(option) }}
+            </button>
+          }
+        </div>
+      }
+    </div>
+
+    @if (!valid()) {
+      <p class="vd-schedule__invalid">{{ t().invalidText }}</p>
+    } @else {
+      @switch (view()) {
+        @case ('month') {
+          <table class="vd-schedule__month" [attr.aria-labelledby]="baseId + '-title'">
+            <thead>
+              <tr>
+                @for (name of weekdays(); track $index) {
+                  <th scope="col">
+                    <abbr [attr.title]="name.long">{{ name.short }}</abbr>
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of weeks(); track week[0]) {
+                <tr>
+                  @for (day of week; track day) {
+                    <td
+                      class="vd-schedule__cell"
+                      [attr.data-date]="day"
+                      [attr.data-outside]="!sameMonth(day) ? '' : null"
+                      [attr.data-today]="day === today() ? '' : null"
+                      [attr.data-drop-target]="
+                        preview()?.change?.start?.slice(0, 10) === day ? '' : null
+                      "
+                    >
+                      <button
+                        type="button"
+                        class="vd-schedule__day"
+                        [attr.tabindex]="day === focusDate() ? 0 : -1"
+                        [attr.aria-label]="dayLabel(day)"
+                        [attr.aria-current]="day === today() ? 'date' : null"
+                        (click)="openDay(day)"
+                        (focus)="focusDate.set(day)"
+                      >
+                        {{ dayNumber(day) }}
+                        @if (month().has(day)) {
+                          <span class="vd-schedule__dot" aria-hidden="true"></span>
+                        }
+                      </button>
+                      @let cell = month().get(day);
+                      @if (cell) {
+                        <ul class="vd-schedule__chips" role="list">
+                          @for (item of cell.visible; track item.event.id) {
+                            <li>
+                              <button
+                                type="button"
+                                class="vd-schedule__event"
+                                [attr.tabindex]="day === focusDate() ? 0 : -1"
+                                [attr.data-color]="item.event.color ?? 'accent'"
+                                [attr.data-all-day]="item.allDay ? '' : null"
+                                [attr.data-dragging]="draggingId() === item.event.id ? '' : null"
+                                [attr.aria-label]="eventLabel(item)"
+                                (click)="activate(item.event)"
+                                (pointerdown)="dragStart($event, item, 'move')"
+                                (pointermove)="dragMove($event)"
+                                (pointerup)="dragEnd($event)"
+                                (pointercancel)="dragCancel($event)"
+                                (lostpointercapture)="dragCancel($event)"
+                              >
+                                @if (!item.allDay && item.startDate === day) {
+                                  <span class="vd-schedule__time">{{ time(item.startMin) }}</span>
+                                }
+                                <span class="vd-schedule__name">{{ item.event.title }}</span>
+                              </button>
+                            </li>
+                          }
+                          @if (cell.more) {
+                            <li>
+                              <button
+                                type="button"
+                                class="vd-schedule__more"
+                                [attr.tabindex]="day === focusDate() ? 0 : -1"
+                                (click)="openDay(day)"
+                              >
+                                {{ t().moreText(cell.more) }}
+                              </button>
+                            </li>
+                          }
+                        </ul>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+        @case ('agenda') {
+          <div class="vd-schedule__agenda" [attr.aria-labelledby]="baseId + '-title'" role="region">
+            @for (group of agenda(); track group.date; let g = $index) {
+              <section
+                class="vd-schedule__agenda-day"
+                [attr.aria-labelledby]="baseId + '-agenda-' + g"
+              >
+                <p
+                  class="vd-schedule__agenda-date"
+                  [id]="baseId + '-agenda-' + g"
+                  [attr.data-today]="group.date === today() ? '' : null"
+                >
+                  {{ longDate(group.date) }}
+                </p>
+                <ul class="vd-schedule__agenda-list" role="list">
+                  @for (item of group.items; track item.event.id) {
+                    <li>
+                      <button
+                        type="button"
+                        class="vd-schedule__agenda-event"
+                        [attr.data-color]="item.event.color ?? 'accent'"
+                        (click)="activate(item.event)"
+                      >
+                        <span class="vd-schedule__agenda-time">{{
+                          rangeText(item, group.date)
+                        }}</span>
+                        <span class="vd-schedule__name">{{ item.event.title }}</span>
+                      </button>
+                    </li>
+                  }
+                </ul>
+              </section>
+            } @empty {
+              <p class="vd-schedule__empty">{{ t().emptyText }}</p>
+            }
+          </div>
+        }
+        @default {
+          <div
+            class="vd-schedule__timegrid"
+            [attr.data-view]="view()"
+            [style.--vd-schedule-days]="days().length"
+          >
+            <div class="vd-schedule__head">
+              <span class="vd-schedule__gutter"></span>
+              @for (day of days(); track day) {
+                <button
+                  type="button"
+                  class="vd-schedule__colhead"
+                  [attr.data-today]="day === today() ? '' : null"
+                  [attr.aria-label]="dayLabel(day)"
+                  [attr.aria-current]="day === today() ? 'date' : null"
+                  (click)="openDay(day)"
+                >
+                  <span class="vd-schedule__weekday">{{ weekdayShort(day) }}</span>
+                  <span class="vd-schedule__date">{{ dayNumber(day) }}</span>
+                </button>
+              }
+            </div>
+            <div class="vd-schedule__allday">
+              <span class="vd-schedule__gutter vd-schedule__allday-label">{{
+                t().allDayText
+              }}</span>
+              @for (day of days(); track day) {
+                <div
+                  class="vd-schedule__allday-cell"
+                  [attr.data-date]="day"
+                  [attr.data-drop-target]="
+                    preview()?.item?.allDay && preview()?.change?.start === day ? '' : null
+                  "
+                >
+                  @for (item of allDay(day); track item.event.id) {
+                    <button
+                      type="button"
+                      class="vd-schedule__event"
+                      data-all-day
+                      [attr.data-color]="item.event.color ?? 'accent'"
+                      [attr.data-dragging]="draggingId() === item.event.id ? '' : null"
+                      [attr.aria-label]="eventLabel(item)"
+                      (click)="activate(item.event)"
+                      (pointerdown)="dragStart($event, item, 'move')"
+                      (pointermove)="dragMove($event)"
+                      (pointerup)="dragEnd($event)"
+                      (pointercancel)="dragCancel($event)"
+                      (lostpointercapture)="dragCancel($event)"
+                    >
+                      <span class="vd-schedule__name">{{ item.event.title }}</span>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+            <div
+              class="vd-schedule__scroll"
+              role="region"
+              tabindex="0"
+              [attr.aria-labelledby]="baseId + '-title'"
+            >
+              <div class="vd-schedule__grid" [style.--vd-schedule-hours]="hours().length">
+                <div class="vd-schedule__hours" aria-hidden="true">
+                  @for (hour of hours(); track hour) {
+                    <span class="vd-schedule__hour">{{ hourLabel(hour) }}</span>
+                  }
+                </div>
+                @for (day of days(); track day) {
+                  <div
+                    class="vd-schedule__column"
+                    [attr.data-date]="day"
+                    [attr.data-today]="day === today() ? '' : null"
+                  >
+                    @for (p of layout().get(day); track p.item.event.id) {
+                      <button
+                        type="button"
+                        class="vd-schedule__block"
+                        [attr.data-color]="p.item.event.color ?? 'accent'"
+                        [attr.data-dragging]="draggingId() === p.item.event.id ? '' : null"
+                        [attr.data-clipped-start]="p.clippedStart ? '' : null"
+                        [attr.data-clipped-end]="p.clippedEnd ? '' : null"
+                        [attr.data-short]="p.bottom - p.top < 45 ? '' : null"
+                        [style.--vd-schedule-top]="p.top"
+                        [style.--vd-schedule-span]="p.bottom - p.top"
+                        [style.--vd-schedule-col]="p.column"
+                        [style.--vd-schedule-cols]="p.columns"
+                        [attr.aria-label]="eventLabel(p.item)"
+                        (click)="activate(p.item.event)"
+                        (pointerdown)="dragStart($event, p.item, 'move')"
+                        (pointermove)="dragMove($event)"
+                        (pointerup)="dragEnd($event)"
+                        (pointercancel)="dragCancel($event)"
+                        (lostpointercapture)="dragCancel($event)"
+                      >
+                        <span class="vd-schedule__name">{{ p.item.event.title }}</span>
+                        <span class="vd-schedule__time">{{ rangeText(p.item, day) }}</span>
+                        @if (editable() && !p.clippedEnd) {
+                          <span
+                            class="vd-schedule__resize"
+                            aria-hidden="true"
+                            (pointerdown)="dragStart($event, p.item, 'resize')"
+                          ></span>
+                        }
+                      </button>
+                    }
+                    @if (preview(); as pv) {
+                      @if (ghost(day); as g) {
+                        <span
+                          class="vd-schedule__preview"
+                          aria-hidden="true"
+                          [style.--vd-schedule-top]="g.top"
+                          [style.--vd-schedule-span]="g.span"
+                        >
+                          {{ time(g.startMin) }}
+                        </span>
+                      }
+                    }
+                    @if (nowLine(day); as line) {
+                      <span
+                        class="vd-schedule__now"
+                        aria-hidden="true"
+                        [style.--vd-schedule-top]="line"
+                      ></span>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        }
+      }
+    }
+    <p class="vd-visually-hidden" role="status" aria-atomic="true">
+      @for (message of messages(); track message.serial) {
+        <span>{{ message.text }}</span>
+      }
+    </p>
+  `,
+			host: {
+				class: "vd-schedule",
+				"[attr.data-view]": "view()",
+				"[attr.data-state]": "!valid() ? \"invalid\" : draggingId() ? \"dragging\" : \"idle\"",
+				"(keydown)": "key($event)",
+				"(click)": "emptyClick($event)"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		events: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "events",
+				required: false
+			}]
+		}],
+		view: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "view",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["viewChange"]
+		}],
+		date: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "date",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["dateChange"]
+		}],
+		views: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "views",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		dayStartHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayStartHour",
+				required: false
+			}]
+		}],
+		dayEndHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayEndHour",
+				required: false
+			}]
+		}],
+		scrollToHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollToHour",
+				required: false
+			}]
+		}],
+		slotMinutes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slotMinutes",
+				required: false
+			}]
+		}],
+		maxEventsPerDay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxEventsPerDay",
+				required: false
+			}]
+		}],
+		agendaDays: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "agendaDays",
+				required: false
+			}]
+		}],
+		now: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "now",
+				required: false
+			}]
+		}],
+		editable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editable",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		todayText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "todayText",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		viewLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "viewLabel",
+				required: false
+			}]
+		}],
+		monthText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "monthText",
+				required: false
+			}]
+		}],
+		weekText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekText",
+				required: false
+			}]
+		}],
+		dayText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayText",
+				required: false
+			}]
+		}],
+		agendaText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "agendaText",
+				required: false
+			}]
+		}],
+		allDayText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allDayText",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		invalidText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalidText",
+				required: false
+			}]
+		}],
+		moreText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moreText",
+				required: false
+			}]
+		}],
+		eventsText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "eventsText",
+				required: false
+			}]
+		}],
+		changedText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "changedText",
+				required: false
+			}]
+		}],
+		canceledText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canceledText",
+				required: false
+			}]
+		}],
+		eventActivate: [{
+			type: i0.Output,
+			args: ["eventActivate"]
+		}],
+		slotActivate: [{
+			type: i0.Output,
+			args: ["slotActivate"]
+		}],
+		eventChange: [{
+			type: i0.Output,
+			args: ["eventChange"]
+		}]
+	}
+});
+export { VdSchedule, vdScheduleApplyChange };
+
+//# sourceMappingURL=vadem-ui-schedule.mjs.map