# Web Component

{/* GENERATED FILE - DO NOT EDIT DIRECTLY. Source: TS/packages/marketfront/src/ */}

## `<gett-marketfront>`

Web Component that embeds the Marketfront ordering experience.
Zero dependencies, works in any framework.

### Quick Start

```html
<gett-marketfront session-token="tok_abc123"></gett-marketfront>

<script type="module">
  import '@gett-co/marketfront'; // auto-registers the element

  const el = document.querySelector('gett-marketfront');
  el.addEventListener('order-complete', (e) => {
    console.log('Order placed:', e.detail.id);
  });
</script>
```

### Attributes

| Attribute | Type | Description |
|-----------|------|-------------|
| `session-token` | `string` | Partner session token. Optional for anonymous browsing. |
| `base-url` | `string` | Override base URL (development only). |

### Properties

Properties reflect to/from their corresponding attributes.

| Property | Type | Attribute |
|----------|------|-----------|
| `sessionToken` | `string \| null` | `session-token` |
| `baseUrl` | `string \| null` | `base-url` |

### Methods

#### `setSessionToken(token: string): void`

Update the session token without remounting the iframe. Useful for upgrading
from anonymous browsing to an authenticated session.

```typescript
const el = document.querySelector('gett-marketfront');
el.setSessionToken('new_token_from_backend');
```

**Throws:** `Error` if the iframe is not mounted.

### CSS Parts

| Part | Description |
|------|-------------|
| `::part(container)` | The iframe wrapper `<div>` inside the shadow DOM. |

### Static Members

| Member | Value |
|--------|-------|
| `observedAttributes` | `["session-token", "base-url"]` |

## `register(tagName?: string): void`

Register the `<gett-marketfront>` custom element. Called automatically
when the package is imported, but safe to call multiple times.

```typescript
import { register } from '@gett-co/marketfront';

// Use default tag name
register();

// Or use a custom tag name
register('my-marketfront');
```

## `MarketfrontAttributes`

TypeScript type for React JSX usage. Opt in via tsconfig so
`<gett-marketfront>` is type-safe in JSX:

```jsonc
{
  "compilerOptions": {
    "types": ["@gett-co/marketfront/react"]
  }
}
```

React 19 binds `on*` props on custom elements case-preservingly, so the
JSX prop names mirror the dispatched kebab-case event names:

```tsx
import '@gett-co/marketfront';

function OrderPage({ token }: { token: string }) {
  return (
    <gett-marketfront
      session-token={token}
      onorder-complete={(e) => console.log(e.detail.id)}
    />
  );
}
```