@nymbalhq/web-components 1.1.0 → 1.2.0

package/dist/chunk-6XCCAAMF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/checkout.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { PaymentConfirmation, PaymentConfirmContext } from '@nymbalhq/sdk'\nimport type { Address, CartItem } from '@nymbalhq/types'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { renderField } from '../form-element.js'\nimport { formatPrice } from '../format.js'\nimport { shownCart } from '../cart-projection.js'\nimport { buttonStyles, fieldStyles } from '../view-styles.js'\nimport { NymbalAddressForm } from './address-form.js'\nimport type { NymbalPaymentElement } from './payment-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-checkout',\n  reactName: 'Checkout',\n  // The cart a server read (cart-projection.ts), shown in the summary until the cart store settles.\n  attributes: [{ name: 'cart', prop: 'cart', type: 'json' }],\n  events: [\n    {\n      name: 'nymbal:checkout:placed',\n      prop: 'onPlaced',\n      detail: '{ orderNumber: string }',\n    },\n  ],\n  parts: [\n    'layout',\n    'main',\n    'title',\n    'steps',\n    'step',\n    'step-active',\n    'step-done',\n    'step-divider',\n    'step-divider-done',\n    'error',\n    'section',\n    'form',\n    'section-title',\n    'field',\n    'label',\n    'input',\n    'billing-same',\n    'billing',\n    'billing-title',\n    'payment',\n    'actions',\n    'back',\n    'submit',\n    'terms',\n    'summary',\n    'summary-title',\n    'items',\n    'item',\n    'item-name',\n    'item-variant',\n    'item-qty',\n    'item-price',\n    'summary-row',\n    'subtotal',\n    'total',\n  ],\n  slots: [\n    'payment',\n    'title',\n    'contact-continue-label',\n    'shipping-continue-label',\n    'place-order-label',\n    'terms',\n    'summary-title',\n  ],\n  children: true,\n}\n\nconst STEPS = ['contact', 'shipping', 'payment'] as const\ntype Step = (typeof STEPS)[number]\nconst STEP_LABELS: Record<Step, string> = {\n  contact: 'Contact',\n  shipping: 'Shipping',\n  payment: 'Payment',\n}\n\n/** Outlasts the 500 ms an OS allows between the two clicks of a double click. */\nconst STEP_HEIGHT_HOLD_MS = 600\nconst PAYMENT_FAILED = 'Payment failed. Please try again.'\n\n/** No payment element: nothing to confirm, as for a payments adapter with no client half. */\nconst NO_PAYMENT_STEP: PaymentConfirmation = { ok: true, confirmed: false }\n\n/**\n * The checkout: contact, shipping, then payment with billing, beside the order summary. It drives the SDK's checkout\n * store, and on an order dispatches `nymbal:checkout:placed`; the page navigates. The payment element is the page's\n * light-DOM child in the `payment` slot, so the payment driver's UI shares the document tree and is mounted once.\n */\nexport class NymbalCheckout extends NymbalElement {\n  static override schema = SCHEMA\n  static uses = [NymbalAddressForm]\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\n    fieldStyles,\n    css`\n      [hidden] {\n        display: none !important;\n      }\n      [part~='layout'] {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: var(--nymbal-spacing-xl, 2rem);\n      }\n      @media (min-width: 769px) {\n        [part~='layout'] {\n          grid-template-columns: 1fr 380px;\n          align-items: start;\n        }\n      }\n      [part~='title'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        font-size: 1.75rem;\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n      [part~='steps'] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: var(--nymbal-spacing-xl, 2rem);\n        padding: var(--nymbal-spacing-md, 1rem) 0;\n        counter-reset: step;\n      }\n      [part~='step'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n        white-space: nowrap;\n      }\n      [part~='step']::before {\n        counter-increment: step;\n        content: counter(step);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 28px;\n        height: 28px;\n        flex-shrink: 0;\n        border: 2px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-full, 9999px);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n      [part~='step-active'] {\n        color: var(--nymbal-color-primary, #18181b);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='step-active']::before {\n        background-color: var(--nymbal-color-primary, #18181b);\n        border-color: var(--nymbal-color-primary, #18181b);\n        color: var(--nymbal-color-text-inverse, #fff);\n      }\n      [part~='step-done']::before {\n        content: '\\\\2713';\n        background-color: var(--nymbal-color-success, #16a34a);\n        border-color: var(--nymbal-color-success, #16a34a);\n        color: var(--nymbal-color-text-inverse, #fff);\n      }\n      [part~='step-divider'] {\n        width: 40px;\n        height: 2px;\n        flex-shrink: 0;\n        margin: 0 var(--nymbal-spacing-sm, 0.5rem);\n        background-color: var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='step-divider-done'] {\n        background-color: var(--nymbal-color-success, #16a34a);\n      }\n      @media (max-width: 640px) {\n        [part~='step'] span {\n          display: none;\n        }\n        [part~='step-divider'] {\n          width: 24px;\n        }\n      }\n      [part~='section-title'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='billing-same'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        cursor: pointer;\n      }\n      [part~='billing-title'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n      [part~='payment'] {\n        margin-top: var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='actions'] {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        margin-top: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='submit'] {\n        flex: 1;\n        padding: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-base, 1rem);\n      }\n      [part~='terms'] {\n        margin: var(--nymbal-spacing-sm, 0.5rem) 0 0;\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n        text-align: center;\n      }\n      [part~='summary'] {\n        position: sticky;\n        top: 80px;\n        padding: var(--nymbal-spacing-lg, 1.5rem);\n        background-color: #fafafa;\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-lg, 0.75rem);\n      }\n      [part~='summary-title'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        padding-bottom: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        color: var(--nymbal-color-primary, #18181b);\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='items'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        margin-bottom: var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='item'] {\n        display: flex;\n        justify-content: space-between;\n        align-items: start;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n      }\n      [part~='item-name'] {\n        flex: 1;\n        min-width: 0;\n      }\n      [part~='item-variant'],\n      [part~='item-qty'] {\n        flex-shrink: 0;\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='item-price'] {\n        flex-shrink: 0;\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      dl {\n        margin: 0;\n      }\n      dd {\n        margin: 0;\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='summary-row'] {\n        display: flex;\n        justify-content: space-between;\n        padding: var(--nymbal-spacing-xs, 0.25rem) 0;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n      }\n      [part~='summary-row'] dt {\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='total'] {\n        display: flex;\n        justify-content: space-between;\n        margin-top: var(--nymbal-spacing-sm, 0.5rem);\n        padding-top: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        color: var(--nymbal-color-primary, #18181b);\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n    `,\n  ]\n\n  private step: Step = 'contact'\n  private error: string | null = null\n  private billingSame = true\n  private placing = false\n  private placed = false\n  /** True from a step change until the next animation frame (Decision 4's multi-click rule). */\n  private stepChanging = false\n  private stepTurn = 0\n  private heightRelease: ReturnType<typeof setTimeout> | undefined\n\n  declare cart: unknown\n\n  protected override stores() {\n    return [this.client.cart]\n  }\n\n  protected override storeSettled(): void {\n    this.cart = undefined\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.addEventListener('nymbal:payment:status', this.onPaymentStatus)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('nymbal:payment:status', this.onPaymentStatus)\n    this.releaseMainHeight()\n  }\n\n  private readonly onPaymentStatus = (): void => this.requestUpdate()\n\n  private paymentElement(): NymbalPaymentElement | null {\n    return this.querySelector<NymbalPaymentElement>('nymbal-payment-element')\n  }\n\n  /**\n   * Read at each render, so a status the child reached during its own upgrade, before this listened, still holds.\n   * Without a client (a server render) there is no light DOM to read, and no order to place.\n   */\n  private paymentBlocked(): boolean {\n    return this.readsStores && this.paymentElement()?.status === 'error'\n  }\n\n  private addressForm(prefix: 'shipping' | 'billing'): NymbalAddressForm | null {\n    return this.renderRoot.querySelector<NymbalAddressForm>(\n      `nymbal-address-form[id-prefix=\"${prefix}\"]`,\n    )\n  }\n\n  private go(step: Step): void {\n    this.holdMainHeight()\n    this.step = step\n    this.error = null\n    this.stepChanging = true\n    const turn = ++this.stepTurn\n    requestAnimationFrame(() => {\n      if (turn === this.stepTurn) this.stepChanging = false\n    })\n    this.requestUpdate()\n  }\n\n  /**\n   * Keeps the main column at least as tall as the step it replaces until a double click is over. A shorter next step\n   * would shorten the page under a still cursor, and the second click would land on whatever rose there (a footer\n   * link), outside this element, where neither multi-click guard sees it. Released after 600 ms, past the 500 ms an OS\n   * allows between the two clicks of a double click, so the column then settles to the shown step's own height.\n   */\n  private holdMainHeight(): void {\n    const main = this.renderRoot.querySelector<HTMLElement>(\"[part~='main']\")\n    if (main === null) return\n    const height = main.offsetHeight\n    if (height > (Number.parseFloat(main.style.minHeight) || 0))\n      main.style.minHeight = `${height}px`\n    clearTimeout(this.heightRelease)\n    this.heightRelease = setTimeout(() => this.releaseMainHeight(), STEP_HEIGHT_HOLD_MS)\n  }\n\n  private releaseMainHeight(): void {\n    clearTimeout(this.heightRelease)\n    this.heightRelease = undefined\n    const main = this.renderRoot.querySelector<HTMLElement>(\"[part~='main']\")\n    if (main !== null) main.style.minHeight = ''\n  }\n\n  private showError(message: string): void {\n    this.error = message\n    this.requestUpdate()\n  }\n\n  /**\n   * Whether a submit of `step`'s form goes ahead. The step setters are synchronous, so by a double click's second\n   * click the next step has rendered under the cursor: a submit in the frame of a step change is not the shopper's.\n   */\n  private accepts(event: Event, step: Step): boolean {\n    event.preventDefault()\n    return this.step === step && !this.stepChanging\n  }\n\n  /** The second click of a multi-click is not a decision to continue or to pay; the first one already submitted. */\n  private readonly onSubmitClick = (event: MouseEvent): void => {\n    if (event.detail > 1) event.preventDefault()\n  }\n\n  private readonly onContact = (event: Event): void => {\n    if (!this.accepts(event, 'contact')) return\n    const email =\n      this.renderRoot.querySelector<HTMLInputElement>('#contact-email')?.value.trim() ?? ''\n    if (email === '') return this.showError('Please enter your email address.')\n    this.client.checkout.setEmail(email)\n    this.go('shipping')\n  }\n\n  private readonly onShipping = (event: Event): void => {\n    if (!this.accepts(event, 'shipping')) return\n    const form = this.addressForm('shipping')\n    if (form === null || !form.reportValidity()) return\n    this.client.checkout.setShippingAddress(form.value)\n    this.client.checkout.setShippingMethod({\n      carrier: 'Standard',\n      service: 'Standard Shipping',\n      amountMinor: 0,\n      currency: this.client.cart.getState().currency || 'GBP',\n      estimatedDays: 5,\n    })\n    this.go('payment')\n  }\n\n  private billingAddress(): Address | null {\n    if (this.billingSame) return this.client.checkout.getState().shippingAddress\n    const form = this.addressForm('billing')\n    if (form === null || !form.reportValidity()) return null\n    return form.value\n  }\n\n  private readonly onPlace = (event: Event): void => {\n    if (!this.accepts(event, 'payment')) return\n    if (this.placing || this.placed || this.paymentBlocked()) return\n    const billing = this.billingAddress()\n    if (billing === null) return\n    this.placing = true\n    this.error = null\n    this.requestUpdate()\n    void this.place(billing)\n  }\n\n  /** Calls the SDK before its first `await`, so the in-flight flag set by the caller covers the order request. */\n  private async place(billing: Address): Promise<void> {\n    const checkout = this.client.checkout\n    try {\n      checkout.setBillingAddress(billing)\n      const result = await checkout.submitPayment()\n      if (result === null) {\n        // A resubmit of a cart that already became an order (Back, then Place Order) goes to that order.\n        const { placedOrderNumber, error } = checkout.getState()\n        if (placedOrderNumber) return this.leaveFor(placedOrderNumber)\n        return this.stay(error ?? PAYMENT_FAILED)\n      }\n      if (result.payment.status === 'failed') {\n        return this.stay(checkout.getState().error ?? PAYMENT_FAILED)\n      }\n      // Confirmed only when the driver says the payment went through; otherwise the order shows it awaiting payment.\n      if (result.payment.status === 'requires_action') {\n        const { email, billingAddress } = checkout.getState()\n        const confirmation = await this.confirm(result.paymentIntent.clientSecret, {\n          ...(email !== '' && { email }),\n          ...(billingAddress !== null && { billing: billingAddress }),\n        })\n        if (!confirmation.ok) return this.stay(confirmation.error)\n        if (confirmation.confirmed) checkout.markConfirmed()\n      }\n      this.leaveFor(result.orderNumber)\n    } catch (err) {\n      this.stay(err instanceof Error && err.message !== '' ? err.message : PAYMENT_FAILED)\n    }\n  }\n\n  private confirm(\n    clientSecret: string,\n    context: PaymentConfirmContext,\n  ): Promise<PaymentConfirmation> {\n    return this.paymentElement()?.confirm(clientSecret, context) ?? Promise.resolve(NO_PAYMENT_STEP)\n  }\n\n  private stay(message: string): void {\n    this.placing = false\n    this.showError(message)\n  }\n\n  /** Place Order stays disabled from here through the page's navigation. */\n  private leaveFor(orderNumber: string): void {\n    this.client.checkout.reset()\n    this.placing = false\n    this.placed = true\n    this.requestUpdate()\n    this.dispatchEvent(\n      new CustomEvent('nymbal:checkout:placed', {\n        bubbles: true,\n        composed: true,\n        detail: { orderNumber },\n      }),\n    )\n  }\n\n  private readonly onBillingSame = (event: Event): void => {\n    this.billingSame = (event.target as HTMLInputElement).checked\n    this.requestUpdate()\n  }\n\n  private back(step: Step): () => void {\n    return () => {\n      if (!this.placing && !this.placed) this.go(step)\n    }\n  }\n\n  private renderSteps() {\n    const current = STEPS.indexOf(this.step)\n    return html`\n      <div part=\"steps\" data-testid=\"checkout-steps\">\n        ${STEPS.map((step, index) => {\n          const state = index < current ? ' step-done' : index === current ? ' step-active' : ''\n          return html`\n            ${index > 0\n              ? html`<div\n                  part=\"step-divider${index <= current ? ' step-divider-done' : ''}\"\n                  aria-hidden=\"true\"\n                ></div>`\n              : nothing}\n            <div\n              part=\"step${state}\"\n              data-testid=\"checkout-step-${step}\"\n              aria-current=${index === current ? 'step' : nothing}\n            >\n              <span>${STEP_LABELS[step]}</span>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  private renderContact() {\n    return html`\n      <section part=\"section\" data-testid=\"checkout-contact\" ?hidden=${this.step !== 'contact'}>\n        <form part=\"form\" @submit=${this.onContact}>\n          <h2 part=\"section-title\">Contact Information</h2>\n          ${renderField({\n            id: 'contact-email',\n            name: 'email',\n            label: 'Email Address',\n            type: 'email',\n            autocomplete: 'email',\n            required: true,\n            placeholder: 'you@example.com',\n          })}\n          <div part=\"actions\">\n            <button\n              type=\"submit\"\n              part=\"submit\"\n              class=\"btn btn-primary\"\n              data-testid=\"contact-continue\"\n              @click=${this.onSubmitClick}\n            >\n              <slot name=\"contact-continue-label\">Continue to Shipping</slot>\n            </button>\n          </div>\n        </form>\n      </section>\n    `\n  }\n\n  private renderShipping() {\n    return html`\n      <section part=\"section\" data-testid=\"checkout-shipping\" ?hidden=${this.step !== 'shipping'}>\n        <form part=\"form\" novalidate @submit=${this.onShipping}>\n          <h2 part=\"section-title\">Shipping Address</h2>\n          <nymbal-address-form id-prefix=\"shipping\" data-testid=\"shipping-form\"></nymbal-address-form>\n          <div part=\"actions\">\n            <button type=\"button\" part=\"back\" class=\"btn btn-secondary\" @click=${this.back('contact')}>\n              Back\n            </button>\n            <button\n              type=\"submit\"\n              part=\"submit\"\n              class=\"btn btn-primary\"\n              data-testid=\"shipping-continue\"\n              @click=${this.onSubmitClick}\n            >\n              <slot name=\"shipping-continue-label\">Continue to Payment</slot>\n            </button>\n          </div>\n        </form>\n      </section>\n    `\n  }\n\n  private renderPayment() {\n    const busy = this.placing || this.placed\n    return html`\n      <section part=\"section\" data-testid=\"checkout-payment\" ?hidden=${this.step !== 'payment'}>\n        <form part=\"form\" novalidate @submit=${this.onPlace}>\n          <h2 part=\"section-title\">Payment</h2>\n          <label part=\"billing-same\">\n            <input\n              type=\"checkbox\"\n              id=\"billing-same\"\n              data-testid=\"billing-same\"\n              .checked=${this.billingSame}\n              @change=${this.onBillingSame}\n            />\n            Billing address same as shipping\n          </label>\n          <div part=\"billing\" data-testid=\"billing-address\" ?hidden=${this.billingSame}>\n            <h3 part=\"billing-title\">Billing Address</h3>\n            <nymbal-address-form id-prefix=\"billing\"></nymbal-address-form>\n          </div>\n          <div part=\"payment\"><slot name=\"payment\"></slot></div>\n          <div part=\"actions\">\n            <button\n              type=\"button\"\n              part=\"back\"\n              class=\"btn btn-secondary\"\n              ?disabled=${busy}\n              @click=${this.back('shipping')}\n            >\n              Back\n            </button>\n            <button\n              type=\"submit\"\n              part=\"submit\"\n              class=\"btn btn-primary\"\n              data-testid=\"place-order\"\n              ?disabled=${busy || this.paymentBlocked()}\n              @click=${this.onSubmitClick}\n            >\n              ${this.placing\n                ? 'Processing...'\n                : html`<slot name=\"place-order-label\">Place Order</slot>`}\n            </button>\n          </div>\n          <p part=\"terms\">\n            <slot name=\"terms\">By placing your order, you agree to our terms and conditions.</slot>\n          </p>\n        </form>\n      </section>\n    `\n  }\n\n  private renderLine(item: CartItem, currency: string) {\n    return html`\n      <div part=\"item\">\n        <span part=\"item-name\">${item.productName}</span>\n        ${item.variantName ? html`<span part=\"item-variant\">${item.variantName}</span>` : nothing}\n        <span part=\"item-qty\">x${item.qty}</span>\n        <span part=\"item-price\">${formatPrice(item.priceMinor * item.qty, currency)}</span>\n      </div>\n    `\n  }\n\n  private renderSummary() {\n    const cart = shownCart(this, this.cart, this.readsStores ? this.client : null)\n    const currency = cart.currency || 'GBP'\n    const subtotal = formatPrice(cart.subtotalMinor, currency)\n    return html`\n      <aside part=\"summary\" data-testid=\"checkout-summary\">\n        <h2 part=\"summary-title\"><slot name=\"summary-title\">Order Summary</slot></h2>\n        ${cart.items.length === 0\n          ? nothing\n          : html`<div part=\"items\">\n              ${cart.items.map((item) => this.renderLine(item, currency))}\n            </div>`}\n        <dl>\n          <div part=\"summary-row subtotal\">\n            <dt>Subtotal</dt>\n            <dd data-testid=\"cart-subtotal\">${subtotal}</dd>\n          </div>\n          <div part=\"summary-row\">\n            <dt>Shipping</dt>\n            <dd>Standard, free</dd>\n          </div>\n        </dl>\n        <div part=\"total\">\n          <span>Total</span>\n          <span>${subtotal}</span>\n        </div>\n      </aside>\n    `\n  }\n\n  protected override render() {\n    return html`\n      <h1 part=\"title\"><slot name=\"title\">Checkout</slot></h1>\n      ${this.renderSteps()}\n      ${this.error === null\n        ? nothing\n        : html`<div part=\"error\" role=\"alert\" data-testid=\"checkout-error\">${this.error}</div>`}\n      <div part=\"layout\">\n        <div part=\"main\">${this.renderContact()} ${this.renderShipping()} ${this.renderPayment()}</div>\n        ${this.renderSummary()}\n      </div>\n    `\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-7JAAOVCE.js

@@ -0,0 +1,114 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/review-list.ts
+import { css, html } from "lit";
+var SCHEMA = {
+  tag: "nymbal-review-list",
+  reactName: "ReviewList",
+  // A product's approved reviews, as `GET /api/products/:id/reviews` serves them.
+  attributes: [{ name: "reviews", prop: "reviews", type: "json" }],
+  events: [],
+  parts: ["list", "review", "rating", "empty"],
+  slots: ["empty"],
+  children: false
+};
+var DATE = new Intl.DateTimeFormat("en-GB", {
+  day: "numeric",
+  month: "short",
+  year: "numeric",
+  timeZone: "UTC"
+});
+function dateOf(iso) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? "" : DATE.format(date);
+}
+function stars(rating) {
+  const filled = Math.max(0, Math.min(5, Math.round(rating)));
+  return "\u2605".repeat(filled) + "\u2606".repeat(5 - filled);
+}
+var NymbalReviewList = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='list'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='review'] {
+        padding-bottom: var(--nymbal-spacing-lg, 1.5rem);
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      .meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      [part~='rating'] {
+        letter-spacing: 0.1em;
+        color: var(--nymbal-color-warning, #d97706);
+      }
+      .date {
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      h3 {
+        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);
+        line-height: 1.2;
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      p {
+        margin: 0;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        line-height: 1.6;
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+    `
+  ];
+  render() {
+    const reviews = parsedJson(this, "reviews", this.reviews);
+    if (!Array.isArray(reviews) || reviews.length === 0) {
+      return html`<p part="empty">
+        <slot name="empty">No reviews yet. Be the first to review this product.</slot>
+      </p>`;
+    }
+    return html`
+      <div part="list" data-testid="review-list">
+        ${reviews.map(
+      (r) => html`
+            <article part="review" data-testid="review-${r.id}">
+              <div class="meta">
+                <span part="rating" aria-label="${r.rating} out of 5 stars"
+                  >${stars(r.rating)}</span
+                >
+                <span class="date">${dateOf(r.submittedAt)}</span>
+              </div>
+              <h3>${r.title}</h3>
+              <p>${r.body}</p>
+            </article>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+
+export {
+  NymbalReviewList
+};
+//# sourceMappingURL=chunk-7JAAOVCE.js.map

package/dist/chunk-7JAAOVCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/review-list.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-review-list',\n  reactName: 'ReviewList',\n  // A product's approved reviews, as `GET /api/products/:id/reviews` serves them.\n  attributes: [{ name: 'reviews', prop: 'reviews', type: 'json' }],\n  events: [],\n  parts: ['list', 'review', 'rating', 'empty'],\n  slots: ['empty'],\n  children: false,\n}\n\ninterface Review {\n  id: string\n  rating: number\n  title: string\n  body: string\n  submittedAt: string\n}\n\n// UTC, so the server's date and the browser's are one.\nconst DATE = new Intl.DateTimeFormat('en-GB', {\n  day: 'numeric',\n  month: 'short',\n  year: 'numeric',\n  timeZone: 'UTC',\n})\n\nfunction dateOf(iso: string): string {\n  const date = new Date(iso)\n  return Number.isNaN(date.getTime()) ? '' : DATE.format(date)\n}\n\nfunction stars(rating: number): string {\n  const filled = Math.max(0, Math.min(5, Math.round(rating)))\n  return '★'.repeat(filled) + '☆'.repeat(5 - filled)\n}\n\n/** A product's reviews, each with its rating, date, title and text; an invitation when there are none. */\nexport class NymbalReviewList extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='list'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='review'] {\n        padding-bottom: var(--nymbal-spacing-lg, 1.5rem);\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      .meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      [part~='rating'] {\n        letter-spacing: 0.1em;\n        color: var(--nymbal-color-warning, #d97706);\n      }\n      .date {\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      h3 {\n        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);\n        line-height: 1.2;\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      p {\n        margin: 0;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        line-height: 1.6;\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n    `,\n  ]\n\n  declare reviews: unknown\n\n  protected override render() {\n    const reviews = parsedJson<Review[]>(this, 'reviews', this.reviews)\n    if (!Array.isArray(reviews) || reviews.length === 0) {\n      return html`<p part=\"empty\">\n        <slot name=\"empty\">No reviews yet. Be the first to review this product.</slot>\n      </p>`\n    }\n    return html`\n      <div part=\"list\" data-testid=\"review-list\">\n        ${reviews.map(\n          (r) => html`\n            <article part=\"review\" data-testid=\"review-${r.id}\">\n              <div class=\"meta\">\n                <span part=\"rating\" aria-label=\"${r.rating} out of 5 stars\"\n                  >${stars(r.rating)}</span\n                >\n                <span class=\"date\">${dateOf(r.submittedAt)}</span>\n              </div>\n              <h3>${r.title}</h3>\n              <p>${r.body}</p>\n            </article>\n          `,\n        )}\n      </div>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,KAAK,YAAY;AAS1B,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY,CAAC,EAAE,MAAM,WAAW,MAAM,WAAW,MAAM,OAAO,CAAC;AAAA,EAC/D,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,QAAQ,UAAU,UAAU,OAAO;AAAA,EAC3C,OAAO,CAAC,OAAO;AAAA,EACf,UAAU;AACZ;AAWA,IAAM,OAAO,IAAI,KAAK,eAAe,SAAS;AAAA,EAC5C,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;AAED,SAAS,OAAO,KAAqB;AACnC,QAAM,OAAO,IAAI,KAAK,GAAG;AACzB,SAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,IAAI,KAAK,KAAK,OAAO,IAAI;AAC7D;AAEA,SAAS,MAAM,QAAwB;AACrC,QAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAI,OAAO,MAAM,IAAI,SAAI,OAAO,IAAI,MAAM;AACnD;AAGO,IAAM,mBAAN,cAA+B,cAAc;AAAA,EAClD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0CF;AAAA,EAImB,SAAS;AAC1B,UAAM,UAAU,WAAqB,MAAM,WAAW,KAAK,OAAO;AAClE,QAAI,CAAC,MAAM,QAAQ,OAAO,KAAK,QAAQ,WAAW,GAAG;AACnD,aAAO;AAAA;AAAA;AAAA,IAGT;AACA,WAAO;AAAA;AAAA,UAED,QAAQ;AAAA,MACR,CAAC,MAAM;AAAA,yDACwC,EAAE,EAAE;AAAA;AAAA,kDAEX,EAAE,MAAM;AAAA,qBACrC,MAAM,EAAE,MAAM,CAAC;AAAA;AAAA,qCAEC,OAAO,EAAE,WAAW,CAAC;AAAA;AAAA,oBAEtC,EAAE,KAAK;AAAA,mBACR,EAAE,IAAI;AAAA;AAAA;AAAA,IAGjB,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;","names":[]}

package/dist/chunk-B73QVSA5.js

@@ -0,0 +1,206 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalAddressForm
+} from "./chunk-V55K2CS5.js";
+import {
+  NymbalFormElement
+} from "./chunk-PN6QKYE4.js";
+import {
+  buttonStyles,
+  fieldStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/address-book.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-address-book",
+  reactName: "AddressBook",
+  // The addresses a server read, listed until the element's own list call answers.
+  attributes: [{ name: "addresses", prop: "addresses", type: "json" }],
+  events: [
+    {
+      name: "nymbal:address-book:changed",
+      prop: "onChanged",
+      detail: "{ address: unknown }"
+    }
+  ],
+  parts: [
+    "list",
+    "status",
+    "empty",
+    "empty-title",
+    "empty-text",
+    "address",
+    "address-badge",
+    "address-line",
+    "add",
+    "add-title",
+    "form",
+    "actions",
+    "submit",
+    "error",
+    "message"
+  ],
+  slots: ["add-title"],
+  children: false
+};
+var NymbalAddressBook = class extends NymbalFormElement {
+  static schema = SCHEMA;
+  static uses = [NymbalAddressForm];
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    fieldStyles,
+    css`
+      [part~='list'] {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+        gap: var(--nymbal-spacing-md, 1rem);
+      }
+      [part~='status'],
+      [part~='empty-text'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='empty'] {
+        grid-column: 1 / -1;
+      }
+      [part~='empty-title'] {
+        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-base, 1rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='address'] {
+        position: relative;
+        padding: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        line-height: 1.6;
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-md, 0.5rem);
+      }
+      [part~='address-badge'] {
+        display: inline-block;
+        margin-bottom: var(--nymbal-spacing-xs, 0.25rem);
+        padding: 0 var(--nymbal-spacing-sm, 0.5rem);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        color: var(--nymbal-color-text-inverse, #ffffff);
+        background: var(--nymbal-color-primary, #18181b);
+        border-radius: var(--nymbal-radius-full, 9999px);
+      }
+      [part~='add'] {
+        margin-top: var(--nymbal-spacing-xl, 2rem);
+      }
+      [part~='add-title'] {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+      }
+      [part~='submit'] {
+        width: auto;
+      }
+    `
+  ];
+  /** null until the first list answers. */
+  listed = null;
+  loadFailed = false;
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasClient) void this.load();
+  }
+  /** The list's answer settles the book: the addresses a server gave give way to it. */
+  async load() {
+    try {
+      this.listed = await this.client.customer.addresses.list();
+      this.loadFailed = false;
+    } catch {
+      this.loadFailed = true;
+    }
+    this.addresses = void 0;
+    this.requestUpdate();
+  }
+  get addressForm() {
+    return this.renderRoot.querySelector("nymbal-address-form");
+  }
+  async send() {
+    const form = this.addressForm;
+    if (form === null) throw new Error("The address fields have not rendered.");
+    const address = await this.client.customer.addresses.create(form.value);
+    form.reset();
+    this.notice = "Address saved successfully.";
+    this.emit("nymbal:address-book:changed", { address });
+    await this.load();
+  }
+  failureText() {
+    return "Failed to save address. Please try again.";
+  }
+  onAddSubmit = (event) => {
+    if (!this.pending && this.addressForm?.reportValidity() === false) {
+      event.preventDefault();
+      return;
+    }
+    this.onSubmit(event);
+  };
+  renderAddress(a) {
+    return html`
+      <div part="address" data-testid="address-${a.id}">
+        ${a.isDefaultShipping ? html`<span part="address-badge">Default Shipping</span>` : nothing}
+        ${a.isDefaultBilling ? html`<span part="address-badge">Default Billing</span>` : nothing}
+        <div part="address-line">${a.firstName} ${a.lastName}</div>
+        <div part="address-line">${a.addressLine1}</div>
+        ${a.addressLine2 ? html`<div part="address-line">${a.addressLine2}</div>` : nothing}
+        <div part="address-line">${a.city}, ${a.region} ${a.postalCode}</div>
+        <div part="address-line">${a.country}</div>
+      </div>
+    `;
+  }
+  renderList() {
+    if (this.loadFailed) return html`<p part="status">Unable to load addresses.</p>`;
+    const addresses = parsedJson(this, "addresses", this.addresses) ?? this.listed;
+    if (addresses === null) return html`<p part="status">Loading addresses...</p>`;
+    if (addresses.length === 0) {
+      return html`
+        <div part="empty">
+          <h2 part="empty-title">No saved addresses</h2>
+          <p part="empty-text">Add an address below to get started.</p>
+        </div>
+      `;
+    }
+    return addresses.map((a) => this.renderAddress(a));
+  }
+  render() {
+    return html`
+      <div part="list" data-testid="addresses-list">${this.renderList()}</div>
+      <section part="add">
+        <h2 part="add-title"><slot name="add-title">Add New Address</slot></h2>
+        <form part="form" data-testid="add-address-form" @submit=${this.onAddSubmit}>
+          <nymbal-address-form id-prefix="new-address"></nymbal-address-form>
+          <div part="actions">
+            <button
+              type="submit"
+              part="submit"
+              class="btn btn-primary"
+              data-testid="save-address"
+              ?disabled=${this.pending}
+            >
+              ${this.pending ? "Saving..." : "Save Address"}
+            </button>
+          </div>
+        </form>
+        ${this.renderError()}
+        ${this.notice === null ? nothing : html`<p part="message" role="status">${this.notice}</p>`}
+      </section>
+    `;
+  }
+};
+
+export {
+  NymbalAddressBook
+};
+//# sourceMappingURL=chunk-B73QVSA5.js.map

package/dist/chunk-B73QVSA5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/address-book.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { CustomerAddress } from '@nymbalhq/types'\nimport { baseStyles, parsedJson, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { NymbalFormElement } from '../form-element.js'\nimport { buttonStyles, fieldStyles } from '../view-styles.js'\nimport { NymbalAddressForm } from './address-form.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-address-book',\n  reactName: 'AddressBook',\n  // The addresses a server read, listed until the element's own list call answers.\n  attributes: [{ name: 'addresses', prop: 'addresses', type: 'json' }],\n  events: [\n    {\n      name: 'nymbal:address-book:changed',\n      prop: 'onChanged',\n      detail: '{ address: unknown }',\n    },\n  ],\n  parts: [\n    'list',\n    'status',\n    'empty',\n    'empty-title',\n    'empty-text',\n    'address',\n    'address-badge',\n    'address-line',\n    'add',\n    'add-title',\n    'form',\n    'actions',\n    'submit',\n    'error',\n    'message',\n  ],\n  slots: ['add-title'],\n  children: false,\n}\n\n/** The signed-in customer's saved addresses, and the form that adds one. */\nexport class NymbalAddressBook extends NymbalFormElement {\n  static override schema = SCHEMA\n  static uses = [NymbalAddressForm]\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\n    fieldStyles,\n    css`\n      [part~='list'] {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));\n        gap: var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='status'],\n      [part~='empty-text'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='empty'] {\n        grid-column: 1 / -1;\n      }\n      [part~='empty-title'] {\n        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);\n        font-size: var(--nymbal-font-size-base, 1rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='address'] {\n        position: relative;\n        padding: var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        line-height: 1.6;\n        border: 1px solid var(--nymbal-color-border, #e4e4e7);\n        border-radius: var(--nymbal-radius-md, 0.5rem);\n      }\n      [part~='address-badge'] {\n        display: inline-block;\n        margin-bottom: var(--nymbal-spacing-xs, 0.25rem);\n        padding: 0 var(--nymbal-spacing-sm, 0.5rem);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        color: var(--nymbal-color-text-inverse, #ffffff);\n        background: var(--nymbal-color-primary, #18181b);\n        border-radius: var(--nymbal-radius-full, 9999px);\n      }\n      [part~='add'] {\n        margin-top: var(--nymbal-spacing-xl, 2rem);\n      }\n      [part~='add-title'] {\n        margin: 0 0 var(--nymbal-spacing-md, 1rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n      }\n      [part~='submit'] {\n        width: auto;\n      }\n    `,\n  ]\n\n  declare addresses: unknown\n  /** null until the first list answers. */\n  private listed: CustomerAddress[] | null = null\n  private loadFailed = false\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.hasClient) void this.load()\n  }\n\n  /** The list's answer settles the book: the addresses a server gave give way to it. */\n  private async load(): Promise<void> {\n    try {\n      this.listed = await this.client.customer.addresses.list()\n      this.loadFailed = false\n    } catch {\n      this.loadFailed = true\n    }\n    this.addresses = undefined\n    this.requestUpdate()\n  }\n\n  private get addressForm(): NymbalAddressForm | null {\n    return this.renderRoot.querySelector<NymbalAddressForm>('nymbal-address-form')\n  }\n\n  protected override async send(): Promise<void> {\n    const form = this.addressForm\n    if (form === null) throw new Error('The address fields have not rendered.')\n    const address = await this.client.customer.addresses.create(form.value)\n    form.reset()\n    this.notice = 'Address saved successfully.'\n    this.emit('nymbal:address-book:changed', { address })\n    await this.load()\n  }\n\n  protected override failureText(): string {\n    return 'Failed to save address. Please try again.'\n  }\n\n  private readonly onAddSubmit = (event: Event): void => {\n    // The fields are in the address form's shadow root, out of reach of this form's own validation.\n    if (!this.pending && this.addressForm?.reportValidity() === false) {\n      event.preventDefault()\n      return\n    }\n    this.onSubmit(event)\n  }\n\n  private renderAddress(a: CustomerAddress) {\n    return html`\n      <div part=\"address\" data-testid=\"address-${a.id}\">\n        ${a.isDefaultShipping ? html`<span part=\"address-badge\">Default Shipping</span>` : nothing}\n        ${a.isDefaultBilling ? html`<span part=\"address-badge\">Default Billing</span>` : nothing}\n        <div part=\"address-line\">${a.firstName} ${a.lastName}</div>\n        <div part=\"address-line\">${a.addressLine1}</div>\n        ${a.addressLine2 ? html`<div part=\"address-line\">${a.addressLine2}</div>` : nothing}\n        <div part=\"address-line\">${a.city}, ${a.region} ${a.postalCode}</div>\n        <div part=\"address-line\">${a.country}</div>\n      </div>\n    `\n  }\n\n  private renderList() {\n    if (this.loadFailed) return html`<p part=\"status\">Unable to load addresses.</p>`\n    const addresses =\n      parsedJson<CustomerAddress[]>(this, 'addresses', this.addresses) ?? this.listed\n    if (addresses === null) return html`<p part=\"status\">Loading addresses...</p>`\n    if (addresses.length === 0) {\n      return html`\n        <div part=\"empty\">\n          <h2 part=\"empty-title\">No saved addresses</h2>\n          <p part=\"empty-text\">Add an address below to get started.</p>\n        </div>\n      `\n    }\n    return addresses.map((a) => this.renderAddress(a))\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"list\" data-testid=\"addresses-list\">${this.renderList()}</div>\n      <section part=\"add\">\n        <h2 part=\"add-title\"><slot name=\"add-title\">Add New Address</slot></h2>\n        <form part=\"form\" data-testid=\"add-address-form\" @submit=${this.onAddSubmit}>\n          <nymbal-address-form id-prefix=\"new-address\"></nymbal-address-form>\n          <div part=\"actions\">\n            <button\n              type=\"submit\"\n              part=\"submit\"\n              class=\"btn btn-primary\"\n              data-testid=\"save-address\"\n              ?disabled=${this.pending}\n            >\n              ${this.pending ? 'Saving...' : 'Save Address'}\n            </button>\n          </div>\n        </form>\n        ${this.renderError()}\n        ${this.notice === null\n          ? nothing\n          : html`<p part=\"message\" role=\"status\">${this.notice}</p>`}\n      </section>\n    `\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-DR5QB5VN.js

@@ -0,0 +1,17 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  parsedJson
+} from "./chunk-EYDMJNNK.js";
+
+// src/cart-projection.ts
+var UNKNOWN = { items: [], subtotalMinor: 0, currency: "GBP", itemCount: 0, loading: true };
+function shownCart(host, given, client) {
+  const cart = parsedJson(host, "cart", given);
+  if (cart !== void 0) return { ...cart, loading: false };
+  return client === null ? UNKNOWN : client.cart.getState();
+}
+
+export {
+  shownCart
+};
+//# sourceMappingURL=chunk-DR5QB5VN.js.map

package/dist/chunk-DR5QB5VN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cart-projection.ts"],"sourcesContent":["import type { NymbalClient } from '@nymbalhq/sdk'\nimport type { CartItem } from '@nymbalhq/types'\nimport { parsedJson } from './base-element.js'\n\n/**\n * The cart a server hands an element as its `cart` attribute: the lines and their sums, never the `GET /api/cart`\n * body, which carries the cart token the API keeps in an HttpOnly cookie.\n */\nexport interface CartProjection {\n  items: CartItem[]\n  subtotalMinor: number\n  currency: string\n  itemCount: number\n}\n\n/** What a cart element shows; `loading` until the cart is known. */\nexport interface ShownCart extends CartProjection {\n  loading: boolean\n}\n\n/** No cart given and no store to read: the element's loading shell, never a false empty cart. */\nconst UNKNOWN: ShownCart = { items: [], subtotalMinor: 0, currency: 'GBP', itemCount: 0, loading: true }\n\n/** The cart a server gave the element while it stands, else the cart store's when there is a client. */\nexport function shownCart(host: Element, given: unknown, client: NymbalClient | null): ShownCart {\n  const cart = parsedJson<CartProjection>(host, 'cart', given)\n  if (cart !== undefined) return { ...cart, loading: false }\n  return client === null ? UNKNOWN : client.cart.getState()\n}\n"],"mappings":";;;;;;AAqBA,IAAM,UAAqB,EAAE,OAAO,CAAC,GAAG,eAAe,GAAG,UAAU,OAAO,WAAW,GAAG,SAAS,KAAK;AAGhG,SAAS,UAAU,MAAe,OAAgB,QAAwC;AAC/F,QAAM,OAAO,WAA2B,MAAM,QAAQ,KAAK;AAC3D,MAAI,SAAS,OAAW,QAAO,EAAE,GAAG,MAAM,SAAS,MAAM;AACzD,SAAO,WAAW,OAAO,UAAU,OAAO,KAAK,SAAS;AAC1D;","names":[]}

package/dist/chunk-DXWMNB5F.js

@@ -0,0 +1,70 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalVariantElement
+} from "./chunk-UYSZOEOA.js";
+import {
+  formatPrice
+} from "./chunk-RVSKX2RX.js";
+import {
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/product-price.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-product-price",
+  reactName: "ProductPrice",
+  // The product's first variant's price as a server read it, and the product whose store updates it may follow.
+  attributes: [
+    { name: "product-id", prop: "productId", type: "string" },
+    { name: "price-minor", prop: "priceMinor", type: "number" },
+    { name: "currency", prop: "currency", type: "string" },
+    { name: "compare-at-minor", prop: "compareAtMinor", type: "number" }
+  ],
+  events: [],
+  parts: ["price", "compare-at"],
+  slots: [],
+  children: false
+};
+var NymbalProductPrice = class extends NymbalVariantElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='price'] {
+        font-size: 1.5rem;
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='compare-at'] {
+        margin-right: var(--nymbal-spacing-sm, 0.5rem);
+        font-size: 1.5rem;
+        font-weight: var(--nymbal-font-weight-normal, 400);
+        color: var(--nymbal-color-text-muted, #71717a);
+        text-decoration: line-through;
+      }
+    `
+  ];
+  render() {
+    const store = this.selected();
+    const currency = store?.product.currency ?? this.currency ?? "GBP";
+    const price = store === null ? this.priceMinor : store.variant?.priceMinor ?? store.product.priceMinor;
+    const compareAt = store === null ? this.compareAtMinor : void 0;
+    if (price === void 0 || price === null || Number.isNaN(price)) return nothing;
+    return html`
+      ${compareAt !== void 0 && compareAt > price ? html`<s part="compare-at">${formatPrice(compareAt, currency)}</s>` : nothing}
+      <span part="price" data-testid="product-price">${formatPrice(price, currency)}</span>
+    `;
+  }
+};
+
+export {
+  NymbalProductPrice
+};
+//# sourceMappingURL=chunk-DXWMNB5F.js.map

package/dist/chunk-DXWMNB5F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/product-price.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport { baseStyles, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { formatPrice } from '../format.js'\nimport { NymbalVariantElement } from '../selected-variant.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-product-price',\n  reactName: 'ProductPrice',\n  // The product's first variant's price as a server read it, and the product whose store updates it may follow.\n  attributes: [\n    { name: 'product-id', prop: 'productId', type: 'string' },\n    { name: 'price-minor', prop: 'priceMinor', type: 'number' },\n    { name: 'currency', prop: 'currency', type: 'string' },\n    { name: 'compare-at-minor', prop: 'compareAtMinor', type: 'number' },\n  ],\n  events: [],\n  parts: ['price', 'compare-at'],\n  slots: [],\n  children: false,\n}\n\n/** A product page's price: the selected variant's once the product store holds this product. */\nexport class NymbalProductPrice extends NymbalVariantElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='price'] {\n        font-size: 1.5rem;\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='compare-at'] {\n        margin-right: var(--nymbal-spacing-sm, 0.5rem);\n        font-size: 1.5rem;\n        font-weight: var(--nymbal-font-weight-normal, 400);\n        color: var(--nymbal-color-text-muted, #71717a);\n        text-decoration: line-through;\n      }\n    `,\n  ]\n\n  declare priceMinor: number | undefined\n  declare currency: string | undefined\n  declare compareAtMinor: number | undefined\n\n  protected override render() {\n    const store = this.selected()\n    const currency = store?.product.currency ?? this.currency ?? 'GBP'\n    const price =\n      store === null ? this.priceMinor : (store.variant?.priceMinor ?? store.product.priceMinor)\n    // A variant carries no compare-at price, so one the server was given stands for the first variant only.\n    const compareAt = store === null ? this.compareAtMinor : undefined\n    if (price === undefined || price === null || Number.isNaN(price)) return nothing\n    return html`\n      ${compareAt !== undefined && compareAt > price\n        ? html`<s part=\"compare-at\">${formatPrice(compareAt, currency)}</s>`\n        : nothing}\n      <span part=\"price\" data-testid=\"product-price\">${formatPrice(price, currency)}</span>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAKnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,EAAE,MAAM,cAAc,MAAM,aAAa,MAAM,SAAS;AAAA,IACxD,EAAE,MAAM,eAAe,MAAM,cAAc,MAAM,SAAS;AAAA,IAC1D,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,SAAS;AAAA,IACrD,EAAE,MAAM,oBAAoB,MAAM,kBAAkB,MAAM,SAAS;AAAA,EACrE;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,SAAS,YAAY;AAAA,EAC7B,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAGO,IAAM,qBAAN,cAAiC,qBAAqB;AAAA,EAC3D,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBF;AAAA,EAMmB,SAAS;AAC1B,UAAM,QAAQ,KAAK,SAAS;AAC5B,UAAM,WAAW,OAAO,QAAQ,YAAY,KAAK,YAAY;AAC7D,UAAM,QACJ,UAAU,OAAO,KAAK,aAAc,MAAM,SAAS,cAAc,MAAM,QAAQ;AAEjF,UAAM,YAAY,UAAU,OAAO,KAAK,iBAAiB;AACzD,QAAI,UAAU,UAAa,UAAU,QAAQ,OAAO,MAAM,KAAK,EAAG,QAAO;AACzE,WAAO;AAAA,QACH,cAAc,UAAa,YAAY,QACrC,4BAA4B,YAAY,WAAW,QAAQ,CAAC,SAC5D,OAAO;AAAA,uDACsC,YAAY,OAAO,QAAQ,CAAC;AAAA;AAAA,EAEjF;AACF;","names":[]}