@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-cart-badge/tl-cart-badge.js

@@ -0,0 +1,217 @@
+import { h } from "@stencil/core";
+import { whenSDK } from "../../utils/sdk-connector";
+// Storage key for persisted cart count
+const CART_COUNT_KEY = 'tl_cart_count';
+export class TlCartBadge {
+    constructor() {
+        /**
+         * Show the badge even when count is 0
+         */
+        this.showEmpty = false;
+        /**
+         * Size variant
+         */
+        this.size = 'md';
+        /**
+         * Badge only mode - only shows the count bubble, no icon or button
+         */
+        this.badgeOnly = false;
+        this.itemCount = 0;
+        this.handleClick = () => {
+            this.tlClick.emit({ itemCount: this.itemCount });
+        };
+    }
+    componentWillLoad() {
+        // Initialize with persisted count to prevent FOUC
+        this.itemCount = this.getPersistedCartCount();
+    }
+    componentDidLoad() {
+        this.subscribeToCartUpdates();
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    getPersistedCartCount() {
+        if (typeof window === 'undefined')
+            return 0;
+        try {
+            const stored = localStorage.getItem(CART_COUNT_KEY);
+            return stored ? parseInt(stored, 10) || 0 : 0;
+        }
+        catch {
+            return 0;
+        }
+    }
+    persistCartCount(count) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.setItem(CART_COUNT_KEY, count.toString());
+        }
+        catch {
+            // localStorage may be unavailable
+        }
+    }
+    async subscribeToCartUpdates() {
+        const sdk = await whenSDK().catch(() => null);
+        if (!sdk)
+            return;
+        const cartManager = sdk.getCartManager?.();
+        if (!cartManager)
+            return;
+        // Subscribe to cart updates
+        this.unsubscribe = cartManager.on?.('cart:updated', (cart) => {
+            const newCount = cart?.itemCount || 0;
+            console.log('[tl-cart-badge] Cart updated:', newCount);
+            this.itemCount = newCount;
+            this.persistCartCount(newCount);
+        });
+        // Load initial cart
+        cartManager.get?.().then((cart) => {
+            const newCount = cart?.itemCount || 0;
+            this.itemCount = newCount;
+            this.persistCartCount(newCount);
+        }).catch(() => {
+            // Cart may not exist yet - keep persisted value
+        });
+    }
+    renderIcon() {
+        if (this.icon) {
+            return h("span", { class: "icon-text" }, this.icon);
+        }
+        return (h("svg", { class: "icon-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" })));
+    }
+    render() {
+        const showBadge = this.itemCount > 0 || this.showEmpty;
+        const displayCount = this.itemCount > 99 ? '99+' : this.itemCount.toString();
+        // Badge only mode - just show the count bubble
+        if (this.badgeOnly) {
+            if (this.itemCount === 0) {
+                return null;
+            }
+            return (h("span", { class: `badge-only size-${this.size}` }, displayCount));
+        }
+        // Full mode with icon and badge
+        return (h("button", { class: `cart-badge size-${this.size}`, onClick: this.handleClick, "aria-label": `Cart with ${this.itemCount} items` }, this.renderIcon(), showBadge && this.itemCount > 0 && (h("span", { class: "badge-count" }, displayCount))));
+    }
+    static get is() { return "tl-cart-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-cart-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-cart-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showEmpty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the badge even when count is 0"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-empty",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon (emoji or text). If not provided, uses cart SVG"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "badgeOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge only mode - only shows the count bubble, no icon or button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-only",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "itemCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlClick",
+                "name": "tlClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the badge is clicked"
+                },
+                "complexType": {
+                    "original": "{ itemCount: number }",
+                    "resolved": "{ itemCount: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tl-cart-drawer/tl-cart-drawer.css

@@ -0,0 +1,98 @@
+:host {
+  --_bg: var(--tl-background, #ffffff);
+  --_fg: var(--tl-foreground, #111827);
+  --_muted-fg: var(--tl-muted-foreground, #6b7280);
+  --_muted: var(--tl-muted, #f3f4f6);
+  --_border: var(--tl-border, #e5e7eb);
+  --_font: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  font-family: var(--_font);
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483640;
+  background: rgba(8, 8, 16, 0.6);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+.overlay.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: min(420px, 100%);
+  display: flex;
+  flex-direction: column;
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
+  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+
+.panel--right {
+  right: 0;
+  border-left: 1px solid var(--_border);
+  transform: translateX(100%);
+}
+
+.panel--left {
+  left: 0;
+  border-right: 1px solid var(--_border);
+  transform: translateX(-100%);
+}
+
+.panel.is-open {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--_border);
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.close-btn {
+  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;
+}
+
+.close-btn:hover {
+  color: var(--_fg);
+}
+
+.close-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px 20px;
+}

package/dist/collection/components/tl-cart-drawer/tl-cart-drawer.js

@@ -0,0 +1,185 @@
+import { h, Host } from "@stencil/core";
+import { onSDKEvent } from "../../utils/sdk-connector";
+/**
+ * @component tl-cart-drawer
+ *
+ * A slide-in cart panel (off-canvas) showing the current cart. It opens when
+ * anything raises the `ui:cart-requested` bus intent - e.g. wire a
+ * `tl-cart-badge`'s click to emit it - and closes on the backdrop, the close
+ * button, Escape, or `ui:modal-close-requested`. The panel embeds `<tl-cart>`,
+ * so the actual cart rendering / remove / checkout is shared with the inline
+ * cart; the drawer only adds the off-canvas chrome.
+ *
+ * @prop side - which edge the panel slides from (default 'right')
+ * @event tlOpen  - the drawer opened
+ * @event tlClose - the drawer closed
+ */
+export class TlCartDrawer {
+    constructor() {
+        /** Edge the panel slides in from. */
+        this.side = 'right';
+        /** Heading shown at the top of the panel. */
+        this.heading = 'Your cart';
+        /** Controlled open state (also driven by the `ui:cart-requested` intent). */
+        this.open = false;
+        this.visible = false;
+        this.onKey = (e) => {
+            if (e.key === 'Escape' && this.visible)
+                this.setOpen(false);
+        };
+        this.close = () => this.setOpen(false);
+    }
+    connectedCallback() {
+        this.visible = this.open;
+        // Open on the cart intent; close on the shared modal-close intent.
+        this.offCart = onSDKEvent('ui:cart-requested', () => this.setOpen(true));
+        this.offClose = onSDKEvent('ui:modal-close-requested', () => this.setOpen(false));
+        if (typeof document !== 'undefined')
+            document.addEventListener('keydown', this.onKey);
+    }
+    disconnectedCallback() {
+        this.offCart?.();
+        this.offClose?.();
+        if (typeof document !== 'undefined')
+            document.removeEventListener('keydown', this.onKey);
+    }
+    onOpenProp(v) {
+        this.visible = v;
+    }
+    setOpen(v) {
+        if (this.visible === v)
+            return;
+        this.open = v;
+        this.visible = v;
+        if (v)
+            this.tlOpen.emit();
+        else
+            this.tlClose.emit();
+    }
+    render() {
+        return (h(Host, { key: '5b4dbc69206ef19bcf3b0ba619a67728c8e35e68' }, h("div", { key: '0312918752eb5eebb86206be7094c1024dbd3457', class: { overlay: true, 'is-open': this.visible }, onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    this.close();
+            } }, h("aside", { key: '8c50e6b0cfacf3a881e4ec1ab272ef8da13cd796', class: { panel: true, [`panel--${this.side}`]: true, 'is-open': this.visible }, role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-hidden": this.visible ? 'false' : 'true' }, h("header", { key: 'ee7efe3700ff05c921f6ace97f39f957ebf6670e', class: "drawer-header" }, h("h2", { key: '07841a92eea5bca5db0ebf64df91a14eaa5ecffc', class: "drawer-title" }, this.heading), h("button", { key: 'c2099831dfaf89b44b7228c1ee5634d61c5af919', class: "close-btn", onClick: this.close, "aria-label": "Close cart" }, h("svg", { key: 'a2c8e0ecf42e4fe43ca1d6b6ccc6f4687e6af483', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'de07e2ce6b0b60a137d8b534826963a03421af7b', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'f67798d0e026cce074bf15b246cdd3b726be98f6', class: "drawer-body" }, h("tl-cart", { key: '1b2a5a44e1862a3b4754bd36e17de063d012453e' }))))));
+    }
+    static get is() { return "tl-cart-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-cart-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-cart-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'right' | 'left'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Edge the panel slides in from."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'right'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading shown at the top of the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Your cart'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open state (also driven by the `ui:cart-requested` intent)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlOpen",
+                "name": "tlOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tlClose",
+                "name": "tlClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenProp"
+            }];
+    }
+}

package/dist/collection/components/tl-checkout-wrapper/tl-checkout-wrapper.css

@@ -0,0 +1,23 @@
+/**
+ * tl-checkout-wrapper styles
+ */
+
+tl-checkout-wrapper,
+.tl-checkout-wrapper {
+  display: inline-block;
+  cursor: pointer;
+}
+
+tl-checkout-wrapper:focus,
+.tl-checkout-wrapper:focus {
+  outline: 2px solid var(--tl-ring, #3b82f6);
+  outline-offset: 2px;
+  border-radius: var(--tl-radius-sm, 0.25rem);
+}
+
+tl-checkout-wrapper[disabled],
+tl-checkout-wrapper.tl-checkout-wrapper--disabled,
+.tl-checkout-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/collection/components/tl-checkout-wrapper/tl-checkout-wrapper.js

@@ -0,0 +1,148 @@
+import { h, Host } from "@stencil/core";
+import { getSDK, hasSDK } from "../../utils/sdk-connector";
+/**
+ * @component tl-checkout-wrapper
+ *
+ * Wraps any content and opens the Ticketlayer checkout modal when clicked.
+ * Uses the SDK's modal manager which handles the iframe overlay.
+ *
+ * @slot - Content to display (typically a checkout button)
+ *
+ * @example
+ * <tl-checkout-wrapper>
+ *   <button>Proceed to Checkout</button>
+ * </tl-checkout-wrapper>
+ */
+export class TlCheckoutWrapper {
+    constructor() {
+        /**
+         * Whether the wrapper is disabled
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (!hasSDK()) {
+                console.error('[tl-checkout-wrapper] SDK not initialized. Call setSDK(ticketlayer) first.');
+                this.tlError.emit({ message: 'SDK not initialized' });
+                return;
+            }
+            const sdk = getSDK();
+            // Open the checkout modal via SDK
+            sdk.checkout.openModal({
+                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: 'ebaae5dd6710ffc5353ece4327012df0332fdbb7', class: {
+                'tl-checkout-wrapper': true,
+                'tl-checkout-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: '0118d9921df5af1ae2376fd4135bac487aac7ebd' })));
+    }
+    static get is() { return "tl-checkout-wrapper"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-checkout-wrapper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-checkout-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the wrapper is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlComplete",
+                "name": "tl-complete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when checkout completes successfully"
+                },
+                "complexType": {
+                    "original": "OrderResult",
+                    "resolved": "OrderResult",
+                    "references": {
+                        "OrderResult": {
+                            "location": "import",
+                            "path": "../../utils/sdk-connector",
+                            "id": "src/utils/sdk-connector.ts::OrderResult",
+                            "referenceLocation": "OrderResult"
+                        }
+                    }
+                }
+            }, {
+                "method": "tlError",
+                "name": "tl-error",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an error occurs"
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlClose",
+                "name": "tl-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/tl-event-card/event-card-adapter.js

@@ -0,0 +1,23 @@
+/** Adapt an event detail to the card shape (the list adapter lives in the SDK connector). */
+export function toEventCardEvent(detail) {
+    const occurrences = detail.occurrences ?? [];
+    const starts = occurrences
+        .map((o) => o.startsAt)
+        .filter((s) => !!s)
+        .sort();
+    const now = Date.now();
+    const next = starts.find((s) => new Date(s).getTime() >= now) ?? starts[0];
+    const soldOut = detail.status === 'sold_out' ||
+        (occurrences.length > 0 && occurrences.every((o) => o.status === 'sold_out'));
+    return {
+        id: detail.id,
+        name: detail.name,
+        ...(detail.shortDescription ? { shortDescription: detail.shortDescription } : {}),
+        ...(detail.imageUrl ? { imageUrl: detail.imageUrl } : {}),
+        ...(detail.venueName
+            ? { venue: { id: detail.venueId ?? '', name: detail.venueName, city: detail.venueCity ?? '' } }
+            : {}),
+        ...(next ? { nextOccurrence: { startsAt: next } } : {}),
+        availabilityStatus: soldOut ? 'sold_out' : 'available',
+    };
+}