@ticketlayer/elements 0.2.0

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export { g as getSDK, h as hasSDK, o as onSDKEvent, s as setSDK, w as whenSDK } from './sdk-connector-CqhvfyKV.js';
+export { tl_buy_tickets_wrapper as TlBuyTicketsWrapper } from './tl-buy-tickets-wrapper.entry.js';
+export { tl_checkout_wrapper as TlCheckoutWrapper } from './tl-checkout-wrapper.entry.js';
+import './index-Ba-RZTFI.js';

package/dist/esm/loader.js

@@ -0,0 +1,10 @@
+import { g as globalScripts, b as bootstrapLazy } from './index-Ba-RZTFI.js';
+export { s as setNonce } from './index-Ba-RZTFI.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["tl-my-orders",[[1,"tl-my-orders",{"emptyMessage":[1,"empty-message"],"columns":[2],"orders":[32],"authenticated":[32],"loading":[32],"error":[32],"expandedId":[32]}]]],["tl-buy-modal",[[1,"tl-buy-modal",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"step":[32],"eventName":[32],"imageUrl":[32],"venueLabel":[32],"dateSummary":[32],"selectedOccurrenceId":[32],"occurrenceCount":[32],"occurrenceLabel":[32],"error":[32]}]]],["tl-order-confirmation",[[1,"tl-order-confirmation",{"orderId":[1,"order-id"],"customerEmail":[1,"customer-email"],"showTickets":[4,"show-tickets"],"columns":[2],"order":[32],"resolvedOrderId":[32],"loading":[32],"error":[32],"paymentFailed":[32],"occurrence":[32],"signedInCustomer":[32]},null,{"orderId":[{"watchOrderId":0}]}]]],["tl-cart-drawer",[[1,"tl-cart-drawer",{"side":[1],"heading":[1],"open":[1028],"visible":[32]},null,{"open":[{"onOpenProp":0}]}]]],["tl-event-list",[[1,"tl-event-list",{"limit":[2],"category":[1],"columns":[2],"events":[32],"loading":[32],"error":[32]},null,{"limit":[{"watchFiltersChange":0}],"category":[{"watchFiltersChange":0}]}]]],["tl-buy-tickets-button",[[1,"tl-buy-tickets-button",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"state":[1],"label":[1],"variant":[1],"size":[1],"fullWidth":[4,"full-width"],"price":[2],"currency":[1],"pricePrefix":[1,"price-prefix"],"disabled":[4],"isHovered":[32]}]]],["tl-buy-tickets-wrapper",[[260,"tl-buy-tickets-wrapper",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"disabled":[4]}]]],["tl-cart-badge",[[1,"tl-cart-badge",{"showEmpty":[4,"show-empty"],"icon":[1],"size":[1],"badgeOnly":[4,"badge-only"],"itemCount":[32]}]]],["tl-checkout-wrapper",[[260,"tl-checkout-wrapper",{"disabled":[4]}]]],["tl-promo-code",[[1,"tl-promo-code",{"placeholder":[1],"buttonLabel":[1,"button-label"],"code":[32],"applying":[32],"applied":[32],"error":[32]}]]],["tl-seat-map",[[1,"tl-seat-map",{"occurrenceId":[1,"occurrence-id"],"hboUrl":[1,"hbo-url"],"apiUrl":[1,"api-url"],"height":[1],"width":[1],"isReady":[32],"isLoading":[32],"error":[32],"seatsInCart":[32]},null,{"occurrenceId":[{"watchOccurrenceId":0}]}]]],["tl-cart",[[1,"tl-cart",{"showCheckoutButton":[4,"show-checkout-button"],"checkoutLabel":[1,"checkout-label"],"showRemoveButtons":[4,"show-remove-buttons"],"compact":[4],"cart":[32],"loading":[32],"error":[32],"removingItemId":[32]}]]],["tl-event-card",[[1,"tl-event-card",{"event":[16],"eventId":[1,"event-id"],"loadedEvent":[32],"loading":[32],"error":[32]},null,{"eventId":[{"watchEventId":0}]}]]],["tl-login",[[1,"tl-login",{"heading":[1],"allowCodeEntry":[4,"allow-code-entry"],"phase":[32],"email":[32],"code":[32],"busy":[32],"error":[32],"notice":[32],"customer":[32]}]]],["tl-occurrence-selector_2",[[1,"tl-occurrence-selector",{"eventId":[1,"event-id"],"displayMode":[1,"display-mode"],"orientation":[1],"theme":[16],"loading":[32],"error":[32],"occurrences":[32],"currentMonth":[32],"selectedDate":[32],"computedDisplayMode":[32],"containerWidth":[32]},null,{"eventId":[{"onEventIdChange":0}]}],[1,"tl-ticket-selector",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"showButton":[4,"show-button"],"buttonLabel":[1,"button-label"],"ticketTypes":[32],"quantities":[32],"loading":[32],"error":[32],"adding":[32],"addSuccess":[32]},null,{"eventId":[{"watchPropsChange":0}],"occurrenceId":[{"watchPropsChange":0}]}]]],["tl-order-tickets_2",[[1,"tl-order-tickets",{"orderId":[1,"order-id"],"columns":[2],"tickets":[32],"loading":[32],"error":[32]},null,{"orderId":[{"watchOrder":0}]}],[1,"tl-ticket",{"ticket":[16],"orderId":[1,"order-id"],"qrSvg":[32],"downloading":[32]},null,{"ticket":[{"generateQr":0}]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/esm/order-summary-BGekdjN9.js

@@ -0,0 +1,103 @@
+/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
+function formatPrice(value, currency = 'GBP') {
+    if (value === null || value === undefined || value === '')
+        return '';
+    const fmt = new Intl.NumberFormat('en-GB', { style: 'currency', currency });
+    if (typeof value === 'number')
+        return fmt.format(value / 100);
+    const n = Number(value);
+    return Number.isNaN(n) ? String(value) : fmt.format(n);
+}
+function formatDateTime(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+/** Line items that are tickets (fees, taxes and discounts have their own type). */
+function ticketItems(order) {
+    return (order.items ?? []).filter((i) => !i.type || i.type === 'ticket');
+}
+function ticketCount(order) {
+    const fromItems = ticketItems(order).reduce((sum, i) => sum + (Number(i.quantity) || 0), 0);
+    return fromItems || order.tickets?.length || 0;
+}
+/** Event name as the order view exposes it: the first ticket line's name. */
+function orderEventName(order) {
+    return order.eventName || ticketItems(order)[0]?.name || order.items?.[0]?.name || null;
+}
+function orderCustomerEmail(order, customer) {
+    const fromOrder = order?.customerEmail || order?.customer?.email;
+    if (fromOrder)
+        return fromOrder;
+    const c = customer;
+    return c?.email || null;
+}
+function statusLabel(status) {
+    if (!status)
+        return '';
+    return status.replace(/_/g, ' ').replace(/^\w/, (m) => m.toUpperCase());
+}
+function statusTone(status) {
+    switch (status) {
+        case 'confirmed':
+            return 'success';
+        case 'completed':
+        case 'fulfilled':
+            return 'info';
+        case 'pending':
+        case 'processing':
+            return 'warning';
+        case 'cancelled':
+        case 'expired':
+        case 'failed':
+            return 'error';
+        default:
+            return 'muted';
+    }
+}
+function errorMessage(err, fallback) {
+    return err instanceof Error && err.message ? err.message : fallback;
+}
+/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
+function isAuthError(err) {
+    const e = err;
+    if (!e || typeof e !== 'object')
+        return false;
+    return e.status === 401 || e.status === 403 || e.code === 'NO_SESSION' || e.code === 'NOT_AUTHENTICATED';
+}
+/**
+ * Find the event and start time for an occurrence id. The order view only
+ * carries the occurrence id, so this walks the channel's listings (cached by
+ * live-api) until one owns the occurrence. Best effort: null when not found.
+ */
+async function resolveOccurrence(sdk, occurrenceId, maxEvents = 12) {
+    const events = sdk.getEventsManager();
+    const listing = await events.list({ limit: maxEvents });
+    const candidates = listing.items.slice(0, maxEvents);
+    for (const candidate of candidates) {
+        const detail = (await events.get(candidate.id).catch(() => null));
+        const occ = detail?.occurrences?.find((o) => o.id === occurrenceId);
+        if (occ) {
+            return {
+                eventId: detail?.id ?? candidate.id,
+                eventName: detail?.name ?? candidate.name ?? '',
+                startsAt: occ.startsAt ?? null,
+            };
+        }
+    }
+    return null;
+}
+
+export { formatPrice as a, statusLabel as b, formatDateTime as c, orderCustomerEmail as d, errorMessage as e, formatDate as f, ticketItems as g, isAuthError as i, orderEventName as o, resolveOccurrence as r, statusTone as s, ticketCount as t };

package/dist/esm/sdk-connector-CqhvfyKV.js

@@ -0,0 +1,102 @@
+/**
+ * SDK Connector
+ *
+ * Utility to connect external SDK instances to Elements components.
+ */
+// The SDK is shared between bundles via the `window.Ticketlayer` registry that
+// @ticketlayer/live publishes (createLiveClient → publishClient). Elements never
+// import the SDK; they read this global and bind to its connector view.
+const READY_EVENT = 'ticketlayer:ready';
+// Back-compat slot for hosts that install a connector manually via setSDK().
+const MANUAL_SLOT = '__TICKETLAYER_SDK__';
+function readGlobalSDK() {
+    if (typeof window === 'undefined')
+        return null;
+    const win = window;
+    const reg = win.Ticketlayer;
+    return (reg?.getSDK?.() ?? reg?.sdk ?? win[MANUAL_SLOT]) || null;
+}
+/**
+ * Manually install an SDK/connector instance (escape hatch). The normal path is
+ * for the host to call createLiveClient(), which auto-publishes on the registry.
+ */
+function setSDK(sdk) {
+    if (typeof window === 'undefined')
+        return;
+    window[MANUAL_SLOT] = sdk;
+    // Wake any components already awaiting whenSDK().
+    window.dispatchEvent(new CustomEvent(READY_EVENT, { detail: sdk }));
+}
+/**
+ * Get the SDK instance synchronously. Throws if not yet available - prefer
+ * whenSDK() in lifecycle methods so mounting before Live is ready isn't an error.
+ */
+function getSDK() {
+    const sdk = readGlobalSDK();
+    if (!sdk) {
+        throw new Error('[Ticketlayer Elements] SDK not ready. Create a Live client (createLiveClient) ' +
+            'or await whenSDK() before using Elements.');
+    }
+    return sdk;
+}
+/** True if a client is currently registered. */
+function hasSDK() {
+    return readGlobalSDK() !== null;
+}
+/**
+ * Resolve when the SDK is available - immediately if Live is already up, else
+ * on the `ticketlayer:ready` event. Replaces busy-wait polling in components.
+ */
+function whenSDK(timeoutMs = 15000) {
+    const existing = readGlobalSDK();
+    if (existing)
+        return Promise.resolve(existing);
+    if (typeof window === 'undefined') {
+        return Promise.reject(new Error('[Ticketlayer Elements] No window; SDK unavailable.'));
+    }
+    return new Promise((resolve, reject) => {
+        let settled = false;
+        const finish = () => {
+            const sdk = readGlobalSDK();
+            if (sdk && !settled) {
+                settled = true;
+                cleanup();
+                resolve(sdk);
+            }
+        };
+        const cleanup = () => {
+            window.removeEventListener(READY_EVENT, finish);
+            clearTimeout(timer);
+        };
+        const timer = setTimeout(() => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            reject(new Error('[Ticketlayer Elements] SDK not initialized. Create a Live client before using Elements.'));
+        }, timeoutMs);
+        window.addEventListener(READY_EVENT, finish);
+        // Late-publish race guard: re-check once listener is attached.
+        finish();
+    });
+}
+/**
+ * Subscribe to SDK events (waits for the SDK, returns an unsubscribe function).
+ */
+function onSDKEvent(event, callback) {
+    let off = null;
+    let cancelled = false;
+    whenSDK()
+        .then((sdk) => {
+        if (cancelled)
+            return;
+        off = sdk.on(event, callback);
+    })
+        .catch(() => undefined);
+    return () => {
+        cancelled = true;
+        off?.();
+    };
+}
+
+export { getSDK as g, hasSDK as h, onSDKEvent as o, setSDK as s, whenSDK as w };

package/dist/esm/ticketlayer-elements.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Ba-RZTFI.js';
+export { s as setNonce } from './index-Ba-RZTFI.js';
+
+/*
+ Stencil Client Patch Browser v4.41.1 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["tl-my-orders",[[1,"tl-my-orders",{"emptyMessage":[1,"empty-message"],"columns":[2],"orders":[32],"authenticated":[32],"loading":[32],"error":[32],"expandedId":[32]}]]],["tl-buy-modal",[[1,"tl-buy-modal",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"step":[32],"eventName":[32],"imageUrl":[32],"venueLabel":[32],"dateSummary":[32],"selectedOccurrenceId":[32],"occurrenceCount":[32],"occurrenceLabel":[32],"error":[32]}]]],["tl-order-confirmation",[[1,"tl-order-confirmation",{"orderId":[1,"order-id"],"customerEmail":[1,"customer-email"],"showTickets":[4,"show-tickets"],"columns":[2],"order":[32],"resolvedOrderId":[32],"loading":[32],"error":[32],"paymentFailed":[32],"occurrence":[32],"signedInCustomer":[32]},null,{"orderId":[{"watchOrderId":0}]}]]],["tl-cart-drawer",[[1,"tl-cart-drawer",{"side":[1],"heading":[1],"open":[1028],"visible":[32]},null,{"open":[{"onOpenProp":0}]}]]],["tl-event-list",[[1,"tl-event-list",{"limit":[2],"category":[1],"columns":[2],"events":[32],"loading":[32],"error":[32]},null,{"limit":[{"watchFiltersChange":0}],"category":[{"watchFiltersChange":0}]}]]],["tl-buy-tickets-button",[[1,"tl-buy-tickets-button",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"state":[1],"label":[1],"variant":[1],"size":[1],"fullWidth":[4,"full-width"],"price":[2],"currency":[1],"pricePrefix":[1,"price-prefix"],"disabled":[4],"isHovered":[32]}]]],["tl-buy-tickets-wrapper",[[260,"tl-buy-tickets-wrapper",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"disabled":[4]}]]],["tl-cart-badge",[[1,"tl-cart-badge",{"showEmpty":[4,"show-empty"],"icon":[1],"size":[1],"badgeOnly":[4,"badge-only"],"itemCount":[32]}]]],["tl-checkout-wrapper",[[260,"tl-checkout-wrapper",{"disabled":[4]}]]],["tl-promo-code",[[1,"tl-promo-code",{"placeholder":[1],"buttonLabel":[1,"button-label"],"code":[32],"applying":[32],"applied":[32],"error":[32]}]]],["tl-seat-map",[[1,"tl-seat-map",{"occurrenceId":[1,"occurrence-id"],"hboUrl":[1,"hbo-url"],"apiUrl":[1,"api-url"],"height":[1],"width":[1],"isReady":[32],"isLoading":[32],"error":[32],"seatsInCart":[32]},null,{"occurrenceId":[{"watchOccurrenceId":0}]}]]],["tl-cart",[[1,"tl-cart",{"showCheckoutButton":[4,"show-checkout-button"],"checkoutLabel":[1,"checkout-label"],"showRemoveButtons":[4,"show-remove-buttons"],"compact":[4],"cart":[32],"loading":[32],"error":[32],"removingItemId":[32]}]]],["tl-event-card",[[1,"tl-event-card",{"event":[16],"eventId":[1,"event-id"],"loadedEvent":[32],"loading":[32],"error":[32]},null,{"eventId":[{"watchEventId":0}]}]]],["tl-login",[[1,"tl-login",{"heading":[1],"allowCodeEntry":[4,"allow-code-entry"],"phase":[32],"email":[32],"code":[32],"busy":[32],"error":[32],"notice":[32],"customer":[32]}]]],["tl-occurrence-selector_2",[[1,"tl-occurrence-selector",{"eventId":[1,"event-id"],"displayMode":[1,"display-mode"],"orientation":[1],"theme":[16],"loading":[32],"error":[32],"occurrences":[32],"currentMonth":[32],"selectedDate":[32],"computedDisplayMode":[32],"containerWidth":[32]},null,{"eventId":[{"onEventIdChange":0}]}],[1,"tl-ticket-selector",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"showButton":[4,"show-button"],"buttonLabel":[1,"button-label"],"ticketTypes":[32],"quantities":[32],"loading":[32],"error":[32],"adding":[32],"addSuccess":[32]},null,{"eventId":[{"watchPropsChange":0}],"occurrenceId":[{"watchPropsChange":0}]}]]],["tl-order-tickets_2",[[1,"tl-order-tickets",{"orderId":[1,"order-id"],"columns":[2],"tickets":[32],"loading":[32],"error":[32]},null,{"orderId":[{"watchOrder":0}]}],[1,"tl-ticket",{"ticket":[16],"orderId":[1,"order-id"],"qrSvg":[32],"downloading":[32]},null,{"ticket":[{"generateQr":0}]}]]]], options);
+});

package/dist/esm/tl-buy-modal.entry.js

@@ -0,0 +1,125 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Ba-RZTFI.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlBuyModalCss = () => `:host{--_bg:var(--tl-background, #ffffff);--_fg:var(--tl-foreground, #111827);--_muted:var(--tl-muted, #f3f4f6);--_muted-fg:var(--tl-muted-foreground, #6b7280);--_border:var(--tl-border, #e5e7eb);--_primary:var(--tl-primary, #6366f1);--_primary-fg:var(--tl-primary-foreground, #ffffff);--_radius:var(--tl-radius-lg, var(--tl-radius, 0.75rem));--_font:var(--tl-font-family, system-ui, -apple-system, sans-serif);font-family:var(--_font)}.overlay{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8, 8, 16, 0.72);backdrop-filter:blur(4px);animation:tl-fade 0.18s ease-out}.panel{width:100%;max-width:460px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;background:var(--_bg);color:var(--_fg);border:1px solid var(--_border);border-radius:var(--_radius);box-shadow:0 24px 64px rgba(0, 0, 0, 0.45);animation:tl-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);transition:max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1)}.panel--wide{max-width:720px}.panel-header{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--_border)}.event-thumb{flex:none;width:56px;height:56px;border-radius:12px;background-size:cover;background-position:center;background-color:var(--_muted);border:1px solid var(--_border)}.titles{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.event-meta{margin:0;font-size:0.8rem;color:var(--_muted-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kicker{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--_primary)}.event-name{margin:0;font-size:1.18rem;font-weight:700;line-height:1.25;color:var(--_fg);overflow:hidden;text-overflow:ellipsis}.close-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:999px;background:var(--_muted);color:var(--_muted-fg);cursor:pointer;transition:color 0.15s, background 0.15s}.close-btn:hover{color:var(--_fg)}.close-btn svg{width:16px;height:16px}.panel-body{padding:18px 22px 22px;overflow-y:auto}.state-msg{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--_muted-fg)}.state-msg.error{color:#b91c1c}.spinner{width:16px;height:16px;border:2px solid var(--_border);border-top-color:var(--_primary);border-radius:999px;animation:tl-spin 0.7s linear infinite}.tickets-step{display:flex;flex-direction:column;gap:6px}.back-link{align-self:flex-start;padding:0;border:0;background:none;color:var(--_primary);font-size:0.85rem;font-weight:500;cursor:pointer}.back-link:hover{text-decoration:underline}.occ-label{margin:2px 0 8px;font-size:0.9rem;font-weight:600;color:var(--_fg)}.done-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 0 4px}.done-mark{font-size:2.4rem;line-height:1;margin-bottom:6px}.done-title{margin:0;font-size:1.1rem;font-weight:700;color:var(--_fg)}.done-sub{margin:0 0 14px;font-size:0.9rem;color:var(--_muted-fg)}.primary-btn{width:100%;padding:13px;border:0;border-radius:var(--tl-radius-md, 0.5rem);background:var(--_primary);color:var(--_primary-fg);font-size:0.98rem;font-weight:600;cursor:pointer;transition:opacity 0.15s}.primary-btn:hover{opacity:0.9}.ghost-btn{width:100%;margin-top:8px;padding:12px;border:1px solid var(--_border);border-radius:var(--tl-radius-md, 0.5rem);background:transparent;color:var(--_fg);font-size:0.95rem;font-weight:500;cursor:pointer;transition:background 0.15s}.ghost-btn:hover{background:var(--_muted)}@keyframes tl-fade{from{opacity:0}}@keyframes tl-rise{from{opacity:0;transform:translateY(12px) scale(0.98)}}@keyframes tl-spin{to{transform:rotate(360deg)}}`;
+
+const TlBuyModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlClose = createEvent(this, "tlClose");
+        this.tlCheckout = createEvent(this, "tlCheckout");
+        this.tlError = createEvent(this, "tlError");
+        this.step = 'loading';
+        this.eventName = '';
+        this.imageUrl = '';
+        this.venueLabel = '';
+        this.dateSummary = '';
+        this.selectedOccurrenceId = null;
+        this.occurrenceCount = 0;
+        this.occurrenceLabel = '';
+        this.error = null;
+        this.handleOccurrenceSelect = (e) => {
+            const occ = e.detail.occurrence;
+            this.selectedOccurrenceId = occ.id;
+            this.occurrenceLabel = this.labelFor(occ);
+            this.step = 'tickets';
+        };
+        this.handleAdded = () => {
+            this.step = 'done';
+        };
+        this.backToDates = () => {
+            this.selectedOccurrenceId = null;
+            this.step = 'occurrence';
+        };
+        this.close = () => this.tlClose.emit();
+        this.goCheckout = () => this.tlCheckout.emit();
+    }
+    async componentWillLoad() {
+        if (!this.eventId) {
+            this.fail('No event specified');
+            return;
+        }
+        try {
+            await whenSDK();
+            const ev = (await getSDK().getEventsManager().get(this.eventId));
+            this.eventName = ev?.name ?? 'Tickets';
+            this.imageUrl = ev?.imageUrl || ev?.heroImageUrl || '';
+            this.venueLabel = [ev?.venueName, ev?.venueCity].filter(Boolean).join(', ');
+            const occs = ev?.occurrences ?? [];
+            this.occurrenceCount = occs.length;
+            this.dateSummary = this.summariseDates(occs);
+            // Skip the date step when one was preselected or there's only one date.
+            const initial = this.occurrenceId ?? (occs.length === 1 ? occs[0]?.id : null);
+            if (initial) {
+                this.selectedOccurrenceId = initial;
+                this.occurrenceLabel = this.labelFor(occs.find((o) => o.id === initial));
+                this.step = 'tickets';
+            }
+            else {
+                this.step = 'occurrence';
+            }
+        }
+        catch (err) {
+            this.fail(err instanceof Error ? err.message : 'Could not load this event');
+        }
+    }
+    fail(message) {
+        this.error = message;
+        this.step = 'error';
+        this.tlError.emit({ message });
+    }
+    /** A compact date line for the header: a single date, or a range across many. */
+    summariseDates(occs) {
+        const times = occs
+            .map((o) => o.startsAt)
+            .filter((s) => !!s)
+            .sort();
+        if (times.length === 0)
+            return '';
+        const day = (s) => new Date(s).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+        if (times.length === 1) {
+            return new Date(times[0]).toLocaleDateString('en-GB', {
+                weekday: 'short',
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric',
+            });
+        }
+        const first = day(times[0]);
+        const last = day(times[times.length - 1]);
+        const range = first === last ? first : `${first} – ${last}`;
+        return `${range} · ${times.length} dates`;
+    }
+    labelFor(occ) {
+        if (!occ?.startsAt)
+            return '';
+        return new Date(occ.startsAt).toLocaleString('en-GB', {
+            weekday: 'short',
+            day: 'numeric',
+            month: 'short',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    stepKicker() {
+        switch (this.step) {
+            case 'occurrence':
+                return 'Choose a date';
+            case 'tickets':
+                return 'Select tickets';
+            case 'done':
+                return 'Nice one';
+            default:
+                return 'Tickets';
+        }
+    }
+    render() {
+        return (h(Host, { key: '1245e518c2b5232f4d9dba091cf808cd3867fbef' }, h("div", { key: '4e770fccdd785444f1cc87df4adab5a5dc1bf58a', class: "overlay", onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    this.close();
+            } }, h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))))));
+    }
+};
+TlBuyModal.style = tlBuyModalCss();
+
+export { TlBuyModal as tl_buy_modal };

package/dist/esm/tl-buy-tickets-button.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Ba-RZTFI.js';
+import { h as hasSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlBuyTicketsButtonCss = () => `:host{display:inline-block;font-family:var(--tl-font-family, system-ui, -apple-system, sans-serif)}:host(.full-width){display:block;width:100%}:host(.full-width) .buy-button{width:100%}.buy-button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;outline:none;transition:all 0.2s ease;white-space:nowrap}.buy-button.variant-primary{background:var(--button-color);color:var(--button-foreground)}.buy-button.variant-secondary{background:color-mix(in srgb, var(--button-color) 15%, transparent);color:var(--button-color)}.buy-button.variant-outline{background:transparent;color:var(--button-color);border:2px solid var(--button-color)}.buy-button.size-sm{padding:0.5rem 1rem;font-size:0.875rem;border-radius:var(--tl-radius-sm, 0.375rem)}.buy-button.size-md{padding:0.75rem 1.5rem;font-size:1rem;border-radius:var(--tl-radius-md, 0.5rem)}.buy-button.size-lg{padding:1rem 2rem;font-size:1.125rem;border-radius:var(--tl-radius-lg, 0.625rem);min-height:51px}.buy-button.hovered:not(.disabled){opacity:0.9;transform:translateY(-1px)}.buy-button.hovered.variant-primary{background:var(--button-hover-color)}.buy-button.disabled{opacity:0.7;cursor:not-allowed}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon svg{width:1em;height:1em}.label{flex-shrink:0}.price{display:inline-flex;align-items:center;gap:0.25rem;margin-left:0.5rem;white-space:nowrap;opacity:0.9}.price-prefix{opacity:0.7}.price-value{font-weight:700}`;
+
+// State configurations
+const STATE_CONFIGS = {
+    available: {
+        defaultLabel: 'Buy Tickets',
+        color: 'var(--tl-primary, #e64b12)',
+        hoverColor: 'var(--tl-primary, #d4440f)',
+        foreground: 'var(--tl-primary-foreground, #ffffff)',
+    },
+    soldOut: {
+        defaultLabel: 'Sold Out',
+        color: '#dc2626',
+        hoverColor: '#b91c1c',
+        foreground: '#ffffff',
+    },
+    waitlist: {
+        defaultLabel: 'Join Waitlist',
+        color: '#2563eb',
+        hoverColor: '#1d4ed8',
+        foreground: '#ffffff',
+    },
+    comingSoon: {
+        defaultLabel: 'On Sale Soon',
+        color: '#d97706',
+        hoverColor: '#b45309',
+        foreground: '#ffffff',
+    },
+};
+const TlBuyTicketsButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlClick = createEvent(this, "tlClick");
+        /** Button state - determines colour, label, and icon */
+        this.state = 'available';
+        /** Button variant */
+        this.variant = 'primary';
+        /** Button size */
+        this.size = 'md';
+        /** Full width button */
+        this.fullWidth = false;
+        /** Currency code for price formatting */
+        this.currency = 'GBP';
+        /** Show price prefix text */
+        this.pricePrefix = 'From';
+        /** Disabled state */
+        this.disabled = false;
+        // -------------------------------------------------------------------------
+        // State
+        // -------------------------------------------------------------------------
+        this.isHovered = false;
+        // -------------------------------------------------------------------------
+        // Methods
+        // -------------------------------------------------------------------------
+        this.handleClick = () => {
+            // Check if button should be interactive
+            if (this.disabled || this.state === 'soldOut' || this.state === 'comingSoon') {
+                return;
+            }
+            // Emit click event
+            this.tlClick.emit({ eventId: this.eventId, occurrenceId: this.occurrenceId });
+            // Open modal via SDK if available
+            if (hasSDK()) {
+                try {
+                    const sdk = getSDK();
+                    sdk.event(this.eventId).openModal({
+                        occurrenceId: this.occurrenceId,
+                    });
+                }
+                catch (err) {
+                    console.error('[tl-buy-tickets-button] Failed to open modal:', err);
+                }
+            }
+        };
+    }
+    formatPrice(priceInMinorUnits) {
+        const amount = priceInMinorUnits / 100;
+        const hasDecimals = amount % 1 !== 0;
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency: this.currency,
+            minimumFractionDigits: hasDecimals ? 2 : 0,
+            maximumFractionDigits: hasDecimals ? 2 : 0,
+        }).format(amount);
+    }
+    getStateConfig() {
+        return STATE_CONFIGS[this.state];
+    }
+    isInteractive() {
+        return !this.disabled && this.state !== 'soldOut' && this.state !== 'comingSoon';
+    }
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    render() {
+        const config = this.getStateConfig();
+        const buttonLabel = this.label || config.defaultLabel;
+        const isInteractive = this.isInteractive();
+        return (h(Host, { key: '10c8c36d12223afcfd13c9807c2ef6b0f4c34266', class: { 'full-width': this.fullWidth } }, h("button", { key: 'c7f6a39a837c90ced0176b5d017687afabf99a5a', type: "button", class: {
+                'buy-button': true,
+                [`variant-${this.variant}`]: true,
+                [`size-${this.size}`]: true,
+                'disabled': !isInteractive,
+                'hovered': this.isHovered && isInteractive,
+            }, style: {
+                '--button-color': config.color,
+                '--button-hover-color': config.hoverColor,
+                '--button-foreground': config.foreground,
+            }, disabled: !isInteractive, onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("span", { key: 'e2bc1edc9fbd2a9c81da8cc3293170b1c4275125', class: "icon" }, this.state === 'soldOut' && this.renderSoldOutIcon(), this.state === 'waitlist' && this.renderWaitlistIcon(), this.state === 'comingSoon' && this.renderComingSoonIcon(), this.state === 'available' && this.renderTicketIcon()), h("span", { key: '8371c85dcc24c5ac040744edefe80618421025ef', class: "label" }, buttonLabel), this.price !== undefined && (h("span", { key: 'c02cb5b646ade8866deafb9b3e698115abec5708', class: "price" }, h("span", { key: 'cb0ab272460115a5edebd674362c83711735a70d', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'e28ba56d3928076b624513de95682351f3e0d92b', class: "price-value" }, this.formatPrice(this.price)))))));
+    }
+    renderTicketIcon() {
+        return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "M13 5v2" }), h("path", { d: "M13 17v2" }), h("path", { d: "M13 11v2" })));
+    }
+    renderSoldOutIcon() {
+        return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("path", { d: "m15 9-6 6" }), h("path", { d: "m9 9 6 6" })));
+    }
+    renderWaitlistIcon() {
+        return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("polyline", { points: "12 6 12 12 16 14" })));
+    }
+    renderComingSoonIcon() {
+        return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 2v4" }), h("path", { d: "m16.2 7.8 2.9-2.9" }), h("path", { d: "M18 12h4" }), h("path", { d: "m16.2 16.2 2.9 2.9" }), h("path", { d: "M12 18v4" }), h("path", { d: "m4.9 19.1 2.9-2.9" }), h("path", { d: "M2 12h4" }), h("path", { d: "m4.9 4.9 2.9 2.9" })));
+    }
+};
+TlBuyTicketsButton.style = tlBuyTicketsButtonCss();
+
+export { TlBuyTicketsButton as tl_buy_tickets_button };

package/dist/esm/tl-buy-tickets-wrapper.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Ba-RZTFI.js';
+import { h as hasSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlBuyTicketsWrapperCss = () => `tl-buy-tickets-wrapper,.tl-buy-tickets-wrapper{display:inline-block;cursor:pointer}tl-buy-tickets-wrapper:focus,.tl-buy-tickets-wrapper:focus{outline:2px solid var(--tl-ring, #3b82f6);outline-offset:2px;border-radius:var(--tl-radius-sm, 0.25rem)}tl-buy-tickets-wrapper[disabled],tl-buy-tickets-wrapper.tl-buy-tickets-wrapper--disabled,.tl-buy-tickets-wrapper--disabled{cursor:not-allowed;opacity:0.5}`;
+
+const TlBuyTicketsWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlComplete = createEvent(this, "tl-complete");
+        this.tlError = createEvent(this, "tl-error");
+        this.tlClose = createEvent(this, "tl-close");
+        /**
+         * Whether the wrapper is disabled
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (!hasSDK()) {
+                console.error('[tl-buy-tickets-wrapper] SDK not initialized. Call setSDK(ticketlayer) first.');
+                this.tlError.emit({ message: 'SDK not initialized' });
+                return;
+            }
+            const sdk = getSDK();
+            // Open the modal via SDK
+            sdk.event(this.eventId).openModal({
+                occurrenceId: this.occurrenceId,
+                onComplete: (order) => {
+                    this.tlComplete.emit(order);
+                },
+                onError: (err) => {
+                    this.tlError.emit({ message: err.message });
+                },
+                onClose: () => {
+                    this.tlClose.emit();
+                },
+            });
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'd6ef81ac9bc1a1194eda1603cbb2a75b355a212e', class: {
+                'tl-buy-tickets-wrapper': true,
+                'tl-buy-tickets-wrapper--disabled': this.disabled,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: 'faef5aaad20deaf5e442d688c69105e45f9ee26f' })));
+    }
+    get el() { return getElement(this); }
+};
+TlBuyTicketsWrapper.style = tlBuyTicketsWrapperCss();
+
+export { TlBuyTicketsWrapper as tl_buy_tickets_wrapper };