# XWUIMailComposer

A power-tier, standalone email composer modeled on Odoo's `mail.compose.message` wizard and Gmail's compose pane. It renders To / Cc / Bcc recipient pills (commit an address with Enter, comma, semicolon, or Tab; Backspace pops the last pill), a Subject input, an optional template-picker dropdown, a body editor, attachment chips (with an uploading state that blocks Send), and Send / Save Draft / Discard actions. The body defaults to a plain textarea, but you can mount any rich editor via the `editorSlot` data callback; `onSend` / `onSaveDraft` / `onDiscard` / `onAttachClick` wire up the actions. Key `conf_comp` props: `showCcBcc`, `showTemplates`, `showSaveDraft`, `showDiscard`, `variant` (`default`/`outlined`/`elevated`), `mode` (`compose`/`reply`/`forward`, which sets the primary button label to Send/Reply/Forward), and `requireBody`. Use it for any inline compose, reply, or forward surface in a mail or CRM app.

## Basic Usage

An empty composer constructed with no data and default config: a single To row with an "Add Cc / Bcc" toggle, a Subject field, a fallback textarea body, an Attach button, and the Save draft / Discard / Send actions.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A bare XWUIMailComposer built from an empty data object, showing every default chrome element with no prefilled content.
```

## Prefilled

A reply-style draft seeded with a To recipient (Sarah Chen), a Cc recipient (Alex Rivera), a "Re: Q1 strategy review" subject, a starter body, and a `q1-revisions.pdf` (240 KB) attachment chip; configured with `showCcBcc: true`, `showSaveDraft: true`, and `showDiscard: true`.

```example
file: examples/Prefilled.ts
html: examples/Prefilled.html
title: Prefilled
description: A populated composer with To/Cc recipients, subject, body text, and an attachment chip, rendered with the Cc/Bcc rows expanded.
```

## With Templates

A composer passed two `templates` (a "Cold intro" and a "Follow-up after demo", each with a subject and body containing `{{senderName}}` / `{{recipientName}}` placeholders) with `showTemplates: true`, so selecting a template from the dropdown overwrites the Subject and body.

```example
file: examples/WithTemplates.ts
html: examples/WithTemplates.html
title: With Templates
description: A composer whose template-picker dropdown lists two prebuilt messages that replace the subject and body when chosen.
```

```api
```