@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-promo-code/tl-promo-code.css

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+  color: var(--tl-foreground, #111827);
+}
+
+.field {
+  display: flex;
+  gap: var(--tl-spacing-2, 0.5rem);
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  padding: var(--tl-spacing-3, 0.75rem);
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--tl-foreground, #111827);
+  background: var(--tl-background, #ffffff);
+  border: 1px solid var(--tl-border, #e5e7eb);
+  border-radius: var(--tl-radius-md, 0.5rem);
+  text-transform: uppercase;
+}
+
+.input::placeholder {
+  text-transform: none;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.input:focus {
+  outline: 2px solid var(--tl-primary, #6366f1);
+  outline-offset: 1px;
+}
+
+.apply {
+  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary, #6366f1);
+  border: none;
+  border-radius: var(--tl-radius-md, 0.5rem);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.apply:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.apply:disabled,
+.input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.error {
+  margin: var(--tl-spacing-2, 0.5rem) 0 0;
+  font-size: 0.8125rem;
+  color: var(--tl-error, #ef4444);
+}
+
+.applied {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3, 0.75rem);
+  font-size: 0.875rem;
+  background: var(--tl-muted, #f9fafb);
+  border: 1px solid var(--tl-border, #e5e7eb);
+  border-radius: var(--tl-radius-md, 0.5rem);
+}
+
+.applied-text {
+  display: flex;
+  align-items: center;
+  gap: var(--tl-spacing-2, 0.5rem);
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--tl-success, #10b981);
+}
+
+.code {
+  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+}
+
+.link {
+  padding: 0;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--tl-primary, #6366f1);
+  background: none;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.link:hover {
+  text-decoration: underline;
+}

package/dist/collection/components/tl-promo-code/tl-promo-code.js

@@ -0,0 +1,181 @@
+import { h } from "@stencil/core";
+import { whenSDK } from "../../utils/sdk-connector";
+import { errorMessage, isAuthError } from "../../utils/order-summary";
+/**
+ * tl-promo-code - an input plus Apply button that redeems a presale or promo
+ * code for the current cart (POST /sales/presale-codes/redeem through the
+ * SDK). Redemption unlocks gated pricing on the customer; the SDK re-reads the
+ * cart and publishes cart:updated, so tl-cart and badges re-render on their own.
+ *
+ * The API has no un-redeem, so the applied state offers only "use a different
+ * code", which clears the input for another redemption.
+ *
+ * Usage: <tl-promo-code></tl-promo-code>
+ *
+ * @event tlPromoApplied - a code was redeemed ({ code, benefit, alreadyHeld, cart })
+ * @event tlError        - the code was rejected
+ */
+export class TlPromoCode {
+    constructor() {
+        /** Input placeholder. */
+        this.placeholder = 'Promo or presale code';
+        /** Apply button label. */
+        this.buttonLabel = 'Apply';
+        this.code = '';
+        this.applying = false;
+        this.applied = null;
+        this.error = null;
+        this.handleInput = (e) => {
+            this.code = e.target.value;
+            this.error = null;
+        };
+        this.handleSubmit = (e) => {
+            e.preventDefault();
+            this.apply();
+        };
+        this.reset = () => {
+            this.applied = null;
+            this.error = null;
+        };
+    }
+    async apply() {
+        const code = this.code.trim();
+        if (!code) {
+            this.error = 'Enter a code';
+            return;
+        }
+        this.applying = true;
+        this.error = null;
+        try {
+            const sdk = await whenSDK();
+            const presale = sdk.getPresaleManager?.();
+            if (!presale)
+                throw new Error('Promo codes are not available');
+            const result = await presale.redeem(code);
+            // The SDK refreshed the cart on redeem; read the cached copy for the payload.
+            const cart = await sdk.getCartManager?.()?.get().catch(() => null) ?? null;
+            this.applied = { code: code.toUpperCase(), ...result, cart };
+            this.code = '';
+            this.tlPromoApplied.emit(this.applied);
+        }
+        catch (err) {
+            console.error('[tl-promo-code] Redeem failed:', err);
+            this.error = isAuthError(err)
+                ? 'Sign in to use this code'
+                : errorMessage(err, 'That code could not be applied');
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.applying = false;
+        }
+    }
+    render() {
+        if (this.applied) {
+            return (h("div", { class: "applied", role: "status" }, h("span", { class: "applied-text" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Code ", h("strong", { class: "code" }, this.applied.code), this.applied.alreadyHeld ? ' was already applied' : ' applied'), h("button", { type: "button", class: "link", onClick: this.reset }, "Use a different code")));
+        }
+        return (h("form", { class: "promo", onSubmit: this.handleSubmit }, h("div", { class: "field" }, h("input", { class: "input", type: "text", autocomplete: "off", autoCapitalize: "characters", spellcheck: false, "aria-label": this.placeholder, placeholder: this.placeholder, value: this.code, disabled: this.applying, onInput: this.handleInput }), h("button", { type: "submit", class: "apply", disabled: this.applying }, this.applying ? 'Applying…' : this.buttonLabel)), this.error && (h("p", { class: "error", role: "alert" }, this.error))));
+    }
+    static get is() { return "tl-promo-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-promo-code.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-promo-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Promo or presale code'"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "'Apply'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "code": {},
+            "applying": {},
+            "applied": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlPromoApplied",
+                "name": "tlPromoApplied",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TlPromoApplied",
+                    "resolved": "TlPromoApplied",
+                    "references": {
+                        "TlPromoApplied": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-promo-code/tl-promo-code.tsx",
+                            "id": "src/components/tl-promo-code/tl-promo-code.tsx::TlPromoApplied"
+                        }
+                    }
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tl-seat-map/tl-seat-map.css

@@ -0,0 +1,85 @@
+/**
+ * TlSeatMap styles
+ */
+
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+}
+
+.seat-map-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--tl-radius-md, 0.5rem);
+  background: var(--tl-color-background, #ffffff);
+}
+
+.seat-map-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.seat-map-iframe.hidden {
+  display: none;
+}
+
+/* Loading state */
+.loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--tl-color-background, #ffffff);
+  color: var(--tl-color-foreground, #0f172a);
+  gap: 1rem;
+}
+
+.loading p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--tl-color-muted-foreground, #64748b);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--tl-color-border, #e2e8f0);
+  border-top-color: var(--tl-color-primary, #e64b12);
+  border-radius: 50%;
+  animation: tl-seat-map-spin 1s linear infinite;
+}
+
+@keyframes tl-seat-map-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error state */
+.error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--tl-color-background, #ffffff);
+  color: var(--tl-color-error, #ef4444);
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.error-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.error-message {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.9;
+}