# ef-multi-input

An input control component to display a selection of pills

## Properties

| Property            | Attribute     | Type                     | Default | Description                                    |
|---------------------|---------------|--------------------------|---------|------------------------------------------------|
| `data`              |               | `MultiInputData \| null` | null    | The data object, used to render the list.      |
| `disabled`          | `disabled`    | `boolean`                | false   | Set disabled state                             |
| `error`             | `error`       | `boolean`                | false   | Set error state                                |
| `icon`              | `icon`        | `string`                 | ""      | Specify icon to display inside input box       |
| `maxLength`         | `maxlength`   | `number \| null`         | null    | Set character max limit                        |
| `minLength`         | `minlength`   | `number \| null`         | null    | Set character min limit                        |
| `pillsOnly`         | `pills-only`  | `boolean`                | false   | Hide text input box                            |
| `placeholder`       | `placeholder` | `string`                 | ""      | Placeholder text to display in input box       |
| `readonly`          | `readonly`    | `boolean`                | false   | Hides text field and clear icon from all pills |
| `selectionEnd`      |               | `number \| null`         | null    | Selection end index                            |
| `selectionStart`    |               | `number \| null`         | null    | Selection start index                          |
| `value`             | `value`       | `string`                 | ""      | Current value of text field                    |
| `values (readonly)` |               | `string[]`               | []      | Array of item's values ( readonly )            |
| `warning`           | `warning`     | `boolean`                | false   | Set warning state                              |

## Methods

| Method              | Type                                             | Description                                      |
|---------------------|--------------------------------------------------|--------------------------------------------------|
| `add`               | `(item: MultiInputDataItem): MultiInputDataItem \| null` | Add a new item to the input. Return newly added object or null if added invalid object.<br /><br />**item**: to add. Object must have at least value and label |
| `removeByIndex`     | `(index: number): MultiInputDataItem \| null`    | Removes pill by index. Returns item that removed or null if list was empty<br /><br />**index**: of pill to be removed |
| `removeByValue`     | `(value: string): MultiInputData`                | Removes the item by the value and returns array of removed items<br /><br />**value**: Value of item to remove |
| `removeLastItem`    | `(): MultiInputDataItem \| null`                 | Removes last item. Returns item that removed or null if list was empty |
| `select`            | `(): void`                                       | Select the contents of input                     |
| `setSelectionRange` | `(startSelection: number, endSelection: number): void` | Set the selection range<br /><br />**startSelection**: Start of selection<br />**endSelection**: End of the selection |

## Events

| Event           | Description                                      |
|-----------------|--------------------------------------------------|
| `error-changed` | Fired when the user causes error at the control. The event is not triggered if `error` property is changed programmatically. |
| `item-added`    | Fired when the user adds new pill. The event is not triggered if the new item is added programmatically. |
| `item-error`    | Fired when item attempting to add is invalid.    |
| `item-removed`  | Fired when the user removes pill. The event is not triggered if the item is removed programmatically. |
| `value-changed` | Fired when the user adds new pill or removes pill. The event is not triggered if `value` property is changed programmatically. |