@ticketlayer/elements 0.2.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var tlBuyTicketsWrapper_entry = require('./tl-buy-tickets-wrapper.entry.cjs.js');
+var tlCheckoutWrapper_entry = require('./tl-checkout-wrapper.entry.cjs.js');
+require('./index-DfzcrE9-.js');
+
+
+
+exports.getSDK = sdkConnector.getSDK;
+exports.hasSDK = sdkConnector.hasSDK;
+exports.onSDKEvent = sdkConnector.onSDKEvent;
+exports.setSDK = sdkConnector.setSDK;
+exports.whenSDK = sdkConnector.whenSDK;
+exports.TlBuyTicketsWrapper = tlBuyTicketsWrapper_entry.tl_buy_tickets_wrapper;
+exports.TlCheckoutWrapper = tlCheckoutWrapper_entry.tl_checkout_wrapper;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["tl-my-orders.cjs",[[1,"tl-my-orders",{"emptyMessage":[1,"empty-message"],"columns":[2],"orders":[32],"authenticated":[32],"loading":[32],"error":[32],"expandedId":[32]}]]],["tl-buy-modal.cjs",[[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.cjs",[[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.cjs",[[1,"tl-cart-drawer",{"side":[1],"heading":[1],"open":[1028],"visible":[32]},null,{"open":[{"onOpenProp":0}]}]]],["tl-event-list.cjs",[[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.cjs",[[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.cjs",[[260,"tl-buy-tickets-wrapper",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"disabled":[4]}]]],["tl-cart-badge.cjs",[[1,"tl-cart-badge",{"showEmpty":[4,"show-empty"],"icon":[1],"size":[1],"badgeOnly":[4,"badge-only"],"itemCount":[32]}]]],["tl-checkout-wrapper.cjs",[[260,"tl-checkout-wrapper",{"disabled":[4]}]]],["tl-promo-code.cjs",[[1,"tl-promo-code",{"placeholder":[1],"buttonLabel":[1,"button-label"],"code":[32],"applying":[32],"applied":[32],"error":[32]}]]],["tl-seat-map.cjs",[[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.cjs",[[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.cjs",[[1,"tl-event-card",{"event":[16],"eventId":[1,"event-id"],"loadedEvent":[32],"loading":[32],"error":[32]},null,{"eventId":[{"watchEventId":0}]}]]],["tl-login.cjs",[[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.cjs",[[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.cjs",[[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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/order-summary-ZMkJ5bez.js

@@ -0,0 +1,116 @@
+'use strict';
+
+/** 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;
+}
+
+exports.errorMessage = errorMessage;
+exports.formatDate = formatDate;
+exports.formatDateTime = formatDateTime;
+exports.formatPrice = formatPrice;
+exports.isAuthError = isAuthError;
+exports.orderCustomerEmail = orderCustomerEmail;
+exports.orderEventName = orderEventName;
+exports.resolveOccurrence = resolveOccurrence;
+exports.statusLabel = statusLabel;
+exports.statusTone = statusTone;
+exports.ticketCount = ticketCount;
+exports.ticketItems = ticketItems;

package/dist/cjs/sdk-connector-ClDF3013.js

@@ -0,0 +1,108 @@
+'use strict';
+
+/**
+ * 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?.();
+    };
+}
+
+exports.getSDK = getSDK;
+exports.hasSDK = hasSDK;
+exports.onSDKEvent = onSDKEvent;
+exports.setSDK = setSDK;
+exports.whenSDK = whenSDK;

package/dist/cjs/ticketlayer-elements.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.41.1 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('ticketlayer-elements.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["tl-my-orders.cjs",[[1,"tl-my-orders",{"emptyMessage":[1,"empty-message"],"columns":[2],"orders":[32],"authenticated":[32],"loading":[32],"error":[32],"expandedId":[32]}]]],["tl-buy-modal.cjs",[[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.cjs",[[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.cjs",[[1,"tl-cart-drawer",{"side":[1],"heading":[1],"open":[1028],"visible":[32]},null,{"open":[{"onOpenProp":0}]}]]],["tl-event-list.cjs",[[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.cjs",[[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.cjs",[[260,"tl-buy-tickets-wrapper",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"disabled":[4]}]]],["tl-cart-badge.cjs",[[1,"tl-cart-badge",{"showEmpty":[4,"show-empty"],"icon":[1],"size":[1],"badgeOnly":[4,"badge-only"],"itemCount":[32]}]]],["tl-checkout-wrapper.cjs",[[260,"tl-checkout-wrapper",{"disabled":[4]}]]],["tl-promo-code.cjs",[[1,"tl-promo-code",{"placeholder":[1],"buttonLabel":[1,"button-label"],"code":[32],"applying":[32],"applied":[32],"error":[32]}]]],["tl-seat-map.cjs",[[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.cjs",[[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.cjs",[[1,"tl-event-card",{"event":[16],"eventId":[1,"event-id"],"loadedEvent":[32],"loading":[32],"error":[32]},null,{"eventId":[{"watchEventId":0}]}]]],["tl-login.cjs",[[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.cjs",[[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.cjs",[[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);
+});
+
+exports.setNonce = index.setNonce;

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

@@ -0,0 +1,127 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.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) {
+        index.registerInstance(this, hostRef);
+        this.tlClose = index.createEvent(this, "tlClose");
+        this.tlCheckout = index.createEvent(this, "tlCheckout");
+        this.tlError = index.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 sdkConnector.whenSDK();
+            const ev = (await sdkConnector.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 (index.h(index.Host, { key: '1245e518c2b5232f4d9dba091cf808cd3867fbef' }, index.h("div", { key: '4e770fccdd785444f1cc87df4adab5a5dc1bf58a', class: "overlay", onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    this.close();
+            } }, index.h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, index.h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (index.h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), index.h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, index.h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), index.h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && index.h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && index.h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), index.h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, index.h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), index.h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (index.h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, index.h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && index.h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (index.h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (index.h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (index.h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && index.h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), index.h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (index.h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, index.h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), index.h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), index.h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), index.h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), index.h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))))));
+    }
+};
+TlBuyModal.style = tlBuyModalCss();
+
+exports.tl_buy_modal = TlBuyModal;

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

@@ -0,0 +1,131 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.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) {
+        index.registerInstance(this, hostRef);
+        this.tlClick = index.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 (sdkConnector.hasSDK()) {
+                try {
+                    const sdk = sdkConnector.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 (index.h(index.Host, { key: '10c8c36d12223afcfd13c9807c2ef6b0f4c34266', class: { 'full-width': this.fullWidth } }, index.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) }, index.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()), index.h("span", { key: '8371c85dcc24c5ac040744edefe80618421025ef', class: "label" }, buttonLabel), this.price !== undefined && (index.h("span", { key: 'c02cb5b646ade8866deafb9b3e698115abec5708', class: "price" }, index.h("span", { key: 'cb0ab272460115a5edebd674362c83711735a70d', class: "price-prefix" }, this.pricePrefix), index.h("span", { key: 'e28ba56d3928076b624513de95682351f3e0d92b', class: "price-value" }, this.formatPrice(this.price)))))));
+    }
+    renderTicketIcon() {
+        return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.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" }), index.h("path", { d: "M13 5v2" }), index.h("path", { d: "M13 17v2" }), index.h("path", { d: "M13 11v2" })));
+    }
+    renderSoldOutIcon() {
+        return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { cx: "12", cy: "12", r: "10" }), index.h("path", { d: "m15 9-6 6" }), index.h("path", { d: "m9 9 6 6" })));
+    }
+    renderWaitlistIcon() {
+        return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { cx: "12", cy: "12", r: "10" }), index.h("polyline", { points: "12 6 12 12 16 14" })));
+    }
+    renderComingSoonIcon() {
+        return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "M12 2v4" }), index.h("path", { d: "m16.2 7.8 2.9-2.9" }), index.h("path", { d: "M18 12h4" }), index.h("path", { d: "m16.2 16.2 2.9 2.9" }), index.h("path", { d: "M12 18v4" }), index.h("path", { d: "m4.9 19.1 2.9-2.9" }), index.h("path", { d: "M2 12h4" }), index.h("path", { d: "m4.9 4.9 2.9 2.9" })));
+    }
+};
+TlBuyTicketsButton.style = tlBuyTicketsButtonCss();
+
+exports.tl_buy_tickets_button = TlBuyTicketsButton;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-DfzcrE9-.js');
+var sdkConnector = require('./sdk-connector-ClDF3013.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) {
+        index.registerInstance(this, hostRef);
+        this.tlComplete = index.createEvent(this, "tl-complete");
+        this.tlError = index.createEvent(this, "tl-error");
+        this.tlClose = index.createEvent(this, "tl-close");
+        /**
+         * Whether the wrapper is disabled
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (!sdkConnector.hasSDK()) {
+                console.error('[tl-buy-tickets-wrapper] SDK not initialized. Call setSDK(ticketlayer) first.');
+                this.tlError.emit({ message: 'SDK not initialized' });
+                return;
+            }
+            const sdk = sdkConnector.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 (index.h(index.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 }, index.h("slot", { key: 'faef5aaad20deaf5e442d688c69105e45f9ee26f' })));
+    }
+    get el() { return index.getElement(this); }
+};
+TlBuyTicketsWrapper.style = tlBuyTicketsWrapperCss();
+
+exports.tl_buy_tickets_wrapper = TlBuyTicketsWrapper;