@code-collective/booking-widget 1.0.12 → 1.0.13

package/src/lib/elements/bw-configurator.svelte

@@ -1,72 +1,72 @@
-<svelte:options customElement={{ tag: 'bw-configurator', shadow: 'none' }} />
-
-<script lang="ts">
-  import TicketConfigurator from '../TicketConfigurator.svelte';
-  import { resolveWizardPages } from '../config';
-  import { onWidgetMessage, postMessage } from '../messages';
-  import { getSharedServices } from './shared';
-
-  let {
-    'product-id': productId = '',
-    'wizard-pages': wizardPagesJson = '',
-    'auto-select-single-time-slot': autoSelectSingleTimeSlot = undefined,
-    'no-auto-checkout': noAutoCheckout = undefined,
-    cancelable = undefined,
-  } = $props();
-
-  const { api, cartManager, ready: readyPromise } = getSharedServices();
-
-  let ready = $state(false);
-  readyPromise.then(() => { ready = true; });
-
-  let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
-
-  // Each instance dispatches on its own element, found by walking up from a node it rendered. It used to
-  // use document.querySelector('bw-configurator'), which is the *first* one on the page - so with two of these
-  // elements every event was dispatched twice on that first element (and the second element never received
-  // its own at all). The shipped demo has two <bw-cart>, so that was not hypothetical.
-  //
-  // Walking up rather than $host(): these wrappers are compiled both with and without customElement (the
-  // elements build and the test/ES build), and $host() only exists in the former. With no custom element
-  // above it - which is how the tests mount these - closest() finds nothing and body carries the event,
-  // which still reaches window.
-  let anchor = $state<HTMLElement | null>(null);
-
-  function dispatch(name: string, detail: unknown) {
-    const target = anchor?.closest('bw-configurator') ?? document.body;
-    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
-  }
-
-  // Forward postMessage events as CustomEvents
-  $effect(() => onWidgetMessage((d) => {
-    if (d.type === 'cart:change') {
-      dispatch('bw:cart-change', {
-        itemCount: d.itemCount ?? 0,
-        cartItemId: d.cartItemId ?? '',
-        totalFormatted: d.totalFormatted ?? '',
-      });
-    }
-  }));
-
-  const onCancel = cancelable !== undefined
-    ? () => { postMessage({ type: 'modal:close' }); dispatch('bw:cancel', {}); }
-    : undefined;
-</script>
-
-<!-- display: contents so this is only an anchor for dispatch(), never a box in the layout. -->
-<div style="display: contents" bind:this={anchor}>
-  {#if ready}
-    <TicketConfigurator
-      {api}
-      {cartManager}
-      {productId}
-      {wizardPages}
-      autoSelectSingleTimeSlot={autoSelectSingleTimeSlot !== undefined}
-      autoOpenCheckout={noAutoCheckout === undefined}
-      {onCancel}
-    />
-  {:else}
-    <div class="loading-center"><div class="spinner"></div></div>
-  {/if}
-</div>
-
+<svelte:options customElement={{ tag: 'bw-configurator', shadow: 'none' }} />
+
+<script lang="ts">
+  import TicketConfigurator from '../TicketConfigurator.svelte';
+  import { resolveWizardPages } from '../config';
+  import { onWidgetMessage, postMessage } from '../messages';
+  import { getSharedServices } from './shared';
+
+  let {
+    'product-id': productId = '',
+    'wizard-pages': wizardPagesJson = '',
+    'auto-select-single-time-slot': autoSelectSingleTimeSlot = undefined,
+    'no-auto-checkout': noAutoCheckout = undefined,
+    cancelable = undefined,
+  } = $props();
+
+  const { api, cartManager, ready: readyPromise } = getSharedServices();
+
+  let ready = $state(false);
+  readyPromise.then(() => { ready = true; });
+
+  let wizardPages = $derived(resolveWizardPages(wizardPagesJson));
+
+  // Each instance dispatches on its own element, found by walking up from a node it rendered. It used to
+  // use document.querySelector('bw-configurator'), which is the *first* one on the page - so with two of these
+  // elements every event was dispatched twice on that first element (and the second element never received
+  // its own at all). The shipped demo has two <bw-cart>, so that was not hypothetical.
+  //
+  // Walking up rather than $host(): these wrappers are compiled both with and without customElement (the
+  // elements build and the test/ES build), and $host() only exists in the former. With no custom element
+  // above it - which is how the tests mount these - closest() finds nothing and body carries the event,
+  // which still reaches window.
+  let anchor = $state<HTMLElement | null>(null);
+
+  function dispatch(name: string, detail: unknown) {
+    const target = anchor?.closest('bw-configurator') ?? document.body;
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  // Forward postMessage events as CustomEvents
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:change') {
+      dispatch('bw:cart-change', {
+        itemCount: d.itemCount ?? 0,
+        cartItemId: d.cartItemId ?? '',
+        totalFormatted: d.totalFormatted ?? '',
+      });
+    }
+  }));
+
+  const onCancel = cancelable !== undefined
+    ? () => { postMessage({ type: 'modal:close' }); dispatch('bw:cancel', {}); }
+    : undefined;
+</script>
+
+<!-- display: contents so this is only an anchor for dispatch(), never a box in the layout. -->
+<div style="display: contents" bind:this={anchor}>
+  {#if ready}
+    <TicketConfigurator
+      {api}
+      {cartManager}
+      {productId}
+      {wizardPages}
+      autoSelectSingleTimeSlot={autoSelectSingleTimeSlot !== undefined}
+      autoOpenCheckout={noAutoCheckout === undefined}
+      {onCancel}
+    />
+  {:else}
+    <div class="loading-center"><div class="spinner"></div></div>
+  {/if}
+</div>
+

package/src/lib/elements/register.ts

@@ -1,171 +1,171 @@
-// The custom-elements build's DOM adapter. Everything it used to decide for itself - when checkout opens,
-// where the expiry guard lives, what the site-wide defaults are - now lives in host.svelte.ts, which the ES
-// build reaches too. What is left here is genuinely DOM: read attributes and window.bwOptions, and bind
-// bw:* events to the host.
-
-import '../app.css';
-import { createBookingHost, setBookingDefaults } from '../host.svelte';
-import { defaultApiBaseUrl } from './env';
-
-interface BwOptions {
-  shouldBottomCloseOnModal: boolean;
-  autoSelectSingleTimeSlot: boolean;
-  autoOpenCheckout: boolean;
-  wizardPages: string;
-  editPages: string;
-}
-
-const defaultOptions: BwOptions = {
-  shouldBottomCloseOnModal: true,
-  autoSelectSingleTimeSlot: false,
-  autoOpenCheckout: true,
-  wizardPages: '',
-  editPages: '',
-};
-
-const options: BwOptions = {
-  ...defaultOptions,
-  ...((window as any)['bwOptions'] ?? {}),
-};
-
-// Bootstrap the host BEFORE element imports trigger connectedCallback. Elements read from
-// window.__bwServices instead of importing shared.ts, because the IIFE bundler inlines imports per-element -
-// a module-level singleton would be duplicated. window is the only truly shared scope.
-const checkoutKey = document.querySelector('[checkout-key]')?.getAttribute('checkout-key') ?? '';
-
-// Same values the host is built with, so an ES consumer sharing this page (an island alongside the elements)
-// creates hosts that behave identically without restating them.
-setBookingDefaults({
-  apiBaseUrl: defaultApiBaseUrl,
-  checkoutKey,
-  autoOpenCheckout: options.autoOpenCheckout,
-  shouldBottomCloseOnModal: options.shouldBottomCloseOnModal,
-  autoSelectSingleTimeSlot: options.autoSelectSingleTimeSlot,
-});
-
-const host = createBookingHost({
-  apiBaseUrl: defaultApiBaseUrl,
-  checkoutKey,
-  autoOpenCheckout: options.autoOpenCheckout,
-  shouldBottomCloseOnModal: options.shouldBottomCloseOnModal,
-  // Cart-global, not tied to any one element (unlike the bw:* events forwarded per-element in autoWire
-  // below). Carries the same cart TicketConfigurator/CheckoutModal already fetch for their own use, so a
-  // consumer can build a custom cart summary without calling the checkout API directly.
-  onCartUpdated: (cart) => dispatchOnWindow('bw:cart-updated', { cart }),
-  onCartExpired: () => dispatchOnWindow('bw:cart-expired', {}),
-  onCheckoutOpenChange: onCheckoutOpenChange,
-});
-
-(window as any).__bwServices = {
-  api: host.api,
-  cartManager: host.cartManager,
-  ready: host.ready,
-  host,
-};
-
-function dispatchOnWindow(name: string, detail: unknown) {
-  window.dispatchEvent(new CustomEvent(name, { detail }));
-}
-
-function whenDomReady(fn: () => void) {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', fn, { once: true });
-  } else {
-    fn();
-  }
-}
-
-import './bw-configurator.svelte';
-import './bw-cart.svelte';
-import './bw-checkout.svelte';
-
-function cartElements(): HTMLElement[] {
-  return [...document.querySelectorAll<HTMLElement>('bw-cart')];
-}
-
-function setCartBarsHidden(hidden: boolean) {
-  cartElements().forEach((el) => {
-    if (el.getAttribute('display') !== 'bar') return;
-    el.parentElement?.classList.toggle('hidden', hidden);
-    if (!hidden) el.style.display = '';
-  });
-}
-
-// Called on the first add, to reveal carts a merchant left hidden until there was something in them. The
-// host subscribes to the message bus before any element does, so by the time this runs it has already opened
-// checkout for this same add and hidden the bottom bars - revealing everything unconditionally would put a
-// bar straight back over the modal, which is the one thing shouldBottomCloseOnModal exists to prevent.
-function showCarts() {
-  cartElements().forEach((el) => {
-    el.parentElement?.classList.remove('hidden');
-    el.style.display = '';
-  });
-  if (host.options.shouldBottomCloseOnModal) setCartBarsHidden(host.isCheckoutOpen);
-}
-
-// The host owns whether checkout is open; bw-checkout renders from the same state. All this has to do is
-// tell the page about it.
-function onCheckoutOpenChange(open: boolean) {
-  dispatchOnWindow(open ? 'bw:modal-open' : 'bw:modal-close', {});
-  if (host.options.shouldBottomCloseOnModal) setCartBarsHidden(open);
-}
-
-function autoWire() {
-  const configurators = document.querySelectorAll('bw-configurator');
-  const carts = document.querySelectorAll('bw-cart');
-  const checkouts = document.querySelectorAll('bw-checkout');
-
-  const allElements = [...configurators, ...carts, ...checkouts];
-
-  // Apply options as element attributes
-  if (options.wizardPages) {
-    allElements.forEach((el) => {
-      if (!el.hasAttribute('wizard-pages')) {
-        el.setAttribute('wizard-pages', options.wizardPages);
-      }
-    });
-  }
-
-  // edit-pages only affects the checkout edit-item accordion, so it's only meaningful on bw-checkout.
-  if (options.editPages) {
-    checkouts.forEach((el) => {
-      if (!el.hasAttribute('edit-pages')) {
-        el.setAttribute('edit-pages', options.editPages);
-      }
-    });
-  }
-
-  [...configurators, ...checkouts].forEach((el) => {
-    if (options.autoSelectSingleTimeSlot && !el.hasAttribute('auto-select-single-time-slot')) {
-      el.setAttribute('auto-select-single-time-slot', '');
-    }
-  });
-
-  // Auto-add is-modal to any checkout that doesn't already have it
-  checkouts.forEach((el) => {
-    if (!el.hasAttribute('is-modal') && !el.hasAttribute('is-inline')) {
-      el.setAttribute('is-modal', '');
-    }
-  });
-
-  // Nothing here re-dispatches bw:* on window any more. Every one of them is dispatched on its element with
-  // bubbles+composed, so it reaches window by itself; forwarding a copy as well delivered each event twice,
-  // and a host counting bw:order-confirmed was double-counting orders. Bubbling is also the delivery that
-  // keeps working for an element added to the page after this ran, which a listener bound here would miss.
-  //
-  // Opening checkout is not wired here either: the add posts cart:change with its own openCheckout, the cart
-  // bar's button posts modal:open, and the host acts on both - so no-auto-checkout suppresses the open
-  // through the same branch an ES consumer's autoOpenCheckout: false does.
-  configurators.forEach((el) => {
-    el.addEventListener('bw:cart-change', () => {
-      showCarts();
-
-      const handler = el.getAttribute('on-cart-change');
-      if (handler && typeof (window as any)[handler] === 'function') {
-        (window as any)[handler]();
-      }
-    });
-  });
-}
-
-whenDomReady(autoWire);
+// The custom-elements build's DOM adapter. Everything it used to decide for itself - when checkout opens,
+// where the expiry guard lives, what the site-wide defaults are - now lives in host.svelte.ts, which the ES
+// build reaches too. What is left here is genuinely DOM: read attributes and window.bwOptions, and bind
+// bw:* events to the host.
+
+import '../app.css';
+import { createBookingHost, setBookingDefaults } from '../host.svelte';
+import { defaultApiBaseUrl } from './env';
+
+interface BwOptions {
+  shouldBottomCloseOnModal: boolean;
+  autoSelectSingleTimeSlot: boolean;
+  autoOpenCheckout: boolean;
+  wizardPages: string;
+  editPages: string;
+}
+
+const defaultOptions: BwOptions = {
+  shouldBottomCloseOnModal: true,
+  autoSelectSingleTimeSlot: false,
+  autoOpenCheckout: true,
+  wizardPages: '',
+  editPages: '',
+};
+
+const options: BwOptions = {
+  ...defaultOptions,
+  ...((window as any)['bwOptions'] ?? {}),
+};
+
+// Bootstrap the host BEFORE element imports trigger connectedCallback. Elements read from
+// window.__bwServices instead of importing shared.ts, because the IIFE bundler inlines imports per-element -
+// a module-level singleton would be duplicated. window is the only truly shared scope.
+const checkoutKey = document.querySelector('[checkout-key]')?.getAttribute('checkout-key') ?? '';
+
+// Same values the host is built with, so an ES consumer sharing this page (an island alongside the elements)
+// creates hosts that behave identically without restating them.
+setBookingDefaults({
+  apiBaseUrl: defaultApiBaseUrl,
+  checkoutKey,
+  autoOpenCheckout: options.autoOpenCheckout,
+  shouldBottomCloseOnModal: options.shouldBottomCloseOnModal,
+  autoSelectSingleTimeSlot: options.autoSelectSingleTimeSlot,
+});
+
+const host = createBookingHost({
+  apiBaseUrl: defaultApiBaseUrl,
+  checkoutKey,
+  autoOpenCheckout: options.autoOpenCheckout,
+  shouldBottomCloseOnModal: options.shouldBottomCloseOnModal,
+  // Cart-global, not tied to any one element (unlike the bw:* events forwarded per-element in autoWire
+  // below). Carries the same cart TicketConfigurator/CheckoutModal already fetch for their own use, so a
+  // consumer can build a custom cart summary without calling the checkout API directly.
+  onCartUpdated: (cart) => dispatchOnWindow('bw:cart-updated', { cart }),
+  onCartExpired: () => dispatchOnWindow('bw:cart-expired', {}),
+  onCheckoutOpenChange: onCheckoutOpenChange,
+});
+
+(window as any).__bwServices = {
+  api: host.api,
+  cartManager: host.cartManager,
+  ready: host.ready,
+  host,
+};
+
+function dispatchOnWindow(name: string, detail: unknown) {
+  window.dispatchEvent(new CustomEvent(name, { detail }));
+}
+
+function whenDomReady(fn: () => void) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+import './bw-configurator.svelte';
+import './bw-cart.svelte';
+import './bw-checkout.svelte';
+
+function cartElements(): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLElement>('bw-cart')];
+}
+
+function setCartBarsHidden(hidden: boolean) {
+  cartElements().forEach((el) => {
+    if (el.getAttribute('display') !== 'bar') return;
+    el.parentElement?.classList.toggle('hidden', hidden);
+    if (!hidden) el.style.display = '';
+  });
+}
+
+// Called on the first add, to reveal carts a merchant left hidden until there was something in them. The
+// host subscribes to the message bus before any element does, so by the time this runs it has already opened
+// checkout for this same add and hidden the bottom bars - revealing everything unconditionally would put a
+// bar straight back over the modal, which is the one thing shouldBottomCloseOnModal exists to prevent.
+function showCarts() {
+  cartElements().forEach((el) => {
+    el.parentElement?.classList.remove('hidden');
+    el.style.display = '';
+  });
+  if (host.options.shouldBottomCloseOnModal) setCartBarsHidden(host.isCheckoutOpen);
+}
+
+// The host owns whether checkout is open; bw-checkout renders from the same state. All this has to do is
+// tell the page about it.
+function onCheckoutOpenChange(open: boolean) {
+  dispatchOnWindow(open ? 'bw:modal-open' : 'bw:modal-close', {});
+  if (host.options.shouldBottomCloseOnModal) setCartBarsHidden(open);
+}
+
+function autoWire() {
+  const configurators = document.querySelectorAll('bw-configurator');
+  const carts = document.querySelectorAll('bw-cart');
+  const checkouts = document.querySelectorAll('bw-checkout');
+
+  const allElements = [...configurators, ...carts, ...checkouts];
+
+  // Apply options as element attributes
+  if (options.wizardPages) {
+    allElements.forEach((el) => {
+      if (!el.hasAttribute('wizard-pages')) {
+        el.setAttribute('wizard-pages', options.wizardPages);
+      }
+    });
+  }
+
+  // edit-pages only affects the checkout edit-item accordion, so it's only meaningful on bw-checkout.
+  if (options.editPages) {
+    checkouts.forEach((el) => {
+      if (!el.hasAttribute('edit-pages')) {
+        el.setAttribute('edit-pages', options.editPages);
+      }
+    });
+  }
+
+  [...configurators, ...checkouts].forEach((el) => {
+    if (options.autoSelectSingleTimeSlot && !el.hasAttribute('auto-select-single-time-slot')) {
+      el.setAttribute('auto-select-single-time-slot', '');
+    }
+  });
+
+  // Auto-add is-modal to any checkout that doesn't already have it
+  checkouts.forEach((el) => {
+    if (!el.hasAttribute('is-modal') && !el.hasAttribute('is-inline')) {
+      el.setAttribute('is-modal', '');
+    }
+  });
+
+  // Nothing here re-dispatches bw:* on window any more. Every one of them is dispatched on its element with
+  // bubbles+composed, so it reaches window by itself; forwarding a copy as well delivered each event twice,
+  // and a host counting bw:order-confirmed was double-counting orders. Bubbling is also the delivery that
+  // keeps working for an element added to the page after this ran, which a listener bound here would miss.
+  //
+  // Opening checkout is not wired here either: the add posts cart:change with its own openCheckout, the cart
+  // bar's button posts modal:open, and the host acts on both - so no-auto-checkout suppresses the open
+  // through the same branch an ES consumer's autoOpenCheckout: false does.
+  configurators.forEach((el) => {
+    el.addEventListener('bw:cart-change', () => {
+      showCarts();
+
+      const handler = el.getAttribute('on-cart-change');
+      if (handler && typeof (window as any)[handler] === 'function') {
+        (window as any)[handler]();
+      }
+    });
+  });
+}
+
+whenDomReady(autoWire);

package/src/lib/elements/shared.ts

@@ -1,18 +1,18 @@
-import type { BookingApi } from '../api';
-import type { CartManager } from '../cart-manager';
-import type { BookingHost } from '../host.svelte';
-
-interface SharedServices {
-  api: BookingApi;
-  cartManager: CartManager;
-  ready: Promise<void>;
-  // The one host register.ts built. Elements read their behaviour from it rather than keeping their own -
-  // notably whether checkout is open, which used to live as separate state inside bw-checkout.
-  host: BookingHost;
-}
-
-const w = window as any;
-
-export function getSharedServices(): SharedServices {
-  return w.__bwServices;
-}
+import type { BookingApi } from '../api';
+import type { CartManager } from '../cart-manager';
+import type { BookingHost } from '../host.svelte';
+
+interface SharedServices {
+  api: BookingApi;
+  cartManager: CartManager;
+  ready: Promise<void>;
+  // The one host register.ts built. Elements read their behaviour from it rather than keeping their own -
+  // notably whether checkout is open, which used to live as separate state inside bw-checkout.
+  host: BookingHost;
+}
+
+const w = window as any;
+
+export function getSharedServices(): SharedServices {
+  return w.__bwServices;
+}