@weaver-apps/calendar 0.2.0 → 0.3.1

package/fesm2022/weaver-apps-calendar-calendar-page-BjJzPlTa.mjs

@@ -0,0 +1,746 @@
+import { a as calendarIconNames, s as calendarHost, t as CALENDAR_GATEWAY } from "./weaver-apps-calendar-calendar-gateway-DqiL9VbI.mjs";
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, output, resource, signal } from "@angular/core";
+import { TranslocoPipe, TranslocoService, translateObjectSignal } from "@jsverse/transloco";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { ActivatedRoute } from "@angular/router";
+import { map } from "rxjs";
+import { DialogRef } from "@loomweaver/plugin-sdk";
+import { DataGrid, ListFilter, openOnRow } from "@weaver-apps/data-grid";
+const daysPerWeek = 7;
+const sunday = 0;
+const daysFromSundayToMonday = 6;
+function startOfWeek(date) {
+	const start = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+	const offset = start.getDay() === sunday ? daysFromSundayToMonday : start.getDay() - 1;
+	start.setDate(start.getDate() - offset);
+	return start;
+}
+function addWeeks(weekStart, weeks) {
+	const moved = new Date(weekStart);
+	moved.setDate(moved.getDate() + weeks * daysPerWeek);
+	return moved;
+}
+function weekRange(weekStart) {
+	return {
+		from: weekStart,
+		until: addWeeks(weekStart, 1)
+	};
+}
+function localDate(value) {
+	const pad = (part) => `${part}`.padStart(2, "0");
+	return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+}
+function localTime(value) {
+	const pad = (part) => `${part}`.padStart(2, "0");
+	return `${pad(value.getHours())}:${pad(value.getMinutes())}`;
+}
+function combine(date, time) {
+	const combined = /* @__PURE__ */ new Date(`${date}T${time}`);
+	return Number.isNaN(combined.getTime()) ? null : combined;
+}
+function activeLocale() {
+	const transloco = inject(TranslocoService);
+	return toSignal(transloco.langChanges$, { initialValue: transloco.getActiveLang() });
+}
+const AppointmentStatus = {
+	scheduled: "scheduled",
+	confirmed: "confirmed",
+	completed: "completed",
+	noShow: "noShow",
+	cancelled: "cancelled"
+};
+const defaultStart = "09:00";
+const defaultEnd = "10:00";
+const settableStatuses = [
+	AppointmentStatus.scheduled,
+	AppointmentStatus.confirmed,
+	AppointmentStatus.completed,
+	AppointmentStatus.noShow
+];
+var AppointmentDialog = class AppointmentDialog {
+	dialog = inject(DialogRef);
+	gateway = inject(CALENDAR_GATEWAY);
+	data = this.dialog.data;
+	existing = this.data.appointment;
+	locale = activeLocale();
+	editing = this.existing !== null;
+	statuses = settableStatuses;
+	title = signal(this.existing?.title ?? "", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	date = signal(localDate(this.existing ? new Date(this.existing.start) : this.data.day), ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+	start = signal(this.existing ? localTime(new Date(this.existing.start)) : defaultStart, ...ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []);
+	endDate = signal(localDate(this.existing ? new Date(this.existing.end) : this.data.day), ...ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []);
+	end = signal(this.existing ? localTime(new Date(this.existing.end)) : defaultEnd, ...ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []);
+	location = signal(this.existing?.location ?? "", ...ngDevMode ? [{ debugName: "location" }] : /* istanbul ignore next */ []);
+	contactName = signal(this.existing?.contactName ?? "", ...ngDevMode ? [{ debugName: "contactName" }] : /* istanbul ignore next */ []);
+	contactPhone = signal(this.existing?.contactPhone ?? "", ...ngDevMode ? [{ debugName: "contactPhone" }] : /* istanbul ignore next */ []);
+	contactEmail = signal(this.existing?.contactEmail ?? "", ...ngDevMode ? [{ debugName: "contactEmail" }] : /* istanbul ignore next */ []);
+	description = signal(this.existing?.description ?? "", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	status = signal(this.existing?.status ?? AppointmentStatus.scheduled, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	problem = signal({ kind: "none" }, ...ngDevMode ? [{ debugName: "problem" }] : /* istanbul ignore next */ []);
+	persisted = false;
+	problemKey = computed(() => {
+		const problem = this.problem();
+		return problem.kind === "message" ? problem.key : "";
+	}, ...ngDevMode ? [{ debugName: "problemKey" }] : /* istanbul ignore next */ []);
+	conflictTimes = computed(() => {
+		const problem = this.problem();
+		if (problem.kind !== "conflict") return [];
+		const format = new Intl.DateTimeFormat(this.locale(), {
+			dateStyle: "short",
+			timeStyle: "short"
+		});
+		return problem.conflicts.map((conflict) => `${format.format(new Date(conflict.start))} – ${format.format(new Date(conflict.end))}`);
+	}, ...ngDevMode ? [{ debugName: "conflictTimes" }] : /* istanbul ignore next */ []);
+	bind(target, event) {
+		target.set(event.target.value);
+	}
+	bindDate(event) {
+		const value = event.target.value;
+		if (this.endDate() === this.date()) this.endDate.set(value);
+		this.date.set(value);
+	}
+	chooseStatus(event) {
+		const chosen = settableStatuses.find((status) => status === event.target.value);
+		if (chosen) this.status.set(chosen);
+	}
+	close() {
+		this.dialog.close(this.persisted);
+	}
+	async save() {
+		const request = this.request();
+		if (!request) return;
+		this.saving.set(true);
+		try {
+			const outcome = this.existing ? await this.gateway.update(this.data.calendarId, this.existing.id, request) : await this.gateway.book(this.data.calendarId, request);
+			const final = await this.applyStatus(outcome);
+			this.settle(final);
+		} catch {
+			this.problem.set({
+				kind: "message",
+				key: "weaver-apps-calendar.errors.save"
+			});
+		} finally {
+			this.saving.set(false);
+		}
+	}
+	request() {
+		const startsAt = combine(this.date(), this.start());
+		const endsAt = combine(this.endDate(), this.end());
+		if (!this.title().trim()) {
+			this.problem.set({
+				kind: "message",
+				key: "weaver-apps-calendar.dialog.titleRequired"
+			});
+			return null;
+		}
+		if (!startsAt || !endsAt || endsAt <= startsAt) {
+			this.problem.set({
+				kind: "message",
+				key: "weaver-apps-calendar.dialog.periodInvalid"
+			});
+			return null;
+		}
+		return {
+			title: this.title().trim(),
+			start: startsAt.toISOString(),
+			end: endsAt.toISOString(),
+			description: this.optional(this.description()),
+			location: this.optional(this.location()),
+			contactName: this.optional(this.contactName()),
+			contactPhone: this.optional(this.contactPhone()),
+			contactEmail: this.optional(this.contactEmail())
+		};
+	}
+	async applyStatus(outcome) {
+		if (outcome.kind === "saved") {
+			this.existing = outcome.appointment;
+			this.persisted = true;
+		}
+		if (outcome.kind !== "saved" || outcome.appointment.status === this.status()) return outcome;
+		return this.gateway.setStatus(this.data.calendarId, outcome.appointment.id, this.status());
+	}
+	settle(outcome) {
+		switch (outcome.kind) {
+			case "saved":
+				this.dialog.close(true);
+				return;
+			case "conflict":
+				this.problem.set({
+					kind: "conflict",
+					conflicts: outcome.conflicts
+				});
+				return;
+			case "closed":
+				this.problem.set({
+					kind: "message",
+					key: "weaver-apps-calendar.dialog.closed"
+				});
+				return;
+			case "changed":
+				this.problem.set({
+					kind: "message",
+					key: "weaver-apps-calendar.dialog.changed"
+				});
+				return;
+			case "invalid":
+				this.problem.set({
+					kind: "message",
+					key: "weaver-apps-calendar.dialog.invalid"
+				});
+				return;
+			default: this.problem.set({
+				kind: "message",
+				key: "weaver-apps-calendar.dialog.missing"
+			});
+		}
+	}
+	optional(value) {
+		return value.trim() ? value.trim() : null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: AppointmentDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: AppointmentDialog,
+		isStandalone: true,
+		selector: "wa-appointment-dialog",
+		ngImport: i0,
+		template: "<form class=\"flex flex-col gap-4\" (submit)=\"$event.preventDefault(); save()\">\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'weaver-apps-calendar.fields.title' | transloco }}\n    <input class=\"lw-field\" required [value]=\"title()\" (input)=\"bind(title, $event)\" />\n  </label>\n\n  <div class=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.date' | transloco }}\n      <input class=\"lw-field\" type=\"date\" required [value]=\"date()\" (input)=\"bindDate($event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.start' | transloco }}\n      <input class=\"lw-field\" type=\"time\" required [value]=\"start()\" (input)=\"bind(start, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.endDate' | transloco }}\n      <input class=\"lw-field\" type=\"date\" required [value]=\"endDate()\" (input)=\"bind(endDate, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.end' | transloco }}\n      <input class=\"lw-field\" type=\"time\" required [value]=\"end()\" (input)=\"bind(end, $event)\" />\n    </label>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.contactName' | transloco }}\n      <input class=\"lw-field\" [value]=\"contactName()\" (input)=\"bind(contactName, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.contactPhone' | transloco }}\n      <input class=\"lw-field\" type=\"tel\" [value]=\"contactPhone()\" (input)=\"bind(contactPhone, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.contactEmail' | transloco }}\n      <input class=\"lw-field\" type=\"email\" [value]=\"contactEmail()\" (input)=\"bind(contactEmail, $event)\" />\n    </label>\n  </div>\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'weaver-apps-calendar.fields.location' | transloco }}\n    <input class=\"lw-field\" [value]=\"location()\" (input)=\"bind(location, $event)\" />\n  </label>\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'weaver-apps-calendar.fields.description' | transloco }}\n    <textarea class=\"lw-field\" rows=\"3\" [value]=\"description()\" (input)=\"bind(description, $event)\"></textarea>\n  </label>\n\n  @if (editing) {\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.status' | transloco }}\n      <select class=\"lw-field\" [value]=\"status()\" (change)=\"chooseStatus($event)\">\n        @for (choice of statuses; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === status()\">{{ 'weaver-apps-calendar.status.' + choice | transloco }}</option>\n        }\n      </select>\n    </label>\n  }\n\n  @switch (problem().kind) {\n    @case ('message') {\n      <p class=\"text-sm text-negative\" role=\"alert\">{{ problemKey() | transloco }}</p>\n    }\n    @case ('conflict') {\n      <div class=\"text-sm text-negative\" role=\"alert\">\n        <p>{{ 'weaver-apps-calendar.dialog.conflict' | transloco }}</p>\n        <ul class=\"list-disc pl-5\">\n          @for (time of conflictTimes(); track time) {\n            <li>{{ time }}</li>\n          }\n        </ul>\n      </div>\n    }\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <button type=\"button\" class=\"lw-btn lw-btn--default\" (click)=\"close()\">{{ 'weaver-apps-calendar.dialog.cancel' | transloco }}</button>\n    <button type=\"submit\" class=\"lw-btn lw-btn--primary\" [disabled]=\"saving()\">{{ 'weaver-apps-calendar.dialog.save' | transloco }}</button>\n  </div>\n</form>\n",
+		dependencies: [{
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: AppointmentDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-appointment-dialog",
+			imports: [TranslocoPipe],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<form class=\"flex flex-col gap-4\" (submit)=\"$event.preventDefault(); save()\">\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'weaver-apps-calendar.fields.title' | transloco }}\n    <input class=\"lw-field\" required [value]=\"title()\" (input)=\"bind(title, $event)\" />\n  </label>\n\n  <div class=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.date' | transloco }}\n      <input class=\"lw-field\" type=\"date\" required [value]=\"date()\" (input)=\"bindDate($event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.start' | transloco }}\n      <input class=\"lw-field\" type=\"time\" required [value]=\"start()\" (input)=\"bind(start, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.endDate' | transloco }}\n      <input class=\"lw-field\" type=\"date\" required [value]=\"endDate()\" (input)=\"bind(endDate, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.end' | transloco }}\n      <input class=\"lw-field\" type=\"time\" required [value]=\"end()\" (input)=\"bind(end, $event)\" />\n    </label>\n  </div>\n\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.contactName' | transloco }}\n      <input class=\"lw-field\" [value]=\"contactName()\" (input)=\"bind(contactName, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.contactPhone' | transloco }}\n      <input class=\"lw-field\" type=\"tel\" [value]=\"contactPhone()\" (input)=\"bind(contactPhone, $event)\" />\n    </label>\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.contactEmail' | transloco }}\n      <input class=\"lw-field\" type=\"email\" [value]=\"contactEmail()\" (input)=\"bind(contactEmail, $event)\" />\n    </label>\n  </div>\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'weaver-apps-calendar.fields.location' | transloco }}\n    <input class=\"lw-field\" [value]=\"location()\" (input)=\"bind(location, $event)\" />\n  </label>\n\n  <label class=\"flex flex-col gap-1 text-sm text-content\">\n    {{ 'weaver-apps-calendar.fields.description' | transloco }}\n    <textarea class=\"lw-field\" rows=\"3\" [value]=\"description()\" (input)=\"bind(description, $event)\"></textarea>\n  </label>\n\n  @if (editing) {\n    <label class=\"flex flex-col gap-1 text-sm text-content\">\n      {{ 'weaver-apps-calendar.fields.status' | transloco }}\n      <select class=\"lw-field\" [value]=\"status()\" (change)=\"chooseStatus($event)\">\n        @for (choice of statuses; track choice) {\n          <option [value]=\"choice\" [selected]=\"choice === status()\">{{ 'weaver-apps-calendar.status.' + choice | transloco }}</option>\n        }\n      </select>\n    </label>\n  }\n\n  @switch (problem().kind) {\n    @case ('message') {\n      <p class=\"text-sm text-negative\" role=\"alert\">{{ problemKey() | transloco }}</p>\n    }\n    @case ('conflict') {\n      <div class=\"text-sm text-negative\" role=\"alert\">\n        <p>{{ 'weaver-apps-calendar.dialog.conflict' | transloco }}</p>\n        <ul class=\"list-disc pl-5\">\n          @for (time of conflictTimes(); track time) {\n            <li>{{ time }}</li>\n          }\n        </ul>\n      </div>\n    }\n  }\n\n  <div class=\"flex justify-end gap-2\">\n    <button type=\"button\" class=\"lw-btn lw-btn--default\" (click)=\"close()\">{{ 'weaver-apps-calendar.dialog.cancel' | transloco }}</button>\n    <button type=\"submit\" class=\"lw-btn lw-btn--primary\" [disabled]=\"saving()\">{{ 'weaver-apps-calendar.dialog.save' | transloco }}</button>\n  </div>\n</form>\n"
+		}]
+	}]
+});
+function appointmentMenu(appointment, runs) {
+	const cancellable = appointment.status !== AppointmentStatus.cancelled;
+	return [
+		{
+			label: "weaver-apps-calendar.actions.edit",
+			icon: "edit",
+			run: runs.edit
+		},
+		...cancellable ? [{
+			label: "weaver-apps-calendar.actions.cancel",
+			icon: calendarIconNames.cancel,
+			run: runs.cancel
+		}] : [],
+		{
+			label: "weaver-apps-calendar.actions.delete",
+			icon: "trash",
+			run: runs.remove
+		}
+	];
+}
+var AppointmentCell = class AppointmentCell {
+	params = null;
+	locale = signal("en", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	kind = signal("title", ...ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []);
+	appointment = signal(null, ...ngDevMode ? [{ debugName: "appointment" }] : /* istanbul ignore next */ []);
+	cancelled = computed(() => this.appointment()?.status === "cancelled", ...ngDevMode ? [{ debugName: "cancelled" }] : /* istanbul ignore next */ []);
+	when = computed(() => {
+		const appointment = this.appointment();
+		if (!appointment) return {
+			day: "",
+			hours: ""
+		};
+		const day = new Intl.DateTimeFormat(this.locale(), {
+			weekday: "short",
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric"
+		});
+		const time = new Intl.DateTimeFormat(this.locale(), {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		return {
+			day: day.format(new Date(appointment.start)),
+			hours: `${time.format(new Date(appointment.start))} – ${time.format(new Date(appointment.end))}`
+		};
+	}, ...ngDevMode ? [{ debugName: "when" }] : /* istanbul ignore next */ []);
+	agInit(params) {
+		this.params = params;
+		this.kind.set(params.kind);
+		this.appointment.set(params.data ?? null);
+		this.locale.set(params.locale());
+	}
+	refresh(params) {
+		this.agInit(params);
+		return true;
+	}
+	openActions(event) {
+		const appointment = this.appointment();
+		if (appointment) this.params?.actions({
+			appointment,
+			...menuAnchor(event)
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: AppointmentCell,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: AppointmentCell,
+		isStandalone: true,
+		selector: "wa-appointment-cell",
+		ngImport: i0,
+		template: "@if (appointment(); as appointment) {\n  @switch (kind()) {\n    @case ('when') {\n      <span class=\"font-medium\" [class.text-content]=\"!cancelled()\" [class.line-through]=\"cancelled()\">{{ when().day }}</span>\n      <span class=\"ml-2 text-content-faint\" [class.line-through]=\"cancelled()\">{{ when().hours }}</span>\n    }\n    @case ('title') {\n      <span class=\"font-medium\" [class.text-content]=\"!cancelled()\" [class.line-through]=\"cancelled()\">{{ appointment.title }}</span>\n    }\n    @case ('contact') {\n      <span [class.line-through]=\"cancelled()\">{{ appointment.contactName ?? '–' }}</span>\n      @if (appointment.contactPhone) {\n        <span class=\"ml-2 text-content-faint\" [class.line-through]=\"cancelled()\">{{ appointment.contactPhone }}</span>\n      }\n    }\n    @case ('location') {\n      <span class=\"text-content-faint\" [class.line-through]=\"cancelled()\">{{ appointment.location ?? '–' }}</span>\n    }\n    @case ('status') {\n      <span class=\"rounded-full border border-border px-2 py-0.5 text-xs text-content\" data-testid=\"appointment-status\">{{ 'weaver-apps-calendar.status.' + appointment.status | transloco }}</span>\n    }\n    @case ('actions') {\n      <button type=\"button\" class=\"relative lw-btn lw-btn--ghost lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'weaver-apps-calendar.actions.more' | transloco\" (click)=\"openActions($event)\">\n        <lw-icon name=\"more\" size=\"1rem\"></lw-icon>\n      </button>\n    }\n  }\n}\n",
+		dependencies: [{
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: AppointmentCell,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-appointment-cell",
+			imports: [TranslocoPipe],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (appointment(); as appointment) {\n  @switch (kind()) {\n    @case ('when') {\n      <span class=\"font-medium\" [class.text-content]=\"!cancelled()\" [class.line-through]=\"cancelled()\">{{ when().day }}</span>\n      <span class=\"ml-2 text-content-faint\" [class.line-through]=\"cancelled()\">{{ when().hours }}</span>\n    }\n    @case ('title') {\n      <span class=\"font-medium\" [class.text-content]=\"!cancelled()\" [class.line-through]=\"cancelled()\">{{ appointment.title }}</span>\n    }\n    @case ('contact') {\n      <span [class.line-through]=\"cancelled()\">{{ appointment.contactName ?? '–' }}</span>\n      @if (appointment.contactPhone) {\n        <span class=\"ml-2 text-content-faint\" [class.line-through]=\"cancelled()\">{{ appointment.contactPhone }}</span>\n      }\n    }\n    @case ('location') {\n      <span class=\"text-content-faint\" [class.line-through]=\"cancelled()\">{{ appointment.location ?? '–' }}</span>\n    }\n    @case ('status') {\n      <span class=\"rounded-full border border-border px-2 py-0.5 text-xs text-content\" data-testid=\"appointment-status\">{{ 'weaver-apps-calendar.status.' + appointment.status | transloco }}</span>\n    }\n    @case ('actions') {\n      <button type=\"button\" class=\"relative lw-btn lw-btn--ghost lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'weaver-apps-calendar.actions.more' | transloco\" (click)=\"openActions($event)\">\n        <lw-icon name=\"more\" size=\"1rem\"></lw-icon>\n      </button>\n    }\n  }\n}\n"
+		}]
+	}]
+});
+function menuAnchor(event) {
+	if (event.detail > 0) return {
+		x: event.clientX,
+		y: event.clientY
+	};
+	const bounds = event.currentTarget.getBoundingClientRect();
+	return {
+		x: bounds.left,
+		y: bounds.bottom
+	};
+}
+const appointmentColumn = {
+	when: "start",
+	title: "title",
+	contact: "contact",
+	location: "location",
+	status: "status",
+	actions: "actions"
+};
+const actionsWidthPx = 72;
+const whenMinWidthPx = 230;
+const textMinWidthPx = 110;
+const locationMinWidthPx = 90;
+const statusMinWidthPx = 112;
+function byStart(left, right) {
+	return Date.parse(left ?? "") - Date.parse(right ?? "");
+}
+function statusOf(appointment) {
+	return appointment.status;
+}
+var AppointmentTable = class AppointmentTable {
+	table = translateObjectSignal("weaver-apps-calendar.table");
+	statuses = translateObjectSignal("weaver-apps-calendar.status");
+	api = signal(null, ...ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []);
+	appointments = input.required(...ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []);
+	locale = input.required(...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	editAppointment = output();
+	appointmentActions = output();
+	translated = computed(() => typeof this.table() === "object" && typeof this.table()["title"] === "string", ...ngDevMode ? [{ debugName: "translated" }] : /* istanbul ignore next */ []);
+	empty = computed(() => ({ noRowsToShow: this.table()["empty"] ?? "" }), ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	options = computed(() => ({
+		rowModelType: "clientSide",
+		columnDefs: this.columns(this.table()),
+		defaultColDef: {
+			sortable: false,
+			resizable: true,
+			suppressHeaderMenuButton: true
+		},
+		getRowId: (params) => params.data.id,
+		initialState: { sort: { sortModel: [{
+			colId: appointmentColumn.when,
+			sort: "asc"
+		}] } },
+		rowClassRules: { "text-content-faint": (params) => params.data?.status === AppointmentStatus.cancelled },
+		...openOnRow((appointment) => this.editAppointment.emit(appointment), { except: [appointmentColumn.actions] })
+	}), ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const api = this.api();
+			const appointments = this.appointments();
+			if (api && !api.isDestroyed()) api.setGridOption("rowData", [...appointments]);
+		});
+	}
+	ready(api) {
+		this.api.set(api);
+	}
+	columns(table) {
+		return [
+			{
+				...this.cell(appointmentColumn.when, "when", table["when"]),
+				field: "start",
+				sortable: true,
+				comparator: byStart,
+				flex: 2,
+				minWidth: whenMinWidthPx
+			},
+			{
+				...this.cell(appointmentColumn.title, "title", table["title"]),
+				field: "title",
+				sortable: true,
+				flex: 2,
+				minWidth: textMinWidthPx
+			},
+			{
+				...this.cell(appointmentColumn.contact, "contact", table["contact"]),
+				valueGetter: (params) => params.data?.contactName ?? "",
+				sortable: true,
+				flex: 2,
+				minWidth: textMinWidthPx
+			},
+			{
+				...this.cell(appointmentColumn.location, "location", table["location"]),
+				field: "location",
+				sortable: true,
+				flex: 1,
+				minWidth: locationMinWidthPx
+			},
+			{
+				...this.cell(appointmentColumn.status, "status", table["status"]),
+				field: "status",
+				sortable: true,
+				flex: 1,
+				minWidth: statusMinWidthPx,
+				filter: ListFilter,
+				filterParams: this.statusChoices()
+			},
+			{
+				...this.cell(appointmentColumn.actions, "actions", ""),
+				width: actionsWidthPx,
+				resizable: false
+			}
+		];
+	}
+	cell(colId, kind, headerName) {
+		return {
+			colId,
+			headerName: headerName ?? "",
+			cellRenderer: AppointmentCell,
+			cellRendererParams: {
+				kind,
+				locale: () => this.locale(),
+				actions: (actions) => this.appointmentActions.emit(actions)
+			}
+		};
+	}
+	statusChoices() {
+		const values = Object.values(AppointmentStatus);
+		return {
+			options: () => values.map((value) => ({
+				value,
+				label: this.statuses()[value] ?? value
+			})),
+			rowValue: statusOf
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: AppointmentTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: AppointmentTable,
+		isStandalone: true,
+		selector: "wa-appointment-table",
+		inputs: {
+			appointments: {
+				classPropertyName: "appointments",
+				publicName: "appointments",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			editAppointment: "editAppointment",
+			appointmentActions: "appointmentActions"
+		},
+		host: { classAttribute: "block h-full w-full" },
+		ngImport: i0,
+		template: "@if (translated()) {\n  <wa-data-grid [options]=\"options()\" [localeOverrides]=\"empty()\" (ready)=\"ready($event)\" />\n}\n",
+		dependencies: [{
+			kind: "component",
+			type: DataGrid,
+			selector: "wa-data-grid",
+			inputs: ["options", "localeOverrides"],
+			outputs: ["ready"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: AppointmentTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-appointment-table",
+			imports: [DataGrid],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "block h-full w-full" },
+			template: "@if (translated()) {\n  <wa-data-grid [options]=\"options()\" [localeOverrides]=\"empty()\" (ready)=\"ready($event)\" />\n}\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		appointments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appointments",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: true
+			}]
+		}],
+		editAppointment: [{
+			type: i0.Output,
+			args: ["editAppointment"]
+		}],
+		appointmentActions: [{
+			type: i0.Output,
+			args: ["appointmentActions"]
+		}]
+	}
+});
+const searchDelayMs = 300;
+var CalendarPage = class CalendarPage {
+	gateway = inject(CALENDAR_GATEWAY);
+	route = inject(ActivatedRoute);
+	searchTimer;
+	locale = activeLocale();
+	calendarId = toSignal(this.route.paramMap.pipe(map((params) => params.get("calendarId") ?? "")), { initialValue: this.route.snapshot.paramMap.get("calendarId") ?? "" });
+	weekStart = signal(startOfWeek(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []);
+	contact = signal("", ...ngDevMode ? [{ debugName: "contact" }] : /* istanbul ignore next */ []);
+	calendar = resource({
+		...ngDevMode ? { debugName: "calendar" } : /* istanbul ignore next */ {},
+		params: () => this.calendarId(),
+		loader: ({ params }) => this.gateway.calendar(params)
+	});
+	appointments = resource({
+		...ngDevMode ? { debugName: "appointments" } : /* istanbul ignore next */ {},
+		params: () => ({
+			calendarId: this.calendarId(),
+			range: weekRange(this.weekStart()),
+			contact: this.contact().trim()
+		}),
+		loader: ({ params, abortSignal }) => this.gateway.appointments(params.calendarId, params.range, params.contact || void 0, abortSignal)
+	});
+	constructor() {
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.searchTimer));
+	}
+	weekLabel = computed(() => {
+		const range = weekRange(this.weekStart());
+		const last = addWeeks(range.until, 0);
+		last.setDate(last.getDate() - 1);
+		const format = new Intl.DateTimeFormat(this.locale(), {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric"
+		});
+		return `${format.format(range.from)} – ${format.format(last)}`;
+	}, ...ngDevMode ? [{ debugName: "weekLabel" }] : /* istanbul ignore next */ []);
+	previousWeek() {
+		this.weekStart.update((start) => addWeeks(start, -1));
+	}
+	nextWeek() {
+		this.weekStart.update((start) => addWeeks(start, 1));
+	}
+	thisWeek() {
+		this.weekStart.set(startOfWeek(/* @__PURE__ */ new Date()));
+	}
+	search(event) {
+		const value = event.target.value;
+		clearTimeout(this.searchTimer);
+		this.searchTimer = setTimeout(() => this.contact.set(value), searchDelayMs);
+	}
+	add() {
+		const today = /* @__PURE__ */ new Date();
+		const shown = weekRange(this.weekStart());
+		const day = today >= shown.from && today < shown.until ? today : this.weekStart();
+		this.openDialog({
+			calendarId: this.calendarId(),
+			appointment: null,
+			day
+		}, "weaver-apps-calendar.dialog.addTitle");
+	}
+	edit(appointment) {
+		this.openDialog({
+			calendarId: this.calendarId(),
+			appointment,
+			day: new Date(appointment.start)
+		}, "weaver-apps-calendar.dialog.editTitle");
+	}
+	actions({ appointment, x, y }) {
+		calendarHost.ui.openMenu(appointmentMenu(appointment, {
+			edit: () => this.edit(appointment),
+			cancel: () => void this.cancel(appointment),
+			remove: () => void this.remove(appointment)
+		}), {
+			x,
+			y
+		});
+	}
+	async cancel(appointment) {
+		const reason = await calendarHost.ui.prompt({
+			title: "weaver-apps-calendar.cancel.title",
+			message: "weaver-apps-calendar.cancel.message",
+			confirmLabel: "weaver-apps-calendar.cancel.confirm",
+			tone: "warning"
+		});
+		if (reason === null) return;
+		await this.attempt(async () => {
+			const outcome = await this.gateway.cancel(this.calendarId(), appointment.id, reason.trim() || null);
+			this.report(outcome.kind === "saved" ? "weaver-apps-calendar.cancel.done" : "weaver-apps-calendar.errors.save", outcome.kind === "saved");
+		});
+	}
+	async remove(appointment) {
+		if (!await calendarHost.ui.confirm({
+			title: "weaver-apps-calendar.delete.title",
+			message: "weaver-apps-calendar.delete.message",
+			confirmLabel: "weaver-apps-calendar.delete.confirm",
+			tone: "danger"
+		})) return;
+		await this.attempt(async () => {
+			await this.gateway.remove(this.calendarId(), appointment.id);
+			this.report("weaver-apps-calendar.delete.done", true);
+		});
+	}
+	async attempt(work) {
+		try {
+			await work();
+		} catch {
+			this.report("weaver-apps-calendar.errors.save", false);
+		}
+	}
+	openDialog(data, title) {
+		calendarHost.ui.open(AppointmentDialog, {
+			data,
+			title,
+			size: "lg",
+			dismiss: "explicit"
+		}).closed.then((saved) => {
+			if (saved) this.report("weaver-apps-calendar.dialog.saved", true);
+		});
+	}
+	report(message, success) {
+		calendarHost.ui.toast({
+			message,
+			kind: success ? "success" : "error"
+		});
+		this.appointments.reload();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: CalendarPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: CalendarPage,
+		isStandalone: true,
+		selector: "wa-calendar-page",
+		ngImport: i0,
+		template: "<div class=\"flex h-full flex-col gap-4 p-6\">\n  <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <h2 class=\"text-lg font-semibold text-content\">{{ calendar.value()?.name ?? ('weaver-apps-calendar.title' | transloco) }}</h2>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <input\n        type=\"search\"\n        class=\"lw-field w-56\"\n        [attr.aria-label]=\"'weaver-apps-calendar.search.label' | transloco\"\n        [attr.placeholder]=\"'weaver-apps-calendar.search.placeholder' | transloco\"\n        (input)=\"search($event)\"\n      />\n      <button type=\"button\" class=\"lw-btn lw-btn--primary\" (click)=\"add()\">\n        <lw-icon name=\"add\" size=\"1rem\"></lw-icon>\n        {{ 'weaver-apps-calendar.actions.add' | transloco }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"flex items-center gap-2\">\n    <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'weaver-apps-calendar.week.previous' | transloco\" (click)=\"previousWeek()\">\n      <lw-icon name=\"weaver-apps-calendar.previous\" size=\"1rem\"></lw-icon>\n      <lw-tooltip [attr.text]=\"'weaver-apps-calendar.week.previous' | transloco\" position=\"bottom\"></lw-tooltip>\n    </button>\n    <button type=\"button\" class=\"lw-btn lw-btn--default lw-btn--sm\" (click)=\"thisWeek()\">{{ 'weaver-apps-calendar.week.current' | transloco }}</button>\n    <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'weaver-apps-calendar.week.next' | transloco\" (click)=\"nextWeek()\">\n      <lw-icon name=\"weaver-apps-calendar.next\" size=\"1rem\"></lw-icon>\n      <lw-tooltip [attr.text]=\"'weaver-apps-calendar.week.next' | transloco\" position=\"bottom\"></lw-tooltip>\n    </button>\n    <span class=\"text-sm font-medium text-content\" data-testid=\"week-label\">{{ weekLabel() }}</span>\n  </div>\n\n  @if (appointments.error()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ 'weaver-apps-calendar.errors.load' | transloco }}</p>\n  } @else {\n    <div class=\"min-h-80 flex-1\">\n      <wa-appointment-table\n        [appointments]=\"appointments.value() ?? []\"\n        [locale]=\"locale()\"\n        (editAppointment)=\"edit($event)\"\n        (appointmentActions)=\"actions($event)\"\n      />\n    </div>\n  }\n</div>\n",
+		dependencies: [{
+			kind: "component",
+			type: AppointmentTable,
+			selector: "wa-appointment-table",
+			inputs: ["appointments", "locale"],
+			outputs: ["editAppointment", "appointmentActions"]
+		}, {
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: CalendarPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wa-calendar-page",
+			imports: [TranslocoPipe, AppointmentTable],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"flex h-full flex-col gap-4 p-6\">\n  <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n    <h2 class=\"text-lg font-semibold text-content\">{{ calendar.value()?.name ?? ('weaver-apps-calendar.title' | transloco) }}</h2>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <input\n        type=\"search\"\n        class=\"lw-field w-56\"\n        [attr.aria-label]=\"'weaver-apps-calendar.search.label' | transloco\"\n        [attr.placeholder]=\"'weaver-apps-calendar.search.placeholder' | transloco\"\n        (input)=\"search($event)\"\n      />\n      <button type=\"button\" class=\"lw-btn lw-btn--primary\" (click)=\"add()\">\n        <lw-icon name=\"add\" size=\"1rem\"></lw-icon>\n        {{ 'weaver-apps-calendar.actions.add' | transloco }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"flex items-center gap-2\">\n    <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'weaver-apps-calendar.week.previous' | transloco\" (click)=\"previousWeek()\">\n      <lw-icon name=\"weaver-apps-calendar.previous\" size=\"1rem\"></lw-icon>\n      <lw-tooltip [attr.text]=\"'weaver-apps-calendar.week.previous' | transloco\" position=\"bottom\"></lw-tooltip>\n    </button>\n    <button type=\"button\" class=\"lw-btn lw-btn--default lw-btn--sm\" (click)=\"thisWeek()\">{{ 'weaver-apps-calendar.week.current' | transloco }}</button>\n    <button type=\"button\" class=\"relative lw-btn lw-btn--default lw-btn--sm lw-btn--icon\" [attr.aria-label]=\"'weaver-apps-calendar.week.next' | transloco\" (click)=\"nextWeek()\">\n      <lw-icon name=\"weaver-apps-calendar.next\" size=\"1rem\"></lw-icon>\n      <lw-tooltip [attr.text]=\"'weaver-apps-calendar.week.next' | transloco\" position=\"bottom\"></lw-tooltip>\n    </button>\n    <span class=\"text-sm font-medium text-content\" data-testid=\"week-label\">{{ weekLabel() }}</span>\n  </div>\n\n  @if (appointments.error()) {\n    <p class=\"text-sm text-negative\" role=\"alert\">{{ 'weaver-apps-calendar.errors.load' | transloco }}</p>\n  } @else {\n    <div class=\"min-h-80 flex-1\">\n      <wa-appointment-table\n        [appointments]=\"appointments.value() ?? []\"\n        [locale]=\"locale()\"\n        (editAppointment)=\"edit($event)\"\n        (appointmentActions)=\"actions($event)\"\n      />\n    </div>\n  }\n</div>\n"
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { CalendarPage };
+
+//# sourceMappingURL=weaver-apps-calendar-calendar-page-BjJzPlTa.mjs.map