# ez-classic-input



<!-- Auto Generated Below -->


## Properties

| Property             | Attribute              | Description                                                                                                                                                                           | Type                                             | Default     |
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
| `emitMaskedValue`    | `emit-masked-value`    | Define se o valor emitido pelo evento ezChange deve conter a máscara aplicada (padrão: false)                                                                                         | `boolean`                                        | `false`     |
| `enabled`            | `enabled`              | Define se o input está habilitado                                                                                                                                                     | `boolean`                                        | `true`      |
| `helpText`           | `help-text`            | Texto de ajuda exibido abaixo do input                                                                                                                                                | `string`                                         | `undefined` |
| `label`              | `label`                | Texto do label exibido acima do input                                                                                                                                                 | `string`                                         | `undefined` |
| `leftIconClickable`  | `left-icon-clickable`  | Define se o ícone da esquerda é clicável                                                                                                                                              | `boolean`                                        | `false`     |
| `leftIconName`       | `left-icon-name`       | Nome do ícone à esquerda                                                                                                                                                              | `string`                                         | `undefined` |
| `leftIconTooltip`    | `left-icon-tooltip`    | Título do ícone à esquerda (tooltip)                                                                                                                                                  | `string`                                         | `undefined` |
| `mask`               | `mask`                 | Aplica uma máscara no conteúdo conforme o padrão estabelecido.  Para mais informações acesse:  https://gilded-nasturtium-6b64dd.netlify.app/docs/utilities/api/classes/maskformatter/ | `string`                                         | `undefined` |
| `maxlength`          | `maxlength`            | Tamanho máximo do valor                                                                                                                                                               | `number`                                         | `undefined` |
| `minlength`          | `minlength`            | Tamanho mínimo do valor                                                                                                                                                               | `number`                                         | `undefined` |
| `name`               | `name`                 | Nome do input                                                                                                                                                                         | `string`                                         | `undefined` |
| `placeholder`        | `placeholder`          | Placeholder do input                                                                                                                                                                  | `string`                                         | `undefined` |
| `readonly`           | `readonly`             | Define se o input é somente leitura                                                                                                                                                   | `boolean`                                        | `false`     |
| `rightIconClickable` | `right-icon-clickable` | Define se o ícone da direita é clicável                                                                                                                                               | `boolean`                                        | `false`     |
| `rightIconName`      | `right-icon-name`      | Nome do ícone à direita                                                                                                                                                               | `string`                                         | `undefined` |
| `rightIconTooltip`   | `right-icon-tooltip`   | Título do ícone à direita (tooltip)                                                                                                                                                   | `string`                                         | `undefined` |
| `state`              | `state`                | Estado visual do input: default, error, success ou warning                                                                                                                            | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
| `type`               | `type`                 | Tipo do input (ex: text, password, email, etc)                                                                                                                                        | `string`                                         | `'text'`    |
| `value`              | `value`                | Valor do input                                                                                                                                                                        | `string`                                         | `undefined` |


## Events

| Event       | Description                                                                      | Type                                        |
| ----------- | -------------------------------------------------------------------------------- | ------------------------------------------- |
| `ezBlur`    | Evento disparado quando o input perde o foco.                                    | `CustomEvent<string>`                       |
| `ezChange`  | Evento disparado quando o valor do input muda.                                   | `CustomEvent<string>`                       |
| `ezFocus`   | Evento disparado quando o input ganha o foco.                                    | `CustomEvent<string>`                       |
| `iconClick` | Evento disparado quando um ícone é clicado. Payload: { icon: "left" \| "right" } | `CustomEvent<{ icon: "left" \| "right"; }>` |


## Methods

### `setBlur() => Promise<void>`

Remove o foco do campo.

#### Returns

Type: `Promise<void>`

---

### `setFocus(option?: OptionsSetFocus) => Promise<void>`

Aplica o foco no campo.

#### Returns

Type: `Promise<void>`




## Dependencies

### Used by

 - [ez-classic-combo-box](../ez-classic-combo-box)

### Depends on

- [ez-icon](../ez-icon)

### Graph
```mermaid
graph TD;
  ez-classic-input --> ez-icon
  ez-classic-combo-box --> ez-classic-input
  style ez-classic-input fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-classic-input--label-color | Define a cor do texto do input.  | 
| --ez-classic-input--border-color-default | Define a cor da borda do input quando está no estado padrão.  | 
| --ez-classic-input--border-color-focus | Define a cor da borda do input quando está no estado de foco.  | 
| --ez-classic-input--border-color-success | Define a cor da borda do input quando está no estado de sucesso.  | 
| --ez-classic-input--border-color-error | Define a cor da borda do input quando está no estado de erro.  | 
| --ez-classic-input--border-color-warning | Define a cor da borda do input quando está no estado de aviso.  | 
| --ez-classic-input--background-color | Define a cor de fundo do input.  | 
| --ez-classic-input--background-color-disabled | Define a cor de fundo do input quando está desabilitado.  | 
| --ez-classic-input--text-color | Define a cor do texto do input.  | 
| --ez-classic-input--placeholder-color | Define a cor do texto do placeholder do input.  | 
| --ez-classic-input--icon-color | Define a cor do ícone do input.  | 
| --ez-classic-input--helptext-color | Define a cor do texto de ajuda do input.  | 
| --ez-classic-input--height | Define a altura do input.  |