# ez-chip



<!-- Auto Generated Below -->


## Properties

| Property                 | Attribute                   | Description                                                                                                             | Type                                                                                                                   | Default     |
| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------- |
| `disableAutoUpdateValue` | `disable-auto-update-value` | Desabilita a alteração da propriedade value ao clicar.                                                                  | `boolean`                                                                                                              | `false`     |
| `enabled`                | `enabled`                   | Se false o usuário não pode interagir com o ez-chip.                                                                    | `boolean`                                                                                                              | `true`      |
| `iconNameLeft`           | `icon-name-left`            | Define o icone esquerdo.                                                                                                | `string`                                                                                                               | `undefined` |
| `iconNameRight`          | `icon-name-right`           | Define o icone direito.                                                                                                 | `string`                                                                                                               | `undefined` |
| `label`                  | `label`                     | Texto a ser apresentado como título do ez-chip.                                                                         | `string`                                                                                                               | `undefined` |
| `maxWidth`               | `max-width`                 | Define o tamanho máximo do chip.                                                                                        | `string`                                                                                                               | `undefined` |
| `mode`                   | `mode`                      | Define o modo de uso do ez-chip.                                                                                        | `"action" \| "label"`                                                                                                  | `undefined` |
| `removePosition`         | `remove-position`           | Determina o posicionamento do botão de remover (não disponível no modo `action`).  Se não informado, não exibe o botão. | `"left" \| "right"`                                                                                                    | `undefined` |
| `removeWithKeyboard`     | `remove-with-keyboard`      | Define se o chip deve ser removido ao pressionar a tecla Enter quando focado.                                           | `boolean`                                                                                                              | `false`     |
| `showNativeTooltip`      | `show-native-tooltip`       | Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento.                            | `boolean`                                                                                                              | `false`     |
| `size`                   | `size`                      | Define o tamanho do chip.                                                                                               | `"default" \| "large" \| "medium"`                                                                                     | `'default'` |
| `tabIndex`               | `tab-index`                 | Define o tabindex do chip. Por padrão é 0, permitindo que o chip seja focável.                                          | `number`                                                                                                               | `0`         |
| `type`                   | `type`                      | Define o tipo de estilização do chip.                                                                                   | `"error" \| "error-light" \| "primary" \| "secondary" \| "success" \| "success-light" \| "warning" \| "warning-light"` | `'primary'` |
| `value`                  | `value`                     | Define o valor do ez-chip.                                                                                              | `boolean`                                                                                                              | `false`     |


## Events

| Event         | Description                                                 | Type                                        |
| ------------- | ----------------------------------------------------------- | ------------------------------------------- |
| `actionClick` | Emitido no modo "action" quando o usuário clica no ez-chip. | `CustomEvent<void>`                         |
| `iconClick`   | Emitido quando o icone é acionado.                          | `CustomEvent<{ icon: "left" \| "right"; }>` |
| `removeChip`  | Emitido quando o botão de remoção é acionado.               | `CustomEvent<void>`                         |
| `valueChange` | Emitido quando acontece a alteração de valor do ez-chip.    | `CustomEvent<boolean>`                      |


## Methods

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

Remove o foco do ez-chip.

#### Returns

Type: `Promise<void>`

---

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

Aplica o foco no ez-chip.

#### Returns

Type: `Promise<void>`




## Dependencies

### Used by

 - [ez-tag-input](../ez-tag-input)

### Depends on

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

### Graph
```mermaid
graph TD;
  ez-chip --> ez-tooltip
  ez-chip --> ez-icon
  ez-tag-input --> ez-chip
  style ez-chip fill:#f9f,stroke:#333,stroke-width:4px
```

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




## CSS Variables
| Variable  | Description | 
 |-|-|
| --ez-label-chip--height | Define a altura do chip. | 
| --ez-label-chip\_\_label--font-size | Define o tamanho do label. | 
| --ez-label-chip\_\_label--font-family | Define a família da fonte do label. | 
| --ez-label-chip\_\_label--font-weight | Define o peso da fonte do label. | 
| --ez-label-chip\_\_horizontal-padding | Define o espaçamento do label. | 
| --ez-label-chip\_\_label--text--primary | Define a cor do texto. | 
| --ez-label-chip\_\_label--icon--primary | Define a cor do ícone. | 
| --ez-label-chip\_\_label\_\_container--border-radius | Define o raio da borda do container do chip. | 
| --ez-label-chip\_\_label\_\_container--border | Define o estilo da borda do container. | 
| --ez-label-chip\_\_label\_\_container--border-color-strokes | Define a cor da borda do container. | 
| --ez-label-chip\_\_label\_\_container-color--disabled | Define a cor da borda e do fundo quando o chip está desativado. | 
| --ez-label-chip\_\_label\_\_container--background-color | Define a cor de fundo do container. | 
| --ez-label-chip\_\_label\_\_container--border-color-active | Define a cor da borda do container quando ativo. | 
| --ez-label-chip\_\_label\_\_container--default--background-color--active | Define a cor do fundo do container quando está ativo. | 
| --ez-label-chip\_\_label\_\_container--default--color--active | Define a cor do texto quando está ativo. | 
| --ez-label-chip\_\_label\_\_container--text--disabled | Define a cor do texto e do ícone quando o chip está desabilitado. | 
| --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda quando o componente está ativo. | 
| --ez-label-chip\_\_label\_\_container--secondary--border-color--active | Define a cor da borda quando o componente está ativo e na variação secundária. | 
| --ez-label-chip\_\_label\_\_container--margin | Define a margem do chip. |