@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-occurrence-selector/tl-occurrence-selector.js

@@ -0,0 +1,707 @@
+import { h } from "@stencil/core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+export class TlOccurrenceSelector {
+    constructor() {
+        /**
+         * Layout orientation (auto = horizontal on desktop, vertical on mobile)
+         */
+        this.orientation = 'auto';
+        /**
+         * Loading state
+         */
+        this.loading = true;
+        /**
+         * Error message
+         */
+        this.error = null;
+        /**
+         * Fetched occurrences
+         */
+        this.occurrences = [];
+        /**
+         * Current month being displayed in calendar view
+         */
+        this.currentMonth = new Date();
+        /**
+         * Currently selected date in calendar view
+         */
+        this.selectedDate = null;
+        /**
+         * Computed display mode based on occurrences
+         */
+        this.computedDisplayMode = 'list';
+        /**
+         * Container width for responsive layout
+         */
+        this.containerWidth = 0;
+    }
+    async componentWillLoad() {
+        await this.waitForSDKAndFetch();
+    }
+    /**
+     * Wait for SDK to be ready, then fetch occurrences
+     */
+    async waitForSDKAndFetch() {
+        if (!this.eventId) {
+            this.error = 'Event ID is required';
+            this.loading = false;
+            return;
+        }
+        try {
+            await whenSDK();
+            await this.fetchOccurrences();
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
+            this.loading = false;
+        }
+    }
+    componentDidLoad() {
+        // Set up resize observer for responsive layout
+        if (this.containerRef && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    this.containerWidth = entry.contentRect.width;
+                }
+            });
+            this.resizeObserver.observe(this.containerRef);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    async onEventIdChange() {
+        await this.fetchOccurrences();
+    }
+    /**
+     * Fetch occurrences from the SDK
+     */
+    async fetchOccurrences() {
+        this.loading = true;
+        this.error = null;
+        try {
+            const sdk = getSDK();
+            const eventsManager = sdk.getEventsManager();
+            const event = await eventsManager.get(this.eventId);
+            if (!event) {
+                throw new Error('Event not found');
+            }
+            // Map EventOccurrence to TlOccurrence
+            this.occurrences = (event.occurrences || []).map((occ) => ({
+                id: occ.id,
+                startsAt: occ.startsAt,
+                endsAt: occ.endsAt,
+                status: occ.availabilityStatus,
+                availableCapacity: occ.availableCapacity,
+                soldOut: occ.availabilityStatus === 'sold_out',
+            }));
+            this.computeDisplayMode();
+            this.computeInitialSelection();
+        }
+        catch (err) {
+            console.error('[tl-occurrence-selector] Failed to fetch occurrences:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to load occurrences';
+            this.occurrences = [];
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /**
+     * Compute the display mode based on occurrence count and date distribution
+     */
+    computeDisplayMode() {
+        if (this.displayMode) {
+            this.computedDisplayMode = this.displayMode;
+            return;
+        }
+        const count = this.occurrences.length;
+        if (count <= 5) {
+            this.computedDisplayMode = 'list';
+            return;
+        }
+        // Check if all occurrences are on the same calendar date
+        const uniqueDates = new Set();
+        for (const occ of this.occurrences) {
+            const date = new Date(occ.startsAt);
+            uniqueDates.add(date.toDateString());
+        }
+        if (uniqueDates.size === 1) {
+            this.computedDisplayMode = 'slots';
+        }
+        else {
+            this.computedDisplayMode = 'calendar';
+        }
+    }
+    /**
+     * Compute the initial date selection for calendar/slots views
+     */
+    computeInitialSelection() {
+        if (this.occurrences.length === 0)
+            return;
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        // Get all dates with occurrences
+        const datesWithOccurrences = this.getDatesWithOccurrences();
+        // Find the first date that is today or in the future
+        let selectedDate = null;
+        for (const dateStr of Array.from(datesWithOccurrences.keys()).sort()) {
+            const date = new Date(dateStr);
+            if (date >= today) {
+                selectedDate = date;
+                break;
+            }
+        }
+        // If no future dates, select the last available date
+        if (!selectedDate && datesWithOccurrences.size > 0) {
+            const sortedDates = Array.from(datesWithOccurrences.keys()).sort();
+            selectedDate = new Date(sortedDates[sortedDates.length - 1]);
+        }
+        if (selectedDate) {
+            this.selectedDate = selectedDate;
+            this.currentMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
+        }
+    }
+    /**
+     * Get a map of dates to occurrences
+     */
+    getDatesWithOccurrences() {
+        const map = new Map();
+        for (const occ of this.occurrences) {
+            const date = new Date(occ.startsAt);
+            date.setHours(0, 0, 0, 0);
+            const dateStr = date.toDateString();
+            if (!map.has(dateStr)) {
+                map.set(dateStr, []);
+            }
+            map.get(dateStr).push(occ);
+        }
+        return map;
+    }
+    /**
+     * Get the first and last occurrence dates
+     */
+    getDateRange() {
+        if (this.occurrences.length === 0)
+            return null;
+        let first = new Date(this.occurrences[0].startsAt);
+        let last = new Date(this.occurrences[0].startsAt);
+        for (const occ of this.occurrences) {
+            const date = new Date(occ.startsAt);
+            if (date < first)
+                first = date;
+            if (date > last)
+                last = date;
+        }
+        return { first, last };
+    }
+    /**
+     * Check if all occurrences fit in one week (Monday-Sunday)
+     */
+    isSingleWeek() {
+        const dateRange = this.getDateRange();
+        if (!dateRange)
+            return false;
+        // Get Monday of the week containing the first date
+        const firstMonday = new Date(dateRange.first);
+        const dayOfWeek = firstMonday.getDay();
+        const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Monday = 0 days
+        firstMonday.setDate(firstMonday.getDate() - daysToSubtract);
+        firstMonday.setHours(0, 0, 0, 0);
+        // Get Sunday of that week
+        const sunday = new Date(firstMonday);
+        sunday.setDate(sunday.getDate() + 6);
+        sunday.setHours(23, 59, 59, 999);
+        // Check if last date is within this week
+        return dateRange.last <= sunday;
+    }
+    /**
+     * Check if all occurrences are in the same month
+     */
+    isSingleMonth() {
+        const dateRange = this.getDateRange();
+        if (!dateRange)
+            return false;
+        return (dateRange.first.getMonth() === dateRange.last.getMonth() &&
+            dateRange.first.getFullYear() === dateRange.last.getFullYear());
+    }
+    /**
+     * Check if we should use horizontal layout
+     */
+    isHorizontalLayout() {
+        if (this.orientation === 'horizontal')
+            return true;
+        if (this.orientation === 'vertical')
+            return false;
+        // Auto: use horizontal if container is wide enough (768px)
+        return this.containerWidth >= 768;
+    }
+    /**
+     * Format a date for display
+     */
+    formatDate(date) {
+        return date.toLocaleDateString('en-GB', {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        });
+    }
+    /**
+     * Format a time for display
+     */
+    formatTime(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleTimeString('en-GB', {
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    /**
+     * Format a full date and time for list view
+     */
+    formatDateTime(dateString) {
+        const date = new Date(dateString);
+        return {
+            date: date.toLocaleDateString('en-GB', {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+            }),
+            time: date.toLocaleTimeString('en-GB', {
+                hour: '2-digit',
+                minute: '2-digit',
+            }),
+        };
+    }
+    /**
+     * Handle occurrence selection
+     */
+    handleSelect(occurrence) {
+        if (occurrence.soldOut || occurrence.availableCapacity === 0)
+            return;
+        console.log('[tl-occurrence-selector] Selected:', occurrence.id);
+        this.tlSelect.emit({ occurrence });
+    }
+    /**
+     * Handle date selection in calendar view
+     */
+    handleDateSelect(date) {
+        this.selectedDate = date;
+        // If date is in a different month, navigate to that month
+        if (date.getMonth() !== this.currentMonth.getMonth() ||
+            date.getFullYear() !== this.currentMonth.getFullYear()) {
+            this.currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+        }
+    }
+    /**
+     * Navigate to previous month
+     */
+    handlePrevMonth() {
+        const dateRange = this.getDateRange();
+        if (!dateRange)
+            return;
+        const newMonth = new Date(this.currentMonth);
+        newMonth.setMonth(newMonth.getMonth() - 1);
+        // Don't go before the first occurrence month
+        const firstMonth = new Date(dateRange.first.getFullYear(), dateRange.first.getMonth(), 1);
+        if (newMonth >= firstMonth) {
+            this.currentMonth = newMonth;
+        }
+    }
+    /**
+     * Navigate to next month
+     */
+    handleNextMonth() {
+        const dateRange = this.getDateRange();
+        if (!dateRange)
+            return;
+        const newMonth = new Date(this.currentMonth);
+        newMonth.setMonth(newMonth.getMonth() + 1);
+        // Don't go past the last occurrence month
+        const lastMonth = new Date(dateRange.last.getFullYear(), dateRange.last.getMonth(), 1);
+        if (newMonth <= lastMonth) {
+            this.currentMonth = newMonth;
+        }
+    }
+    /**
+     * Check if prev month button should be disabled
+     */
+    isPrevMonthDisabled() {
+        const dateRange = this.getDateRange();
+        if (!dateRange)
+            return true;
+        const firstMonth = new Date(dateRange.first.getFullYear(), dateRange.first.getMonth(), 1);
+        return this.currentMonth <= firstMonth;
+    }
+    /**
+     * Check if next month button should be disabled
+     */
+    isNextMonthDisabled() {
+        const dateRange = this.getDateRange();
+        if (!dateRange)
+            return true;
+        const lastMonth = new Date(dateRange.last.getFullYear(), dateRange.last.getMonth(), 1);
+        return this.currentMonth >= lastMonth;
+    }
+    /**
+     * Get calendar grid days for the current month
+     */
+    getCalendarDays() {
+        // If all occurrences fit in one week, only show that week
+        if (this.isSingleWeek()) {
+            const dateRange = this.getDateRange();
+            if (!dateRange)
+                return [];
+            // Get Monday of the week containing the first date
+            const firstMonday = new Date(dateRange.first);
+            const dayOfWeek = firstMonday.getDay();
+            const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+            firstMonday.setDate(firstMonday.getDate() - daysToSubtract);
+            firstMonday.setHours(0, 0, 0, 0);
+            // Generate 7 days (Monday to Sunday)
+            const days = [];
+            const current = new Date(firstMonday);
+            for (let i = 0; i < 7; i++) {
+                days.push(new Date(current));
+                current.setDate(current.getDate() + 1);
+            }
+            return days;
+        }
+        // Otherwise show full month grid
+        const year = this.currentMonth.getFullYear();
+        const month = this.currentMonth.getMonth();
+        // Start of month
+        const monthStart = new Date(year, month, 1);
+        // End of month
+        const monthEnd = new Date(year, month + 1, 0);
+        // Get the start of the week containing the first day (Monday = 1)
+        const startDay = monthStart.getDay();
+        const daysToSubtract = startDay === 0 ? 6 : startDay - 1; // Monday = 0 days to subtract
+        const calendarStart = new Date(monthStart);
+        calendarStart.setDate(calendarStart.getDate() - daysToSubtract);
+        // Get the end of the week containing the last day
+        const endDay = monthEnd.getDay();
+        const daysToAdd = endDay === 0 ? 0 : 7 - endDay;
+        const calendarEnd = new Date(monthEnd);
+        calendarEnd.setDate(calendarEnd.getDate() + daysToAdd);
+        // Generate all days
+        const days = [];
+        const current = new Date(calendarStart);
+        while (current <= calendarEnd) {
+            days.push(new Date(current));
+            current.setDate(current.getDate() + 1);
+        }
+        return days;
+    }
+    /**
+     * Check if a date has occurrences
+     */
+    hasOccurrencesOnDate(date) {
+        const dateStr = date.toDateString();
+        return this.getDatesWithOccurrences().has(dateStr);
+    }
+    /**
+     * Check if all occurrences on a date are sold out
+     */
+    isDateSoldOut(date) {
+        const dateStr = date.toDateString();
+        const occurrences = this.getDatesWithOccurrences().get(dateStr);
+        if (!occurrences)
+            return false;
+        return occurrences.every(occ => occ.soldOut || occ.availableCapacity === 0);
+    }
+    /**
+     * Get occurrences for the selected date
+     */
+    getSelectedDateOccurrences() {
+        if (!this.selectedDate)
+            return [];
+        const dateStr = this.selectedDate.toDateString();
+        const occurrences = this.getDatesWithOccurrences().get(dateStr) || [];
+        // Sort by start time
+        return occurrences.sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
+    }
+    /**
+     * Get CSS custom properties from theme
+     */
+    getThemeStyles() {
+        if (!this.theme)
+            return {};
+        const styles = {};
+        if (this.theme.primaryColor) {
+            styles['--tl-primary'] = this.theme.primaryColor;
+        }
+        if (this.theme.primaryForeground) {
+            styles['--tl-primary-foreground'] = this.theme.primaryForeground;
+        }
+        if (this.theme.backgroundColor) {
+            styles['--tl-background'] = this.theme.backgroundColor;
+        }
+        if (this.theme.foregroundColor) {
+            styles['--tl-foreground'] = this.theme.foregroundColor;
+        }
+        if (this.theme.mutedColor) {
+            styles['--tl-muted'] = this.theme.mutedColor;
+        }
+        if (this.theme.mutedForeground) {
+            styles['--tl-muted-foreground'] = this.theme.mutedForeground;
+        }
+        if (this.theme.borderColor) {
+            styles['--tl-border'] = this.theme.borderColor;
+        }
+        if (this.theme.borderRadius) {
+            styles['--tl-radius'] = this.theme.borderRadius;
+        }
+        if (this.theme.fontFamily) {
+            styles['--tl-font-family'] = this.theme.fontFamily;
+        }
+        return styles;
+    }
+    // =========================================================================
+    // RENDER METHODS
+    // =========================================================================
+    /**
+     * Render the list view (≤5 occurrences)
+     */
+    renderListView() {
+        return (h("div", { class: "list-view" }, this.occurrences.map((occurrence) => {
+            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
+            const { date, time } = this.formatDateTime(occurrence.startsAt);
+            return (h("button", { key: occurrence.id, class: `occurrence-item ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("div", { class: "occurrence-info" }, h("div", { class: "occurrence-date" }, date), h("div", { class: "occurrence-time" }, time, occurrence.endsAt && ` - ${this.formatTime(occurrence.endsAt)}`)), h("div", { class: "occurrence-status" }, isSoldOut ? (h("span", { class: "status-sold-out" }, "Sold Out")) : occurrence.availableCapacity ? (h("span", { class: "status-available" }, occurrence.availableCapacity, " available")) : (h("span", { class: "status-arrow" }, "\u2192")))));
+        })));
+    }
+    /**
+     * Render the time slots view (>5 occurrences, same day)
+     */
+    renderSlotsView() {
+        // Sort occurrences by time
+        const sortedOccurrences = [...this.occurrences].sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
+        // Get the date from the first occurrence
+        const dateLabel = sortedOccurrences.length > 0
+            ? this.formatDate(new Date(sortedOccurrences[0].startsAt))
+            : '';
+        return (h("div", { class: "slots-view" }, dateLabel && h("div", { class: "slots-date-header" }, dateLabel), h("div", { class: "time-slots-grid" }, sortedOccurrences.map((occurrence) => {
+            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
+            return (h("button", { key: occurrence.id, class: `time-slot ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("span", { class: "slot-time" }, this.formatTime(occurrence.startsAt)), isSoldOut && h("span", { class: "slot-sold-out" }, "Sold Out")));
+        }))));
+    }
+    /**
+     * Render the calendar header
+     */
+    renderCalendarHeader() {
+        const monthLabel = this.currentMonth.toLocaleDateString('en-GB', {
+            month: 'long',
+            year: 'numeric',
+        });
+        const showNavigation = !this.isSingleMonth();
+        return (h("div", { class: "calendar-header" }, h("span", { class: "month-label" }, monthLabel), showNavigation && (h("div", { class: "calendar-nav-buttons" }, h("button", { class: "nav-button", onClick: () => this.handlePrevMonth(), disabled: this.isPrevMonthDisabled(), "aria-label": "Previous month" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M15 18l-6-6 6-6" }))), h("button", { class: "nav-button", onClick: () => this.handleNextMonth(), disabled: this.isNextMonthDisabled(), "aria-label": "Next month" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M9 18l6-6-6-6" })))))));
+    }
+    /**
+     * Render the calendar grid
+     */
+    renderCalendarGrid() {
+        const days = this.getCalendarDays();
+        const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return (h("div", { class: "calendar-grid" }, weekDays.map((day) => (h("div", { class: "weekday-header", key: day }, day))), days.map((date) => {
+            const isCurrentMonth = date.getMonth() === this.currentMonth.getMonth();
+            const hasOccurrences = this.hasOccurrencesOnDate(date);
+            const isSoldOut = this.isDateSoldOut(date);
+            const isSelected = this.selectedDate && date.toDateString() === this.selectedDate.toDateString();
+            const isToday = date.toDateString() === today.toDateString();
+            const isPast = date < today;
+            return (h("button", { key: date.toISOString(), class: `calendar-day 
+                ${!isCurrentMonth ? 'other-month' : ''} 
+                ${hasOccurrences ? 'has-occurrences' : ''} 
+                ${isSoldOut ? 'sold-out' : ''} 
+                ${isSelected ? 'selected' : ''} 
+                ${isToday ? 'today' : ''}
+                ${isPast ? 'past' : ''}`, onClick: () => hasOccurrences && this.handleDateSelect(date), disabled: !hasOccurrences }, h("span", { class: "day-number" }, date.getDate()), hasOccurrences && h("span", { class: "occurrence-dot" })));
+        })));
+    }
+    /**
+     * Render the selected date's time slots
+     */
+    renderSelectedDateSlots() {
+        const occurrences = this.getSelectedDateOccurrences();
+        if (!this.selectedDate || occurrences.length === 0) {
+            return (h("div", { class: "selected-date-slots empty" }, h("p", null, "Select a date to see available times")));
+        }
+        const dateLabel = this.formatDate(this.selectedDate);
+        return (h("div", { class: "selected-date-slots" }, h("div", { class: "selected-date-header" }, dateLabel), h("div", { class: "time-slots-list" }, occurrences.map((occurrence) => {
+            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
+            return (h("button", { key: occurrence.id, class: `time-slot-item ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("span", { class: "slot-time" }, this.formatTime(occurrence.startsAt)), h("div", { class: "slot-status" }, isSoldOut ? (h("span", { class: "status-sold-out" }, "Sold Out")) : occurrence.availableCapacity ? (h("span", { class: "status-available" }, occurrence.availableCapacity, " available")) : (h("span", { class: "status-arrow" }, "\u2192")))));
+        }))));
+    }
+    /**
+     * Render the calendar view with slots panel
+     */
+    renderCalendarView() {
+        const isHorizontal = this.isHorizontalLayout();
+        return (h("div", { class: `calendar-view ${isHorizontal ? 'horizontal' : 'vertical'}` }, h("div", { class: "calendar-panel" }, this.renderCalendarHeader(), this.renderCalendarGrid()), h("div", { class: "slots-panel" }, this.renderSelectedDateSlots())));
+    }
+    /**
+     * Render skeleton loading state
+     */
+    renderSkeleton() {
+        // Default to calendar skeleton as it's the most common
+        return (h("div", { class: "loading-container" }, h("div", { class: "skeleton-calendar" }, h("div", { class: "skeleton skeleton-calendar-header" }), h("div", { class: "skeleton-calendar-grid" }, Array.from({ length: 35 }, (_, i) => (h("div", { key: i, class: "skeleton skeleton-calendar-day" })))))));
+    }
+    render() {
+        const themeStyles = this.getThemeStyles();
+        return (h("div", { key: '40758aaa06e5f062de92675766e4531995f74bc7', class: "occurrence-selector", ref: (el) => (this.containerRef = el), style: themeStyles }, this.loading && this.renderSkeleton(), !this.loading && this.error && (h("div", { key: '6d2f5b9c07f65d4941bfb4870729fe3248cb277e', class: "error-container" }, h("svg", { key: 'daaf1f48dcff80ae7cf94ae0da1d66d9c9b7fb0f', class: "error-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("circle", { key: '0a9f494a5cf7f79146e56fc44469a3ca9e5238ae', cx: "12", cy: "12", r: "10" }), h("path", { key: '67d7b453508c847593136bd60e34ea0c38d30cda', d: "M12 8v4m0 4h.01" })), h("p", { key: 'c1cc92585ed4451b686350b6d718c3ba06b72dd3', class: "error-message" }, this.error), h("button", { key: '4ec9d048af704af12a800385b9868501973ba477', class: "retry-button", onClick: () => this.fetchOccurrences() }, "Retry"))), !this.loading && !this.error && (this.occurrences.length === 0 ? (h("div", { class: "no-occurrences" }, h("p", null, "No dates available for this event."))) : (h("div", { class: "selector-content" }, this.computedDisplayMode === 'list' && this.renderListView(), this.computedDisplayMode === 'slots' && this.renderSlotsView(), this.computedDisplayMode === 'calendar' && this.renderCalendarView())))));
+    }
+    static get is() { return "tl-occurrence-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-occurrence-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-occurrence-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eventId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Event ID to fetch occurrences for"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "event-id"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisplayMode",
+                    "resolved": "\"calendar\" | \"list\" | \"slots\" | undefined",
+                    "references": {
+                        "DisplayMode": {
+                            "location": "global",
+                            "id": "global::DisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Force a specific display mode (auto-detected if not set)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-mode"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"auto\" | \"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "global",
+                            "id": "global::Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation (auto = horizontal on desktop, vertical on mobile)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'auto'"
+            },
+            "theme": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TlOccurrenceSelectorTheme",
+                    "resolved": "TlOccurrenceSelectorTheme | undefined",
+                    "references": {
+                        "TlOccurrenceSelectorTheme": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-occurrence-selector/tl-occurrence-selector.tsx",
+                            "id": "src/components/tl-occurrence-selector/tl-occurrence-selector.tsx::TlOccurrenceSelectorTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme configuration"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loading": {},
+            "error": {},
+            "occurrences": {},
+            "currentMonth": {},
+            "selectedDate": {},
+            "computedDisplayMode": {},
+            "containerWidth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlSelect",
+                "name": "tlSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an occurrence is selected"
+                },
+                "complexType": {
+                    "original": "{ occurrence: TlOccurrence }",
+                    "resolved": "{ occurrence: TlOccurrence; }",
+                    "references": {
+                        "TlOccurrence": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-occurrence-selector/tl-occurrence-selector.tsx",
+                            "id": "src/components/tl-occurrence-selector/tl-occurrence-selector.tsx::TlOccurrence"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "onEventIdChange"
+            }];
+    }
+}