@ticketlayer/elements 0.4.0 → 1.0.0

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

@@ -16,6 +16,43 @@
   width: 100%;
 }
 
+/* Sale states
+ *
+ * One state, one @ticketlayer/theme token family, and the hover derived from
+ * the same token rather than written down a second time, so a themed palette
+ * carries every state with it (TKT-203). These used to be literal hex in the
+ * component: red for sold out, blue for the waitlist, amber for coming soon,
+ * and a themed channel painted the available state and none of the others.
+ *
+ * The class comes from the core (`derived.stateClass`), which names the state
+ * and nothing more: a core may hold no value and has no shape for saying WHICH
+ * family a status paints with, so that decision is made here, exactly as
+ * tl-event-card's status badge makes it.
+ */
+.state-available {
+  --button-color: var(--tl-primary);
+  --button-hover-color: color-mix(in srgb, var(--tl-primary) 90%, black);
+  --button-foreground: var(--tl-primary-foreground);
+}
+
+.state-sold-out {
+  --button-color: var(--tl-error);
+  --button-hover-color: color-mix(in srgb, var(--tl-error) 90%, black);
+  --button-foreground: var(--tl-error-foreground);
+}
+
+.state-waitlist {
+  --button-color: var(--tl-info);
+  --button-hover-color: color-mix(in srgb, var(--tl-info) 90%, black);
+  --button-foreground: var(--tl-info-foreground);
+}
+
+.state-coming-soon {
+  --button-color: var(--tl-warning);
+  --button-hover-color: color-mix(in srgb, var(--tl-warning) 90%, black);
+  --button-foreground: var(--tl-warning-foreground);
+}
+
 .buy-button {
   display: inline-flex;
   align-items: center;

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

@@ -5,11 +5,20 @@
  *
  * @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
+ * The web harness for `buyTicketsButtonCore`. What a press does, which states
+ * are not pressable, the label each state defaults to and how the price reads
+ * are all in `@ticketlayer/elements-core` (AGENTS.md, TKT-11); what is left
+ * here is the Stencil surface, the icons, the hover, and which key counts as a
+ * press.
+ *
+ * Each state is painted from a @ticketlayer/theme token family rather than
+ * from a literal, so a channel theme reaches every one of them. The core says
+ * which state the button is in and the stylesheet says which family that
+ * state paints with, because a core cannot map a status onto one:
+ * - available: "Buy Tickets", the primary family
+ * - soldOut: "Sold Out", the error family
+ * - waitlist: "Join Waitlist", the info family
+ * - comingSoon: "On Sale Soon", the warning family
  *
  * @example
  * <tl-buy-tickets-button event-id="evt_xxx"></tl-buy-tickets-button>
@@ -17,37 +26,8 @@
  * <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)',
-        // The hover shade used to be a second colour smuggled into the token's
-        // fallback slot, which meant it stopped following the channel's brand the
-        // moment a theme was applied. Derive it instead.
-        hoverColor: 'color-mix(in srgb, var(--tl-primary) 90%, black)',
-        foreground: 'var(--tl-primary-foreground)',
-    },
-    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',
-    },
-};
+import { buyTicketsButtonCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 export class TlBuyTicketsButton {
     constructor() {
         /** Button state - determines colour, label, and icon */
@@ -67,65 +47,74 @@ export class TlBuyTicketsButton {
         // -------------------------------------------------------------------------
         // State
         // -------------------------------------------------------------------------
+        /**
+         * Whether the pointer is over the button. A pointer is not a fact every
+         * runtime has, so this stays here for the same reason the key handling
+         * does: the core knows nothing of mice.
+         */
         this.isHovered = false;
         // -------------------------------------------------------------------------
-        // Methods
+        // The core
         // -------------------------------------------------------------------------
+        this.element = createElement(buyTicketsButtonCore, {
+            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 = () => {
-            // 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);
-                }
-            }
+            this.element.actions.activate();
         };
     }
-    formatPrice(priceInMinorUnits) {
-        const amount = priceInMinorUnits / 100;
-        const hasDecimals = amount % 1 !== 0;
-        return new Intl.NumberFormat('en-GB', {
-            style: 'currency',
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            state: this.state,
+            label: this.label,
+            variant: this.variant,
+            size: this.size,
+            fullWidth: this.fullWidth,
+            price: this.price,
             currency: this.currency,
-            minimumFractionDigits: hasDecimals ? 2 : 0,
-            maximumFractionDigits: hasDecimals ? 2 : 0,
-        }).format(amount);
+            pricePrefix: this.pricePrefix,
+            disabled: this.disabled,
+        });
     }
-    getStateConfig() {
-        return STATE_CONFIGS[this.state];
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        // This core has nothing to do on mount, and is mounted anyway: a harness
+        // calls mount() unconditionally and pairs it with its teardown (TKT-197).
+        this.teardown = this.element.mount();
     }
-    isInteractive() {
-        return !this.disabled && this.state !== 'soldOut' && this.state !== 'comingSoon';
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlClick')
+            this.tlClick.emit(detail);
     }
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
     render() {
-        const config = this.getStateConfig();
-        const buttonLabel = this.label || config.defaultLabel;
-        const isInteractive = this.isInteractive();
-        return (h(Host, { key: '86ee9a81d82c10398dab4e22b3bbae15abb8f449', class: { 'full-width': this.fullWidth } }, h("button", { key: 'b581e199ced7ffd14669ebe0cc727edc2f8c8914', type: "button", class: {
+        const { interactive, buttonLabel, stateClass, priceLabel } = this.view.derived;
+        return (h(Host, { key: '6d5dddb3fc486c5a877a3718fecbee80a648b274', class: { 'full-width': this.fullWidth } }, h("button", { key: '88f7f0688fb42e97eb2ce352f316b2a085c3bab5', type: "button", class: {
                 'buy-button': true,
+                [stateClass]: 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: 'f776bab4a999ed36b25400424d639b4c9261c02a', 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: 'e98ecbe6debc5c2c18ce1d304b60bf1074b003b3', class: "label" }, buttonLabel), this.price !== undefined && (h("span", { key: 'e7e261d09a541b126b02b88d00992f3a6483a9b8', class: "price" }, h("span", { key: '5eab43a47c2dd4c1339fe84b583902b1e38a0b2a', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'f03b514ff2bc3c9a1b2e922d93a92accdedd0fad', class: "price-value" }, this.formatPrice(this.price)))))));
+                'disabled': !interactive,
+                'hovered': this.isHovered && interactive,
+            }, disabled: !interactive, onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("span", { key: 'e88c2f05c7bc782d08d78fc8ab53b213ab3c833f', 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: '7290a58779e884886f26e64c405fd319811613a1', class: "label" }, buttonLabel), priceLabel !== null && (h("span", { key: 'bdf3bcdbfa29d4799f7a64bc0072a4c06c09c393', class: "price" }, h("span", { key: '32b075fc6793ef21e9a2cd188058992f95c10680', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'ff3805b660b2af72a94fabc315507ce063ff02d2', class: "price-value" }, priceLabel))))));
     }
     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" })));
@@ -391,7 +380,8 @@ export class TlBuyTicketsButton {
     }
     static get states() {
         return {
-            "isHovered": {}
+            "isHovered": {},
+            "view": {}
         };
     }
     static get events() {
@@ -412,4 +402,40 @@ export class TlBuyTicketsButton {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "occurrenceId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "state",
+                "methodName": "syncProps"
+            }, {
+                "propName": "label",
+                "methodName": "syncProps"
+            }, {
+                "propName": "variant",
+                "methodName": "syncProps"
+            }, {
+                "propName": "size",
+                "methodName": "syncProps"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "syncProps"
+            }, {
+                "propName": "price",
+                "methodName": "syncProps"
+            }, {
+                "propName": "currency",
+                "methodName": "syncProps"
+            }, {
+                "propName": "pricePrefix",
+                "methodName": "syncProps"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncProps"
+            }];
+    }
 }

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

@@ -1,11 +1,18 @@
 import { h, Host } from "@stencil/core";
-import { getSDK, hasSDK } from "../../utils/sdk-connector";
+import { buyTicketsWrapperCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } 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.
  *
+ * The web harness for `buyTicketsWrapperCore`. What a press does, what it
+ * announces and what happens when no client has been published are all in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11); what is left here is the
+ * Stencil surface, the accessibility attributes and the one genuinely web
+ * question the core refuses to answer - which key counts as a press.
+ *
  * @slot - Content to display (typically a button)
  *
  * @example
@@ -24,41 +31,61 @@ export class TlBuyTicketsWrapper {
          * Whether the wrapper is disabled
          */
         this.disabled = false;
+        this.element = createElement(buyTicketsWrapperCore, {
+            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-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.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({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            disabled: this.disabled,
+        });
+    }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        // This core has nothing to do on mount, and is 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: 'd6ef81ac9bc1a1194eda1603cbb2a75b355a212e', class: {
+        const { interactive } = this.view.derived;
+        return (h(Host, { key: '14e91259c1401322f969d43bb16b6d3f20327c65', 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' })));
+                'tl-buy-tickets-wrapper--disabled': !interactive,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: interactive ? 0 : -1, "aria-disabled": interactive ? null : 'true' }, h("slot", { key: '3fb33786e09f5ecdf20ff0ea8e7336ccfc43b216' })));
     }
     static get is() { return "tl-buy-tickets-wrapper"; }
     static get originalStyleUrls() {
@@ -133,10 +160,15 @@ export class TlBuyTicketsWrapper {
             }
         };
     }
+    static get states() {
+        return {
+            "view": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "tlComplete",
-                "name": "tl-complete",
+                "name": "tlComplete",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -158,7 +190,7 @@ export class TlBuyTicketsWrapper {
                 }
             }, {
                 "method": "tlError",
-                "name": "tl-error",
+                "name": "tlError",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -173,7 +205,7 @@ export class TlBuyTicketsWrapper {
                 }
             }, {
                 "method": "tlClose",
-                "name": "tl-close",
+                "name": "tlClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -188,5 +220,16 @@ export class TlBuyTicketsWrapper {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "occurrenceId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncProps"
+            }];
+    }
 }