@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.js

@@ -0,0 +1,412 @@
+/**
+ * TlBuyTicketsButton Stencil Component
+ *
+ * A pre-styled "Buy Tickets" button that opens the purchase modal.
+ *
+ * @element tl-buy-tickets-button
+ *
+ * Supports multiple states:
+ * - available: Default "Buy Tickets" with primary colour
+ * - soldOut: "Sold Out" with red colour
+ * - waitlist: "Join Waitlist" with blue colour
+ * - comingSoon: "On Sale Soon" with yellow colour
+ *
+ * @example
+ * <tl-buy-tickets-button event-id="evt_xxx"></tl-buy-tickets-button>
+ * <tl-buy-tickets-button event-id="evt_xxx" state="soldOut"></tl-buy-tickets-button>
+ * <tl-buy-tickets-button event-id="evt_xxx" price="2500" currency="GBP"></tl-buy-tickets-button>
+ */
+import { h, Host } from "@stencil/core";
+import { getSDK, hasSDK } from "../../utils/sdk-connector";
+// 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',
+    },
+};
+export class TlBuyTicketsButton {
+    constructor() {
+        /** 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" })));
+    }
+    static get is() { return "tl-buy-tickets-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-buy-tickets-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-buy-tickets-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eventId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Event ID to purchase tickets for"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "event-id"
+            },
+            "occurrenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional pre-selected occurrence ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "occurrence-id"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonState",
+                    "resolved": "\"available\" | \"comingSoon\" | \"soldOut\" | \"waitlist\"",
+                    "references": {
+                        "ButtonState": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
+                            "id": "src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx::ButtonState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button state - determines colour, label, and icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'available'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label override (default depends on state)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"outline\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
+                            "id": "src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
+                            "id": "src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "price": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Price to display (in minor units e.g. pence)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "price"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currency code for price formatting"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency",
+                "defaultValue": "'GBP'"
+            },
+            "pricePrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show price prefix text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "price-prefix",
+                "defaultValue": "'From'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlClick",
+                "name": "tlClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when button is clicked (before modal opens)"
+                },
+                "complexType": {
+                    "original": "{ eventId: string; occurrenceId?: string }",
+                    "resolved": "{ eventId: string; occurrenceId?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.css

@@ -0,0 +1,23 @@
+/**
+ * tl-buy-tickets-wrapper styles
+ */
+
+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;
+}

package/dist/collection/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.js

@@ -0,0 +1,192 @@
+import { h, Host } from "@stencil/core";
+import { getSDK, hasSDK } from "../../utils/sdk-connector";
+/**
+ * @component tl-buy-tickets-wrapper
+ *
+ * Wraps any content and opens the Ticketlayer modal when clicked.
+ * Uses the SDK's modal manager which handles the iframe overlay.
+ *
+ * @slot - Content to display (typically a button)
+ *
+ * @example
+ * <tl-buy-tickets-wrapper event-id="evt_001">
+ *   <button>Buy Tickets</button>
+ * </tl-buy-tickets-wrapper>
+ *
+ * @example
+ * <tl-buy-tickets-wrapper event-id="evt_001" occurrence-id="occ_001">
+ *   <button>Get Tickets for Saturday</button>
+ * </tl-buy-tickets-wrapper>
+ */
+export class TlBuyTicketsWrapper {
+    constructor() {
+        /**
+         * 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' })));
+    }
+    static get is() { return "tl-buy-tickets-wrapper"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-buy-tickets-wrapper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-buy-tickets-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eventId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The event ID to purchase tickets for"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "event-id"
+            },
+            "occurrenceId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional specific occurrence ID (skips occurrence selector)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "occurrence-id"
+            },
+            "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 purchase 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"; }
+}