# ef-email-field

A form control element for email.

## Attributes

| Attribute         | Type      | Description                            |
|-------------------|-----------|----------------------------------------|
| `icon-has-action` | `boolean` | Specify when icon need to be clickable |

## Properties

| Property        | Attribute         | Type             | Default | Description                                      |
|-----------------|-------------------|------------------|---------|--------------------------------------------------|
| `clears`        | `clears`          | `boolean`        | false   | Show clears button                               |
| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
| `error`         | `error`           | `boolean`        | false   | Set error state                                  |
| `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
| `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
| `multiple`      | `multiple`        | `boolean`        | false   | Set to multiple mode, allows multiple emails in a single input |
| `pattern`       | `pattern`         | `string \| null` | null    | Set regular expression for input validation      |
| `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
| `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
| `value`         | `value`           | `string`         | ""      | Input's value                                    |
| `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |

## Methods

| Method           | Type          | Description                                      |
|------------------|---------------|--------------------------------------------------|
| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |

## Events

| Event           | Description                                      |
|-----------------|--------------------------------------------------|
| `error-changed` | Fired when the user inputs an invalid value. The event is not triggered if `error` property is changed programmatically. |
| `icon-click`    | Fired when the user taps on icon added into control's slot. |
| `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |