# Pillbox

Multi-value selection primitives inspired by Flux Pillbox and implemented with local shadcn-style Angular patterns.

## Import

```ts
import {
  PillboxComponent,
  PillboxOptionComponent,
  PillboxOptionCreateComponent,
  PillboxOptionEmptyComponent,
  PillboxSelectedDirective,
} from '@edsis/component/pillbox';
```

## Usage

```html
<Pillbox multiple placeholder="Choose tags..." [(ngModel)]="selectedTags">
  <PillboxOption value="design">Design</PillboxOption>
  <PillboxOption value="development">Development</PillboxOption>
  <PillboxOption value="marketing">Marketing</PillboxOption>
</Pillbox>
```

## Composition

- `Pillbox` owns the trigger, selected pills, search state, option filtering, and form control integration.
- `PillboxOption` projects the visible option content and stores the option value.
- `ng-template[PillboxSelected]` customizes the rendered selected pill content for an option.
- `PillboxOptionCreate` emits create requests when the search query is long enough and does not match an existing option.
- `PillboxOptionEmpty` customizes empty and loading messages.

## Inputs

### PillboxComponent

| Input               | Type                      | Default               | Description                                                                |
| ------------------- | ------------------------- | --------------------- | -------------------------------------------------------------------------- |
| `placeholder`       | `string`                  | `'Choose options...'` | Text shown when nothing is selected.                                       |
| `searchPlaceholder` | `string`                  | `'Search...'`         | Placeholder for the dropdown search input.                                 |
| `size`              | `'default' \| 'sm'`       | `'default'`           | Trigger and pill density.                                                  |
| `variant`           | `'default' \| 'combobox'` | `'default'`           | Use `combobox` to place the search input directly in the trigger.          |
| `multiple`          | `boolean`                 | `false`               | Emits an array of selected values when enabled.                            |
| `searchable`        | `boolean`                 | `false`               | Adds a search input to the dropdown for the default variant.               |
| `filter`            | `boolean`                 | `true`                | Enables client-side filtering. Disable it for backend-driven option lists. |
| `clearable`         | `boolean`                 | `true`                | Shows a clear-all control when values are selected.                        |
| `disabled`          | `boolean`                 | `false`               | Prevents interaction.                                                      |
| `invalid`           | `boolean`                 | `false`               | Applies error styling and `aria-invalid`.                                  |
| `loading`           | `boolean`                 | `false`               | Shows loading copy through the empty option when no options match.         |

## Events

| Output         | Payload   | Description                                                               |
| -------------- | --------- | ------------------------------------------------------------------------- |
| `valueChange`  | `unknown` | Emits the selected array for `multiple` mode or a single value otherwise. |
| `searchChange` | `string`  | Emits whenever the search query changes.                                  |
| `create`       | `string`  | Emits the current query from `PillboxOptionCreate`.                       |
| `openedChange` | `boolean` | Emits when the option list opens or closes.                               |

## Accessibility

- Use a visible label or `aria-label`/`aria-labelledby` on `Pillbox`.
- Use `multiple` when binding to an array of values.
- Provide readable option labels; set `label` or `selectedLabel` when custom option content is not textual.
- Keep create actions explicit and validate new values in the owning form or backend.