## class: `WySearch`, `wy-search`

Search input component.

**Used sub components**

*   [`<wy-button>`](./wy-button)
*   [`<wy-icon>`](./wy-icon)

### Fields

| Name          | Type                  | Default | Description                                                  | Inherited From |
| ------------- | --------------------- | ------- | ------------------------------------------------------------ | -------------- |
| `placeholder` | `string \| undefined` |         | Text for the input placeholder.                              |                |
| `compact`     | `boolean`             | `false` | Whether the component should combine input field and button. |                |
| `tags`        |                       |         | Query tags                                                   |                |
| `query`       | `string \| undefined` |         | Query text.                                                  |                |

### Methods

| Name         | Description                   | Parameters | Return | Inherited From |
| ------------ | ----------------------------- | ---------- | ------ | -------------- |
| `focusInput` | Put focus on the input field. |            |        |                |
| `clear`      | Clear the input field.        |            |        |                |

### Events

| Name     | Type              | Description                                                                    | Inherited From |
| -------- | ----------------- | ------------------------------------------------------------------------------ | -------------- |
| `search` | `SearchEventType` | Query text when the search is updated. Throttled change as the user is typing. |                |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `placeholder` | placeholder |                |
| `compact`     | compact     |                |
| `tags`        | tags        |                |
| `query`       | query       |                |

### CSS Parts

| Name                                 | Description                                     |
| ------------------------------------ | ----------------------------------------------- |
| `wy-input`                           | Input field.                                    |
| `wy-input-group`                     | Wrapper for the inputs.                         |
| `wy-input-group-input`               | Input field part of an input group.             |
| `wy-input-filled`                    | Filled appearance of the input field.           |
| `wy-input-group-input-with-overlay`  | Input field when input and button are combined. |
| `wy-input-group-button-icon`         | Button part of an input group.                  |
| `wy-input-group-button-icon-overlay` | Button  when input and button are combined.     |

<details><summary>Private API</summary>

### Fields

| Name              | Privacy   | Type                    | Default                           | Description | Inherited From |
| ----------------- | --------- | ----------------------- | --------------------------------- | ----------- | -------------- |
| `exportParts`     | protected |                         | `new ShadowPartsController(this)` |             |                |
| `inputRef`        | private   | `Ref<HTMLInputElement>` |                                   |             |                |
| `#tags`           | private   | `Set<string>`           | `new Set()`                       |             |                |
| `#query`          | private   | `string`                | `''`                              |             |                |
| `throttledSearch` | private   |                         |                                   |             |                |

</details>

<hr/>

## Exports

| Kind                        | Name        | Declaration | Module                         | Package |
| --------------------------- | ----------- | ----------- | ------------------------------ | ------- |
| `js`                        | `WySearch`  | WySearch    | lib/components/ui/wy-search.ts |         |
| `custom-element-definition` | `wy-search` | WySearch    | lib/components/ui/wy-search.ts |         |
