@ticketlayer/elements-core 0.1.0 → 0.2.0

package/dist/cjs/cores/cart-drawer.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cartDrawerCore = exports.CLOSE_INTENT = exports.OPEN_INTENT = void 0;
+/**
+ * `tl-cart-drawer`: the off-canvas panel the cart slides into.
+ *
+ * It owns no cart of its own - the panel embeds `tl-cart` - so what is here is
+ * the open/closed rule and the two bus intents it listens for, bound inside its
+ * own `mount` and unbound by the teardown (TKT-197).
+ *
+ * Two ways in, and they are not the same, which is the subtlety this core has
+ * to keep: an intent, the backdrop, the close button and Escape all go through
+ * `setOpen`, which announces the change with `tlOpen` or `tlClose`. The host
+ * setting the `open` prop goes through `openChanged`, which does not: the
+ * component's `@Watch('open')` moved the panel without emitting, and a host
+ * that drove the drawer and also listened would otherwise start hearing its
+ * own writes back.
+ *
+ * The subscription is the client's bus and not the cart manager's: these are
+ * UI intents, which `@ticketlayer/live` relays untouched, and nothing here
+ * reads the cart.
+ */
+const define_js_1 = require("../define.js");
+/** What opens the drawer, and what closes it. Relayed on the client's bus. */
+exports.OPEN_INTENT = 'ui:cart-requested';
+exports.CLOSE_INTENT = 'ui:modal-close-requested';
+const STRINGS = {
+    close: 'Close cart',
+    privacy: 'Privacy Policy',
+    privacyHref: 'https://ticketlayer.com/privacy',
+    reportAbuse: 'Report Abuse',
+    reportAbuseHref: 'https://ticketlayer.com/report-abuse',
+    poweredBy: 'Powered by',
+    brand: 'ticketlayer',
+    brandHref: 'https://ticketlayer.com',
+};
+exports.cartDrawerCore = (0, define_js_1.defineElement)({
+    tag: 'tl-cart-drawer',
+    docs: 'A slide-in panel holding the cart, opened by the cart intent on the client bus.',
+    category: 'cart',
+    runtimes: ['web'],
+    tokens: ['background', 'border', 'font-family', 'foreground', 'muted', 'muted-foreground'],
+    sdkMethods: ['client.on'],
+    props: {
+        side: {
+            type: 'string',
+            tsType: '"left" | "right"',
+            attr: 'side',
+            default: 'right',
+            docs: 'Edge the panel slides in from.',
+        },
+        heading: {
+            type: 'string',
+            attr: 'heading',
+            default: 'Your cart',
+            docs: 'Heading shown at the top of the panel.',
+        },
+        open: {
+            type: 'boolean',
+            attr: 'open',
+            default: false,
+            docs: 'Controlled open state (also driven by the `ui:cart-requested` intent).',
+        },
+    },
+    events: {
+        tlOpen: { detail: 'void', docs: '' },
+        tlClose: { detail: 'void', docs: '' },
+    },
+    strings: STRINGS,
+    statuses: ['open', 'closed'],
+    state: (props) => ({ visible: props.open }),
+    /**
+     * On screen: take the `open` prop as it stands, then listen for the intents.
+     *
+     * Taking the prop again is what the component's `connectedCallback` did, and
+     * it matters here for a second reason: an instance is built before a harness
+     * has read its attributes, so the state a constructor could see is the
+     * default rather than the host's.
+     */
+    mount: (ctx) => {
+        ctx.actions.openChanged(ctx.props.open);
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                // No client, no intents. The drawer still opens from its `open` prop.
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const offOpen = client.on?.(exports.OPEN_INTENT, () => ctx.actions.setOpen(true));
+            if (typeof offOpen === 'function')
+                ctx.onTeardown(offOpen);
+            const offClose = client.on?.(exports.CLOSE_INTENT, () => ctx.actions.setOpen(false));
+            if (typeof offClose === 'function')
+                ctx.onTeardown(offClose);
+        })();
+    },
+    status: ({ state }) => (state.visible ? 'open' : 'closed'),
+    derive: ({ state, props }) => ({
+        visible: state.visible,
+        sideClass: `panel--${props.side}`,
+        ariaHidden: state.visible ? 'false' : 'true',
+    }),
+    actions: (ctx) => ({
+        /** Open or close, and say so. Asking for the state it is already in is nothing. */
+        setOpen(open) {
+            if (ctx.state.visible === open)
+                return;
+            ctx.setState({ visible: open });
+            ctx.emit(open ? 'tlOpen' : 'tlClose', undefined);
+        },
+        /** The host moved the `open` prop. Follow it, and stay quiet about it. */
+        openChanged(open) {
+            if (ctx.state.visible === open)
+                return;
+            ctx.setState({ visible: open });
+        },
+    }),
+});

package/dist/cjs/cores/cart.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cartCore = void 0;
+/**
+ * `tl-cart`: the cart as a list of lines, its money rows and a checkout button.
+ *
+ * The first core that lives on a subscription. It reads the cart once when a
+ * harness mounts it and then keeps itself current from the client's
+ * `cart:updated` bus, binding that subscription inside its own `mount` and
+ * handing the unsubscribe to `ctx.onTeardown` (TKT-197). No harness owns a
+ * subscription any more, on any runtime, and a remount cannot leave two
+ * behind: `createElement` keeps at most one mount live.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter:
+ * the same money rows through `cartTotals`, the same compact mode, the same
+ * silence when the host published no client, the same events in the same
+ * order. What did not come across is the `console.log` tracing, which a library
+ * should not do for its host.
+ */
+const define_js_1 = require("../define.js");
+const money_js_1 = require("../money.js");
+const STRINGS = {
+    emptyTitle: 'Your cart is empty',
+    emptyMessage: 'Add tickets to get started',
+    subtotalRow: 'Subtotal',
+    discountRow: 'Discount',
+    totalRow: 'Total',
+    removeItem: 'Remove item',
+    quantityPrefix: 'Qty: ',
+    loadFailed: 'Failed to load cart',
+    removeFailed: 'Failed to remove item',
+};
+/**
+ * The occurrence date, as the component formatted it.
+ *
+ * `en-GB` is written here rather than taken from the instance's locale because
+ * that is what the component did, and this split is behaviour-identical. There
+ * is no locale on the view context today; `formatMoney` closes over one and
+ * nothing else does.
+ */
+function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+exports.cartCore = (0, define_js_1.defineElement)({
+    tag: 'tl-cart',
+    docs: "The buyer's cart: its lines, the money rows the surface reported and a checkout button.",
+    category: 'cart',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'error-bg',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'radius-sm',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'spacing-8',
+    ],
+    sdkMethods: ['cart.get', 'cart.on', 'cart.removeItem'],
+    props: {
+        showCheckoutButton: {
+            type: 'boolean',
+            attr: 'show-checkout-button',
+            default: true,
+            docs: 'Show checkout button',
+        },
+        checkoutLabel: {
+            type: 'string',
+            attr: 'checkout-label',
+            default: 'Checkout',
+            docs: 'Checkout button label',
+        },
+        showRemoveButtons: {
+            type: 'boolean',
+            attr: 'show-remove-buttons',
+            default: true,
+            docs: 'Show remove item buttons',
+        },
+        compact: { type: 'boolean', attr: 'compact', default: false, docs: 'Compact mode - hides some details' },
+    },
+    events: {
+        tlCheckout: { detail: '{ cart: TlCartData; }', docs: 'Emitted when checkout is clicked' },
+        tlItemRemoved: { detail: '{ itemId: string; }', docs: 'Emitted when item is removed' },
+        tlCartUpdated: { detail: '{ cart: TlCartData; }', docs: 'Emitted when cart is updated' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted on error' },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'empty', 'ready'],
+    state: () => ({ cart: null, loading: true, error: null, removingItemId: null }),
+    /**
+     * On screen: wait for the host's client, subscribe to the cart, then read it.
+     *
+     * Subscribing before the read is deliberate. The component started both at
+     * once (`componentWillLoad` read, `componentDidLoad` subscribed) and so could
+     * miss an update that landed mid-read; going first closes that window
+     * without changing anything a host can see.
+     *
+     * The subscription is the cart manager's and not the client's: the connector
+     * adapts the payload on the cart manager's bus and passes it through
+     * untouched on the client's, and this element renders the adapted figures.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed(err instanceof Error ? err.message : ctx.strings.loadFailed);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const manager = client.getCartManager?.();
+            const off = manager?.on?.('cart:updated', (data) => {
+                ctx.actions.cartUpdated(data);
+            });
+            if (typeof off === 'function')
+                ctx.onTeardown(off);
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state }) => state.loading ? 'loading' : !state.cart || state.cart.items.length === 0 ? 'empty' : 'ready',
+    derive: (ctx) => {
+        const { state, strings, props, formatMoney } = ctx;
+        // Money comes from the response through cartTotals: the fee row is shown
+        // when the surface expressed a fee, and the total is the server's figure,
+        // never a sum taken here.
+        const totals = (0, money_js_1.cartTotals)(state.cart);
+        const currency = totals.currency;
+        const items = state.cart?.items ?? [];
+        return {
+            rows: items.map((item) => ({
+                id: item.id,
+                name: item.ticketTypeName,
+                eventName: item.eventName,
+                dateLabel: item.occurrenceDate ? formatDate(item.occurrenceDate) : null,
+                quantityLabel: `${strings.quantityPrefix}${item.quantity}`,
+                priceLabel: formatMoney(item.totalPrice, item.currency),
+                removing: state.removingItemId === item.id,
+                showEvent: !props.compact,
+                showDate: !props.compact && !!item.occurrenceDate,
+            })),
+            totals,
+            subtotalLabel: formatMoney(totals.subtotal, currency),
+            feeAmountLabel: formatMoney(totals.fees, currency),
+            discountLabel: formatMoney(totals.discount, currency),
+            totalLabel: formatMoney(totals.total, currency),
+            showSubtotalRow: !props.compact,
+            showFeeRow: totals.showFee && !props.compact,
+            showDiscountRow: totals.discount > 0 && !props.compact,
+            checkoutDisabled: items.length === 0,
+        };
+    },
+    actions: (ctx) => ({
+        /** Read the cart as it stands. */
+        async load() {
+            try {
+                ctx.setState({ loading: true, error: null });
+                const manager = ctx.optionalClient()?.getCartManager?.();
+                if (manager) {
+                    // Bound rather than called optionally: a connector that carries a
+                    // cart manager without a `get` is broken, and the component said so
+                    // through tlError rather than rendering an empty cart.
+                    const read = manager.get?.bind(manager);
+                    if (!read)
+                        throw new TypeError('cartManager.get is not a function');
+                    ctx.setState({ cart: ((await read()) ?? null) });
+                }
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.loadFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /** The cart changed under us. Show it, and tell the host. */
+        cartUpdated(cart) {
+            ctx.setState({ cart });
+            ctx.emit('tlCartUpdated', { cart });
+        },
+        /**
+         * Take one line out of the cart. With no client at all, nothing happens
+         * and nothing is announced: the buyer's click is simply inert, which is
+         * what it was before.
+         */
+        async removeItem(itemId) {
+            if (!ctx.optionalClient())
+                return;
+            ctx.setState({ removingItemId: itemId });
+            try {
+                const manager = ctx.client().getCartManager?.();
+                if (manager) {
+                    const remove = manager.removeItem?.bind(manager);
+                    if (!remove)
+                        throw new TypeError('cartManager.removeItem is not a function');
+                    await remove(itemId);
+                    ctx.emit('tlItemRemoved', { itemId });
+                }
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.removeFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ removingItemId: null });
+            }
+        },
+        /** Hand the cart to whatever the host does next. An empty cart says nothing. */
+        checkout() {
+            const cart = ctx.state.cart;
+            if (cart && cart.items.length > 0)
+                ctx.emit('tlCheckout', { cart });
+        },
+        /**
+         * The host never produced a client. Announced, because the component
+         * announced it: the read and the wait were one try block, so a page that
+         * never started Live emitted tlError.
+         */
+        connectFailed(message) {
+            const text = message || ctx.strings.loadFailed;
+            ctx.setState({ error: text, loading: false });
+            ctx.emit('tlError', { message: text });
+        },
+    }),
+});

package/dist/cjs/cores/checkout-wrapper.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkoutWrapperCore = void 0;
+/**
+ * `tl-checkout-wrapper`: the same idea as `tl-buy-tickets-wrapper`, pointed at
+ * the checkout rather than at one event.
+ *
+ * Whatever the host slots in becomes the thing that opens the checkout modal
+ * for the cart as it stands, so this core takes no subject at all: the cart is
+ * the client's, and the modal is the client's.
+ *
+ * It was blocked from being split by the same thing its sibling was - events
+ * named `tl-complete`, `tl-error` and `tl-close`, which `defineElement`
+ * refuses - and is unblocked by the same rename to `tlComplete`, `tlError` and
+ * `tlClose` (TKT-203).
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * `tlError` a click announces when no client has been published; the
+ * `console.error` beside it did not come across, for the reason `tl-cart` and
+ * `tl-promo-code` dropped theirs.
+ */
+const define_js_1 = require("../define.js");
+const STRINGS = {
+    noClient: 'SDK not initialized',
+    notAvailable: 'Checkout is not available',
+};
+exports.checkoutWrapperCore = (0, define_js_1.defineElement)({
+    tag: 'tl-checkout-wrapper',
+    docs: 'Wrap any content and open the checkout modal when it is activated.',
+    category: 'checkout',
+    runtimes: ['web'],
+    tokens: ['radius-sm', 'ring'],
+    sdkMethods: ['checkout.openModal'],
+    props: {
+        disabled: {
+            type: 'boolean',
+            attr: 'disabled',
+            default: false,
+            docs: 'Whether the wrapper is disabled',
+        },
+    },
+    events: {
+        // `OrderResult` because that is the name the web harness writes; see
+        // `buy-tickets-wrapper.ts`.
+        tlComplete: { detail: 'OrderResult', docs: 'Emitted when checkout completes successfully' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when an error occurs' },
+        tlClose: { detail: 'void', docs: 'Emitted when the modal closes' },
+    },
+    strings: STRINGS,
+    statuses: ['ready', 'disabled'],
+    state: () => ({}),
+    status: ({ props }) => (props.disabled ? 'disabled' : 'ready'),
+    derive: ({ props }) => ({ interactive: !props.disabled }),
+    actions: (ctx) => ({
+        /** A click, a tap, Enter or Space: whatever the harness calls a press. */
+        activate() {
+            if (ctx.props.disabled)
+                return;
+            const client = ctx.optionalClient();
+            if (!client) {
+                ctx.emit('tlError', { message: ctx.strings.noClient });
+                return;
+            }
+            if (!client.checkout) {
+                ctx.emit('tlError', { message: ctx.strings.notAvailable });
+                return;
+            }
+            client.checkout.openModal({
+                onComplete: (order) => ctx.emit('tlComplete', order),
+                onError: (err) => ctx.emit('tlError', { message: err.message }),
+                onClose: () => ctx.emit('tlClose', undefined),
+            });
+        },
+    }),
+});

package/dist/cjs/cores/event-card.js

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eventCardCore = void 0;
+exports.toEventCardEvent = toEventCardEvent;
+/**
+ * `tl-event-card`: one event, as a card.
+ *
+ * Two ways to fill it, which is the whole of its behaviour: a host hands it an
+ * event through the `event` prop (that is what `tl-event-list` does), or it is
+ * given an `eventId` and reads the event itself. The prop wins, and a card that
+ * has one never touches the client.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter,
+ * including the status badge's three labels and the `en-GB` date. What did not
+ * come across is the `console.log` tracing, which a library should not do for
+ * its host.
+ */
+const define_js_1 = require("../define.js");
+/**
+ * Adapt an event detail to the card shape. The list adapter lives in the SDK
+ * connector; this one is the card's own, and it is behaviour, so it is here.
+ */
+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',
+    };
+}
+const STRINGS = {
+    available: 'Available',
+    limited: 'Limited',
+    soldOut: 'Sold Out',
+    notFound: 'Event not found',
+    loadFailed: 'Failed to load event',
+};
+/** As the component formatted it. See the note on the cart core's date. */
+function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+exports.eventCardCore = (0, define_js_1.defineElement)({
+    tag: 'tl-event-card',
+    docs: 'One event as a card: its image, name, next date, venue and how it is selling.',
+    category: 'discovery',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'error',
+        'error-foreground',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'radius-lg',
+        'radius-sm',
+        'secondary',
+        'spacing-4',
+        'success',
+        'success-foreground',
+        'warning',
+        'warning-foreground',
+    ],
+    sdkMethods: ['events.get'],
+    props: {
+        event: {
+            type: 'object',
+            tsType: 'TlEventCardEvent | undefined',
+            attr: null,
+            docs: 'Event data to display (tl-event-list passes this)',
+        },
+        eventId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'event-id',
+            docs: '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).',
+        },
+    },
+    events: {
+        tlClick: { detail: '{ eventId: string; }', docs: 'Emitted when the card is clicked' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when the event could not be loaded by id' },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'error', 'empty', 'ready'],
+    state: () => ({ loadedEvent: null, loading: false, error: null }),
+    /**
+     * On screen: read the event, but only when there is one to read and nobody
+     * has handed us the event already.
+     *
+     * `loading` is set here, synchronously, rather than inside the read. The
+     * component awaited its load in `componentWillLoad`, so its first paint was
+     * already past it; a mount hook cannot hold the first paint, so the card
+     * shows its own skeleton instead of a blank. That is the same change
+     * `tl-ticket-selector` took when it moved onto the hook (TKT-197).
+     */
+    mount: (ctx) => {
+        if (ctx.props.event || !ctx.props.eventId)
+            return;
+        ctx.setState({ loading: true, error: null });
+        void (async () => {
+            try {
+                await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.loadFailed(err instanceof Error && err.message ? err.message : ctx.strings.loadFailed);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state, props }) => state.loading ? 'loading' : state.error ? 'error' : props.event || state.loadedEvent ? 'ready' : 'empty',
+    derive: ({ state, props, strings }) => {
+        const event = props.event ?? state.loadedEvent;
+        const badge = (suffix) => `status-badge ${suffix}`;
+        const status = event?.availabilityStatus;
+        return {
+            event,
+            // The sales surface exposes a single `imageUrl` (card/listing
+            // thumbnail); `thumbnailUrl` is an accepted alias if a host ever
+            // supplies a distinct one.
+            image: event ? event.thumbnailUrl || event.imageUrl || null : null,
+            statusBadgeClass: status === 'available'
+                ? badge('status-available')
+                : status === 'limited'
+                    ? badge('status-limited')
+                    : status === 'sold_out'
+                        ? badge('status-sold-out')
+                        : 'status-badge',
+            statusLabel: status === 'available'
+                ? strings.available
+                : status === 'limited'
+                    ? strings.limited
+                    : status === 'sold_out'
+                        ? strings.soldOut
+                        : '',
+            dateLabel: event?.nextOccurrence ? formatDate(event.nextOccurrence.startsAt) : null,
+            venueLabel: event?.venue ? `${event.venue.name}, ${event.venue.city}` : null,
+        };
+    },
+    actions: (ctx) => ({
+        /**
+         * Read the event by id. A card that was handed an event, or has no id, has
+         * nothing to read, and this is the guard the component's watcher relied on.
+         */
+        async load() {
+            if (ctx.props.event || !ctx.props.eventId)
+                return;
+            try {
+                ctx.setState({ loading: true, error: null });
+                const events = ctx.client().getEventsManager();
+                const read = events.get?.bind(events);
+                if (!read)
+                    throw new TypeError('eventsManager.get is not a function');
+                const detail = (await read(ctx.props.eventId));
+                if (!detail)
+                    throw new Error(ctx.strings.notFound);
+                ctx.setState({ loadedEvent: toEventCardEvent(detail) });
+            }
+            catch (err) {
+                const message = err instanceof Error && err.message ? err.message : ctx.strings.loadFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /**
+         * The host never produced a client. Announced, because the component
+         * announced it: the wait and the read were one try block.
+         */
+        loadFailed(message) {
+            const text = message || ctx.strings.loadFailed;
+            ctx.setState({ error: text, loading: false });
+            ctx.emit('tlError', { message: text });
+        },
+        /** The buyer picked this card. Where that goes is the host's business. */
+        click() {
+            const event = ctx.props.event ?? ctx.state.loadedEvent;
+            if (!event)
+                return;
+            ctx.emit('tlClick', { eventId: event.id });
+        },
+    }),
+});