@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/chunk-V55K2CS5.js

@@ -0,0 +1,126 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  renderField
+} from "./chunk-PN6QKYE4.js";
+import {
+  fieldStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/address-form.ts
+import { css, html } from "lit";
+var SCHEMA = {
+  tag: "nymbal-address-form",
+  reactName: "AddressForm",
+  attributes: [{ name: "id-prefix", prop: "idPrefix", type: "string" }],
+  events: [],
+  parts: ["fields", "field", "label", "input"],
+  slots: [],
+  children: false
+};
+var FIELDS = [
+  { name: "firstName", label: "First Name", autocomplete: "given-name", required: true },
+  { name: "lastName", label: "Last Name", autocomplete: "family-name", required: true },
+  {
+    name: "addressLine1",
+    label: "Address Line 1",
+    autocomplete: "address-line1",
+    required: true,
+    full: true
+  },
+  {
+    name: "addressLine2",
+    label: "Address Line 2 (optional)",
+    autocomplete: "address-line2",
+    full: true
+  },
+  { name: "city", label: "City", autocomplete: "address-level2", required: true },
+  { name: "region", label: "State / County", autocomplete: "address-level1", required: true },
+  { name: "postalCode", label: "Postcode", autocomplete: "postal-code", required: true },
+  {
+    name: "country",
+    label: "Country (2-letter code)",
+    autocomplete: "country",
+    required: true,
+    placeholder: "GB"
+  }
+];
+var NymbalAddressForm = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    fieldStyles,
+    css`
+      [part~='fields'] {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+        gap: 0 var(--nymbal-spacing-md, 1rem);
+      }
+      .full {
+        grid-column: 1 / -1;
+      }
+    `
+  ];
+  input(name) {
+    return this.renderRoot.querySelector(`[name="${name}"]`);
+  }
+  /** The address as typed, trimmed; an empty second line is left out. */
+  get value() {
+    const field = (name) => this.input(name)?.value.trim() ?? "";
+    const line2 = field("addressLine2");
+    return {
+      firstName: field("firstName"),
+      lastName: field("lastName"),
+      addressLine1: field("addressLine1"),
+      ...line2 !== "" && { addressLine2: line2 },
+      city: field("city"),
+      region: field("region"),
+      postalCode: field("postalCode"),
+      country: field("country")
+    };
+  }
+  /** Shows the browser's message on the first field that is not valid, as a native form would. */
+  reportValidity() {
+    for (const input of this.renderRoot.querySelectorAll("input")) {
+      if (!input.reportValidity()) return false;
+    }
+    return true;
+  }
+  reset() {
+    for (const input of this.renderRoot.querySelectorAll("input")) input.value = "";
+  }
+  /**
+   * The inputs sit in this shadow root, so they have no form owner and Enter in one submits nothing natively. Enter
+   * submits the form that holds this element instead, as it would if the fields were its own.
+   */
+  onKeydown = (event) => {
+    if (event.key !== "Enter" || event.isComposing || event.defaultPrevented) return;
+    if (!(event.target instanceof HTMLInputElement)) return;
+    const form = this.closest("form");
+    if (form === null) return;
+    event.preventDefault();
+    form.requestSubmit();
+  };
+  render() {
+    const prefix = this.idPrefix ?? "address";
+    return html`
+      <div part="fields" @keydown=${this.onKeydown}>
+        ${FIELDS.map(
+      ({ full, ...f }) => html`<div class=${full ? "full" : ""}>
+              ${renderField({ ...f, id: `${prefix}-${f.name}` })}
+            </div>`
+    )}
+      </div>
+    `;
+  }
+};
+
+export {
+  NymbalAddressForm
+};
+//# sourceMappingURL=chunk-V55K2CS5.js.map

package/dist/chunk-V55K2CS5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/address-form.ts"],"sourcesContent":["import { css, html } from 'lit'\nimport type { Address } from '@nymbalhq/types'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { renderField, type FieldSpec } from '../form-element.js'\nimport { fieldStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-address-form',\n  reactName: 'AddressForm',\n  attributes: [{ name: 'id-prefix', prop: 'idPrefix', type: 'string' }],\n  events: [],\n  parts: ['fields', 'field', 'label', 'input'],\n  slots: [],\n  children: false,\n}\n\ntype FieldName = Exclude<keyof Address, 'company' | 'phone'>\n\nconst FIELDS: Array<Omit<FieldSpec, 'id' | 'name'> & { name: FieldName; full?: boolean }> = [\n  { name: 'firstName', label: 'First Name', autocomplete: 'given-name', required: true },\n  { name: 'lastName', label: 'Last Name', autocomplete: 'family-name', required: true },\n  {\n    name: 'addressLine1',\n    label: 'Address Line 1',\n    autocomplete: 'address-line1',\n    required: true,\n    full: true,\n  },\n  {\n    name: 'addressLine2',\n    label: 'Address Line 2 (optional)',\n    autocomplete: 'address-line2',\n    full: true,\n  },\n  { name: 'city', label: 'City', autocomplete: 'address-level2', required: true },\n  { name: 'region', label: 'State / County', autocomplete: 'address-level1', required: true },\n  { name: 'postalCode', label: 'Postcode', autocomplete: 'postal-code', required: true },\n  {\n    name: 'country',\n    label: 'Country (2-letter code)',\n    autocomplete: 'country',\n    required: true,\n    placeholder: 'GB',\n  },\n]\n\n/**\n * The address fields, with ids and test ids `<id-prefix>-<field>`. It renders no `<form>`: the view that holds it owns\n * the submit (Enter in a field submits it) and reads `value`.\n */\nexport class NymbalAddressForm extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    fieldStyles,\n    css`\n      [part~='fields'] {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n        gap: 0 var(--nymbal-spacing-md, 1rem);\n      }\n      .full {\n        grid-column: 1 / -1;\n      }\n    `,\n  ]\n\n  declare idPrefix: string | undefined\n\n  private input(name: FieldName): HTMLInputElement | null {\n    return this.renderRoot.querySelector<HTMLInputElement>(`[name=\"${name}\"]`)\n  }\n\n  /** The address as typed, trimmed; an empty second line is left out. */\n  get value(): Address {\n    const field = (name: FieldName): string => this.input(name)?.value.trim() ?? ''\n    const line2 = field('addressLine2')\n    return {\n      firstName: field('firstName'),\n      lastName: field('lastName'),\n      addressLine1: field('addressLine1'),\n      ...(line2 !== '' && { addressLine2: line2 }),\n      city: field('city'),\n      region: field('region'),\n      postalCode: field('postalCode'),\n      country: field('country'),\n    }\n  }\n\n  /** Shows the browser's message on the first field that is not valid, as a native form would. */\n  reportValidity(): boolean {\n    for (const input of this.renderRoot.querySelectorAll('input')) {\n      if (!input.reportValidity()) return false\n    }\n    return true\n  }\n\n  reset(): void {\n    for (const input of this.renderRoot.querySelectorAll('input')) input.value = ''\n  }\n\n  /**\n   * The inputs sit in this shadow root, so they have no form owner and Enter in one submits nothing natively. Enter\n   * submits the form that holds this element instead, as it would if the fields were its own.\n   */\n  private readonly onKeydown = (event: KeyboardEvent): void => {\n    if (event.key !== 'Enter' || event.isComposing || event.defaultPrevented) return\n    if (!(event.target instanceof HTMLInputElement)) return\n    const form = this.closest('form')\n    if (form === null) return\n    event.preventDefault()\n    form.requestSubmit()\n  }\n\n  protected override render() {\n    const prefix = this.idPrefix ?? 'address'\n    return html`\n      <div part=\"fields\" @keydown=${this.onKeydown}>\n        ${FIELDS.map(\n          ({ full, ...f }) =>\n            html`<div class=${full ? 'full' : ''}>\n              ${renderField({ ...f, id: `${prefix}-${f.name}` })}\n            </div>`,\n        )}\n      </div>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,KAAK,YAAY;AAM1B,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY,CAAC,EAAE,MAAM,aAAa,MAAM,YAAY,MAAM,SAAS,CAAC;AAAA,EACpE,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,UAAU,SAAS,SAAS,OAAO;AAAA,EAC3C,OAAO,CAAC;AAAA,EACR,UAAU;AACZ;AAIA,IAAM,SAAsF;AAAA,EAC1F,EAAE,MAAM,aAAa,OAAO,cAAc,cAAc,cAAc,UAAU,KAAK;AAAA,EACrF,EAAE,MAAM,YAAY,OAAO,aAAa,cAAc,eAAe,UAAU,KAAK;AAAA,EACpF;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,IACd,MAAM;AAAA,EACR;AAAA,EACA,EAAE,MAAM,QAAQ,OAAO,QAAQ,cAAc,kBAAkB,UAAU,KAAK;AAAA,EAC9E,EAAE,MAAM,UAAU,OAAO,kBAAkB,cAAc,kBAAkB,UAAU,KAAK;AAAA,EAC1F,EAAE,MAAM,cAAc,OAAO,YAAY,cAAc,eAAe,UAAU,KAAK;AAAA,EACrF;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AACF;AAMO,IAAM,oBAAN,cAAgC,cAAc;AAAA,EACnD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUF;AAAA,EAIQ,MAAM,MAA0C;AACtD,WAAO,KAAK,WAAW,cAAgC,UAAU,IAAI,IAAI;AAAA,EAC3E;AAAA;AAAA,EAGA,IAAI,QAAiB;AACnB,UAAM,QAAQ,CAAC,SAA4B,KAAK,MAAM,IAAI,GAAG,MAAM,KAAK,KAAK;AAC7E,UAAM,QAAQ,MAAM,cAAc;AAClC,WAAO;AAAA,MACL,WAAW,MAAM,WAAW;AAAA,MAC5B,UAAU,MAAM,UAAU;AAAA,MAC1B,cAAc,MAAM,cAAc;AAAA,MAClC,GAAI,UAAU,MAAM,EAAE,cAAc,MAAM;AAAA,MAC1C,MAAM,MAAM,MAAM;AAAA,MAClB,QAAQ,MAAM,QAAQ;AAAA,MACtB,YAAY,MAAM,YAAY;AAAA,MAC9B,SAAS,MAAM,SAAS;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAGA,iBAA0B;AACxB,eAAW,SAAS,KAAK,WAAW,iBAAiB,OAAO,GAAG;AAC7D,UAAI,CAAC,MAAM,eAAe,EAAG,QAAO;AAAA,IACtC;AACA,WAAO;AAAA,EACT;AAAA,EAEA,QAAc;AACZ,eAAW,SAAS,KAAK,WAAW,iBAAiB,OAAO,EAAG,OAAM,QAAQ;AAAA,EAC/E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMiB,YAAY,CAAC,UAA+B;AAC3D,QAAI,MAAM,QAAQ,WAAW,MAAM,eAAe,MAAM,iBAAkB;AAC1E,QAAI,EAAE,MAAM,kBAAkB,kBAAmB;AACjD,UAAM,OAAO,KAAK,QAAQ,MAAM;AAChC,QAAI,SAAS,KAAM;AACnB,UAAM,eAAe;AACrB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEmB,SAAS;AAC1B,UAAM,SAAS,KAAK,YAAY;AAChC,WAAO;AAAA,oCACyB,KAAK,SAAS;AAAA,UACxC,OAAO;AAAA,MACP,CAAC,EAAE,MAAM,GAAG,EAAE,MACZ,kBAAkB,OAAO,SAAS,EAAE;AAAA,gBAChC,YAAY,EAAE,GAAG,GAAG,IAAI,GAAG,MAAM,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC;AAAA;AAAA,IAExD,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;","names":[]}

package/dist/chunk-VTQVGNVC.js

@@ -0,0 +1,346 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalQuantitySelector
+} from "./chunk-HPBC3OG7.js";
+import {
+  formatPrice
+} from "./chunk-RVSKX2RX.js";
+import {
+  buttonStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  shownCart
+} from "./chunk-DR5QB5VN.js";
+import {
+  NymbalElement,
+  baseStyles,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/cart-page.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-cart-page",
+  reactName: "CartPage",
+  // The cart a server read (cart-projection.ts), shown until the cart store settles.
+  attributes: [{ name: "cart", prop: "cart", type: "json" }],
+  events: [],
+  parts: [
+    "loading",
+    "empty",
+    "empty-title",
+    "empty-text",
+    "continue",
+    "layout",
+    "header",
+    "title",
+    "count",
+    "items",
+    "item",
+    "item-image",
+    "item-info",
+    "item-name",
+    "item-variant",
+    "item-price",
+    "item-remove",
+    "item-qty",
+    "item-total",
+    "summary",
+    "summary-title",
+    "summary-row",
+    "subtotal",
+    "total",
+    "actions",
+    "checkout"
+  ],
+  slots: ["title", "empty", "checkout-label"],
+  children: false
+};
+var NymbalCartPage = class extends NymbalElement {
+  static schema = SCHEMA;
+  static uses = [NymbalQuantitySelector];
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='loading'],
+      [part~='empty'] {
+        padding: 4rem var(--nymbal-spacing-md, 1rem);
+        text-align: center;
+      }
+      /* Until the cart is known the page keeps what follows it below the fold, so a cart with lines does not push
+         the footer down as it arrives. */
+      [part~='loading'] {
+        min-height: 100vh;
+      }
+      [part~='empty-title'] {
+        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='empty-text'] {
+        margin: 0 0 var(--nymbal-spacing-lg, 1.5rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='layout'] {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: var(--nymbal-spacing-xl, 2rem);
+      }
+      @media (min-width: 769px) {
+        [part~='layout'] {
+          grid-template-columns: 1fr 360px;
+          align-items: start;
+        }
+      }
+      [part~='header'] {
+        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='title'] {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='count'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-normal, 400);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='items'] {
+        display: flex;
+        flex-direction: column;
+      }
+      [part~='item'] {
+        display: grid;
+        grid-template-columns: 80px 1fr auto;
+        gap: var(--nymbal-spacing-md, 1rem);
+        padding: var(--nymbal-spacing-md, 1rem) 0;
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+        align-items: start;
+      }
+      [part~='item']:first-child {
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      @media (min-width: 641px) {
+        [part~='item'] {
+          grid-template-columns: 100px 1fr auto auto;
+          gap: var(--nymbal-spacing-lg, 1.5rem);
+          align-items: center;
+        }
+      }
+      [part~='item-image'] {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+        border-radius: var(--nymbal-radius-md, 0.5rem);
+        background-color: #f4f4f5;
+      }
+      [part~='item-info'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+        min-width: 0;
+      }
+      [part~='item-name'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+      }
+      [part~='item-name']:hover {
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='item-variant'],
+      [part~='item-price'] {
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='item-remove'] {
+        align-self: start;
+        padding: 0;
+        font: inherit;
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+        color: var(--nymbal-color-text-muted, #71717a);
+        background: none;
+        border: none;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+      [part~='item-remove']:hover {
+        color: var(--nymbal-color-error, #dc2626);
+      }
+      [part~='item-total'] {
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        text-align: right;
+        white-space: nowrap;
+      }
+      [part~='summary'] {
+        position: sticky;
+        top: 80px;
+        padding: var(--nymbal-spacing-lg, 1.5rem);
+        background-color: #fafafa;
+        border: 1px solid var(--nymbal-color-border, #e4e4e7);
+        border-radius: var(--nymbal-radius-lg, 0.75rem);
+      }
+      [part~='summary-title'] {
+        margin: 0 0 var(--nymbal-spacing-md, 1rem);
+        padding-bottom: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      dl {
+        margin: 0;
+      }
+      dd {
+        margin: 0;
+        font-weight: var(--nymbal-font-weight-medium, 500);
+      }
+      [part~='summary-row'] {
+        display: flex;
+        justify-content: space-between;
+        padding: var(--nymbal-spacing-xs, 0.25rem) 0;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+      }
+      [part~='summary-row'] dt {
+        color: var(--nymbal-color-text-muted, #71717a);
+      }
+      [part~='total'] {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--nymbal-spacing-md, 1rem);
+        padding-top: var(--nymbal-spacing-md, 1rem);
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      [part~='actions'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        margin-top: var(--nymbal-spacing-lg, 1.5rem);
+      }
+    `
+  ];
+  stores() {
+    return [this.client.cart];
+  }
+  storeSettled() {
+    this.cart = void 0;
+  }
+  /** The first line's image is at the top of the page and is often its LCP, so only the lines below it load lazily. */
+  renderLine(item, currency, index) {
+    return html`
+      <div part="item" data-testid="cart-item-${item.variantId}">
+        ${item.imageUrl ? html`<img
+              part="item-image"
+              src=${item.imageUrl}
+              alt=${item.productName}
+              width="100"
+              height="100"
+              loading=${index === 0 ? "eager" : "lazy"}
+            />` : html`<div part="item-image" aria-hidden="true"></div>`}
+        <div part="item-info">
+          <a part="item-name" href="/product/${encodeURIComponent(item.productId)}"
+            >${item.productName}</a
+          >
+          ${item.variantName ? html`<span part="item-variant">${item.variantName}</span>` : nothing}
+          <span part="item-price">${formatPrice(item.priceMinor, currency)} each</span>
+          <button
+            type="button"
+            part="item-remove"
+            data-testid="cart-remove-${item.variantId}"
+            aria-label="Remove ${item.productName} from cart"
+            @click=${() => void this.client.cart.removeItem(item.variantId)}
+          >
+            Remove
+          </button>
+        </div>
+        <div part="item-qty">
+          <nymbal-quantity-selector
+            value=${item.qty}
+            min="1"
+            max="99"
+            @nymbal:quantity:changed=${(e) => void this.client.cart.updateQuantity(item.variantId, e.detail.value)}
+          ></nymbal-quantity-selector>
+        </div>
+        <span part="item-total">${formatPrice(item.priceMinor * item.qty, currency)}</span>
+      </div>
+    `;
+  }
+  render() {
+    const state = shownCart(this, this.cart, this.readsStores ? this.client : null);
+    const { items } = state;
+    const currency = state.currency || "GBP";
+    if (state.loading && items.length === 0) {
+      return html`<div part="loading" role="status">Loading your cart...</div>`;
+    }
+    if (items.length === 0) {
+      return html`
+        <div part="empty">
+          <slot name="empty">
+            <h1 part="empty-title">Your cart is empty</h1>
+            <p part="empty-text">Looks like you haven't added anything yet.</p>
+          </slot>
+          <a part="continue" class="btn btn-primary" href="/products" data-testid="continue-shopping"
+            >Continue Shopping</a
+          >
+        </div>
+      `;
+    }
+    const subtotal = formatPrice(state.subtotalMinor, currency);
+    return html`
+      <div part="layout">
+        <div>
+          <div part="header">
+            <h1 part="title">
+              <slot name="title">Your Cart</slot>
+              <span part="count">(${items.length} ${items.length === 1 ? "item" : "items"})</span>
+            </h1>
+          </div>
+          <div part="items" data-testid="cart-items">
+            ${items.map((item, index) => this.renderLine(item, currency, index))}
+          </div>
+        </div>
+        <div part="summary" data-testid="cart-summary">
+          <h2 part="summary-title">Order Summary</h2>
+          <dl>
+            <div part="summary-row subtotal">
+              <dt>Subtotal</dt>
+              <dd>${subtotal}</dd>
+            </div>
+            <div part="summary-row">
+              <dt>Shipping</dt>
+              <dd>Calculated at checkout</dd>
+            </div>
+          </dl>
+          <div part="total">
+            <span>Estimated Total</span>
+            <span>${subtotal}</span>
+          </div>
+          <div part="actions">
+            <a part="checkout" class="btn btn-primary" href="/checkout" data-testid="checkout-btn"
+              ><slot name="checkout-label">Proceed to Checkout</slot></a
+            >
+            <a part="continue" class="btn btn-secondary" href="/products">Continue Shopping</a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+
+export {
+  NymbalCartPage
+};
+//# sourceMappingURL=chunk-VTQVGNVC.js.map

package/dist/chunk-VTQVGNVC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cart-page.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { CartItem } from '@nymbalhq/types'\nimport { baseStyles, NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { formatPrice } from '../format.js'\nimport { shownCart } from '../cart-projection.js'\nimport { NymbalQuantitySelector } from './quantity-selector.js'\nimport { buttonStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-cart-page',\n  reactName: 'CartPage',\n  // The cart a server read (cart-projection.ts), shown until the cart store settles.\n  attributes: [{ name: 'cart', prop: 'cart', type: 'json' }],\n  events: [],\n  parts: [\n    'loading',\n    'empty',\n    'empty-title',\n    'empty-text',\n    'continue',\n    'layout',\n    'header',\n    'title',\n    'count',\n    'items',\n    'item',\n    'item-image',\n    'item-info',\n    'item-name',\n    'item-variant',\n    'item-price',\n    'item-remove',\n    'item-qty',\n    'item-total',\n    'summary',\n    'summary-title',\n    'summary-row',\n    'subtotal',\n    'total',\n    'actions',\n    'checkout',\n  ],\n  slots: ['title', 'empty', 'checkout-label'],\n  children: false,\n}\n\n/** The cart as a page: its lines, quantities and removal, and a summary whose subtotal is the API's. */\nexport class NymbalCartPage extends NymbalElement {\n  static override schema = SCHEMA\n  static uses = [NymbalQuantitySelector]\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\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~='loading'],\n      [part~='empty'] {\n        padding: 4rem var(--nymbal-spacing-md, 1rem);\n        text-align: center;\n      }\n      /* Until the cart is known the page keeps what follows it below the fold, so a cart with lines does not push\n         the footer down as it arrives. */\n      [part~='loading'] {\n        min-height: 100vh;\n      }\n      [part~='empty-title'] {\n        margin: 0 0 var(--nymbal-spacing-xs, 0.25rem);\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n      }\n      [part~='empty-text'] {\n        margin: 0 0 var(--nymbal-spacing-lg, 1.5rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text-muted, #71717a);\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 360px;\n          align-items: start;\n        }\n      }\n      [part~='header'] {\n        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='title'] {\n        margin: 0;\n        font-size: 1.5rem;\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='count'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-normal, 400);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='items'] {\n        display: flex;\n        flex-direction: column;\n      }\n      [part~='item'] {\n        display: grid;\n        grid-template-columns: 80px 1fr auto;\n        gap: var(--nymbal-spacing-md, 1rem);\n        padding: var(--nymbal-spacing-md, 1rem) 0;\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n        align-items: start;\n      }\n      [part~='item']:first-child {\n        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      @media (min-width: 641px) {\n        [part~='item'] {\n          grid-template-columns: 100px 1fr auto auto;\n          gap: var(--nymbal-spacing-lg, 1.5rem);\n          align-items: center;\n        }\n      }\n      [part~='item-image'] {\n        display: block;\n        width: 100%;\n        aspect-ratio: 1 / 1;\n        object-fit: cover;\n        border-radius: var(--nymbal-radius-md, 0.5rem);\n        background-color: #f4f4f5;\n      }\n      [part~='item-info'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-xs, 0.25rem);\n        min-width: 0;\n      }\n      [part~='item-name'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n      }\n      [part~='item-name']:hover {\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='item-variant'],\n      [part~='item-price'] {\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n      }\n      [part~='item-remove'] {\n        align-self: start;\n        padding: 0;\n        font: inherit;\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n        color: var(--nymbal-color-text-muted, #71717a);\n        background: none;\n        border: none;\n        text-decoration: underline;\n        cursor: pointer;\n      }\n      [part~='item-remove']:hover {\n        color: var(--nymbal-color-error, #dc2626);\n      }\n      [part~='item-total'] {\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        text-align: right;\n        white-space: nowrap;\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        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\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-md, 1rem);\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        border-top: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      [part~='actions'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        margin-top: var(--nymbal-spacing-lg, 1.5rem);\n      }\n    `,\n  ]\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  /** The first line's image is at the top of the page and is often its LCP, so only the lines below it load lazily. */\n  private renderLine(item: CartItem, currency: string, index: number) {\n    return html`\n      <div part=\"item\" data-testid=\"cart-item-${item.variantId}\">\n        ${item.imageUrl\n          ? html`<img\n              part=\"item-image\"\n              src=${item.imageUrl}\n              alt=${item.productName}\n              width=\"100\"\n              height=\"100\"\n              loading=${index === 0 ? 'eager' : 'lazy'}\n            />`\n          : html`<div part=\"item-image\" aria-hidden=\"true\"></div>`}\n        <div part=\"item-info\">\n          <a part=\"item-name\" href=\"/product/${encodeURIComponent(item.productId)}\"\n            >${item.productName}</a\n          >\n          ${item.variantName ? html`<span part=\"item-variant\">${item.variantName}</span>` : nothing}\n          <span part=\"item-price\">${formatPrice(item.priceMinor, currency)} each</span>\n          <button\n            type=\"button\"\n            part=\"item-remove\"\n            data-testid=\"cart-remove-${item.variantId}\"\n            aria-label=\"Remove ${item.productName} from cart\"\n            @click=${() => void this.client.cart.removeItem(item.variantId)}\n          >\n            Remove\n          </button>\n        </div>\n        <div part=\"item-qty\">\n          <nymbal-quantity-selector\n            value=${item.qty}\n            min=\"1\"\n            max=\"99\"\n            @nymbal:quantity:changed=${(e: CustomEvent<{ value: number }>) =>\n              void this.client.cart.updateQuantity(item.variantId, e.detail.value)}\n          ></nymbal-quantity-selector>\n        </div>\n        <span part=\"item-total\">${formatPrice(item.priceMinor * item.qty, currency)}</span>\n      </div>\n    `\n  }\n\n  protected override render() {\n    const state = shownCart(this, this.cart, this.readsStores ? this.client : null)\n    const { items } = state\n    const currency = state.currency || 'GBP'\n\n    if (state.loading && items.length === 0) {\n      return html`<div part=\"loading\" role=\"status\">Loading your cart...</div>`\n    }\n    if (items.length === 0) {\n      return html`\n        <div part=\"empty\">\n          <slot name=\"empty\">\n            <h1 part=\"empty-title\">Your cart is empty</h1>\n            <p part=\"empty-text\">Looks like you haven't added anything yet.</p>\n          </slot>\n          <a part=\"continue\" class=\"btn btn-primary\" href=\"/products\" data-testid=\"continue-shopping\"\n            >Continue Shopping</a\n          >\n        </div>\n      `\n    }\n\n    const subtotal = formatPrice(state.subtotalMinor, currency)\n    return html`\n      <div part=\"layout\">\n        <div>\n          <div part=\"header\">\n            <h1 part=\"title\">\n              <slot name=\"title\">Your Cart</slot>\n              <span part=\"count\">(${items.length} ${items.length === 1 ? 'item' : 'items'})</span>\n            </h1>\n          </div>\n          <div part=\"items\" data-testid=\"cart-items\">\n            ${items.map((item, index) => this.renderLine(item, currency, index))}\n          </div>\n        </div>\n        <div part=\"summary\" data-testid=\"cart-summary\">\n          <h2 part=\"summary-title\">Order Summary</h2>\n          <dl>\n            <div part=\"summary-row subtotal\">\n              <dt>Subtotal</dt>\n              <dd>${subtotal}</dd>\n            </div>\n            <div part=\"summary-row\">\n              <dt>Shipping</dt>\n              <dd>Calculated at checkout</dd>\n            </div>\n          </dl>\n          <div part=\"total\">\n            <span>Estimated Total</span>\n            <span>${subtotal}</span>\n          </div>\n          <div part=\"actions\">\n            <a part=\"checkout\" class=\"btn btn-primary\" href=\"/checkout\" data-testid=\"checkout-btn\"\n              ><slot name=\"checkout-label\">Proceed to Checkout</slot></a\n            >\n            <a part=\"continue\" class=\"btn btn-secondary\" href=\"/products\">Continue Shopping</a>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"],"mappings":"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","names":[]}