@happyvertical/smrt-commerce 0.53.4 → 0.53.5

package/dist/svelte/components/InvoiceEditor.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+import { CurrencyDisplay } from '@happyvertical/smrt-ui';
+import {
+  CurrencySelect,
+  Form,
+  FormGroup,
+  Input,
+  Select,
+} from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { calculateInvoiceDraft } from '../invoices/calculations.js';
+import {
+  invoiceFieldNames,
+  invoiceLineFieldNames,
+} from '../invoices/fields.js';
+import { invoicePreparationMessages as M } from '../invoices/messages.js';
+import type {
+  InvoiceDraftValues,
+  InvoiceEditorProps,
+  InvoiceLineFieldNames,
+} from '../invoices/types.js';
+import InvoiceLineEditor from './InvoiceLineEditor.svelte';
+import InvoiceReview from './InvoiceReview.svelte';
+/** General native invoice editor; server owns prices, tax, authorization and persistence. */
+export interface Props extends InvoiceEditorProps {}
+let {
+  action,
+  method = 'post',
+  id,
+  title,
+  values,
+  customers = [],
+  errors = {},
+  fields = {},
+  lineFields = {},
+  canEdit = true,
+  pending = false,
+  retryStatus = 'idle',
+  message,
+  review,
+  hiddenFields = [],
+  saveIntent = 'save',
+  addIntent = 'addLine',
+  removePrefix = 'removeLine:',
+  saveLabel,
+  cancelHref,
+  children,
+  onsubmit,
+}: Props = $props();
+const { t } = useI18n();
+const instanceId = $props.id();
+const formId = $derived(id ?? `invoice-editor-${instanceId}`);
+const names = $derived({ ...invoiceFieldNames, ...fields });
+const rowNames = $derived({ ...invoiceLineFieldNames, ...lineFields });
+const busy = $derived(
+  pending || retryStatus === 'submitting' || retryStatus === 'busy',
+);
+let draft = $derived(values);
+const calculation = $derived(calculateInvoiceDraft(draft));
+function refresh(event: Event) {
+  const data = new FormData(event.currentTarget as HTMLFormElement);
+  const text = (name: string) => String(data.get(name) ?? '');
+  draft = {
+    ...draft,
+    ...Object.fromEntries(
+      Object.entries(names)
+        .filter(([key]) => key !== 'intent')
+        .map(([key, name]) => [key, text(name)]),
+    ),
+    lines: draft.lines.map((line, index) => ({
+      ...line,
+      ...Object.fromEntries(
+        Object.entries(rowNames).map(([key, name]) => [
+          key,
+          String(data.getAll(name)[index] ?? ''),
+        ]),
+      ),
+    })),
+  } as InvoiceDraftValues;
+}
+function lineErrors(key: string) {
+  return Object.fromEntries(
+    Object.keys(rowNames).map((field) => [field, errors[`${key}.${field}`]]),
+  ) as Partial<Record<keyof InvoiceLineFieldNames, string>>;
+}
+</script>
+<section class="invoice-editor" aria-labelledby={`${formId}-title`}>
+  <h2 id={`${formId}-title`}>{title ?? t(M['commerce.preparation.title'])}</h2>
+  {#if review}<InvoiceReview {review} />{/if}
+  {#if !canEdit}<p>{t(M['commerce.preparation.readonly'])}</p>{/if}
+  <Form id={formId} {action} {method} preventDefault={false} {onsubmit} oninput={refresh} onchange={refresh} aria-busy={busy}>
+    <div class="fields">
+      {#if message}<p role="alert">{message}</p>{/if}
+      {#if retryStatus === 'transport-error'}<p role="status">{t(M['commerce.preparation.uncertain'])}</p>{/if}
+      {#each hiddenFields as field}<Input type="hidden" name={field.name} value={field.value} interaction={false} />{/each}
+      {#if canEdit}<Button type="submit" name={names.intent} value={saveIntent} disabled={busy}>{saveLabel ?? t(M['commerce.preparation.save'])}</Button>{/if}
+      <fieldset disabled={!canEdit} class="header-fields">
+        <FormGroup id={`${formId}-customer`} label={t(M['commerce.invoice.customer'])} error={errors.customerId}>
+          <Select name={names.customerId} value={draft.customerId}>
+            <option value="">{t(M['commerce.invoice.chooseCustomer'])}</option>
+            {#if draft.customerId && !customers.some(customer => customer.id === draft.customerId)}<option value={draft.customerId}>{t(M['commerce.invoice.retained'], { reference: draft.customerId })}</option>{/if}
+            {#each customers as customer}<option value={customer.id}>{customer.label}</option>{/each}
+          </Select>
+        </FormGroup>
+        <FormGroup id={`${formId}-issued`} label={t(M['commerce.invoice.issued'])} error={errors.issuedOn}><Input name={names.issuedOn} value={draft.issuedOn} /></FormGroup>
+        <FormGroup id={`${formId}-due`} label={t(M['commerce.invoice.due'])} error={errors.dueOn}><Input name={names.dueOn} value={draft.dueOn} /></FormGroup>
+        <FormGroup id={`${formId}-currency`} label={t(M['commerce.invoice.currency'])} error={errors.currency}><CurrencySelect name={names.currency} value={draft.currency} /></FormGroup>
+        <FormGroup id={`${formId}-terms`} label={t(M['commerce.invoice.terms'])} error={errors.paymentTerms}><Input name={names.paymentTerms} value={draft.paymentTerms} /></FormGroup>
+        <FormGroup id={`${formId}-tax`} label={t(M['commerce.invoice.defaultTax'])} error={errors.taxRate}><Input name={names.taxRate} value={draft.taxRate} inputmode="decimal" /></FormGroup>
+      </fieldset>
+      {#if draft.lines.length === 0}<p>{t(M['commerce.invoice.empty'])}</p>{/if}
+      {#each draft.lines as line, index (line.key)}
+        <InvoiceLineEditor {line} currency={draft.currency} inheritedTaxRate={draft.taxRate} number={index + 1} id={`${formId}-line-${index}`} fields={rowNames} errors={lineErrors(line.key)} {canEdit} pending={busy} intentField={names.intent} {removePrefix} />
+      {/each}
+      {#if canEdit}<Button type="submit" name={names.intent} value={addIntent} formnovalidate disabled={busy} variant="secondary">{t(M['commerce.invoice.add'])}</Button>{/if}
+      <div aria-live="polite" class="summary">
+        {#if calculation.valid}
+          <dl>{#each ['gross', 'discount', 'subtotal', 'tax', 'total'] as key}<div><dt>{t(M[`commerce.invoice.${key}` as 'commerce.invoice.total'])}</dt><dd><CurrencyDisplay amount={calculation[`${key}Minor` as 'totalMinor']} currency={draft.currency} unit="cents" /></dd></div>{/each}</dl>
+        {:else}<p>{t(M['commerce.invoice.invalid'])}</p>{/if}
+      </div>
+      <p>{t(M['commerce.invoice.preview'])}</p>
+      {@render children?.(draft)}
+      {#if cancelHref}<Button href={cancelHref} variant="ghost">{t(M['commerce.preparation.cancel'])}</Button>{/if}
+    </div>
+  </Form>
+</section>
+<style>
+.invoice-editor, .fields, .header-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--smrt-spacing-4); min-width: 0; }
+.invoice-editor { max-width: 48rem; overflow-wrap: anywhere; }
+.header-fields { margin: 0; padding: 0; border: 0; }
+h2, p, dl, dd { margin: 0; }
+.summary dl { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-4); }
+</style>

package/dist/svelte/components/InvoiceEditor.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { InvoiceEditorProps } from '../invoices/types.js';
+/** General native invoice editor; server owns prices, tax, authorization and persistence. */
+export interface Props extends InvoiceEditorProps {
+}
+declare const InvoiceEditor: import("svelte").Component<Props, {}, "">;
+type InvoiceEditor = ReturnType<typeof InvoiceEditor>;
+export default InvoiceEditor;
+//# sourceMappingURL=InvoiceEditor.svelte.d.ts.map

package/dist/svelte/components/InvoiceEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceEditor.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAI9B,6FAA6F;AAC7F,MAAM,WAAW,KAAM,SAAQ,kBAAkB;CAAG;AAsHpD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/InvoiceLineEditor.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import { CurrencyDisplay } from '@happyvertical/smrt-ui';
+import { FormGroup, Input, Select } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { calculateInvoiceLine } from '../invoices/calculations.js';
+import { invoiceLineFieldNames } from '../invoices/fields.js';
+import { invoicePreparationMessages as M } from '../invoices/messages.js';
+import type { InvoiceLineEditorProps } from '../invoices/types.js';
+/** General invoice line fields and exact non-authoritative calculation preview. */
+export interface Props extends InvoiceLineEditorProps {}
+let {
+  line,
+  currency,
+  inheritedTaxRate,
+  number = 1,
+  id,
+  fields = {},
+  errors = {},
+  canEdit = true,
+  pending = false,
+  intentField = 'intent',
+  removePrefix = 'removeLine:',
+  onchange,
+}: Props = $props();
+const { t } = useI18n();
+const instanceId = $props.id();
+const prefix = $derived(id ?? `invoice-line-${instanceId}`);
+const names = $derived({ ...invoiceLineFieldNames, ...fields });
+let draft = $derived(line);
+const calculation = $derived(
+  calculateInvoiceLine(draft, { currency, inheritedTaxRate }),
+);
+function refresh(event: Event) {
+  const controls = (event.currentTarget as HTMLFieldSetElement).elements;
+  draft = {
+    ...draft,
+    ...Object.fromEntries(
+      Object.entries(names).map(([key, name]) => [
+        key,
+        (controls.namedItem(name) as HTMLInputElement | null)?.value ??
+          draft[key as keyof typeof draft],
+      ]),
+    ),
+  };
+  onchange?.(draft);
+}
+</script>
+<fieldset oninput={refresh} onchange={refresh} disabled={!canEdit} class="invoice-line">
+  <legend>{t(M['commerce.invoice.line'], { number })}</legend>
+  <Input type="hidden" name={names.key} value={draft.key} interaction={false} />
+  {#each ['description', 'sku', 'quantity', 'unitPrice'] as field}
+    <FormGroup id={`${prefix}-${field}`} label={t(M[`commerce.invoice.${field}` as 'commerce.invoice.description'], { currency })} error={errors[field as keyof typeof errors]}>
+      <Input name={names[field as keyof typeof names]} value={draft[field as 'description']} inputmode={field === 'quantity' || field === 'unitPrice' ? 'decimal' : undefined} />
+    </FormGroup>
+  {/each}
+  <FormGroup id={`${prefix}-discountType`} label={t(M['commerce.invoice.discountType'])} error={errors.discountType}>
+    <Select name={names.discountType} value={draft.discountType}>
+      {#if draft.discountType !== 'flat' && draft.discountType !== 'percent'}<option value={draft.discountType}>{draft.discountType}</option>{/if}
+      <option value="flat">{t(M['commerce.invoice.flat'])}</option><option value="percent">{t(M['commerce.invoice.percent'])}</option>
+    </Select>
+  </FormGroup>
+  <FormGroup id={`${prefix}-discountValue`} label={t(M['commerce.invoice.discountValue'])} error={errors.discountValue}><Input name={names.discountValue} value={draft.discountValue} inputmode="decimal" /></FormGroup>
+  <FormGroup id={`${prefix}-taxMode`} label={t(M['commerce.invoice.taxMode'])} error={errors.taxMode}>
+    <Select name={names.taxMode} value={draft.taxMode}>
+      {#if draft.taxMode !== 'inherit' && draft.taxMode !== 'override'}<option value={draft.taxMode}>{draft.taxMode}</option>{/if}
+      <option value="inherit">{t(M['commerce.invoice.inherit'])}</option><option value="override">{t(M['commerce.invoice.override'])}</option>
+    </Select>
+  </FormGroup>
+  <FormGroup id={`${prefix}-taxRate`} label={t(M['commerce.invoice.taxRate'])} error={errors.taxRate}><Input name={names.taxRate} value={draft.taxRate} inputmode="decimal" /></FormGroup>
+  {#if calculation.valid}
+    <dl class="totals">
+      <div><dt>{t(M['commerce.invoice.subtotal'])}</dt><dd><CurrencyDisplay amount={calculation.subtotalMinor} {currency} unit="cents" /></dd></div>
+      <div><dt>{t(M['commerce.invoice.tax'])}</dt><dd><CurrencyDisplay amount={calculation.taxMinor} {currency} unit="cents" /></dd></div>
+      <div><dt>{t(M['commerce.invoice.total'])}</dt><dd><CurrencyDisplay amount={calculation.totalMinor} {currency} unit="cents" /></dd></div>
+    </dl>
+  {:else}<p role="status">{t(M['commerce.invoice.invalid'])}</p>{/if}
+  {#if canEdit}<Button type="submit" name={intentField} value={`${removePrefix}${draft.key}`} formnovalidate disabled={pending} variant="secondary">{t(M['commerce.invoice.remove'])}</Button>{/if}
+</fieldset>
+<style>
+.invoice-line { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--smrt-spacing-3); min-width: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); }
+legend { padding-inline: var(--smrt-spacing-2); }
+.totals { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-4); }
+dd { margin: 0; } p, dl { margin: 0; }
+</style>

package/dist/svelte/components/InvoiceLineEditor.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { InvoiceLineEditorProps } from '../invoices/types.js';
+/** General invoice line fields and exact non-authoritative calculation preview. */
+export interface Props extends InvoiceLineEditorProps {
+}
+declare const InvoiceLineEditor: import("svelte").Component<Props, {}, "">;
+type InvoiceLineEditor = ReturnType<typeof InvoiceLineEditor>;
+export default InvoiceLineEditor;
+//# sourceMappingURL=InvoiceLineEditor.svelte.d.ts.map

package/dist/svelte/components/InvoiceLineEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceLineEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceLineEditor.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,mFAAmF;AACnF,MAAM,WAAW,KAAM,SAAQ,sBAAsB;CAAG;AAmFxD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/InvoiceReview.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { invoicePreparationMessages as M } from '../invoices/messages.js';
+import type { InvoicePreparationReview } from '../invoices/types.js';
+
+/** Caller-authoritative approval/review presentation, without mutation actions. */
+export interface Props {
+  /** Server snapshot, including caller-localized unknown states. */
+  review: InvoicePreparationReview;
+}
+let { review }: Props = $props();
+const { t } = useI18n();
+</script>
+
+<section aria-label={t(M['commerce.preparation.review'])} class="invoice-review" aria-live="polite">
+  <strong>{review.label}</strong>
+  {#if review.message}<p>{review.message}</p>{/if}
+</section>
+
+<style>
+  .invoice-review { padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); overflow-wrap: anywhere; }
+  p { margin-block: var(--smrt-spacing-2) 0; }
+</style>

package/dist/svelte/components/InvoiceReview.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { InvoicePreparationReview } from '../invoices/types.js';
+/** Caller-authoritative approval/review presentation, without mutation actions. */
+export interface Props {
+    /** Server snapshot, including caller-localized unknown states. */
+    review: InvoicePreparationReview;
+}
+declare const InvoiceReview: import("svelte").Component<Props, {}, "">;
+type InvoiceReview = ReturnType<typeof InvoiceReview>;
+export default InvoiceReview;
+//# sourceMappingURL=InvoiceReview.svelte.d.ts.map

package/dist/svelte/components/InvoiceReview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceReview.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGrE,mFAAmF;AACnF,MAAM,WAAW,KAAK;IACpB,kEAAkE;IAClE,MAAM,EAAE,wBAAwB,CAAC;CAClC;AAmBD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/PartyAddressFields.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import {
+  CountrySelect,
+  FormGroup,
+  Input,
+  ProvinceSelect,
+} from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { PartyAddressData } from '../party-types.js';
+
+export interface AddressFieldNames {
+  street1: string;
+  street2: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+}
+
+export interface Props {
+  heading: string;
+  value?: PartyAddressData;
+  names: AddressFieldNames;
+  errors?: Record<string, string | undefined>;
+  readOnly?: boolean;
+  /** Caller-restricted country choices; omitted uses the shared ISO defaults. */
+  countryOptions?: readonly CodeSelectOption[];
+  /** Caller-restricted region choices; omitted uses CA/US defaults and text elsewhere. */
+  provinceOptions?: readonly CodeSelectOption[];
+}
+
+const {
+  heading,
+  value = {},
+  names,
+  errors = {},
+  readOnly = false,
+  countryOptions,
+  provinceOptions,
+}: Props = $props();
+const i18n = useI18n();
+const { t } = i18n;
+function addressValue(key: 'country' | 'state'): string {
+  return value[key] ?? '';
+}
+let country = $state(addressValue('country'));
+let sourceCountry = $state(addressValue('country'));
+let province = $state(addressValue('state'));
+let sourceProvince = $state(addressValue('state'));
+$effect(() => {
+  const nextCountry = value.country ?? '';
+  if (nextCountry !== sourceCountry) {
+    sourceCountry = nextCountry;
+    country = nextCountry;
+  }
+  const nextProvince = value.state ?? '';
+  if (nextProvince !== sourceProvince) {
+    sourceProvince = nextProvince;
+    province = nextProvince;
+  }
+});
+</script>
+
+<fieldset class="address-fields">
+  <legend>{heading}</legend>
+  <FormGroup label={t(M['commerce.party.street_address'])} error={errors.street1}>
+    <Input name={names.street1} value={value.street1 ?? ''} maxlength={160} readonly={readOnly} />
+  </FormGroup>
+  <FormGroup label={t(M['commerce.party.address_line_2'])} error={errors.street2}>
+    <Input name={names.street2} value={value.street2 ?? ''} maxlength={160} readonly={readOnly} />
+  </FormGroup>
+  <div class="address-grid">
+    <FormGroup label={t(M['commerce.party.city'])} error={errors.city}>
+      <Input name={names.city} value={value.city ?? ''} maxlength={100} readonly={readOnly} />
+    </FormGroup>
+    <FormGroup label={t(M['commerce.party.country'])} error={errors.country}>
+      <CountrySelect name={names.country} bind:value={country} options={countryOptions} locale={i18n.locale} readOnly={readOnly} />
+    </FormGroup>
+    <FormGroup label={t(M['commerce.party.state'])} error={errors.state}>
+      <ProvinceSelect name={names.state} bind:value={province} {country} options={provinceOptions} locale={i18n.locale} readOnly={readOnly} />
+    </FormGroup>
+    <FormGroup label={t(M['commerce.party.postal_code'])} error={errors.postalCode}>
+      <Input name={names.postalCode} value={value.postalCode ?? ''} maxlength={32} readonly={readOnly} />
+    </FormGroup>
+  </div>
+</fieldset>
+
+<style>
+  .address-fields { min-inline-size: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); }
+  legend { padding-inline: var(--smrt-spacing-2); font: var(--smrt-typography-title-medium-font); color: var(--smrt-color-on-surface); }
+  .address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
+  @media (max-width: 30rem) { .address-grid { grid-template-columns: minmax(0, 1fr); } }
+</style>

package/dist/svelte/components/PartyAddressFields.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import type { PartyAddressData } from '../party-types.js';
+export interface AddressFieldNames {
+    street1: string;
+    street2: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+}
+export interface Props {
+    heading: string;
+    value?: PartyAddressData;
+    names: AddressFieldNames;
+    errors?: Record<string, string | undefined>;
+    readOnly?: boolean;
+    /** Caller-restricted country choices; omitted uses the shared ISO defaults. */
+    countryOptions?: readonly CodeSelectOption[];
+    /** Caller-restricted region choices; omitted uses CA/US defaults and text elsewhere. */
+    provinceOptions?: readonly CodeSelectOption[];
+}
+declare const PartyAddressFields: import("svelte").Component<Props, {}, "">;
+type PartyAddressFields = ReturnType<typeof PartyAddressFields>;
+export default PartyAddressFields;
+//# sourceMappingURL=PartyAddressFields.svelte.d.ts.map

package/dist/svelte/components/PartyAddressFields.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartyAddressFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PartyAddressFields.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AASrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC7C,wFAAwF;IACxF,eAAe,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;CAC/C;AAsED,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/PartyContactFields.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+import { FormGroup, Input, Textarea } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from '../i18n.js';
+import type {
+  PartyContactData,
+  PartyContactLabels,
+  PartyFieldNames,
+} from '../party-types.js';
+import { DEFAULT_PARTY_FIELD_NAMES } from '../party-types.js';
+
+/** Props for the provider-free repeatable contact composition. */
+export interface Props {
+  /** Contact rows to display or submit in their given order. */
+  contacts?: PartyContactData[];
+  /** HTML field-name overrides used to preserve a caller's payload contract. */
+  fieldNames?: Partial<PartyFieldNames>;
+  /** Row-level validation errors returned by the server. */
+  errors?: Array<Record<string, string | undefined> | undefined>;
+  /** User-facing copy overrides for contact terminology. */
+  labels?: PartyContactLabels;
+  /** Renders contact values without editable controls or mutation actions. */
+  readOnly?: boolean;
+  /** Shows the native add-row submitter when editing. */
+  canAdd?: boolean;
+  /** Shows a native remove-row submitter for each contact when editing. */
+  canRemove?: boolean;
+  /** Name of the native submitter field used for row actions. */
+  intentName?: string;
+  /** Submitter value that asks the caller to append a row. */
+  addIntent?: string;
+  /** Produces the submitter value that asks the caller to remove one row. */
+  removeIntent?: (index: number) => string;
+}
+
+const {
+  contacts = [],
+  fieldNames = {},
+  errors = [],
+  labels = {},
+  readOnly = false,
+  canAdd = true,
+  canRemove = true,
+  intentName = 'intent',
+  addIntent = 'addContact',
+  removeIntent = (index: number) => `removeContact:${index}`,
+}: Props = $props();
+
+const { t } = useI18n();
+const instanceId = $props.id();
+const headingId = `party-contacts-heading-${instanceId}`;
+const names = $derived({ ...DEFAULT_PARTY_FIELD_NAMES, ...fieldNames });
+const text = $derived({
+  heading: labels.heading ?? t(M['commerce.party.contacts']),
+  empty: labels.empty ?? t(M['commerce.party.no_contacts']),
+  contact: labels.contact ?? t(M['commerce.party.contact']),
+  name: labels.name ?? t(M['commerce.party.contact_name']),
+  role: labels.role ?? t(M['commerce.party.contact_role']),
+  email: labels.email ?? t(M['commerce.party.contact_email']),
+  phone: labels.phone ?? t(M['commerce.party.contact_phone']),
+  address: labels.address ?? t(M['commerce.party.contact_address']),
+  add: labels.add ?? t(M['commerce.party.add_contact']),
+  remove: labels.remove ?? t(M['commerce.party.remove_contact']),
+});
+</script>
+
+<section class="contacts" aria-labelledby={headingId}>
+  <div class="contacts-heading">
+    <h2 id={headingId}>{text.heading}</h2>
+    {#if !readOnly && canAdd}
+      <Button
+        type="submit"
+        variant="secondary"
+        name={intentName}
+        value={addIntent}
+        formnovalidate
+      >{text.add}</Button>
+    {/if}
+  </div>
+
+  {#if contacts.length === 0}
+    <p class="empty">{text.empty}</p>
+  {:else}
+    <div class="contact-list">
+      {#each contacts as contact, index (`${contact.id ?? 'new'}-${index}`)}
+        {#if readOnly}
+          <article class="contact-card">
+            <h3>{contact.name || `${text.contact} ${index + 1}`}</h3>
+            {#if contact.label}<p>{contact.label}</p>{/if}
+            {#if contact.email}<p><a href={`mailto:${contact.email}`}>{contact.email}</a></p>{/if}
+            {#if contact.phone}<p><a href={`tel:${contact.phone}`}>{contact.phone}</a></p>{/if}
+            {#if contact.address}<p class="address">{contact.address}</p>{/if}
+          </article>
+        {:else}
+          <fieldset class="contact-card">
+            <legend>{text.contact} {index + 1}</legend>
+            <Input interaction={false} type="hidden" name={names.contactId} value={contact.id ?? ''} />
+            <div class="field-grid">
+              <FormGroup label={text.name} error={errors[index]?.name}>
+                <Input name={names.contactName} value={contact.name ?? ''} maxlength={160} />
+              </FormGroup>
+              <FormGroup label={text.role} error={errors[index]?.label}>
+                <Input name={names.contactLabel} value={contact.label ?? ''} maxlength={80} />
+              </FormGroup>
+              <FormGroup label={text.email} error={errors[index]?.email}>
+                <Input name={names.contactEmail} type="email" value={contact.email ?? ''} maxlength={320} />
+              </FormGroup>
+              <FormGroup label={text.phone} error={errors[index]?.phone}>
+                <Input name={names.contactPhone} type="tel" value={contact.phone ?? ''} maxlength={80} />
+              </FormGroup>
+            </div>
+            <FormGroup label={text.address} error={errors[index]?.address}>
+              <Textarea name={names.contactAddress} value={contact.address ?? ''} rows={3} maxlength={500} />
+            </FormGroup>
+            {#if canRemove}
+              <div class="contact-actions">
+                <Button
+                  type="submit"
+                  variant="ghost"
+                  name={intentName}
+                  value={removeIntent(index)}
+                  formnovalidate
+                >{text.remove}</Button>
+              </div>
+            {/if}
+          </fieldset>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .contacts { display: grid; gap: var(--smrt-spacing-4); min-inline-size: 0; }
+  .contacts-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); flex-wrap: wrap; }
+  h2, h3, p { margin: 0; }
+  h2 { font: var(--smrt-typography-title-large-font); color: var(--smrt-color-on-surface); }
+  h3, legend { font: var(--smrt-typography-title-medium-font); color: var(--smrt-color-on-surface); }
+  .contact-list { display: grid; gap: var(--smrt-spacing-4); }
+  .contact-card { min-inline-size: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface-container-low); overflow-wrap: anywhere; }
+  article.contact-card { display: grid; gap: var(--smrt-spacing-2); }
+  .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
+  .field-grid :global(.form-group) { min-inline-size: 0; }
+  .contact-actions { display: flex; justify-content: flex-end; }
+  .empty { color: var(--smrt-color-on-surface-variant); }
+  .address { white-space: pre-wrap; }
+  a { color: var(--smrt-color-primary); }
+  @media (max-width: 30rem) {
+    .field-grid { grid-template-columns: minmax(0, 1fr); }
+    .contact-card { padding: var(--smrt-spacing-3); }
+  }
+</style>

package/dist/svelte/components/PartyContactFields.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { PartyContactData, PartyContactLabels, PartyFieldNames } from '../party-types.js';
+/** Props for the provider-free repeatable contact composition. */
+export interface Props {
+    /** Contact rows to display or submit in their given order. */
+    contacts?: PartyContactData[];
+    /** HTML field-name overrides used to preserve a caller's payload contract. */
+    fieldNames?: Partial<PartyFieldNames>;
+    /** Row-level validation errors returned by the server. */
+    errors?: Array<Record<string, string | undefined> | undefined>;
+    /** User-facing copy overrides for contact terminology. */
+    labels?: PartyContactLabels;
+    /** Renders contact values without editable controls or mutation actions. */
+    readOnly?: boolean;
+    /** Shows the native add-row submitter when editing. */
+    canAdd?: boolean;
+    /** Shows a native remove-row submitter for each contact when editing. */
+    canRemove?: boolean;
+    /** Name of the native submitter field used for row actions. */
+    intentName?: string;
+    /** Submitter value that asks the caller to append a row. */
+    addIntent?: string;
+    /** Produces the submitter value that asks the caller to remove one row. */
+    removeIntent?: (index: number) => string;
+}
+declare const PartyContactFields: import("svelte").Component<Props, {}, "">;
+type PartyContactFields = ReturnType<typeof PartyContactFields>;
+export default PartyContactFields;
+//# sourceMappingURL=PartyContactFields.svelte.d.ts.map

package/dist/svelte/components/PartyContactFields.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartyContactFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PartyContactFields.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAI3B,kEAAkE;AAClE,MAAM,WAAW,KAAK;IACpB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC;IAC/D,0DAA0D;IAC1D,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C;AAmGD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}