@ticketlayer/elements 0.4.0 → 1.0.0

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

@@ -1,11 +1,16 @@
 import { h, Host } from "@stencil/core";
-import { getSDK, hasSDK } from "../../utils/sdk-connector";
+import { checkoutWrapperCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } 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.
  *
+ * The web harness for `checkoutWrapperCore`: it renders, it forwards, and it
+ * decides only which key press counts as activation. Everything else is in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11).
+ *
  * @slot - Content to display (typically a checkout button)
  *
  * @example
@@ -19,40 +24,57 @@ export class TlCheckoutWrapper {
          * Whether the wrapper is disabled
          */
         this.disabled = false;
+        this.element = createElement(checkoutWrapperCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
         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.element.actions.activate();
         };
+        /** Enter and Space are a press on the web. The core knows nothing of keys. */
         this.handleKeyDown = (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
-                this.handleClick();
+                this.element.actions.activate();
             }
         };
     }
+    syncProps() {
+        this.element.setProps({ disabled: this.disabled });
+    }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        // Nothing to do on mount, and mounted anyway: a harness calls mount()
+        // unconditionally and pairs it with its teardown (TKT-197).
+        this.teardown = this.element.mount();
+    }
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlComplete')
+            this.tlComplete.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
+        else if (event === 'tlClose')
+            this.tlClose.emit();
+    }
     render() {
-        return (h(Host, { key: 'ebaae5dd6710ffc5353ece4327012df0332fdbb7', class: {
+        const { interactive } = this.view.derived;
+        return (h(Host, { key: 'b261046c2627825258a5905662a79f436d713683', 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' })));
+                'tl-checkout-wrapper--disabled': !interactive,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: interactive ? 0 : -1, "aria-disabled": interactive ? null : 'true' }, h("slot", { key: '5be08d5007a755e3d88a06ae89c08e082e4ba052' })));
     }
     static get is() { return "tl-checkout-wrapper"; }
     static get originalStyleUrls() {
@@ -89,10 +111,15 @@ export class TlCheckoutWrapper {
             }
         };
     }
+    static get states() {
+        return {
+            "view": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "tlComplete",
-                "name": "tl-complete",
+                "name": "tlComplete",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -114,7 +141,7 @@ export class TlCheckoutWrapper {
                 }
             }, {
                 "method": "tlError",
-                "name": "tl-error",
+                "name": "tlError",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -129,7 +156,7 @@ export class TlCheckoutWrapper {
                 }
             }, {
                 "method": "tlClose",
-                "name": "tl-close",
+                "name": "tlClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -144,5 +171,10 @@ export class TlCheckoutWrapper {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "syncProps"
+            }];
+    }
 }

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

@@ -1,23 +1,11 @@
-/** 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',
-    };
-}
+/**
+ * Adapts the sales event detail (events manager get) to the shape
+ * tl-event-card renders.
+ *
+ * The adapter and its type moved to `@ticketlayer/elements-core` with the core
+ * split (TKT-69): picking the next occurrence and deciding whether a card reads
+ * sold out is behaviour, and behaviour lives in a core so every harness decides
+ * it the same way. This file stays as the import path the component and its
+ * spec already use.
+ */
+export { toEventCardEvent } from '@ticketlayer/elements-core';

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

@@ -1,102 +1,68 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage } from "../../utils/order-summary";
-import { toEventCardEvent } from "./event-card-adapter";
+import { createElement, eventCardCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/**
+ * The web harness for `eventCardCore`.
+ *
+ * It renders and it forwards: which event is shown, how it is read, the status
+ * badge and the date are all in `@ticketlayer/elements-core` (AGENTS.md,
+ * TKT-11).
+ */
 export class TlEventCard {
     constructor() {
-        this.loadedEvent = null;
-        this.loading = false;
-        this.error = null;
+        this.element = createElement(eventCardCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
         this.handleClick = () => {
-            const event = this.current;
-            if (!event)
-                return;
-            console.log('[tl-event-card] Clicked:', event.id);
-            this.tlClick.emit({ eventId: event.id });
+            this.element.actions.click();
         };
     }
-    watchEventId() {
-        this.loadEvent();
-    }
-    async componentWillLoad() {
-        if (!this.event && this.eventId) {
-            await this.loadEvent();
-        }
+    syncProps() {
+        this.element.setProps({ event: this.event, eventId: this.eventId });
     }
-    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;
+    /** A new id is a new subject: tear the old mount down and start again. */
+    watchEventId() {
+        this.syncProps();
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
-    formatDate(dateString) {
-        const date = new Date(dateString);
-        return date.toLocaleDateString('en-GB', {
-            weekday: 'short',
-            day: 'numeric',
-            month: 'short',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    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;
-        }
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    getStatusLabel() {
-        switch (this.current?.availabilityStatus) {
-            case 'available':
-                return 'Available';
-            case 'limited':
-                return 'Limited';
-            case 'sold_out':
-                return 'Sold Out';
-            default:
-                return '';
-        }
+    forward(event, detail) {
+        if (event === 'tlClick')
+            this.tlClick.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     render() {
-        if (this.loading) {
+        const { status, state, derived } = this.view;
+        if (status === '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);
+        if (status === 'error') {
+            return h("div", { class: "event-card card-error" }, state.error);
         }
-        const event = this.current;
+        const event = derived.event;
         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)))));
+        return (h("div", { class: "event-card", onClick: this.handleClick }, h("div", { class: "image-container" }, derived.image ? (h("img", { src: derived.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: derived.statusBadgeClass }, derived.statusLabel))), h("div", { class: "content" }, event.category && h("span", { class: "category" }, event.category), h("h3", { class: "title" }, event.name), derived.dateLabel && (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" })), derived.dateLabel)), derived.venueLabel && (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" })), derived.venueLabel)), event.shortDescription && h("p", { class: "description" }, event.shortDescription))));
     }
     static get is() { return "tl-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -158,9 +124,7 @@ export class TlEventCard {
     }
     static get states() {
         return {
-            "loadedEvent": {},
-            "loading": {},
-            "error": {}
+            "view": {}
         };
     }
     static get events() {
@@ -198,6 +162,9 @@ export class TlEventCard {
     }
     static get watchers() {
         return [{
+                "propName": "event",
+                "methodName": "syncProps"
+            }, {
                 "propName": "eventId",
                 "methodName": "watchEventId"
             }];

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

@@ -1,5 +1,15 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
+import { createElement, eventListCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/**
+ * tl-event-list - what the channel is selling, as a grid of tl-event-card.
+ *
+ * The web harness for `eventListCore`: it renders and it forwards. What to ask
+ * for, what came back and every string are in `@ticketlayer/elements-core`
+ * (AGENTS.md, TKT-11).
+ *
+ * Usage: <tl-event-list limit="12" columns="3"></tl-event-list>
+ */
 export class TlEventList {
     constructor() {
         /**
@@ -10,54 +20,87 @@ export class TlEventList {
          * Columns for grid layout (1, 2, 3, or 4)
          */
         this.columns = 3;
-        this.events = [];
-        this.loading = true;
-        this.error = null;
+        this.element = createElement(eventListCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
+        /** A card was clicked. The core has nothing to decide about it; pass it on. */
         this.handleEventClick = (event) => {
-            console.log('[tl-event-list] Event clicked:', event.detail.eventId);
             this.tlEventClick.emit(event.detail);
         };
     }
+    /** A different question deserves a fresh answer. */
     watchFiltersChange() {
-        this.loadEvents();
+        this.syncProps();
+        this.element.actions.load();
     }
-    async componentWillLoad() {
-        await this.loadEvents();
+    syncProps() {
+        this.element.setProps({ limit: this.limit, category: this.category, columns: this.columns });
     }
-    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,
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    /**
+     * Nothing is painted until the first listing has landed.
+     *
+     * Kept as found rather than improved, and it is the harness's to keep: the
+     * component awaited its read in `componentWillLoad`, and Stencil does not
+     * paint a component until that resolves, so a slow channel shows an empty
+     * box where the skeleton markup below would fit. Held by the spec.
+     *
+     * Expressed against the core's own status rather than against a read this
+     * harness starts, because the read is the core's (`connectedCallback` has
+     * already mounted it). Every later read draws the skeleton, exactly as
+     * before.
+     */
+    componentWillLoad() {
+        if (this.view.status !== 'loading')
+            return undefined;
+        return new Promise((resolve) => {
+            const off = this.element.subscribe((view) => {
+                if (view.status === 'loading')
+                    return;
+                off();
+                resolve();
             });
-            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;
-        }
+        });
+    }
+    /**
+     * Off screen: run the mount's teardown, and nothing more. `destroy()` is
+     * terminal and Stencil calls this for a move as well as a removal, so
+     * destroying here would leave a re-inserted element frozen.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlEventClick')
+            this.tlEventClick.emit(detail);
     }
     render() {
-        const gridClass = `event-grid cols-${Math.min(Math.max(this.columns, 1), 4)}`;
-        if (this.loading) {
+        const { status, state, strings, derived } = this.view;
+        const gridClass = `event-grid cols-${derived.columns}`;
+        if (status === '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 (status === 'error') {
+            return (h("div", { class: "error-state" }, h("p", { class: "error-title" }, strings.errorTitle), h("p", { class: "error-message" }, state.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.")));
+        if (status === 'empty') {
+            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" }, strings.emptyTitle), h("p", { class: "empty-message" }, strings.emptyMessage)));
         }
-        return (h("div", { class: gridClass }, this.events.map((event) => (h("tl-event-card", { key: event.id, event: event, onTlClick: this.handleEventClick })))));
+        return (h("div", { class: gridClass }, derived.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"; }
@@ -136,9 +179,7 @@ export class TlEventList {
     }
     static get states() {
         return {
-            "events": {},
-            "loading": {},
-            "error": {}
+            "view": {}
         };
     }
     static get events() {
@@ -166,6 +207,9 @@ export class TlEventList {
             }, {
                 "propName": "category",
                 "methodName": "watchFiltersChange"
+            }, {
+                "propName": "columns",
+                "methodName": "syncProps"
             }];
     }
 }