@ticketlayer/elements 0.2.0

package/dist/types/components/tl-event-card/event-card-adapter.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Adapts the sales event detail (events manager get) to the shape
+ * tl-event-card renders. Kept outside the component module because Stencil
+ * allows only the component class as a value export there.
+ */
+import type { TlEventCardEvent } from './tl-event-card';
+export interface EventDetailLike {
+    id: string;
+    name: string;
+    status?: string;
+    shortDescription?: string | null;
+    imageUrl?: string | null;
+    venueId?: string | null;
+    venueName?: string | null;
+    venueCity?: string | null;
+    occurrences?: Array<{
+        id: string;
+        startsAt?: string | null;
+        status?: string;
+    }>;
+}
+/** Adapt an event detail to the card shape (the list adapter lives in the SDK connector). */
+export declare function toEventCardEvent(detail: EventDetailLike): TlEventCardEvent;

package/dist/types/components/tl-event-card/tl-event-card.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TlEventCardEvent {
+    id: string;
+    name: string;
+    slug?: string;
+    description?: string;
+    shortDescription?: string;
+    imageUrl?: string;
+    thumbnailUrl?: string;
+    category?: string;
+    venue?: {
+        id: string;
+        name: string;
+        city: string;
+    };
+    nextOccurrence?: {
+        startsAt: string;
+    };
+    availabilityStatus: 'available' | 'limited' | 'sold_out';
+}
+export declare class TlEventCard {
+    /**
+     * Event data to display (tl-event-list passes this)
+     */
+    event?: TlEventCardEvent;
+    /**
+     * Load the event from the SDK by id when no `event` is given, so a single
+     * card works standalone (e.g. on a Webflow page).
+     */
+    eventId?: string;
+    loadedEvent: TlEventCardEvent | null;
+    loading: boolean;
+    error: string | null;
+    /**
+     * Emitted when the card is clicked
+     */
+    tlClick: EventEmitter<{
+        eventId: string;
+    }>;
+    /**
+     * Emitted when the event could not be loaded by id
+     */
+    tlError: EventEmitter<{
+        message: string;
+    }>;
+    watchEventId(): void;
+    componentWillLoad(): Promise<void>;
+    private loadEvent;
+    private get current();
+    private handleClick;
+    private formatDate;
+    private getStatusBadgeClass;
+    private getStatusLabel;
+    render(): any;
+}

package/dist/types/components/tl-event-list/tl-event-list.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TlEventCardEvent } from '../tl-event-card/tl-event-card';
+export declare class TlEventList {
+    /**
+     * Maximum number of events to display
+     */
+    limit: number;
+    /**
+     * Category filter
+     */
+    category?: string;
+    /**
+     * Columns for grid layout (1, 2, 3, or 4)
+     */
+    columns: number;
+    events: TlEventCardEvent[];
+    loading: boolean;
+    error: string | null;
+    /**
+     * Emitted when an event card is clicked
+     */
+    tlEventClick: EventEmitter<{
+        eventId: string;
+    }>;
+    watchFiltersChange(): void;
+    componentWillLoad(): Promise<void>;
+    private loadEvents;
+    private handleEventClick;
+    render(): any;
+}

package/dist/types/components/tl-login/tl-login.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SDKCustomer } from '../../utils/sdk-connector';
+export type TlLoginPhase = 'email' | 'sent' | 'code' | 'verifying' | 'signed-in';
+export interface TlAuthChanged {
+    customer: SDKCustomer | null;
+    authenticated: boolean;
+}
+/**
+ * tl-login - magic-link sign-in. The customer enters an email, we ask the SDK
+ * to send a link (POST /sales/customer-auth/magic-link), then either the link
+ * lands back on this page with `?code=` or the customer types the code from
+ * the email; both exchange through the SDK (POST /sales/customer-tokens). No
+ * password is ever handled here.
+ *
+ * States: enter email -> check your inbox (resend, enter code) -> signed in
+ * (email + sign out).
+ *
+ * Usage: <tl-login></tl-login>
+ *
+ * @event tlAuthChanged  - signed in or out ({ customer, authenticated })
+ * @event tlMagicLinkSent - a link was requested for an email
+ * @event tlError        - request or code exchange failed
+ */
+export declare class TlLogin {
+    /** Heading for the email step. */
+    heading: string;
+    /** Offer a "enter the code" path alongside the emailed link (default true). */
+    allowCodeEntry: boolean;
+    phase: TlLoginPhase;
+    email: string;
+    code: string;
+    busy: boolean;
+    error: string | null;
+    notice: string | null;
+    customer: SDKCustomer | null;
+    tlAuthChanged: EventEmitter<TlAuthChanged>;
+    tlMagicLinkSent: EventEmitter<{
+        email: string;
+    }>;
+    tlError: EventEmitter<{
+        message: string;
+    }>;
+    private auth;
+    private unsubscribes;
+    private urlCodeUsed;
+    componentWillLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    private codeFromUrl;
+    private syncFromSDK;
+    private handleEmailInput;
+    private handleCodeInput;
+    private handleEmailSubmit;
+    private handleCodeSubmit;
+    private requestLink;
+    private exchange;
+    private signOut;
+    private renderError;
+    render(): any;
+}

package/dist/types/components/tl-my-orders/tl-my-orders.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type TlOrderData } from '../../utils/order-summary';
+/**
+ * tl-my-orders - the signed-in customer's orders (GET /sales/my-orders through
+ * the SDK): event, date, ticket count, total and status per row. Clicking a
+ * row expands it to show the order's tickets (tl-order-tickets). Shows
+ * tl-login inline when nobody is signed in.
+ *
+ * Usage: <tl-my-orders></tl-my-orders>
+ *
+ * @event tlOrderSelect - a row was expanded ({ orderId })
+ * @event tlError       - the orders could not be loaded
+ */
+export declare class TlMyOrders {
+    /** Copy for the empty state. */
+    emptyMessage: string;
+    /** Columns for the expanded ticket grid. */
+    columns: number;
+    orders: TlOrderData[];
+    authenticated: boolean;
+    loading: boolean;
+    error: string | null;
+    expandedId: string | null;
+    tlOrderSelect: EventEmitter<{
+        orderId: string;
+    }>;
+    tlError: EventEmitter<{
+        message: string;
+    }>;
+    private sdk;
+    private unsubscribes;
+    componentWillLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    private syncAuth;
+    private load;
+    private toggle;
+    private renderRow;
+    render(): any;
+}

package/dist/types/components/tl-occurrence-selector/tl-occurrence-selector.d.ts

@@ -0,0 +1,208 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Occurrence data structure
+ */
+export interface TlOccurrence {
+    id: string;
+    startsAt: string;
+    endsAt?: string;
+    status?: string;
+    availableCapacity?: number;
+    soldOut?: boolean;
+}
+/**
+ * Theme configuration for styling
+ */
+export interface TlOccurrenceSelectorTheme {
+    primaryColor?: string;
+    primaryForeground?: string;
+    backgroundColor?: string;
+    foregroundColor?: string;
+    mutedColor?: string;
+    mutedForeground?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+}
+type DisplayMode = 'list' | 'slots' | 'calendar';
+type Orientation = 'horizontal' | 'vertical' | 'auto';
+export declare class TlOccurrenceSelector {
+    /**
+     * Event ID to fetch occurrences for
+     */
+    eventId: string;
+    /**
+     * Force a specific display mode (auto-detected if not set)
+     */
+    displayMode?: DisplayMode;
+    /**
+     * Layout orientation (auto = horizontal on desktop, vertical on mobile)
+     */
+    orientation: Orientation;
+    /**
+     * Theme configuration
+     */
+    theme?: TlOccurrenceSelectorTheme;
+    /**
+     * Emitted when an occurrence is selected
+     */
+    tlSelect: EventEmitter<{
+        occurrence: TlOccurrence;
+    }>;
+    /**
+     * Loading state
+     */
+    loading: boolean;
+    /**
+     * Error message
+     */
+    error: string | null;
+    /**
+     * Fetched occurrences
+     */
+    occurrences: TlOccurrence[];
+    /**
+     * Current month being displayed in calendar view
+     */
+    currentMonth: Date;
+    /**
+     * Currently selected date in calendar view
+     */
+    selectedDate: Date | null;
+    /**
+     * Computed display mode based on occurrences
+     */
+    computedDisplayMode: DisplayMode;
+    /**
+     * Container width for responsive layout
+     */
+    containerWidth: number;
+    private containerRef?;
+    private resizeObserver?;
+    componentWillLoad(): Promise<void>;
+    /**
+     * Wait for SDK to be ready, then fetch occurrences
+     */
+    private waitForSDKAndFetch;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onEventIdChange(): Promise<void>;
+    /**
+     * Fetch occurrences from the SDK
+     */
+    private fetchOccurrences;
+    /**
+     * Compute the display mode based on occurrence count and date distribution
+     */
+    private computeDisplayMode;
+    /**
+     * Compute the initial date selection for calendar/slots views
+     */
+    private computeInitialSelection;
+    /**
+     * Get a map of dates to occurrences
+     */
+    private getDatesWithOccurrences;
+    /**
+     * Get the first and last occurrence dates
+     */
+    private getDateRange;
+    /**
+     * Check if all occurrences fit in one week (Monday-Sunday)
+     */
+    private isSingleWeek;
+    /**
+     * Check if all occurrences are in the same month
+     */
+    private isSingleMonth;
+    /**
+     * Check if we should use horizontal layout
+     */
+    private isHorizontalLayout;
+    /**
+     * Format a date for display
+     */
+    private formatDate;
+    /**
+     * Format a time for display
+     */
+    private formatTime;
+    /**
+     * Format a full date and time for list view
+     */
+    private formatDateTime;
+    /**
+     * Handle occurrence selection
+     */
+    private handleSelect;
+    /**
+     * Handle date selection in calendar view
+     */
+    private handleDateSelect;
+    /**
+     * Navigate to previous month
+     */
+    private handlePrevMonth;
+    /**
+     * Navigate to next month
+     */
+    private handleNextMonth;
+    /**
+     * Check if prev month button should be disabled
+     */
+    private isPrevMonthDisabled;
+    /**
+     * Check if next month button should be disabled
+     */
+    private isNextMonthDisabled;
+    /**
+     * Get calendar grid days for the current month
+     */
+    private getCalendarDays;
+    /**
+     * Check if a date has occurrences
+     */
+    private hasOccurrencesOnDate;
+    /**
+     * Check if all occurrences on a date are sold out
+     */
+    private isDateSoldOut;
+    /**
+     * Get occurrences for the selected date
+     */
+    private getSelectedDateOccurrences;
+    /**
+     * Get CSS custom properties from theme
+     */
+    private getThemeStyles;
+    /**
+     * Render the list view (≤5 occurrences)
+     */
+    private renderListView;
+    /**
+     * Render the time slots view (>5 occurrences, same day)
+     */
+    private renderSlotsView;
+    /**
+     * Render the calendar header
+     */
+    private renderCalendarHeader;
+    /**
+     * Render the calendar grid
+     */
+    private renderCalendarGrid;
+    /**
+     * Render the selected date's time slots
+     */
+    private renderSelectedDateSlots;
+    /**
+     * Render the calendar view with slots panel
+     */
+    private renderCalendarView;
+    /**
+     * Render skeleton loading state
+     */
+    private renderSkeleton;
+    render(): any;
+}
+export {};

package/dist/types/components/tl-order-confirmation/tl-order-confirmation.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type TlOrderData, type TlResolvedOccurrence } from '../../utils/order-summary';
+/**
+ * tl-order-confirmation - the "thank you" page block: order reference,
+ * customer email, event and date, ticket lines, totals, then the tickets
+ * themselves (tl-order-tickets, each with a Download PDF link).
+ *
+ * Finds its order three ways, in priority order:
+ *  1. the `order-id` prop
+ *  2. the URL (`?orderId=`), the contract the hosted box office confirmation
+ *     page uses; `?redirect_status=` from a Stripe return is honoured too
+ *  3. the SDK's `checkout:completed` event, for a page that mounts this before
+ *     the customer pays
+ *
+ * Usage: <tl-order-confirmation order-id="ord_xxx"></tl-order-confirmation>
+ *
+ * @event tlOrderLoaded - the order was loaded
+ * @event tlError       - the order could not be loaded
+ */
+export declare class TlOrderConfirmation {
+    /** The order to show. Falls back to `?orderId=` in the page URL. */
+    orderId?: string;
+    /** Email to show when the order view carries none (a host that collected it at checkout). */
+    customerEmail?: string;
+    /** Mount tl-order-tickets under the summary (default true). */
+    showTickets: boolean;
+    /** Columns for the ticket grid. */
+    columns: number;
+    order: TlOrderData | null;
+    resolvedOrderId: string | null;
+    loading: boolean;
+    error: string | null;
+    paymentFailed: boolean;
+    occurrence: TlResolvedOccurrence | null;
+    signedInCustomer: unknown | null;
+    tlOrderLoaded: EventEmitter<{
+        order: TlOrderData;
+    }>;
+    tlError: EventEmitter<{
+        message: string;
+    }>;
+    private unsubscribe?;
+    watchOrderId(next?: string): void;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private urlParams;
+    private orderIdFromUrl;
+    private load;
+    private resolveEvent;
+    private renderRows;
+    private renderTotals;
+    render(): any;
+}

package/dist/types/components/tl-order-tickets/tl-order-tickets.d.ts

@@ -0,0 +1,21 @@
+import type { TlTicketData } from '../tl-ticket/tl-ticket';
+/**
+ * tl-order-tickets - renders all the tickets for an order as scannable QR
+ * cards with PDF download. Fetches the order through the SDK (order-access
+ * gated by the session), so it works on a confirmation page or in an account.
+ *
+ * Usage: <tl-order-tickets order-id="ord_xxx"></tl-order-tickets>
+ */
+export declare class TlOrderTickets {
+    /** The order whose tickets to show. */
+    orderId: string;
+    /** Columns in the grid (default 2). */
+    columns: number;
+    tickets: TlTicketData[];
+    loading: boolean;
+    error: string | null;
+    watchOrder(): void;
+    componentWillLoad(): Promise<void>;
+    private load;
+    render(): any;
+}

package/dist/types/components/tl-promo-code/tl-promo-code.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type PresaleRedemption } from '../../utils/sdk-connector';
+export interface TlPromoApplied extends PresaleRedemption {
+    code: string;
+    cart: unknown | null;
+}
+/**
+ * tl-promo-code - an input plus Apply button that redeems a presale or promo
+ * code for the current cart (POST /sales/presale-codes/redeem through the
+ * SDK). Redemption unlocks gated pricing on the customer; the SDK re-reads the
+ * cart and publishes cart:updated, so tl-cart and badges re-render on their own.
+ *
+ * The API has no un-redeem, so the applied state offers only "use a different
+ * code", which clears the input for another redemption.
+ *
+ * Usage: <tl-promo-code></tl-promo-code>
+ *
+ * @event tlPromoApplied - a code was redeemed ({ code, benefit, alreadyHeld, cart })
+ * @event tlError        - the code was rejected
+ */
+export declare class TlPromoCode {
+    /** Input placeholder. */
+    placeholder: string;
+    /** Apply button label. */
+    buttonLabel: string;
+    code: string;
+    applying: boolean;
+    applied: TlPromoApplied | null;
+    error: string | null;
+    tlPromoApplied: EventEmitter<TlPromoApplied>;
+    tlError: EventEmitter<{
+        message: string;
+    }>;
+    private handleInput;
+    private handleSubmit;
+    private apply;
+    private reset;
+    render(): any;
+}

package/dist/types/components/tl-seat-map/tl-seat-map.d.ts

@@ -0,0 +1,68 @@
+/**
+ * TlSeatMap Stencil Component
+ *
+ * An iframe wrapper for embedding the Ticketlayer seat map.
+ * The actual seat map is rendered by HBO at /embed/seats and this component
+ * handles communication via postMessage.
+ *
+ * @element tl-seat-map
+ * @slot - No slots
+ *
+ * @fires tlReady - Fired when the seat map iframe is ready
+ * @fires tlLoad - Fired when the seat map has loaded, includes seatMapId
+ * @fires tlError - Fired when an error occurs
+ * @fires tlSeatAdded - Fired when a seat is added to cart
+ * @fires tlSeatRemoved - Fired when a seat is removed from cart
+ * @fires tlCartChange - Fired when cart seats change
+ */
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TlSeatMap {
+    el: HTMLElement;
+    private iframeRef?;
+    /** Occurrence ID to show seat map for */
+    occurrenceId: string;
+    /** Base URL for the hosted seat map (HBO URL) */
+    hboUrl: string;
+    /** API URL for the seat map data */
+    apiUrl: string;
+    /** Height of the seat map */
+    height: string;
+    /** Width of the seat map */
+    width: string;
+    isReady: boolean;
+    isLoading: boolean;
+    error: string | null;
+    seatsInCart: string[];
+    /** Emitted when seat map is ready */
+    tlReady: EventEmitter<void>;
+    /** Emitted when seat map is loaded */
+    tlLoad: EventEmitter<{
+        seatMapId: string;
+    }>;
+    /** Emitted when an error occurs */
+    tlError: EventEmitter<{
+        error: string;
+    }>;
+    /** Emitted when a seat is added to cart */
+    tlSeatAdded: EventEmitter<{
+        seatId: string;
+        ticketTypeId: string;
+    }>;
+    /** Emitted when a seat is removed from cart */
+    tlSeatRemoved: EventEmitter<{
+        seatId: string;
+    }>;
+    /** Emitted when cart seats change */
+    tlCartChange: EventEmitter<{
+        seatIds: string[];
+    }>;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    watchOccurrenceId(): void;
+    private postToIframe;
+    private handleMessage;
+    private handleAddSeat;
+    private handleRemoveSeat;
+    private getIframeSrc;
+    render(): any;
+}

package/dist/types/components/tl-ticket/tl-ticket.d.ts

@@ -0,0 +1,28 @@
+export interface TlTicketData {
+    id: string;
+    barcode: string;
+    type: string;
+    status: string;
+    holderName: string | null;
+    name: string;
+    admissionStatus: string;
+    eventOccurrenceId: string | null;
+    seatLabel: string | null;
+}
+/**
+ * tl-ticket - a single event ticket: a scannable QR (the redemption token),
+ * ticket name / seat / holder, and a PDF download. Greys out + stamps
+ * Used/Void when redeemed or cancelled.
+ */
+export declare class TlTicket {
+    /** The ticket to render. */
+    ticket: TlTicketData;
+    /** Order id this ticket belongs to (for the PDF download). */
+    orderId: string;
+    qrSvg: string;
+    downloading: boolean;
+    generateQr(): Promise<void>;
+    componentWillLoad(): Promise<void>;
+    private download;
+    render(): any;
+}