@dev-tcloud/tcloud-ui 7.0.4 → 7.0.6

package/docs/tcloud-ui-multi-input.md

@@ -9,6 +9,7 @@
 - Suporte a estados: `disabled` e `loading`.
 - Largura máxima configurável para labels.
 - Modo `showInput`: oculta o input de entrada, exibindo apenas os itens.
+- Autocomplete nativo do navegador (via `<datalist>`) a partir de `autocompleteitems`.
 - Emite alterações via evento `tcChange`.
 
 ## Instalação
@@ -46,6 +47,7 @@ export class ExampleComponent {
 | required | string | Se definido, habilita validação de pelo menos um item na lista. | undefined |
 | maxWidthLabel | string | Largura máxima de cada label (ex: '95px', '120px'). | undefined |
 | showInput | boolean | Se true, oculta o input de entrada e exibe apenas os itens existentes. | false |
+| autocompleteitems | string[] | Sugestões de autocomplete nativo (`<datalist>`) exibidas ao digitar no input. | [] |
 | ngModel | { value: any }[] | Array de itens para two-way binding. | undefined |
 
 ### Outputs
@@ -134,6 +136,22 @@ export class FormComponent {
 </tcloud-ui-multi-input>
 ```
 
+### Com Autocomplete Nativo (autocompleteitems)
+```ts
+export class ExampleComponent {
+  sugestoesTags = ['Angular', 'TypeScript', 'JavaScript', 'HTML', 'CSS'];
+}
+```
+
+```html
+<tcloud-ui-multi-input 
+  [tcList]="items"
+  [autocompleteitems]="sugestoesTags"
+  [placeholder]="'Digite uma tag'"
+  (tcChange)="onItemsChanged($event)">
+</tcloud-ui-multi-input>
+```
+
 ## Uso Avançado
 ### Com ngModel e Formulário Reativo
 ```ts

package/docs/tcloud-ui-multiples-values.md

@@ -8,11 +8,13 @@ O componente `tcloud-ui-multiples-values` permite a entrada e gerenciamento de m
 - Suporte a delimitador configurável para inserção de múltiplos valores de uma vez
 - Conversão automática para uppercase ou lowercase
 - Remoção de valores duplicados automaticamente
-- Validação por padrão regex (`pattern`)
+- Validação por padrão regex (`pattern`), testado individualmente em cada valor após o split pelo `delimiter` — se algum valor for inválido, nenhum item é adicionado
+- Preset de validação `type="email"` (regex de e-mail embutido, sem precisar informar `pattern`)
 - Dropdown com lista dos valores adicionados e busca integrada (quando mais de 5 itens)
 - Contador de registros adicionados
 - Botão para limpar toda a lista (quando mais de 5 itens)
 - Controle de largura máxima dos labels com `maxWidthLabel`
+- Autocomplete nativo do navegador (via `<datalist>`) no input simples, a partir de `autocompleteitems`
 - Compatível com `ngModel` e formulários Angular (ControlValueAccessor + NG_VALIDATORS)
 - Posicionamento automático do dropdown (abre para cima quando não há espaço abaixo)
 
@@ -33,7 +35,8 @@ import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
 | `listItems`          | `{ description: string, value: any, disabled?: boolean }[]` | —       | Lista de opções predefinidas exibidas em um data list para seleção                         |
 | `openValuesInChange` | `boolean`                                     | `true`  | Abre automaticamente o dropdown dos valores ao adicionar um novo item                      |
 | `useBtnAdd`          | `boolean`                                     | `true`  | Exibe o botão de adicionar (`+`) ao lado do input                                          |
-| `pattern`            | `RegExp`                                      | —       | Expressão regular para validação do valor antes de adicioná-lo à lista                     |
+| `pattern`            | `RegExp`                                      | —       | Expressão regular para validação de cada valor (após o split pelo `delimiter`) antes de adicioná-lo à lista. Se informado, tem prioridade sobre o preset de `type` |
+| `type`               | `'text' \| 'email'`                           | `'text'`| Preset de validação. `'email'` ativa um regex de e-mail interno quando `pattern` não é informado                |
 | `delimiter`          | `string`                                      | `','`   | Caractere delimitador para dividir a entrada em múltiplos valores de uma vez               |
 | `placeholder`        | `string`                                      | —       | Texto placeholder exibido no input                                                         |
 | `disabled`           | `boolean`                                     | `false` | Desabilita o input e os botões de ação                                                     |
@@ -43,6 +46,7 @@ import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
 | `uppercase`          | `boolean`                                     | `false` | Converte automaticamente os valores inseridos para letras maiúsculas                       |
 | `lowercase`          | `boolean`                                     | `false` | Converte automaticamente os valores inseridos para letras minúsculas                       |
 | `maxWidthLabel`      | `string`                                      | —       | Define a largura máxima dos labels na lista de valores (ex: `'50px'`, `'100px'`)           |
+| `autocompleteitems`  | `string[]`                                    | `[]`    | Sugestões de autocomplete nativo (`<datalist>`) exibidas ao digitar no input simples (quando `listItems` não está definido) |
 
 ### Outputs
 
@@ -80,6 +84,66 @@ export class ExemploBasicoComponent {
 }
 ```
 
+### Autocomplete nativo — Sugestões via `autocompleteitems`
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="tags"
+  [autocompleteitems]="sugestoesTags"
+  placeholder="Digite uma tag"
+  (tcChange)="onTagsChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploAutocompleteComponent {
+  tags: string[] = [];
+  sugestoesTags = ['Angular', 'TypeScript', 'JavaScript', 'HTML', 'CSS'];
+
+  onTagsChange(itens: string[]) {
+    console.log('Tags atualizadas:', itens);
+  }
+}
+```
+
+### Lista de e-mails — Com `type="email"`
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="emails"
+  type="email"
+  delimiter=","
+  placeholder="Digite um ou mais e-mails separados por vírgula"
+  (tcChange)="onEmailsChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploEmailComponent {
+  emails: string[] = [];
+
+  onEmailsChange(itens: string[]) {
+    console.log('E-mails atualizados:', itens);
+  }
+}
+```
+
+Cada valor digitado é validado individualmente pelo regex de e-mail embutido após o split pelo `delimiter`. Se algum valor não for um e-mail válido, nenhum item é adicionado e o input recebe a classe de erro (`tc-input-error`, borda vermelha) até a correção. Para um regex customizado, use `pattern` — quando informado, `pattern` tem prioridade sobre `type`.
+
 ### Avançado — Com lista predefinida, uppercase e validação por pattern
 
 ```html