@tinya-code/gas-admin-ui 0.0.0-stage → 0.1.0-alpha.1

package/fesm2022/tinya-code-gas-admin-ui-calendar-view-r-RXDE37.mjs

@@ -0,0 +1,1022 @@
+import { i as getSchema } from "./tinya-code-gas-admin-ui-schema-catalog-CDrz9pVN.mjs";
+import { t as Button } from "./tinya-code-gas-admin-ui-button-BQjNW8KB.mjs";
+import { t as DataSourceService } from "./tinya-code-gas-admin-ui-data-source.service-LD8AM3Rn.mjs";
+import { t as ErrorMapperService } from "./tinya-code-gas-admin-ui-error-mapper.service-Ci0UpXtV.mjs";
+import { t as EmptyState } from "./tinya-code-gas-admin-ui-empty-state-BMc0QtoT.mjs";
+import { t as Skeleton } from "./tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { LucideChevronLeft, LucideChevronRight } from "@lucide/angular";
+import { toSignal } from "@angular/core/rxjs-interop";
+const DAY_MS = 864e5;
+const REASON_UNDATED = "Sin fecha de inicio válida";
+const REASON_INVALID_END = "Fecha de fin inválida";
+const REASON_END_BEFORE_START = "El fin es anterior al inicio";
+const MONTHS = [
+	"enero",
+	"febrero",
+	"marzo",
+	"abril",
+	"mayo",
+	"junio",
+	"julio",
+	"agosto",
+	"septiembre",
+	"octubre",
+	"noviembre",
+	"diciembre"
+];
+const MONTHS_SHORT = [
+	"ene",
+	"feb",
+	"mar",
+	"abr",
+	"may",
+	"jun",
+	"jul",
+	"ago",
+	"sep",
+	"oct",
+	"nov",
+	"dic"
+];
+const WEEKDAYS_SHORT = [
+	"lun",
+	"mar",
+	"mié",
+	"jue",
+	"vie",
+	"sáb",
+	"dom"
+];
+const WEEKDAYS = [
+	"lunes",
+	"martes",
+	"miércoles",
+	"jueves",
+	"viernes",
+	"sábado",
+	"domingo"
+];
+const WEEKDAY_HEADINGS = WEEKDAYS_SHORT;
+const DAY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseDay(value) {
+	if (typeof value !== "string") return null;
+	const match = DAY_PATTERN.exec(value.trim());
+	if (match === null) return null;
+	const year = Number(match[1]);
+	const month = Number(match[2]);
+	const day = Number(match[3]);
+	const ms = Date.UTC(year, month - 1, day);
+	const back = new Date(ms);
+	if (back.getUTCFullYear() !== year || back.getUTCMonth() !== month - 1 || back.getUTCDate() !== day) return null;
+	return ms;
+}
+function formatDay(ms) {
+	const date = new Date(ms);
+	const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+	const day = String(date.getUTCDate()).padStart(2, "0");
+	return `${date.getUTCFullYear()}-${month}-${day}`;
+}
+function todayCivil() {
+	const now = /* @__PURE__ */ new Date();
+	const month = String(now.getMonth() + 1).padStart(2, "0");
+	const day = String(now.getDate()).padStart(2, "0");
+	return `${now.getFullYear()}-${month}-${day}`;
+}
+function addDays(ms, days) {
+	return ms + days * DAY_MS;
+}
+function dayOfWeekMon0(ms) {
+	return (new Date(ms).getUTCDay() + 6) % 7;
+}
+function shiftMonths(ms, months) {
+	const date = new Date(ms);
+	const target = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
+	const lastDay = new Date(Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)).getUTCDate();
+	return Date.UTC(target.getUTCFullYear(), target.getUTCMonth(), Math.min(date.getUTCDate(), lastDay));
+}
+function monthGridStartMs(cursorMs) {
+	const date = new Date(cursorMs);
+	const firstOfMonth = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1);
+	return addDays(firstOfMonth, -dayOfWeekMon0(firstOfMonth));
+}
+function monthGridDays(cursorDay) {
+	const cursor = parseDay(cursorDay);
+	if (cursor === null) return [];
+	const start = monthGridStartMs(cursor);
+	return Array.from({ length: 42 }, (_, index) => formatDay(addDays(start, index)));
+}
+function weekDays(cursorDay) {
+	const cursor = parseDay(cursorDay);
+	if (cursor === null) return [];
+	const start = addDays(cursor, -dayOfWeekMon0(cursor));
+	return Array.from({ length: 7 }, (_, index) => formatDay(addDays(start, index)));
+}
+function daysInRange(range) {
+	const from = parseDay(range.desde);
+	const to = parseDay(range.hasta);
+	if (from === null || to === null || to < from) return [];
+	const days = [];
+	for (let ms = from; ms <= to; ms = addDays(ms, 1)) days.push(formatDay(ms));
+	return days;
+}
+function visibleRangeFor(mode, cursorDay) {
+	const cursor = parseDay(cursorDay);
+	if (cursor === null) return {
+		desde: "",
+		hasta: ""
+	};
+	switch (mode) {
+		case "month": {
+			const start = monthGridStartMs(cursor);
+			return {
+				desde: formatDay(start),
+				hasta: formatDay(addDays(start, 41))
+			};
+		}
+		case "week": {
+			const start = addDays(cursor, -dayOfWeekMon0(cursor));
+			return {
+				desde: formatDay(start),
+				hasta: formatDay(addDays(start, 6))
+			};
+		}
+		case "day": return {
+			desde: formatDay(cursor),
+			hasta: formatDay(cursor)
+		};
+		case "agenda": return {
+			desde: formatDay(cursor),
+			hasta: formatDay(addDays(cursor, 29))
+		};
+	}
+}
+function shiftCursor(mode, cursorDay, delta) {
+	const cursor = parseDay(cursorDay) ?? parseDay(todayCivil()) ?? Date.UTC(1970, 0, 1);
+	switch (mode) {
+		case "month": return formatDay(shiftMonths(cursor, delta));
+		case "week": return formatDay(addDays(cursor, 7 * delta));
+		case "day": return formatDay(addDays(cursor, delta));
+		case "agenda": return formatDay(addDays(cursor, 30 * delta));
+	}
+}
+function sameMonth(a, b) {
+	const msA = parseDay(a);
+	const msB = parseDay(b);
+	if (msA === null || msB === null) return false;
+	const dateA = new Date(msA);
+	const dateB = new Date(msB);
+	return dateA.getUTCFullYear() === dateB.getUTCFullYear() && dateA.getUTCMonth() === dateB.getUTCMonth();
+}
+function findFieldByKey(fields, key) {
+	for (const field of fields) {
+		if (field.key === key) return field;
+		if (field.type === "group") {
+			const hit = findFieldByKey(field.fields, key);
+			if (hit !== void 0) return hit;
+		} else if (field.type === "list") {
+			const hit = findFieldByKey(field.itemFields, key);
+			if (hit !== void 0) return hit;
+		}
+	}
+}
+function mapCalendarRows(rows, config, options) {
+	const events = [];
+	const undated = [];
+	const invalid = [];
+	for (const row of rows) {
+		const startMs = parseDay(row[config.startField]);
+		if (startMs === null) {
+			undated.push(row);
+			continue;
+		}
+		let endMs = startMs;
+		if (config.endField !== void 0 && options.endFieldType !== "time") {
+			const rawEnd = row[config.endField];
+			if (!(rawEnd === null || rawEnd === void 0 || rawEnd === "")) {
+				const parsedEnd = parseDay(rawEnd);
+				if (parsedEnd === null) {
+					invalid.push({
+						row,
+						reason: REASON_INVALID_END
+					});
+					continue;
+				}
+				if (parsedEnd < startMs) {
+					invalid.push({
+						row,
+						reason: REASON_END_BEFORE_START
+					});
+					continue;
+				}
+				endMs = parsedEnd;
+			}
+		}
+		const key = String(row[options.keyField] ?? "");
+		const title = String(row[config.titleField] ?? "").trim() || key;
+		const rawColor = config.colorField !== void 0 ? row[config.colorField] : void 0;
+		const color = typeof rawColor === "string" && rawColor !== "" ? rawColor : void 0;
+		events.push({
+			key,
+			title,
+			startDay: formatDay(startMs),
+			endDay: formatDay(endMs),
+			color,
+			row
+		});
+	}
+	return {
+		events,
+		undated,
+		invalid
+	};
+}
+function eventsByDay(events, range) {
+	const byDay = /* @__PURE__ */ new Map();
+	const from = parseDay(range.desde);
+	const to = parseDay(range.hasta);
+	if (from === null || to === null || to < from) return byDay;
+	for (const event of events) {
+		const start = parseDay(event.startDay);
+		const end = parseDay(event.endDay);
+		if (start === null || end === null) continue;
+		const paintFrom = Math.max(start, from);
+		const paintTo = Math.min(end, to);
+		for (let ms = paintFrom; ms <= paintTo; ms = addDays(ms, 1)) {
+			const day = formatDay(ms);
+			const bucket = byDay.get(day);
+			if (bucket === void 0) byDay.set(day, [event]);
+			else bucket.push(event);
+		}
+	}
+	return byDay;
+}
+function dayLabel(day) {
+	const ms = parseDay(day);
+	if (ms === null) return day;
+	const date = new Date(ms);
+	return `${date.getUTCDate()} de ${MONTHS[date.getUTCMonth()]} de ${date.getUTCFullYear()}`;
+}
+function weekdayShort(day) {
+	const ms = parseDay(day);
+	if (ms === null) return "";
+	return WEEKDAYS_SHORT[dayOfWeekMon0(ms)];
+}
+function weekdayFull(day) {
+	const ms = parseDay(day);
+	if (ms === null) return "";
+	return WEEKDAYS[dayOfWeekMon0(ms)];
+}
+function agendaDayLabel(day) {
+	const weekday = weekdayFull(day);
+	return weekday !== "" ? `${weekday}, ${dayLabel(day)}` : dayLabel(day);
+}
+function rangeLabelFor(mode, cursorDay) {
+	const cursor = parseDay(cursorDay);
+	if (cursor === null) return "";
+	const date = new Date(cursor);
+	if (mode === "month") return `${MONTHS[date.getUTCMonth()]} de ${date.getUTCFullYear()}`;
+	const range = visibleRangeFor(mode, cursorDay);
+	const desde = parseDay(range.desde);
+	const hasta = parseDay(range.hasta);
+	if (desde === null || hasta === null) return "";
+	const startDate = new Date(desde);
+	const endDate = new Date(hasta);
+	const sameYear = startDate.getUTCFullYear() === endDate.getUTCFullYear();
+	return `${`${startDate.getUTCDate()} ${MONTHS_SHORT[startDate.getUTCMonth()]}${sameYear ? "" : ` ${startDate.getUTCFullYear()}`}`} – ${endDate.getUTCDate()} ${MONTHS_SHORT[endDate.getUTCMonth()]} ${endDate.getUTCFullYear()}`;
+}
+function calendarConfigOf(view) {
+	if (!view || typeof view !== "object") return void 0;
+	const candidate = view;
+	return candidate.type === "calendar" && candidate.config !== void 0 ? candidate.config : void 0;
+}
+const MODE_OPTIONS = [
+	{
+		mode: "month",
+		label: "Mes"
+	},
+	{
+		mode: "week",
+		label: "Semana"
+	},
+	{
+		mode: "day",
+		label: "Día"
+	},
+	{
+		mode: "agenda",
+		label: "Agenda"
+	}
+];
+const NO_EVENTS = [];
+var CalendarView = class CalendarView {
+	route = inject(ActivatedRoute);
+	routeData = toSignal(this.route.data, { requireSync: true });
+	dataSource = inject(DataSourceService);
+	errorMapper = inject(ErrorMapperService);
+	schema = computed(() => {
+		const data = this.routeData();
+		const explicit = data["schema"];
+		if (explicit !== void 0) return explicit;
+		const resourceId = data["resourceId"];
+		return typeof resourceId === "string" ? getSchema(resourceId) : void 0;
+	}, ...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	config = computed(() => {
+		const schema = this.schema();
+		const viewName = this.routeData()["uiView"];
+		if (schema === void 0 || typeof viewName !== "string") return void 0;
+		const cfg = calendarConfigOf(schema.uiViews?.[viewName]);
+		if (cfg === void 0) return void 0;
+		return typeof cfg.startField === "string" && cfg.startField !== "" && typeof cfg.titleField === "string" && cfg.titleField !== "" ? cfg : void 0;
+	}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	explicitMode = signal(void 0, ...ngDevMode ? [{ debugName: "explicitMode" }] : /* istanbul ignore next */ []);
+	mode = computed(() => this.explicitMode() ?? this.config()?.defaultView ?? "month", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	cursor = signal(todayCivil(), ...ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []);
+	visibleRange = computed(() => this.config() === void 0 ? null : visibleRangeFor(this.mode(), this.cursor()), ...ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []);
+	rangeLabel = computed(() => this.config() === void 0 ? "" : rangeLabelFor(this.mode(), this.cursor()), ...ngDevMode ? [{ debugName: "rangeLabel" }] : /* istanbul ignore next */ []);
+	status = signal("loading", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	rows = signal([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	seleccionada = signal(null, ...ngDevMode ? [{ debugName: "seleccionada" }] : /* istanbul ignore next */ []);
+	errorMessage = signal("", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	modeOptions = MODE_OPTIONS;
+	weekdayHeadings = WEEKDAY_HEADINGS;
+	reasonUndated = REASON_UNDATED;
+	loadEpoch = 0;
+	constructor() {
+		effect(() => {
+			const cfg = this.config();
+			const range = this.visibleRange();
+			if (cfg === void 0 || range === null) return;
+			this.load(cfg, range);
+		});
+	}
+	mapping = computed(() => {
+		const cfg = this.config();
+		const schema = this.schema();
+		if (cfg === void 0 || schema === void 0) return {
+			events: [],
+			undated: [],
+			invalid: []
+		};
+		const endFieldType = cfg.endField !== void 0 ? findFieldByKey(schema.fields, cfg.endField)?.type : void 0;
+		return mapCalendarRows(this.rows(), cfg, {
+			keyField: schema.keyField,
+			endFieldType
+		});
+	}, ...ngDevMode ? [{ debugName: "mapping" }] : /* istanbul ignore next */ []);
+	eventsByDay = computed(() => {
+		const range = this.visibleRange();
+		if (range === null) return /* @__PURE__ */ new Map();
+		return eventsByDay(this.mapping().events, range);
+	}, ...ngDevMode ? [{ debugName: "eventsByDay" }] : /* istanbul ignore next */ []);
+	monthGrid = computed(() => monthGridDays(this.cursor()), ...ngDevMode ? [{ debugName: "monthGrid" }] : /* istanbul ignore next */ []);
+	weekColumnDays = computed(() => weekDays(this.cursor()), ...ngDevMode ? [{ debugName: "weekColumnDays" }] : /* istanbul ignore next */ []);
+	agendaDays = computed(() => {
+		const range = this.visibleRange();
+		if (range === null) return [];
+		return daysInRange(range).filter((day) => this.eventsByDay().has(day));
+	}, ...ngDevMode ? [{ debugName: "agendaDays" }] : /* istanbul ignore next */ []);
+	hasProblemRecords = computed(() => this.mapping().undated.length > 0 || this.mapping().invalid.length > 0, ...ngDevMode ? [{ debugName: "hasProblemRecords" }] : /* istanbul ignore next */ []);
+	previous() {
+		this.cursor.set(shiftCursor(this.mode(), this.cursor(), -1));
+	}
+	next() {
+		this.cursor.set(shiftCursor(this.mode(), this.cursor(), 1));
+	}
+	today() {
+		this.cursor.set(todayCivil());
+	}
+	setMode(mode) {
+		this.explicitMode.set(mode);
+	}
+	retry() {
+		const cfg = this.config();
+		const range = this.visibleRange();
+		if (cfg !== void 0 && range !== null) this.load(cfg, range);
+	}
+	binding() {
+		return this.routeData()["select"];
+	}
+	seleccionar(event) {
+		const binding = this.binding();
+		if (binding === void 0) return;
+		if (binding.mode === "inline") {
+			this.seleccionada.set(event.key);
+			return;
+		}
+		if (binding.mode === "none") return;
+		const schema = this.schema();
+		const emit = this.routeData()["emit"];
+		emit?.({
+			resource: schema?.id ?? String(this.routeData()["resourceId"] ?? ""),
+			key: event.key,
+			action: binding.on
+		});
+	}
+	seleccionable() {
+		const binding = this.binding();
+		return binding !== void 0 && binding.mode !== "none";
+	}
+	esSeleccionada(event) {
+		return this.seleccionable() && this.seleccionada() === event.key;
+	}
+	eventsFor(day) {
+		return this.eventsByDay().get(day) ?? NO_EVENTS;
+	}
+	dayNumber(day) {
+		return Number(day.slice(8, 10));
+	}
+	isInCursorMonth(day) {
+		return sameMonth(day, this.cursor());
+	}
+	weekdayShort(day) {
+		return weekdayShort(day);
+	}
+	dayHeading(day) {
+		return agendaDayLabel(day);
+	}
+	recordLabel(row) {
+		const schema = this.schema();
+		if (schema === void 0) return "";
+		const title = String(row[schema.titleField] ?? "").trim();
+		return title !== "" ? title : String(row[schema.keyField] ?? "");
+	}
+	async load(cfg, range) {
+		const schema = this.schema();
+		if (schema === void 0) return;
+		const epoch = ++this.loadEpoch;
+		this.status.set("loading");
+		const ctx = cfg.source?.view !== void 0 && cfg.source.view !== "" ? {
+			desde: range.desde,
+			hasta: range.hasta
+		} : void 0;
+		const source = cfg.source ?? { resource: schema.id };
+		try {
+			const rows = await this.dataSource.rows(source, ctx);
+			if (epoch !== this.loadEpoch) return;
+			this.rows.set(rows);
+			this.errorMessage.set("");
+			this.status.set("ready");
+		} catch (error) {
+			if (epoch !== this.loadEpoch) return;
+			this.errorMessage.set(this.errorMapper.map(error).general ?? "No se pudo cargar el calendario.");
+			this.status.set("error");
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: CalendarView,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: CalendarView,
+		isStandalone: true,
+		selector: "app-calendar-view",
+		ngImport: i0,
+		template: `
+    @if (config(); as cfg) {
+      <section class="space-y-4" aria-label="Calendario" [attr.aria-busy]="status() === 'loading'">
+        <header class="flex flex-wrap items-center justify-between gap-3">
+          <h2 class="font-display text-xl font-semibold">{{ rangeLabel() }}</h2>
+          <div class="flex items-center gap-1">
+            <button
+              app-button
+              variant="outline"
+              size="icon"
+              type="button"
+              aria-label="Período anterior"
+              title="Período anterior"
+              (click)="previous()"
+            >
+              <svg lucideChevronLeft size="16" aria-hidden="true" />
+            </button>
+            <button app-button variant="outline" size="sm" type="button" (click)="today()">
+              Hoy
+            </button>
+            <button
+              app-button
+              variant="outline"
+              size="icon"
+              type="button"
+              aria-label="Período siguiente"
+              title="Período siguiente"
+              (click)="next()"
+            >
+              <svg lucideChevronRight size="16" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="flex items-center gap-1" role="group" aria-label="Vista del calendario">
+            @for (option of modeOptions; track option.mode) {
+              <button
+                app-button
+                variant="ghost"
+                size="sm"
+                type="button"
+                [attr.aria-pressed]="mode() === option.mode"
+                (click)="setMode(option.mode)"
+              >
+                {{ option.label }}
+              </button>
+            }
+          </div>
+        </header>
+
+        @switch (status()) {
+          @case ('loading') {
+            <app-skeleton [lines]="8" [height]="32" />
+          }
+          @case ('error') {
+            <app-empty-state title="No se pudo cargar el calendario" [message]="errorMessage()">
+              <button app-button variant="outline" type="button" (click)="retry()">
+                Reintentar
+              </button>
+            </app-empty-state>
+          }
+          @case ('ready') {
+            @if (mapping().events.length === 0) {
+              <app-empty-state
+                title="Sin eventos"
+                message="No hay eventos con fecha válida en este período."
+              />
+            } @else {
+              @switch (mode()) {
+                @case ('month') {
+                  <div class="overflow-x-auto rounded-xl border border-neutral/20 bg-surface">
+                    <div class="grid min-w-[640px] grid-cols-7">
+                      @for (heading of weekdayHeadings; track heading) {
+                        <div
+                          class="border-b border-neutral/15 px-2 py-1.5 text-xs font-medium uppercase text-neutral"
+                        >
+                          {{ heading }}
+                        </div>
+                      }
+                      @for (day of monthGrid(); track day) {
+                        <div
+                          class="min-h-24 border-b border-r border-neutral/10 p-1.5"
+                          [attr.data-day]="day"
+                          [class.opacity-40]="!isInCursorMonth(day)"
+                        >
+                          <span class="text-xs font-medium">{{ dayNumber(day) }}</span>
+                          <ul class="mt-1 space-y-0.5">
+                            @for (event of eventsFor(day); track event.key) {
+                              <li
+                                class="flex items-center gap-1 text-xs"
+                                [class.cursor-pointer]="seleccionable()"
+                                [class.ring-2]="esSeleccionada(event)"
+                                [attr.data-event-key]="event.key"
+                                [attr.data-selectable]="seleccionable() ? 'true' : null"
+                                (click)="seleccionar(event)"
+                              >
+                                <span
+                                  class="size-2 shrink-0 rounded-full bg-neutral/30"
+                                  [style.background-color]="event.color ?? null"
+                                  aria-hidden="true"
+                                ></span>
+                                <span class="truncate">{{ event.title }}</span>
+                              </li>
+                            }
+                          </ul>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+                @case ('week') {
+                  <div class="overflow-x-auto rounded-xl border border-neutral/20 bg-surface">
+                    <div class="grid min-w-[560px] grid-cols-7">
+                      @for (day of weekColumnDays(); track day) {
+                        <div class="min-h-32 border-r border-neutral/10 p-2" [attr.data-day]="day">
+                          <span class="text-xs font-medium uppercase text-neutral">
+                            {{ weekdayShort(day) }} {{ dayNumber(day) }}
+                          </span>
+                          <ul class="mt-2 space-y-1">
+                            @for (event of eventsFor(day); track event.key) {
+                              <li
+                                class="flex items-center gap-1.5 text-sm"
+                                [class.cursor-pointer]="seleccionable()"
+                                [class.ring-2]="esSeleccionada(event)"
+                                [attr.data-event-key]="event.key"
+                                [attr.data-selectable]="seleccionable() ? 'true' : null"
+                                (click)="seleccionar(event)"
+                              >
+                                <span
+                                  class="size-2 shrink-0 rounded-full bg-neutral/30"
+                                  [style.background-color]="event.color ?? null"
+                                  aria-hidden="true"
+                                ></span>
+                                <span class="truncate">{{ event.title }}</span>
+                              </li>
+                            }
+                          </ul>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+                @case ('day') {
+                  <div
+                    class="rounded-xl border border-neutral/20 bg-surface p-4"
+                    [attr.data-day]="cursor()"
+                  >
+                    <h3 class="font-display text-base font-semibold">
+                      {{ dayHeading(cursor()) }}
+                    </h3>
+                    @if (eventsFor(cursor()).length === 0) {
+                      <p class="mt-2 text-sm text-neutral">Sin eventos este día.</p>
+                    } @else {
+                      <ul class="mt-3 space-y-2">
+                        @for (event of eventsFor(cursor()); track event.key) {
+                          <li
+                            class="flex items-center gap-1 text-xs"
+                            [class.cursor-pointer]="seleccionable()"
+                            [class.ring-2]="esSeleccionada(event)"
+                            [attr.data-event-key]="event.key"
+                            [attr.data-selectable]="seleccionable() ? 'true' : null"
+                            (click)="seleccionar(event)"
+                          >
+                            <span
+                              class="size-2.5 shrink-0 rounded-full bg-neutral/30"
+                              [style.background-color]="event.color ?? null"
+                              aria-hidden="true"
+                            ></span>
+                            <span>{{ event.title }}</span>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </div>
+                }
+                @case ('agenda') {
+                  <ol class="space-y-4">
+                    @for (day of agendaDays(); track day) {
+                      <li class="rounded-xl border border-neutral/20 bg-surface p-4">
+                        <h3 class="text-sm font-semibold">{{ dayHeading(day) }}</h3>
+                        <ul class="mt-2 space-y-1">
+                          @for (event of eventsFor(day); track event.key) {
+                            <li
+                              class="flex items-center gap-2 text-sm"
+                              [class.cursor-pointer]="seleccionable()"
+                              [class.ring-2]="esSeleccionada(event)"
+                              [attr.data-event-key]="event.key"
+                              [attr.data-selectable]="seleccionable() ? 'true' : null"
+                              (click)="seleccionar(event)"
+                            >
+                              <span
+                                class="size-2 shrink-0 rounded-full bg-neutral/30"
+                                [style.background-color]="event.color ?? null"
+                                aria-hidden="true"
+                              ></span>
+                              <span>{{ event.title }}</span>
+                            </li>
+                          }
+                        </ul>
+                      </li>
+                    }
+                  </ol>
+                }
+              }
+            }
+
+            <!-- Problem records are VISIBLE, never silently dropped: a row
+                 without a valid start or with an impossible interval cannot
+                 be painted, but the operator must see why. -->
+            @if (hasProblemRecords()) {
+              <section
+                class="rounded-xl border border-neutral/30 p-4"
+                aria-label="Registros sin fecha válida"
+              >
+                <h3 class="font-display text-sm font-semibold">Registros sin fecha válida</h3>
+                <p class="mt-1 text-help text-neutral">
+                  Estos registros no se pueden pintar en el calendario:
+                </p>
+                <ul class="mt-2 space-y-1 text-sm">
+                  @for (row of mapping().undated; track $index) {
+                    <li>{{ recordLabel(row) }} — {{ reasonUndated }}</li>
+                  }
+                  @for (item of mapping().invalid; track $index) {
+                    <li>{{ recordLabel(item.row) }} — {{ item.reason }}</li>
+                  }
+                </ul>
+              </section>
+            }
+          }
+        }
+      </section>
+    } @else {
+      <app-empty-state
+        title="Configuración inválida"
+        message="Esta vista no declara una configuración de calendario válida."
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: EmptyState,
+				selector: "app-empty-state",
+				inputs: ["title", "message"]
+			},
+			{
+				kind: "component",
+				type: LucideChevronLeft,
+				selector: "svg[lucideChevronLeft]"
+			},
+			{
+				kind: "component",
+				type: LucideChevronRight,
+				selector: "svg[lucideChevronRight]"
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "app-skeleton",
+				inputs: [
+					"lines",
+					"height",
+					"width"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: CalendarView,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-calendar-view",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				Button,
+				EmptyState,
+				LucideChevronLeft,
+				LucideChevronRight,
+				Skeleton
+			],
+			template: `
+    @if (config(); as cfg) {
+      <section class="space-y-4" aria-label="Calendario" [attr.aria-busy]="status() === 'loading'">
+        <header class="flex flex-wrap items-center justify-between gap-3">
+          <h2 class="font-display text-xl font-semibold">{{ rangeLabel() }}</h2>
+          <div class="flex items-center gap-1">
+            <button
+              app-button
+              variant="outline"
+              size="icon"
+              type="button"
+              aria-label="Período anterior"
+              title="Período anterior"
+              (click)="previous()"
+            >
+              <svg lucideChevronLeft size="16" aria-hidden="true" />
+            </button>
+            <button app-button variant="outline" size="sm" type="button" (click)="today()">
+              Hoy
+            </button>
+            <button
+              app-button
+              variant="outline"
+              size="icon"
+              type="button"
+              aria-label="Período siguiente"
+              title="Período siguiente"
+              (click)="next()"
+            >
+              <svg lucideChevronRight size="16" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="flex items-center gap-1" role="group" aria-label="Vista del calendario">
+            @for (option of modeOptions; track option.mode) {
+              <button
+                app-button
+                variant="ghost"
+                size="sm"
+                type="button"
+                [attr.aria-pressed]="mode() === option.mode"
+                (click)="setMode(option.mode)"
+              >
+                {{ option.label }}
+              </button>
+            }
+          </div>
+        </header>
+
+        @switch (status()) {
+          @case ('loading') {
+            <app-skeleton [lines]="8" [height]="32" />
+          }
+          @case ('error') {
+            <app-empty-state title="No se pudo cargar el calendario" [message]="errorMessage()">
+              <button app-button variant="outline" type="button" (click)="retry()">
+                Reintentar
+              </button>
+            </app-empty-state>
+          }
+          @case ('ready') {
+            @if (mapping().events.length === 0) {
+              <app-empty-state
+                title="Sin eventos"
+                message="No hay eventos con fecha válida en este período."
+              />
+            } @else {
+              @switch (mode()) {
+                @case ('month') {
+                  <div class="overflow-x-auto rounded-xl border border-neutral/20 bg-surface">
+                    <div class="grid min-w-[640px] grid-cols-7">
+                      @for (heading of weekdayHeadings; track heading) {
+                        <div
+                          class="border-b border-neutral/15 px-2 py-1.5 text-xs font-medium uppercase text-neutral"
+                        >
+                          {{ heading }}
+                        </div>
+                      }
+                      @for (day of monthGrid(); track day) {
+                        <div
+                          class="min-h-24 border-b border-r border-neutral/10 p-1.5"
+                          [attr.data-day]="day"
+                          [class.opacity-40]="!isInCursorMonth(day)"
+                        >
+                          <span class="text-xs font-medium">{{ dayNumber(day) }}</span>
+                          <ul class="mt-1 space-y-0.5">
+                            @for (event of eventsFor(day); track event.key) {
+                              <li
+                                class="flex items-center gap-1 text-xs"
+                                [class.cursor-pointer]="seleccionable()"
+                                [class.ring-2]="esSeleccionada(event)"
+                                [attr.data-event-key]="event.key"
+                                [attr.data-selectable]="seleccionable() ? 'true' : null"
+                                (click)="seleccionar(event)"
+                              >
+                                <span
+                                  class="size-2 shrink-0 rounded-full bg-neutral/30"
+                                  [style.background-color]="event.color ?? null"
+                                  aria-hidden="true"
+                                ></span>
+                                <span class="truncate">{{ event.title }}</span>
+                              </li>
+                            }
+                          </ul>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+                @case ('week') {
+                  <div class="overflow-x-auto rounded-xl border border-neutral/20 bg-surface">
+                    <div class="grid min-w-[560px] grid-cols-7">
+                      @for (day of weekColumnDays(); track day) {
+                        <div class="min-h-32 border-r border-neutral/10 p-2" [attr.data-day]="day">
+                          <span class="text-xs font-medium uppercase text-neutral">
+                            {{ weekdayShort(day) }} {{ dayNumber(day) }}
+                          </span>
+                          <ul class="mt-2 space-y-1">
+                            @for (event of eventsFor(day); track event.key) {
+                              <li
+                                class="flex items-center gap-1.5 text-sm"
+                                [class.cursor-pointer]="seleccionable()"
+                                [class.ring-2]="esSeleccionada(event)"
+                                [attr.data-event-key]="event.key"
+                                [attr.data-selectable]="seleccionable() ? 'true' : null"
+                                (click)="seleccionar(event)"
+                              >
+                                <span
+                                  class="size-2 shrink-0 rounded-full bg-neutral/30"
+                                  [style.background-color]="event.color ?? null"
+                                  aria-hidden="true"
+                                ></span>
+                                <span class="truncate">{{ event.title }}</span>
+                              </li>
+                            }
+                          </ul>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+                @case ('day') {
+                  <div
+                    class="rounded-xl border border-neutral/20 bg-surface p-4"
+                    [attr.data-day]="cursor()"
+                  >
+                    <h3 class="font-display text-base font-semibold">
+                      {{ dayHeading(cursor()) }}
+                    </h3>
+                    @if (eventsFor(cursor()).length === 0) {
+                      <p class="mt-2 text-sm text-neutral">Sin eventos este día.</p>
+                    } @else {
+                      <ul class="mt-3 space-y-2">
+                        @for (event of eventsFor(cursor()); track event.key) {
+                          <li
+                            class="flex items-center gap-1 text-xs"
+                            [class.cursor-pointer]="seleccionable()"
+                            [class.ring-2]="esSeleccionada(event)"
+                            [attr.data-event-key]="event.key"
+                            [attr.data-selectable]="seleccionable() ? 'true' : null"
+                            (click)="seleccionar(event)"
+                          >
+                            <span
+                              class="size-2.5 shrink-0 rounded-full bg-neutral/30"
+                              [style.background-color]="event.color ?? null"
+                              aria-hidden="true"
+                            ></span>
+                            <span>{{ event.title }}</span>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </div>
+                }
+                @case ('agenda') {
+                  <ol class="space-y-4">
+                    @for (day of agendaDays(); track day) {
+                      <li class="rounded-xl border border-neutral/20 bg-surface p-4">
+                        <h3 class="text-sm font-semibold">{{ dayHeading(day) }}</h3>
+                        <ul class="mt-2 space-y-1">
+                          @for (event of eventsFor(day); track event.key) {
+                            <li
+                              class="flex items-center gap-2 text-sm"
+                              [class.cursor-pointer]="seleccionable()"
+                              [class.ring-2]="esSeleccionada(event)"
+                              [attr.data-event-key]="event.key"
+                              [attr.data-selectable]="seleccionable() ? 'true' : null"
+                              (click)="seleccionar(event)"
+                            >
+                              <span
+                                class="size-2 shrink-0 rounded-full bg-neutral/30"
+                                [style.background-color]="event.color ?? null"
+                                aria-hidden="true"
+                              ></span>
+                              <span>{{ event.title }}</span>
+                            </li>
+                          }
+                        </ul>
+                      </li>
+                    }
+                  </ol>
+                }
+              }
+            }
+
+            <!-- Problem records are VISIBLE, never silently dropped: a row
+                 without a valid start or with an impossible interval cannot
+                 be painted, but the operator must see why. -->
+            @if (hasProblemRecords()) {
+              <section
+                class="rounded-xl border border-neutral/30 p-4"
+                aria-label="Registros sin fecha válida"
+              >
+                <h3 class="font-display text-sm font-semibold">Registros sin fecha válida</h3>
+                <p class="mt-1 text-help text-neutral">
+                  Estos registros no se pueden pintar en el calendario:
+                </p>
+                <ul class="mt-2 space-y-1 text-sm">
+                  @for (row of mapping().undated; track $index) {
+                    <li>{{ recordLabel(row) }} — {{ reasonUndated }}</li>
+                  }
+                  @for (item of mapping().invalid; track $index) {
+                    <li>{{ recordLabel(item.row) }} — {{ item.reason }}</li>
+                  }
+                </ul>
+              </section>
+            }
+          }
+        }
+      </section>
+    } @else {
+      <app-empty-state
+        title="Configuración inválida"
+        message="Esta vista no declara una configuración de calendario válida."
+      />
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { CalendarView };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-calendar-view-r-RXDE37.mjs.map