@arquimedes.co/eureka-forms 3.0.52-test → 3.0.53-new-steps

package/dist/Shared/ErkCalendar/ErkCalendar.d.ts

@@ -0,0 +1,73 @@
+import { CalendarDefaultView, CalendarEvent, CalendarEventCategory, CalendarEventTemplate, CalendarValue } from '../../@Types/CalendarFormStep';
+/**
+ * Fuente adicional de eventos que se superpone al calendario propio —
+ * eventos a nivel de organización, de área, de proyecto, etc.
+ * Se muestran en solo lectura (se gestionan en su propio nivel) y se pueden
+ * ocultar/mostrar desde el sidebar ("Compartidos").
+ */
+export interface CalendarSource {
+    id: string;
+    /** Nombre visible en el sidebar (ej: "Organización", "Área — Soporte"). */
+    name: string;
+    /** Color con el que se pintan sus eventos (si el evento no trae uno propio). */
+    color?: string;
+    events: CalendarEvent[];
+}
+/**
+ * Disponibilidad por defecto cuando un día no tiene ventanas explícitas —
+ * el sistema de días hábiles del app (semana laboral menos festivos, como
+ * `WorkingDaysCache`).
+ */
+export interface BusinessDaysConfig {
+    /** Hora de inicio del horario hábil (HH:mm). */
+    start: string;
+    /** Hora de fin del horario hábil (HH:mm). */
+    end: string;
+    /** Días hábiles de la semana (0=Dom … 6=Sáb). @default [1,2,3,4,5] */
+    days?: number[];
+    /** Fechas no hábiles (festivos) `YYYY-MM-DD` — ej. del WorkingDaysCache. */
+    holidays?: string[];
+}
+export interface ErkCalendarProps {
+    value: CalendarValue | null;
+    onChange: (value: CalendarValue | null) => void;
+    /** Vista inicial. @default WEEK */
+    defaultView?: CalendarDefaultView;
+    /** Vistas disponibles en el switcher. @default day/week/month */
+    enabledViews?: CalendarDefaultView[];
+    /** Categorías que se pueden crear; vacío/undefined = todas. */
+    allowedCategories?: CalendarEventCategory[];
+    /** Plantillas de la organización (las `bookable` son tipos de espacio agendable). */
+    eventTemplates?: CalendarEventTemplate[];
+    /** Fuentes compartidas (organización, área, proyecto…) superpuestas en solo lectura. */
+    sources?: CalendarSource[];
+    /** Disponibilidad por defecto (días hábiles) cuando no hay ventanas explícitas. */
+    businessDays?: BusinessDaysConfig;
+    /** @default true */
+    showWeekends?: boolean;
+    /** Hora mínima visible (HH:mm). @default "00:00" */
+    minTime?: string;
+    /** Hora máxima visible (HH:mm). @default "23:00" */
+    maxTime?: string;
+    /** Permite recurrencia (RRULE diaria/semanal/mensual). @default true */
+    allowRecurring?: boolean;
+    /** Permite eventos de todo el día. @default true */
+    allowAllDay?: boolean;
+    /** Zona horaria que se guarda junto a los eventos. */
+    timezone?: string;
+    readOnly?: boolean;
+    error?: string;
+}
+/**
+ * Calendario completo reutilizable (vistas día/semana/mes/agenda) con sidebar:
+ * mini-calendario, creación rápida y listas de disponibilidad/eventos con
+ * visibilidad por categoría o plantilla.
+ *
+ * Las categorías de disponibilidad (laboral/presencial/virtual/específico) se
+ * pintan como franja rayada de fondo — son los espacios donde un booking puede
+ * agendar; si un día no tiene ventanas explícitas, `businessDays` pinta la
+ * disponibilidad por defecto del sistema de días hábiles. Los eventos usan
+ * ISO 8601 + RRULE (RFC 5545), el mismo estándar de Google/Outlook.
+ */
+declare function ErkCalendar({ value, onChange, defaultView, enabledViews, allowedCategories, eventTemplates, sources, businessDays, showWeekends, minTime, maxTime, allowRecurring, allowAllDay, timezone, readOnly, error, }: ErkCalendarProps): JSX.Element;
+export default ErkCalendar;

package/dist/Shared/ErkCalendar/ErkCalendar.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { addDays, addMonths, addWeeks, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, isToday, startOfDay, startOfMonth, startOfWeek, } from 'date-fns';
+import { es } from 'date-fns/locale';
+import ArrowLeftIcon from '../../Icons/ArrowLeftIcon';
+import ArrowRightIcon from '../../Icons/ArrowRightIcon';
+import { CalendarDefaultView, CalendarEventCategory, } from '../../@Types/CalendarFormStep';
+import ErkButton from '../ErkButton/ErkButton';
+import { CATEGORY_COLORS, CATEGORY_LABELS, eventColor, eventLabel, isAvailability, isoToHHMM, minutesToHHMM, occursOnDay, parseTime, toMinutes, } from './CalendarFunctions';
+import { CalendarCreatePopover, CalendarDetailPopover, } from './CalendarPopovers';
+import styles from './ErkCalendar.module.css';
+const CELL_HEIGHT = 56; // px por hora
+const WEEK_START = 1; // lunes
+const AGENDA_DAYS = 30;
+const AVAILABILITY_CATS = [
+    CalendarEventCategory.WORKING,
+    CalendarEventCategory.PHYSICAL,
+    CalendarEventCategory.VIRTUAL,
+];
+const EVENT_CATS = [
+    CalendarEventCategory.MEETING,
+    CalendarEventCategory.BUSY,
+    CalendarEventCategory.CUSTOM,
+];
+const VIEW_LABELS = {
+    [CalendarDefaultView.DAY]: 'Día',
+    [CalendarDefaultView.WEEK]: 'Semana',
+    [CalendarDefaultView.MONTH]: 'Mes',
+    [CalendarDefaultView.AGENDA]: 'Agenda',
+};
+function capitalize(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+/** Clave de visibilidad de un evento: su plantilla, o su categoría. */
+function visibilityKey(event) {
+    return event.eventTemplateId ? `tpl:${event.eventTemplateId}` : `cat:${event.category}`;
+}
+/**
+ * Calendario completo reutilizable (vistas día/semana/mes/agenda) con sidebar:
+ * mini-calendario, creación rápida y listas de disponibilidad/eventos con
+ * visibilidad por categoría o plantilla.
+ *
+ * Las categorías de disponibilidad (laboral/presencial/virtual/específico) se
+ * pintan como franja rayada de fondo — son los espacios donde un booking puede
+ * agendar; si un día no tiene ventanas explícitas, `businessDays` pinta la
+ * disponibilidad por defecto del sistema de días hábiles. Los eventos usan
+ * ISO 8601 + RRULE (RFC 5545), el mismo estándar de Google/Outlook.
+ */
+function ErkCalendar({ value, onChange, defaultView = CalendarDefaultView.WEEK, enabledViews, allowedCategories, eventTemplates, sources, businessDays, showWeekends = true, minTime = '00:00', maxTime = '23:00', allowRecurring = true, allowAllDay = true, timezone, readOnly = false, error, }) {
+    const views = useMemo(() => enabledViews?.length
+        ? enabledViews
+        : [CalendarDefaultView.DAY, CalendarDefaultView.WEEK, CalendarDefaultView.MONTH], [enabledViews]);
+    const categories = useMemo(() => allowedCategories?.length ? allowedCategories : Object.values(CalendarEventCategory), [allowedCategories]);
+    const availabilityCategories = AVAILABILITY_CATS.filter((c) => categories.includes(c));
+    const eventCategories = EVENT_CATS.filter((c) => categories.includes(c));
+    const bookableTemplates = eventTemplates?.filter((t) => t.bookable) ?? [];
+    const otherTemplates = eventTemplates?.filter((t) => !t.bookable) ?? [];
+    const [view, setView] = useState(views.includes(defaultView) ? defaultView : views[0]);
+    const [current, setCurrent] = useState(() => startOfDay(new Date()));
+    const [miniMonth, setMiniMonth] = useState(() => startOfMonth(new Date()));
+    const [hidden, setHidden] = useState(new Set());
+    const [createState, setCreateState] = useState(null);
+    const [detailState, setDetailState] = useState(null);
+    const events = value?.events ?? [];
+    const minHour = parseTime(minTime).h;
+    const maxHour = parseTime(maxTime).h + 1;
+    const hours = Array.from({ length: maxHour - minHour }, (_, i) => minHour + i);
+    // ------------------------------------------------------------------
+    // Value updates
+    // ------------------------------------------------------------------
+    const setEvents = useCallback((next) => {
+        onChange({ type: 'CALENDAR_VALUE', events: next, timezone: value?.timezone ?? timezone });
+    }, [onChange, value?.timezone, timezone]);
+    const addEvent = (event) => {
+        setEvents([...events, event]);
+        setCreateState(null);
+    };
+    const deleteEvent = (id) => {
+        setEvents(events.filter((e) => e.id !== id));
+        setDetailState(null);
+    };
+    // ------------------------------------------------------------------
+    // Visibility (sidebar toggles)
+    // ------------------------------------------------------------------
+    const toggleVisibility = (key) => {
+        setHidden((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    const eventsForDay = (day) => [
+        ...events
+            .filter((e) => occursOnDay(e, day) && !hidden.has(visibilityKey(e)))
+            .map((event) => ({ event, own: true })),
+        ...(sources ?? [])
+            .filter((s) => !hidden.has(`src:${s.id}`))
+            .flatMap((s) => s.events
+            .filter((e) => occursOnDay(e, day))
+            .map((e) => ({
+            event: !e.color && s.color ? { ...e, color: s.color } : e,
+            own: false,
+        }))),
+    ];
+    // ------------------------------------------------------------------
+    // Business days fallback
+    // ------------------------------------------------------------------
+    const businessFallbackFor = (day, dayEvents) => {
+        if (!businessDays)
+            return false;
+        if (dayEvents.some(({ event }) => isAvailability(event.category)))
+            return false;
+        const days = businessDays.days ?? [1, 2, 3, 4, 5];
+        if (!days.includes(day.getDay()))
+            return false;
+        return !businessDays.holidays?.includes(format(day, 'yyyy-MM-dd'));
+    };
+    // ------------------------------------------------------------------
+    // Navigation
+    // ------------------------------------------------------------------
+    const weekStart = startOfWeek(current, { weekStartsOn: WEEK_START });
+    const weekEnd = endOfWeek(current, { weekStartsOn: WEEK_START });
+    const visibleDays = useMemo(() => {
+        if (view === CalendarDefaultView.DAY)
+            return [current];
+        const start = startOfWeek(current, { weekStartsOn: WEEK_START });
+        const days = Array.from({ length: 7 }, (_, i) => addDays(start, i));
+        return showWeekends ? days : days.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
+    }, [view, current, showWeekends]);
+    const shift = (dir) => {
+        if (view === CalendarDefaultView.MONTH)
+            setCurrent((d) => addMonths(d, dir));
+        else if (view === CalendarDefaultView.DAY)
+            setCurrent((d) => addDays(d, dir));
+        else
+            setCurrent((d) => addWeeks(d, dir));
+    };
+    const goToDay = (day) => {
+        setCurrent(day);
+        setMiniMonth(startOfMonth(day));
+    };
+    const rangeLabel = (() => {
+        if (view === CalendarDefaultView.MONTH)
+            return capitalize(format(current, 'MMMM yyyy', { locale: es }));
+        if (view === CalendarDefaultView.DAY)
+            return capitalize(format(current, 'EEEE d MMM', { locale: es }));
+        if (view === CalendarDefaultView.AGENDA)
+            return `Próximos ${AGENDA_DAYS} días`;
+        return `${format(weekStart, 'd MMM', { locale: es })} – ${format(weekEnd, 'd MMM', { locale: es })}`;
+    })();
+    // ------------------------------------------------------------------
+    // Create flow
+    // ------------------------------------------------------------------
+    const openCreateAt = (anchorEl, day, startMins) => {
+        if (readOnly)
+            return;
+        const clamped = Math.max(minHour * 60, Math.min(startMins, (maxHour - 1) * 60));
+        setCreateState({
+            anchorEl,
+            date: day,
+            startHHMM: minutesToHHMM(clamped),
+            endHHMM: minutesToHHMM(Math.min(clamped + 60, maxHour * 60)),
+        });
+    };
+    const handleGridClick = (e, day) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const relY = e.clientY - rect.top;
+        const snapped = Math.round((relY / CELL_HEIGHT) * 2) * 30; // snap a 30 min
+        openCreateAt(e.currentTarget, day, minHour * 60 + snapped);
+    };
+    const handleNewEvent = (e) => {
+        openCreateAt(e.currentTarget, current, 9 * 60);
+    };
+    const openDetail = (e, event, own) => {
+        e.stopPropagation();
+        setDetailState({ anchorEl: e.currentTarget, event, own });
+    };
+    // ------------------------------------------------------------------
+    // Sidebar
+    // ------------------------------------------------------------------
+    const renderSidebarItem = (key, color, label) => (_jsxs("button", { type: "button", className: hidden.has(key) ? `${styles.sideItem} ${styles.sideItemOff}` : styles.sideItem, onClick: () => toggleVisibility(key), title: hidden.has(key) ? 'Mostrar' : 'Ocultar', children: [_jsx("span", { className: styles.catDot, style: { backgroundColor: color } }), label] }, key));
+    const renderMiniCalendar = () => {
+        const gridStart = startOfWeek(miniMonth, { weekStartsOn: WEEK_START });
+        const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+        return (_jsxs("div", { className: styles.miniWrap, children: [_jsxs("div", { className: styles.miniHead, children: [_jsx("span", { className: styles.miniTitle, children: capitalize(format(miniMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.miniNav, children: [_jsx("button", { type: "button", "aria-label": "Mes anterior", onClick: () => setMiniMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => setMiniMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.miniGrid, children: [['L', 'M', 'M', 'J', 'V', 'S', 'D'].map((d, i) => (_jsx("span", { className: styles.miniDow, children: d }, i))), cells.map((day) => {
+                            const cls = [
+                                styles.miniDay,
+                                !isSameMonth(day, miniMonth) ? styles.miniDayMut : '',
+                                isToday(day) ? styles.miniDayToday : '',
+                                !isToday(day) && isSameDay(day, current) ? styles.miniDaySel : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' ');
+                            return (_jsx("button", { type: "button", className: cls, onClick: () => goToDay(day), children: format(day, 'd') }, day.toISOString()));
+                        })] })] }));
+    };
+    const renderSidebar = () => (_jsxs("aside", { className: styles.side, children: [!readOnly && (_jsx(ErkButton, { text: "+ Nuevo evento", sx: { width: '100%' }, onClick: handleNewEvent })), renderMiniCalendar(), (availabilityCategories.length > 0 || bookableTemplates.length > 0) && (_jsxs("div", { className: styles.sideList, children: [_jsx("span", { className: styles.sideLbl, children: "Disponibilidad" }), availabilityCategories.map((cat) => renderSidebarItem(`cat:${cat}`, CATEGORY_COLORS[cat], CATEGORY_LABELS[cat])), bookableTemplates.map((t) => renderSidebarItem(`tpl:${t.id}`, t.color ?? CATEGORY_COLORS[t.category], t.name))] })), (eventCategories.length > 0 || otherTemplates.length > 0) && (_jsxs("div", { className: styles.sideList, children: [_jsx("span", { className: styles.sideLbl, children: "Eventos" }), eventCategories.map((cat) => renderSidebarItem(`cat:${cat}`, CATEGORY_COLORS[cat], CATEGORY_LABELS[cat])), otherTemplates.map((t) => renderSidebarItem(`tpl:${t.id}`, t.color ?? CATEGORY_COLORS[t.category], t.name))] })), sources && sources.length > 0 && (_jsxs("div", { className: styles.sideList, children: [_jsx("span", { className: styles.sideLbl, children: "Compartidos" }), sources.map((s) => renderSidebarItem(`src:${s.id}`, s.color ?? '#98a2b3', s.name))] }))] }));
+    // ------------------------------------------------------------------
+    // Time grid (day / week)
+    // ------------------------------------------------------------------
+    const renderTimeGrid = () => {
+        const allDayByDay = visibleDays.map((day) => eventsForDay(day).filter(({ event }) => event.isAllDay));
+        const hasAllDay = allDayByDay.some((list) => list.length > 0);
+        return (_jsxs("div", { className: styles.cal, children: [_jsxs("div", { className: styles.calHead, style: { gridTemplateColumns: `54px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.gutter }), visibleDays.map((day) => (_jsxs("button", { type: "button", className: styles.dayHead, onClick: () => {
+                                goToDay(day);
+                                setView(CalendarDefaultView.DAY);
+                            }, children: [_jsx("span", { className: styles.dayHeadDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: isToday(day)
+                                        ? `${styles.dayHeadNum} ${styles.dayHeadToday}`
+                                        : styles.dayHeadNum, children: format(day, 'd') })] }, day.toISOString())))] }), hasAllDay && (_jsxs("div", { className: styles.allDayRow, style: { gridTemplateColumns: `54px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.allDayLbl, children: "D\u00EDa" }), allDayByDay.map((list, i) => (_jsx("div", { className: styles.allDayCell, children: list.map(({ event, own }) => (_jsx("button", { type: "button", className: styles.allDayChip, style: { backgroundColor: eventColor(event, eventTemplates) }, onClick: (e) => openDetail(e, event, own), children: eventLabel(event, eventTemplates) }, `${own ? 'own' : 'src'}-${event.id}`))) }, visibleDays[i].toISOString())))] })), _jsxs("div", { className: styles.grid, style: { gridTemplateColumns: `54px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.timeCol, children: hours.map((h) => (_jsx("div", { className: styles.hourLabel, style: { height: CELL_HEIGHT }, children: h > 0 ? `${h}:00` : '' }, h))) }), visibleDays.map((day) => {
+                            const dayEvents = eventsForDay(day).filter(({ event }) => !event.isAllDay);
+                            const fallback = businessFallbackFor(day, dayEvents);
+                            return (_jsxs("div", { className: styles.dayCol, style: { height: hours.length * CELL_HEIGHT }, onClick: (e) => handleGridClick(e, day), children: [hours.map((h) => (_jsx("div", { className: styles.hourCell, style: { height: CELL_HEIGHT } }, h))), fallback && businessDays && (_jsx("div", { className: `${styles.avail} ${styles.availFallback}`, style: {
+                                            top: (toMinutes(businessDays.start) - minHour * 60) *
+                                                (CELL_HEIGHT / 60),
+                                            height: (toMinutes(businessDays.end) -
+                                                toMinutes(businessDays.start)) *
+                                                (CELL_HEIGHT / 60),
+                                        }, children: _jsx("span", { className: styles.availTag, children: "D\u00EDas h\u00E1biles" }) })), dayEvents.map(({ event, own }) => {
+                                        const key = `${own ? 'own' : 'src'}-${event.id}`;
+                                        const top = (toMinutes(isoToHHMM(event.start)) - minHour * 60) *
+                                            (CELL_HEIGHT / 60);
+                                        const height = Math.max((toMinutes(isoToHHMM(event.end)) -
+                                            toMinutes(isoToHHMM(event.start))) *
+                                            (CELL_HEIGHT / 60), 20);
+                                        const color = eventColor(event, eventTemplates);
+                                        if (isAvailability(event.category)) {
+                                            return (_jsx("div", { className: styles.avail, style: {
+                                                    top,
+                                                    height,
+                                                    borderLeftColor: color,
+                                                    backgroundImage: `repeating-linear-gradient(-45deg, ${color}1a, ${color}1a 6px, ${color}0d 6px, ${color}0d 12px)`,
+                                                }, onClick: (e) => openDetail(e, event, own), children: _jsx("span", { className: styles.availTag, style: { color }, children: eventLabel(event, eventTemplates) }) }, key));
+                                        }
+                                        const busy = event.category === CalendarEventCategory.BUSY;
+                                        return (_jsxs("div", { className: busy ? `${styles.event} ${styles.eventBusy}` : styles.event, style: busy
+                                                ? { top, height }
+                                                : { top, height, backgroundColor: color }, onClick: (e) => openDetail(e, event, own), children: [_jsx("span", { className: styles.eventTitle, children: eventLabel(event, eventTemplates) }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), " \u2013 ", isoToHHMM(event.end)] })] }, key));
+                                    })] }, day.toISOString()));
+                        })] })] }));
+    };
+    // ------------------------------------------------------------------
+    // Month view
+    // ------------------------------------------------------------------
+    const renderMonth = () => {
+        const gridStart = startOfWeek(startOfMonth(current), { weekStartsOn: WEEK_START });
+        const gridEnd = endOfWeek(endOfMonth(current), { weekStartsOn: WEEK_START });
+        const days = [];
+        for (let d = gridStart; d <= gridEnd; d = addDays(d, 1))
+            days.push(d);
+        const dows = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+        return (_jsxs("div", { className: styles.monthGrid, children: [dows.map((lbl) => (_jsx("div", { className: styles.monthDow, children: lbl }, lbl))), days.map((day) => {
+                    const dayEvents = eventsForDay(day);
+                    return (_jsxs("button", { type: "button", className: isSameMonth(day, current)
+                            ? styles.monthCell
+                            : `${styles.monthCell} ${styles.monthCellOut}`, onClick: () => {
+                            goToDay(day);
+                            setView(CalendarDefaultView.DAY);
+                        }, children: [_jsx("span", { className: isToday(day)
+                                    ? `${styles.monthNum} ${styles.dayHeadToday}`
+                                    : styles.monthNum, children: format(day, 'd') }), dayEvents.slice(0, 3).map(({ event, own }) => (_jsx("span", { className: styles.monthEvent, style: { backgroundColor: eventColor(event, eventTemplates) }, children: eventLabel(event, eventTemplates) }, `${own ? 'own' : 'src'}-${event.id}`))), dayEvents.length > 3 && (_jsxs("span", { className: styles.monthMore, children: ["+", dayEvents.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
+                })] }));
+    };
+    // ------------------------------------------------------------------
+    // Agenda view
+    // ------------------------------------------------------------------
+    const renderAgenda = () => {
+        const days = Array.from({ length: AGENDA_DAYS }, (_, i) => addDays(current, i));
+        const withEvents = days
+            .map((day) => ({ day, dayEvents: eventsForDay(day) }))
+            .filter(({ dayEvents }) => dayEvents.length > 0);
+        if (withEvents.length === 0) {
+            return (_jsxs("div", { className: styles.agendaEmpty, children: ["Sin eventos en los pr\u00F3ximos ", AGENDA_DAYS, " d\u00EDas."] }));
+        }
+        return (_jsx("div", { className: styles.agenda, children: withEvents.map(({ day, dayEvents }) => (_jsxs("div", { className: styles.agendaDay, children: [_jsx("div", { className: styles.agendaDayLabel, children: capitalize(format(day, 'EEEE d MMM', { locale: es })) }), dayEvents
+                        .slice()
+                        .sort((a, b) => isoToHHMM(a.event.start).localeCompare(isoToHHMM(b.event.start)))
+                        .map(({ event, own }) => (_jsxs("button", { type: "button", className: styles.agendaRow, onClick: (e) => openDetail(e, event, own), children: [_jsx("span", { className: styles.catDot, style: { backgroundColor: eventColor(event, eventTemplates) } }), _jsx("span", { className: styles.agendaTitle, children: eventLabel(event, eventTemplates) }), _jsx("span", { className: styles.agendaTime, children: event.isAllDay
+                                    ? 'Todo el día'
+                                    : `${isoToHHMM(event.start)} – ${isoToHHMM(event.end)}` })] }, `${own ? 'own' : 'src'}-${event.id}-${day.toISOString()}`)))] }, day.toISOString()))) }));
+    };
+    // ------------------------------------------------------------------
+    // Render
+    // ------------------------------------------------------------------
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.app, children: [renderSidebar(), _jsxs("section", { className: styles.main, children: [_jsxs("div", { className: styles.toolbar, children: [_jsx(ErkButton, { text: "Hoy", variant: "outlined", onClick: () => goToDay(startOfDay(new Date())) }), _jsxs("div", { className: styles.navBtns, children: [_jsx("button", { type: "button", "aria-label": "Anterior", onClick: () => shift(-1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("button", { type: "button", "aria-label": "Siguiente", onClick: () => shift(1), children: _jsx(ArrowRightIcon, {}) })] }), _jsx("span", { className: styles.range, children: rangeLabel }), _jsx("span", { className: styles.spacer }), views.length > 1 && (_jsx("div", { className: styles.views, children: views.map((v) => (_jsx("button", { type: "button", className: view === v ? styles.viewOn : undefined, onClick: () => setView(v), children: VIEW_LABELS[v] }, v))) }))] }), view === CalendarDefaultView.MONTH
+                                ? renderMonth()
+                                : view === CalendarDefaultView.AGENDA
+                                    ? renderAgenda()
+                                    : renderTimeGrid()] })] }), createState && (_jsx(CalendarCreatePopover, { state: createState, availabilityCategories: availabilityCategories, eventCategories: eventCategories, eventTemplates: eventTemplates, allowRecurring: allowRecurring, allowAllDay: allowAllDay, onClose: () => setCreateState(null), onCreate: addEvent })), detailState && (_jsx(CalendarDetailPopover, { state: detailState, eventTemplates: eventTemplates, readOnly: readOnly || !detailState.own, onClose: () => setDetailState(null), onDelete: deleteEvent })), error && _jsx("div", { className: styles.err, children: error })] }));
+}
+export default ErkCalendar;