@ticketlayer/elements 0.2.0

package/dist/esm/tl-occurrence-selector_2.entry.js

@@ -0,0 +1,751 @@
+import { r as registerInstance, c as createEvent, h } from './index-Ba-RZTFI.js';
+import { w as whenSDK, g as getSDK, h as hasSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlOccurrenceSelectorCss = () => `:host{--tl-radius:var(--tl-radius-md, 0.5rem);display:block;font-family:var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);color:var(--tl-foreground, #0f172a)}*{box-sizing:border-box;margin:0;padding:0}.occurrence-selector{width:100%}.no-occurrences{text-align:center;padding:3rem 1rem;color:var(--tl-muted-foreground, #64748b)}.list-view{display:flex;flex-direction:column;gap:0.75rem}.occurrence-item{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem 1.25rem;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.occurrence-item:hover:not(:disabled){border-color:var(--tl-primary, #e64b12);background:color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff))}.occurrence-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.occurrence-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted, #f1f5f9)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground, #0f172a);margin-bottom:0.25rem}.occurrence-time{font-size:0.875rem;color:var(--tl-muted-foreground)}.occurrence-status{flex-shrink:0;text-align:right}.status-sold-out{font-size:0.875rem;font-weight:500;color:var(--tl-muted-foreground)}.status-available{font-size:0.875rem;color:var(--tl-muted-foreground)}.status-arrow{font-size:1.25rem;color:var(--tl-primary, #e64b12)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground, #0f172a);padding-bottom:0.5rem;border-bottom:1px solid var(--tl-border)}.time-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;font-family:inherit;min-height:3.5rem}.time-slot:hover:not(:disabled){border-color:var(--tl-primary, #e64b12);background:color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff))}.time-slot:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted, #f1f5f9)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground, #0f172a)}.slot-sold-out{font-size:0.6875rem;color:var(--tl-muted-foreground);margin-top:0.125rem}.calendar-view{display:flex;flex-direction:column;gap:1.5rem}.calendar-view.horizontal{flex-direction:row;gap:1.5rem;align-items:flex-start}.calendar-view.horizontal .calendar-panel{flex-shrink:0;width:340px}.calendar-view.horizontal .slots-panel{flex:1;min-width:0}.calendar-view.vertical .calendar-panel{width:100%}.calendar-view.vertical .slots-panel{width:100%}.calendar-panel{border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);padding:1rem}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:1rem;font-weight:600;color:var(--tl-foreground, #0f172a);flex:1}.calendar-nav-buttons{display:flex;gap:0.375rem}.nav-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;color:var(--tl-foreground, #0f172a)}.nav-button:hover:not(:disabled){background:var(--tl-muted, #f1f5f9)}.nav-button:disabled{cursor:not-allowed;opacity:0.4}.nav-button svg{width:0.875rem;height:0.875rem}.calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem}.weekday-header{text-align:center;font-size:0.6875rem;font-weight:600;color:var(--tl-muted-foreground);padding:0.375rem 0;text-transform:uppercase;letter-spacing:0.05em}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:0.1875rem;background:var(--tl-background, #ffffff);border:1px solid transparent;border-radius:var(--tl-radius);cursor:default;transition:all 0.15s ease;font-family:inherit;font-size:0.9375rem;font-weight:500;color:var(--tl-foreground, #0f172a)}.calendar-day.other-month{color:var(--tl-muted-foreground);opacity:0.5}.calendar-day.has-occurrences{cursor:pointer;background:color-mix(in srgb, var(--tl-primary, #e64b12) 10%, var(--tl-background, #ffffff));border-color:transparent;font-weight:600;color:var(--tl-primary, #e64b12)}.calendar-day.has-occurrences:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 18%, var(--tl-background, #ffffff));border-color:transparent}.calendar-day.has-occurrences.sold-out{background:var(--tl-muted, #f1f5f9);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted, #f1f5f9) 80%, var(--tl-background, #ffffff));border-color:transparent}.calendar-day.selected{background:var(--tl-primary, #e64b12);border-color:var(--tl-primary, #e64b12);color:var(--tl-primary-foreground, #ffffff)}.calendar-day.selected:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black)}.calendar-day.selected .occurrence-dot{background:var(--tl-primary-foreground)}.calendar-day.today .day-number{font-weight:700;text-decoration:underline;text-underline-offset:2px}.calendar-day.past:not(.has-occurrences){opacity:0.4}.day-number{line-height:1}.occurrence-dot{display:none}.slots-panel{min-height:200px}.selected-date-slots{height:100%}.selected-date-slots.empty{display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground);background:var(--tl-muted, #f1f5f9);border-radius:var(--tl-radius);padding:2rem 1rem;text-align:center;min-height:200px;font-size:0.875rem}.selected-date-header{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground, #0f172a);padding-bottom:0.625rem;margin-bottom:0.625rem}.time-slots-list{display:flex;flex-direction:column;gap:0.5rem}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.625rem 0.875rem;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.time-slot-item:hover:not(:disabled){border-color:var(--tl-primary, #e64b12);background:color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff))}.time-slot-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted, #f1f5f9)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.time-slot-item .slot-time{font-size:0.9375rem;font-weight:600}.slot-status{flex-shrink:0}.slot-status .status-sold-out{font-size:0.75rem}.slot-status .status-available{font-size:0.75rem}.slot-status .status-arrow{font-size:1rem}@media (max-width: 640px){.event-name{font-size:1.25rem}.occurrence-date{font-size:0.875rem}.time-slots-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}.time-slot{padding:0.625rem 0.375rem;min-height:3rem}.slot-time{font-size:0.875rem}.calendar-day{font-size:0.75rem}.weekday-header{font-size:0.625rem}.calendar-view.horizontal .calendar-panel{width:100%}}@media (max-width: 767px){.calendar-view.horizontal{flex-direction:column}}.loading-container{padding:1rem 0;min-height:400px}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.skeleton{background:var(--tl-muted, #f1f5f9);border-radius:var(--tl-radius);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-list{display:flex;flex-direction:column;gap:0.75rem}.skeleton-list-item{height:4.5rem;border-radius:var(--tl-radius)}.skeleton-calendar{border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);padding:1rem;min-height:350px}.skeleton-calendar-header{height:1.75rem;width:50%;margin-bottom:0.75rem;border-radius:var(--tl-radius)}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem;margin-top:0.75rem}.skeleton-calendar-day{aspect-ratio:1;border-radius:var(--tl-radius)}.skeleton-slots{display:flex;flex-direction:column;gap:1rem}.skeleton-slots-header{height:1.75rem;width:60%;border-radius:var(--tl-radius);margin-bottom:0.5rem}.skeleton-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.skeleton-slot-item{height:3.5rem;border-radius:var(--tl-radius)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:1rem;text-align:center}.error-icon{width:3rem;height:3rem;color:var(--tl-muted-foreground);stroke-width:1.5}.error-message{color:var(--tl-foreground, #0f172a);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary, #e64b12);color:var(--tl-primary-foreground, #ffffff);border:none;border-radius:var(--tl-radius);font-family:inherit;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s ease}.retry-button:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}`;
+
+const TlOccurrenceSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlSelect = createEvent(this, "tlSelect");
+        /**
+         * 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 watchers() { return {
+        "eventId": [{
+                "onEventIdChange": 0
+            }]
+    }; }
+};
+TlOccurrenceSelector.style = tlOccurrenceSelectorCss();
+
+const tlTicketSelectorCss = () => `:host{--tl-color-primary:var(--tl-primary, #6366f1);--tl-color-primary-foreground:var(--tl-primary-foreground, #ffffff);--tl-color-background:var(--tl-background, #ffffff);--tl-color-foreground:var(--tl-foreground, #111827);--tl-color-muted:var(--tl-muted, #f3f4f6);--tl-color-muted-foreground:var(--tl-muted-foreground, #6b7280);--tl-color-border:var(--tl-border, #e5e7eb);--tl-color-destructive:var(--tl-error, #ef4444);display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.ticket-selector{background:var(--tl-color-background, #ffffff)}.skeleton-container{padding:var(--tl-spacing-4, 1rem)}.skeleton-row{height:60px;background:var(--tl-color-muted, #f3f4f6);border-radius:var(--tl-radius-md, 0.5rem);margin-bottom:var(--tl-spacing-3, 0.75rem);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4, 1rem);color:var(--tl-color-destructive, #ef4444)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4, 1rem)}.ticket-row{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-spacing-3, 0.75rem) 0;border-bottom:1px solid var(--tl-color-border, #e5e7eb)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground, #111827);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg, #fef3c7);color:var(--tl-color-warning, #d97706)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg, #fee2e2);color:var(--tl-color-destructive, #ef4444)}.ticket-description{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;color:var(--tl-color-muted-foreground, #6b7280)}.ticket-price{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground, #111827)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem);margin-left:var(--tl-spacing-4, 1rem)}.qty-btn{width:32px;height:32px;border-radius:var(--tl-radius-sm, 0.25rem);border:1px solid var(--tl-color-border, #d1d5db);background:var(--tl-color-background, #ffffff);color:var(--tl-color-foreground, #111827);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted, #f3f4f6);border-color:var(--tl-color-border-hover, #9ca3af)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground, #111827)}.success-message{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2, 0.5rem);padding:var(--tl-spacing-3, 0.75rem);background-color:var(--tl-color-success, #10b981);color:#ffffff;border-radius:var(--tl-radius-md, 0.5rem);margin-bottom:var(--tl-spacing-3, 0.75rem);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.add-to-cart-btn{width:100%;padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);border-radius:var(--tl-radius-md, 0.5rem);border:none;background-color:var(--tl-color-primary, #6366f1);color:var(--tl-color-primary-foreground, #ffffff);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted, #d1d5db);color:var(--tl-color-muted-foreground, #6b7280);cursor:not-allowed}`;
+
+const TlTicketSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlAddToCart = createEvent(this, "tlAddToCart");
+        this.tlQuantityChange = createEvent(this, "tlQuantityChange");
+        this.tlError = createEvent(this, "tlError");
+        /**
+         * Show add to cart button
+         */
+        this.showButton = true;
+        /**
+         * Button label
+         */
+        this.buttonLabel = 'Add to Cart';
+        this.ticketTypes = [];
+        this.quantities = {};
+        this.loading = true;
+        this.error = null;
+        this.adding = false;
+        this.addSuccess = false;
+    }
+    watchPropsChange() {
+        this.loadTicketTypes();
+    }
+    async componentWillLoad() {
+        await this.waitForSDKAndLoad();
+    }
+    /**
+     * Wait for SDK to be ready, then load ticket types
+     */
+    async waitForSDKAndLoad() {
+        if (!this.eventId || !this.occurrenceId) {
+            return;
+        }
+        try {
+            await whenSDK();
+            await this.loadTicketTypes();
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
+            this.loading = false;
+        }
+    }
+    async loadTicketTypes() {
+        try {
+            console.log('[tl-ticket-selector] Loading ticket types...', {
+                eventId: this.eventId,
+                occurrenceId: this.occurrenceId
+            });
+            this.loading = true;
+            this.error = null;
+            const sdk = getSDK();
+            const eventsManager = sdk.getEventsManager();
+            const types = await eventsManager.getTicketTypes(this.eventId, this.occurrenceId);
+            console.log('[tl-ticket-selector] Ticket types loaded:', types.length);
+            this.ticketTypes = types;
+            // Initialise quantities to 0
+            const initialQuantities = {};
+            types.forEach((t) => {
+                initialQuantities[t.id] = 0;
+            });
+            this.quantities = initialQuantities;
+        }
+        catch (err) {
+            console.error('[tl-ticket-selector] Failed to load ticket types:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleQuantityChange(ticketTypeId, delta) {
+        const ticketType = this.ticketTypes.find(t => t.id === ticketTypeId);
+        if (!ticketType)
+            return;
+        const currentQty = this.quantities[ticketTypeId] || 0;
+        const newQty = Math.max(0, Math.min(ticketType.maxPerOrder, currentQty + delta));
+        this.quantities = {
+            ...this.quantities,
+            [ticketTypeId]: newQty,
+        };
+        const total = this.calculateTotal();
+        this.tlQuantityChange.emit({ ticketTypeId, quantity: newQty, total });
+    }
+    calculateTotal() {
+        return this.ticketTypes.reduce((sum, tt) => {
+            return sum + (this.quantities[tt.id] || 0) * tt.price;
+        }, 0);
+    }
+    getTotalItems() {
+        return Object.values(this.quantities).reduce((sum, qty) => sum + qty, 0);
+    }
+    async handleAddToCart() {
+        const itemsToAdd = Object.entries(this.quantities)
+            .filter(([_, qty]) => qty > 0)
+            .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
+        if (itemsToAdd.length === 0)
+            return;
+        this.adding = true;
+        this.addSuccess = false;
+        try {
+            if (hasSDK()) {
+                const sdk = getSDK();
+                const cartManager = sdk.getCartManager?.();
+                if (cartManager) {
+                    for (const item of itemsToAdd) {
+                        await cartManager.addItem(item.ticketTypeId, item.quantity, this.occurrenceId);
+                    }
+                    console.log('[tl-ticket-selector] Items added to cart');
+                }
+            }
+            // Reset quantities after adding
+            const resetQuantities = {};
+            this.ticketTypes.forEach(t => {
+                resetQuantities[t.id] = 0;
+            });
+            this.quantities = resetQuantities;
+            this.addSuccess = true;
+            // Clear success message after 3 seconds
+            setTimeout(() => {
+                this.addSuccess = false;
+            }, 3000);
+            this.tlAddToCart.emit({ items: itemsToAdd });
+        }
+        catch (err) {
+            console.error('[tl-ticket-selector] Failed to add to cart:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to add to cart';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.adding = false;
+        }
+    }
+    formatPrice(priceInPence, currency = 'GBP') {
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency,
+        }).format(priceInPence / 100);
+    }
+    renderSkeleton() {
+        return (h("div", { class: "skeleton-container" }, h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" })));
+    }
+    renderError() {
+        return (h("div", { class: "error-state" }, h("p", { class: "error-message" }, this.error)));
+    }
+    renderTicketRow(tt) {
+        const isSoldOut = tt.availabilityStatus === 'sold_out';
+        const qty = this.quantities[tt.id] || 0;
+        return (h("div", { class: `ticket-row ${isSoldOut ? 'sold-out' : ''}`, key: tt.id }, h("div", { class: "ticket-info" }, h("div", { class: "ticket-header" }, h("span", { class: "ticket-name" }, tt.name), tt.availabilityStatus === 'limited' && (h("span", { class: "status-badge limited" }, "Limited")), isSoldOut && (h("span", { class: "status-badge sold-out" }, "Sold Out"))), tt.description && (h("p", { class: "ticket-description" }, tt.description)), h("p", { class: "ticket-price" }, this.formatPrice(tt.price, tt.currency))), h("div", { class: "quantity-controls" }, h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, -1), disabled: isSoldOut || qty === 0, "aria-label": "Decrease quantity" }, "\u2212"), h("span", { class: "qty-value" }, qty), h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, 1), disabled: isSoldOut || qty >= tt.maxPerOrder, "aria-label": "Increase quantity" }, "+"))));
+    }
+    render() {
+        if (this.loading) {
+            return this.renderSkeleton();
+        }
+        if (this.error) {
+            return this.renderError();
+        }
+        const totalItems = this.getTotalItems();
+        const totalPrice = this.calculateTotal();
+        return (h("div", { class: "ticket-selector" }, h("div", { class: "ticket-list" }, this.ticketTypes.map(tt => this.renderTicketRow(tt))), this.addSuccess && (h("div", { class: "success-message" }, h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Added to cart!")), this.showButton && (h("button", { class: `add-to-cart-btn ${totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.handleAddToCart(), disabled: totalItems === 0 || this.adding }, this.adding
+            ? 'Adding...'
+            : totalItems === 0
+                ? 'Select Tickets'
+                : `${this.buttonLabel} - ${this.formatPrice(totalPrice)}`))));
+    }
+    static get watchers() { return {
+        "eventId": [{
+                "watchPropsChange": 0
+            }],
+        "occurrenceId": [{
+                "watchPropsChange": 0
+            }]
+    }; }
+};
+TlTicketSelector.style = tlTicketSelectorCss();
+
+export { TlOccurrenceSelector as tl_occurrence_selector, TlTicketSelector as tl_ticket_selector };