@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-event-card/tl-event-card.css

@@ -0,0 +1,175 @@
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+}
+
+.event-card {
+  background: var(--tl-secondary, #f3f4f6);
+  border-radius: var(--tl-radius-lg, 0.75rem);
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.event-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+
+.image-container {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--tl-muted, #f9fafb);
+}
+
+.event-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.event-card:hover .event-image {
+  transform: scale(1.05);
+}
+
+.image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.status-container {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--tl-radius-sm, 0.25rem);
+}
+
+.status-available {
+  background: var(--tl-success, #10b981);
+  color: var(--tl-success-foreground, #ffffff);
+}
+
+.status-limited {
+  background: var(--tl-warning, #f59e0b);
+  color: var(--tl-warning-foreground, #ffffff);
+}
+
+.status-sold-out {
+  background: var(--tl-error, #ef4444);
+  color: var(--tl-error-foreground, #ffffff);
+}
+
+.content {
+  padding: var(--tl-spacing-4, 1rem);
+}
+
+.category {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--tl-primary, #6366f1);
+}
+
+.title {
+  margin: 0.25rem 0 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #111827);
+  line-height: 1.3;
+}
+
+.event-card:hover .title {
+  color: var(--tl-primary, #6366f1);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.meta:first-of-type {
+  margin-top: 0.75rem;
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.description {
+  margin: 0.75rem 0 0;
+  font-size: 0.875rem;
+  color: var(--tl-muted-foreground, #6b7280);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* Standalone (event-id) loading and error states */
+.card-skeleton {
+  cursor: default;
+  pointer-events: none;
+}
+
+.card-skeleton .image-container {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-line {
+  height: 0.875rem;
+  margin-top: 0.5rem;
+  background: var(--tl-muted, #f9fafb);
+  border-radius: var(--tl-radius-sm, 0.25rem);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-line.short {
+  width: 40%;
+}
+
+.skeleton-line.long {
+  width: 80%;
+}
+
+.card-error {
+  padding: var(--tl-spacing-4, 1rem);
+  font-size: 0.875rem;
+  color: var(--tl-error, #ef4444);
+  cursor: default;
+}
+
+.card-error:hover {
+  transform: none;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,205 @@
+import { h } from "@stencil/core";
+import { whenSDK } from "../../utils/sdk-connector";
+import { errorMessage } from "../../utils/order-summary";
+import { toEventCardEvent } from "./event-card-adapter";
+export class TlEventCard {
+    constructor() {
+        this.loadedEvent = null;
+        this.loading = false;
+        this.error = null;
+        this.handleClick = () => {
+            const event = this.current;
+            if (!event)
+                return;
+            console.log('[tl-event-card] Clicked:', event.id);
+            this.tlClick.emit({ eventId: event.id });
+        };
+    }
+    watchEventId() {
+        this.loadEvent();
+    }
+    async componentWillLoad() {
+        if (!this.event && this.eventId) {
+            await this.loadEvent();
+        }
+    }
+    async loadEvent() {
+        if (this.event || !this.eventId)
+            return;
+        try {
+            this.loading = true;
+            this.error = null;
+            const sdk = await whenSDK();
+            const detail = (await sdk.getEventsManager().get(this.eventId));
+            if (!detail)
+                throw new Error('Event not found');
+            this.loadedEvent = toEventCardEvent(detail);
+        }
+        catch (err) {
+            console.error('[tl-event-card] Failed to load event:', err);
+            this.error = errorMessage(err, 'Failed to load event');
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    get current() {
+        return this.event ?? this.loadedEvent;
+    }
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-GB', {
+            weekday: 'short',
+            day: 'numeric',
+            month: 'short',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    getStatusBadgeClass() {
+        const baseClass = 'status-badge';
+        switch (this.current?.availabilityStatus) {
+            case 'available':
+                return `${baseClass} status-available`;
+            case 'limited':
+                return `${baseClass} status-limited`;
+            case 'sold_out':
+                return `${baseClass} status-sold-out`;
+            default:
+                return baseClass;
+        }
+    }
+    getStatusLabel() {
+        switch (this.current?.availabilityStatus) {
+            case 'available':
+                return 'Available';
+            case 'limited':
+                return 'Limited';
+            case 'sold_out':
+                return 'Sold Out';
+            default:
+                return '';
+        }
+    }
+    render() {
+        if (this.loading) {
+            return (h("div", { class: "event-card card-skeleton", "aria-busy": "true" }, h("div", { class: "image-container" }), h("div", { class: "content" }, h("div", { class: "skeleton-line short" }), h("div", { class: "skeleton-line long" }))));
+        }
+        if (this.error) {
+            return h("div", { class: "event-card card-error" }, this.error);
+        }
+        const event = this.current;
+        if (!event) {
+            return null;
+        }
+        // The sales surface exposes a single `imageUrl` (card/listing thumbnail);
+        // `thumbnailUrl` is an accepted alias if a host ever supplies a distinct one.
+        const image = event.thumbnailUrl || event.imageUrl;
+        return (h("div", { class: "event-card", onClick: this.handleClick }, h("div", { class: "image-container" }, image ? (h("img", { src: image, alt: event.name, class: "event-image" })) : (h("div", { class: "image-placeholder" }, h("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("div", { class: "status-container" }, h("span", { class: this.getStatusBadgeClass() }, this.getStatusLabel()))), h("div", { class: "content" }, event.category && h("span", { class: "category" }, event.category), h("h3", { class: "title" }, event.name), event.nextOccurrence && (h("p", { class: "meta" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })), this.formatDate(event.nextOccurrence.startsAt))), event.venue && (h("p", { class: "meta" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })), event.venue.name, ", ", event.venue.city)), event.shortDescription && (h("p", { class: "description" }, event.shortDescription)))));
+    }
+    static get is() { return "tl-event-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-event-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-event-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "event": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TlEventCardEvent",
+                    "resolved": "TlEventCardEvent | undefined",
+                    "references": {
+                        "TlEventCardEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-event-card/tl-event-card.tsx",
+                            "id": "src/components/tl-event-card/tl-event-card.tsx::TlEventCardEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event data to display (tl-event-list passes this)"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "eventId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Load the event from the SDK by id when no `event` is given, so a single\ncard works standalone (e.g. on a Webflow page)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "event-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loadedEvent": {},
+            "loading": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlClick",
+                "name": "tlClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the card is clicked"
+                },
+                "complexType": {
+                    "original": "{ eventId: string }",
+                    "resolved": "{ eventId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tlError",
+                "name": "tlError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the event could not be loaded by id"
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "watchEventId"
+            }];
+    }
+}

package/dist/collection/components/tl-event-list/tl-event-list.css

@@ -0,0 +1,134 @@
+:host {
+  display: block;
+  font-family: var(--tl-font-family, system-ui, sans-serif);
+}
+
+.event-grid {
+  display: grid;
+  gap: var(--tl-spacing-6, 1.5rem);
+}
+
+.cols-1 {
+  grid-template-columns: 1fr;
+}
+
+.cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 1024px) {
+  .cols-4,
+  .cols-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .cols-4,
+  .cols-3,
+  .cols-2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Skeleton Loading */
+.skeleton-card {
+  background: var(--tl-secondary, #f3f4f6);
+  border-radius: var(--tl-radius-lg, 0.75rem);
+  overflow: hidden;
+}
+
+.skeleton-image {
+  aspect-ratio: 16 / 9;
+  background: var(--tl-muted, #f9fafb);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-content {
+  padding: var(--tl-spacing-4, 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.skeleton-line {
+  height: 1rem;
+  background: var(--tl-muted, #f9fafb);
+  border-radius: var(--tl-radius-sm, 0.25rem);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-line.short {
+  width: 4rem;
+  height: 0.75rem;
+}
+
+.skeleton-line.medium {
+  width: 75%;
+}
+
+.skeleton-line.long {
+  width: 50%;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Error State */
+.error-state {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--tl-error, #ef4444);
+  border-radius: var(--tl-radius-lg, 0.75rem);
+  padding: var(--tl-spacing-4, 1rem);
+}
+
+.error-title {
+  margin: 0;
+  font-weight: 500;
+  color: var(--tl-error, #ef4444);
+}
+
+.error-message {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: var(--tl-error, #ef4444);
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+}
+
+.empty-icon {
+  width: 4rem;
+  height: 4rem;
+  margin: 0 auto 1rem;
+  color: var(--tl-muted-foreground, #6b7280);
+}
+
+.empty-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #111827);
+}
+
+.empty-message {
+  margin: 0.5rem 0 0;
+  color: var(--tl-muted-foreground, #6b7280);
+}

package/dist/collection/components/tl-event-list/tl-event-list.js

@@ -0,0 +1,171 @@
+import { h } from "@stencil/core";
+import { whenSDK } from "../../utils/sdk-connector";
+export class TlEventList {
+    constructor() {
+        /**
+         * Maximum number of events to display
+         */
+        this.limit = 12;
+        /**
+         * Columns for grid layout (1, 2, 3, or 4)
+         */
+        this.columns = 3;
+        this.events = [];
+        this.loading = true;
+        this.error = null;
+        this.handleEventClick = (event) => {
+            console.log('[tl-event-list] Event clicked:', event.detail.eventId);
+            this.tlEventClick.emit(event.detail);
+        };
+    }
+    watchFiltersChange() {
+        this.loadEvents();
+    }
+    async componentWillLoad() {
+        await this.loadEvents();
+    }
+    async loadEvents() {
+        try {
+            console.log('[tl-event-list] Loading events via SDK...', { limit: this.limit, category: this.category });
+            this.loading = true;
+            this.error = null;
+            const sdk = await whenSDK();
+            const eventsManager = sdk.getEventsManager();
+            const response = await eventsManager.list({
+                limit: this.limit,
+                category: this.category,
+            });
+            console.log('[tl-event-list] Events loaded:', response.items.length);
+            this.events = response.items;
+        }
+        catch (err) {
+            console.error('[tl-event-list] Failed to load events:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to load events';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        const gridClass = `event-grid cols-${Math.min(Math.max(this.columns, 1), 4)}`;
+        if (this.loading) {
+            return (h("div", { class: gridClass }, Array.from({ length: 6 }).map((_, i) => (h("div", { class: "skeleton-card", key: i }, h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-line short" }), h("div", { class: "skeleton-line medium" }), h("div", { class: "skeleton-line long" })))))));
+        }
+        if (this.error) {
+            return (h("div", { class: "error-state" }, h("p", { class: "error-title" }, "Error loading events"), h("p", { class: "error-message" }, this.error)));
+        }
+        if (this.events.length === 0) {
+            return (h("div", { class: "empty-state" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })), h("p", { class: "empty-title" }, "No events available"), h("p", { class: "empty-message" }, "Check back later for upcoming events.")));
+        }
+        return (h("div", { class: gridClass }, this.events.map((event) => (h("tl-event-card", { key: event.id, event: event, onTlClick: this.handleEventClick })))));
+    }
+    static get is() { return "tl-event-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tl-event-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tl-event-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of events to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "limit",
+                "defaultValue": "12"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Category filter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Columns for grid layout (1, 2, 3, or 4)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "events": {},
+            "loading": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tlEventClick",
+                "name": "tlEventClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an event card is clicked"
+                },
+                "complexType": {
+                    "original": "{ eventId: string }",
+                    "resolved": "{ eventId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "limit",
+                "methodName": "watchFiltersChange"
+            }, {
+                "propName": "category",
+                "methodName": "watchFiltersChange"
+            }];
+    }
+}