@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

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

@@ -0,0 +1,311 @@
+# Multi Select
+
+## Características
+- Componente standalone para seleção múltipla de itens a partir de uma lista predefinida.
+- Select dropdown com botão de adicionar (+) para marcar itens como ativos.
+- Itens selecionados exibidos como tags/labels com botão de remoção (x).
+- Itens já selecionados são removidos automaticamente do dropdown (apenas itens não ativos aparecem).
+- Suporte a ngModel (two-way binding) via ControlValueAccessor.
+- Validação com `required` via NG_VALIDATORS: exige ao menos um item ativo.
+- Suporte a estados: `disabled` e `loading`.
+- Opção de exibir `description` ou `value` nas tags selecionadas.
+- Largura máxima configurável para labels.
+- Modo `showInput`: oculta o select, exibindo apenas os itens selecionados.
+
+## Instalação
+```ts
+import { TCloudUiMultiSelectComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiMultiSelectComponent],
+  template: `
+    <tcloud-ui-multi-select 
+      [tcList]="options"
+      (tcChange)="onSelectionChanged($event)">
+    </tcloud-ui-multi-select>
+  `
+})
+export class ExampleComponent {
+  options = [
+    { description: 'Opção 1', value: 'opt_1', active: false },
+    { description: 'Opção 2', value: 'opt_2', active: false }
+  ];
+
+  onSelectionChanged(event: any[]) {
+    console.log('Itens selecionados:', event);
+  }
+}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| tcList | IOptions[] | Array de opções disponíveis para seleção. | undefined |
+| placeholder | string | Texto exibido no select quando nenhum item está selecionado. | 'Selecione um item' |
+| disabled | boolean | Se true, desabilita select e botões. | false |
+| loading | boolean | Se true, desabilita select e botões (estado de carregamento). | false |
+| required | string | Se definido, habilita validação de pelo menos um item ativo. | undefined |
+| maxWidthLabel | string | Largura máxima de cada label selecionada (ex: '95px'). | undefined |
+| showDescriptionInValue | boolean | Se true, exibe `description` nas tags. Se false, exibe `value`. | false |
+| showInput | boolean | Se true, oculta o select dropdown e exibe apenas os itens selecionados. | false |
+| ngModel | IOptions[] | Array de opções para two-way binding. | undefined |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| tcChange | EventEmitter<any[]> | Emite array contendo apenas os itens ativos ao adicionar ou remover. |
+| onChange | EventEmitter<any> | Emite alterações internas. |
+
+## Estrutura de Dados (IOptions)
+```ts
+interface IOptions {
+  description: string;   // Texto exibido no dropdown e nas tags
+  value: any;            // Valor do item
+  active?: boolean;      // Se true, item está selecionado
+  block?: boolean;       // Flag opcional de bloqueio
+  infoText?: string;     // Texto informativo opcional
+}
+```
+
+## Exemplos de Uso
+### Uso Básico - Modo Simples
+```ts
+export class ExampleComponent {
+  options: IOptions[] = [
+    { description: 'Opção 1', value: 'opt_1', active: true },
+    { description: 'Opção 2', value: 'opt_2' },
+    { description: 'Opção 3', value: 'opt_3', active: true },
+    { description: 'Opção 4', value: 'opt_4' }
+  ];
+
+  onSelectionChanged(event: any[]) {
+    console.log('Selecionados:', event);
+  }
+}
+```
+
+```html
+<tcloud-ui-multi-select 
+  [tcList]="options"
+  (tcChange)="onSelectionChanged($event)"
+  [showDescriptionInValue]="true"
+  [maxWidthLabel]="'95px'">
+</tcloud-ui-multi-select>
+```
+
+### Com Placeholder Customizado
+```html
+<tcloud-ui-multi-select 
+  [tcList]="options"
+  [placeholder]="'Selecione uma opção'"
+  [showDescriptionInValue]="true"
+  [maxWidthLabel]="'95px'"
+  (tcChange)="onSelectionChanged($event)">
+</tcloud-ui-multi-select>
+```
+
+### Com Validação Required (ngModel)
+```html
+<form #formulario="ngForm">
+  <tcloud-ui-multi-select 
+    name="selectedOptions"
+    [(ngModel)]="selectedItems"
+    required>
+  </tcloud-ui-multi-select>
+
+  <p *ngIf="formulario.invalid">
+    É necessário selecionar ao menos um item.
+  </p>
+
+  <button [disabled]="formulario.invalid">Salvar</button>
+</form>
+```
+
+Componente:
+```ts
+export class FormComponent {
+  selectedItems: IOptions[] = [
+    { description: 'Opção 1', value: 'opt_1', active: false },
+    { description: 'Opção 2', value: 'opt_2', active: false }
+  ];
+}
+```
+
+### Modo Somente Leitura (showInput)
+```html
+<!-- Exibe apenas os itens selecionados, sem dropdown -->
+<tcloud-ui-multi-select 
+  [tcList]="options"
+  [showInput]="true"
+  [showDescriptionInValue]="true"
+  [maxWidthLabel]="'95px'"
+  (tcChange)="onSelectionChanged($event)">
+</tcloud-ui-multi-select>
+```
+
+### Exibindo Value nas Tags
+```html
+<!-- Exibe o value ao invés da description -->
+<tcloud-ui-multi-select 
+  [tcList]="options"
+  [showDescriptionInValue]="false"
+  (tcChange)="onSelectionChanged($event)">
+</tcloud-ui-multi-select>
+```
+
+## Uso Avançado
+### Com ngModel e Two-Way Binding
+```ts
+export class SelectComponent {
+  options: IOptions[] = [
+    { value: 'opcao1', description: 'Opção 1', active: true },
+    { value: 'opcao2', description: 'Opção 2', active: true },
+    { value: 'opcao3', description: 'Opção 3', active: false }
+  ];
+
+  onSelectionChanged(event: any[]) {
+    console.log('Itens ativos:', event);
+  }
+}
+```
+
+```html
+<tcloud-ui-multi-select 
+  [(ngModel)]="options"
+  [placeholder]="'Selecione uma opção'"
+  [showDescriptionInValue]="true"
+  [maxWidthLabel]="'95px'"
+  (tcChange)="onSelectionChanged($event)">
+</tcloud-ui-multi-select>
+
+<pre>{{ options | json }}</pre>
+```
+
+### Seleção de Permissões
+```ts
+export class PermissionsComponent {
+  permissions: IOptions[] = [
+    { description: 'Leitura', value: 'read', active: true },
+    { description: 'Escrita', value: 'write', active: false },
+    { description: 'Exclusão', value: 'delete', active: false },
+    { description: 'Administração', value: 'admin', active: false }
+  ];
+
+  activePermissions: any[] = [];
+
+  onPermissionsChanged(event: any[]) {
+    this.activePermissions = event;
+    console.log('Permissões ativas:', this.activePermissions.map(p => p.value));
+  }
+}
+```
+
+```html
+<div>
+  <label>Permissões do Usuário:</label>
+  <tcloud-ui-multi-select 
+    [tcList]="permissions"
+    [placeholder]="'Adicionar permissão'"
+    [showDescriptionInValue]="true"
+    [maxWidthLabel]="'120px'"
+    (tcChange)="onPermissionsChanged($event)">
+  </tcloud-ui-multi-select>
+
+  <p>Permissões ativas: {{ activePermissions.length }}</p>
+</div>
+```
+
+### Seleção de Tags com Estado Loading
+```ts
+export class TagsComponent {
+  tags: IOptions[] = [];
+  isLoading: boolean = false;
+
+  loadTags() {
+    this.isLoading = true;
+    setTimeout(() => {
+      this.tags = [
+        { description: 'Angular', value: 'angular', active: false },
+        { description: 'React', value: 'react', active: false },
+        { description: 'Vue', value: 'vue', active: false },
+        { description: 'Node.js', value: 'nodejs', active: false },
+        { description: 'TypeScript', value: 'typescript', active: false }
+      ];
+      this.isLoading = false;
+    }, 2000);
+  }
+}
+```
+
+```html
+<tcloud-ui-multi-select 
+  [tcList]="tags"
+  [loading]="isLoading"
+  [placeholder]="'Selecione tecnologias'"
+  [showDescriptionInValue]="true">
+</tcloud-ui-multi-select>
+
+<button (click)="loadTags()" [disabled]="isLoading">Carregar Tags</button>
+```
+
+### Em Formulário com Múltiplos Multi-Selects
+```ts
+export class FormComponent {
+  categories: IOptions[] = [
+    { description: 'Software', value: 'sw', active: false },
+    { description: 'Hardware', value: 'hw', active: false },
+    { description: 'Serviços', value: 'svc', active: false }
+  ];
+
+  priorities: IOptions[] = [
+    { description: 'Baixa', value: 'low', active: false },
+    { description: 'Média', value: 'medium', active: false },
+    { description: 'Alta', value: 'high', active: false },
+    { description: 'Crítica', value: 'critical', active: false }
+  ];
+}
+```
+
+```html
+<form #form="ngForm">
+  <div>
+    <label>Categorias:</label>
+    <tcloud-ui-multi-select 
+      name="categories"
+      [(ngModel)]="categories"
+      required
+      [placeholder]="'Selecione categorias'"
+      [showDescriptionInValue]="true">
+    </tcloud-ui-multi-select>
+  </div>
+
+  <div>
+    <label>Prioridades:</label>
+    <tcloud-ui-multi-select 
+      name="priorities"
+      [(ngModel)]="priorities"
+      required
+      [placeholder]="'Selecione prioridades'"
+      [showDescriptionInValue]="true">
+    </tcloud-ui-multi-select>
+  </div>
+
+  <button [disabled]="form.invalid">Salvar</button>
+</form>
+```
+
+## Validação
+- Quando `required` é definido, o componente valida se há ao menos um item com `active: true`.
+- Integração com Angular Forms via `NG_VALIDATORS`.
+- O controle é marcado como inválido quando nenhum item está ativo e `required` está definido.
+
+## Diferença entre Multi Select e Multi Input
+| Característica | Multi Select | Multi Input |
+| --- | --- | --- |
+| Entrada de dados | Select dropdown com opções fixas | Input de texto livre |
+| Itens | Predefinidos via `tcList` | Digitados pelo usuário |
+| Ativação | Toggle `active` em item existente | Adiciona novo item `{ value }` |
+| Remoção | Volta item para dropdown (`active: false`) | Remove item do array |

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

@@ -0,0 +1,157 @@
+# TCloudUiMultiplesValues
+
+O componente `tcloud-ui-multiples-values` permite a entrada e gerenciamento de múltiplos valores em formato de lista. Os valores podem ser inseridos manualmente via input de texto (com suporte a delimitadores para inserção em lote) ou selecionados a partir de uma lista predefinida (`listItems`) utilizando o componente `tcloud-ui-data-list`. Cada valor adicionado é exibido como item na lista com opção de remoção individual. Implementa `ControlValueAccessor` e `NG_VALIDATORS`, sendo compatível com formulários reativos e template-driven.
+
+## Características
+
+- Entrada de múltiplos valores via input de texto ou seleção em data list
+- 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`)
+- 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`
+- 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)
+
+## Instalação
+
+Importe o componente diretamente no módulo ou componente standalone:
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+```
+
+## Propriedades
+
+### Inputs
+
+| Propriedade          | Tipo                                          | Padrão  | Descrição                                                                                  |
+|----------------------|-----------------------------------------------|---------|--------------------------------------------------------------------------------------------|
+| `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                     |
+| `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                                                     |
+| `loading`            | `boolean`                                     | `false` | Indica estado de carregamento, desabilita botões de remoção                                |
+| `required`           | `boolean`                                     | —       | Quando definido, ativa a validação de obrigatoriedade (lista não pode estar vazia)          |
+| `search`             | `boolean`                                     | `true`  | Habilita campo de busca dentro do data list (quando `listItems` está configurado)          |
+| `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'`)           |
+
+### Outputs
+
+| Evento     | Tipo              | Descrição                                                        |
+|------------|-------------------|------------------------------------------------------------------|
+| `tcChange` | `EventEmitter<any>` | Emitido sempre que a lista de valores é alterada (adição ou remoção) |
+
+## Exemplos de Uso
+
+### Básico — Entrada manual com delimitador
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="valores"
+  delimiter=";"
+  placeholder="Informe os valores separados por ;"
+  (tcChange)="onValoresChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploBasicoComponent {
+  valores: string[] = [];
+
+  onValoresChange(itens: string[]) {
+    console.log('Valores atualizados:', itens);
+  }
+}
+```
+
+### Avançado — Com lista predefinida, uppercase e validação por pattern
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="codigos"
+  [listItems]="listaCodigos"
+  [openValuesInChange]="false"
+  [useBtnAdd]="false"
+  [search]="false"
+  [uppercase]="true"
+  [pattern]="patternValidacao"
+  maxWidthLabel="80px"
+  placeholder="Selecione ou digite o código"
+  (tcChange)="onCodigosChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploAvancadoComponent {
+  codigos: string[] = ['COD0001', 'COD0002'];
+
+  listaCodigos = [
+    { description: 'Código 0001', value: 'COD0001' },
+    { description: 'Código 0002', value: 'COD0002' },
+    { description: 'Código 0003', value: 'COD0003' },
+    { description: 'Código 0004', value: 'COD0004' }
+  ];
+
+  patternValidacao = /^[A-Z]{3}[0-9]{4}$/;
+
+  onCodigosChange(itens: string[]) {
+    console.log('Códigos selecionados:', itens);
+  }
+}
+```
+
+### Avançado — Entrada de IPs com validação e delimitador
+
+```html
+<tcloud-ui-multiples-values
+  [(ngModel)]="ips"
+  delimiter=","
+  [pattern]="patternIP"
+  [uppercase]="false"
+  placeholder="Informe os IPs separados por vírgula"
+  required
+  (tcChange)="onIPsChange($event)">
+</tcloud-ui-multiples-values>
+```
+
+```typescript
+import { TCloudUiMultiplesValuesComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiMultiplesValuesComponent],
+  template: `...`
+})
+export class ExemploIPComponent {
+  ips: string[] = [];
+
+  patternIP = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
+
+  onIPsChange(itens: string[]) {
+    console.log('IPs cadastrados:', itens);
+  }
+}
+```

package/docs/tcloud-ui-not-found.md

@@ -0,0 +1,88 @@
+# TCloudUiNotFound
+
+O componente `tcloud-ui-not-found` exibe uma mensagem de conteúdo vazio ou não encontrado. Apresenta um ícone de alerta (`fa-exclamation-triangle`) acompanhado de uma mensagem configurável, sendo ideal para estados vazios em listagens, tabelas ou resultados de busca. A mensagem é renderizada via `innerHTML`, permitindo o uso de HTML na personalização do texto.
+
+## Características
+
+- Exibição de ícone de alerta visual (Font Awesome `fa-exclamation-triangle`)
+- Mensagem configurável via input `message`
+- Suporte a conteúdo HTML na mensagem (renderizado via `innerHTML`)
+- Mensagem padrão pré-configurada ("Nenhum registro encontrado.")
+- Ocultação automática da mensagem quando o valor é uma string vazia
+- Componente standalone com dependência mínima
+
+## Instalação
+
+Importe o componente diretamente no módulo ou componente standalone:
+
+```typescript
+import { TCloudUiNotFoundComponent } from 'tcloud-ui';
+```
+
+## Propriedades
+
+### Inputs
+
+| Propriedade | Tipo     | Padrão                            | Descrição                                                                 |
+|-------------|----------|-----------------------------------|---------------------------------------------------------------------------|
+| `message`   | `string` | `'Nenhum registro encontrado.'`   | Texto exibido como mensagem de conteúdo vazio. Aceita HTML via `innerHTML` |
+
+### Outputs
+
+Este componente não possui outputs.
+
+## Exemplos de Uso
+
+### Básico — Mensagem padrão
+
+```html
+<tcloud-ui-not-found></tcloud-ui-not-found>
+```
+
+```typescript
+import { TCloudUiNotFoundComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiNotFoundComponent],
+  template: `<tcloud-ui-not-found></tcloud-ui-not-found>`
+})
+export class ExemploBasicoComponent {}
+```
+
+### Avançado — Mensagem personalizada com HTML
+
+```html
+<tcloud-ui-not-found
+  message="Nenhum resultado para a busca. <br> Tente novos filtros.">
+</tcloud-ui-not-found>
+```
+
+```typescript
+import { TCloudUiNotFoundComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiNotFoundComponent],
+  template: `...`
+})
+export class ExemploAvancadoComponent {
+  mensagem = 'Nenhum <strong>cliente</strong> encontrado para o período selecionado.';
+}
+```
+
+```html
+<tcloud-ui-not-found [message]="mensagem"></tcloud-ui-not-found>
+```
+
+### Avançado — Exibição condicional em listagem vazia
+
+```html
+<ng-container *ngIf="itens.length > 0; else semResultados">
+  <!-- conteúdo da listagem -->
+</ng-container>
+
+<ng-template #semResultados>
+  <tcloud-ui-not-found message="Nenhum item cadastrado."></tcloud-ui-not-found>
+</ng-template>
+```

package/docs/tcloud-ui-number-step.md

@@ -0,0 +1,134 @@
+# TCloudUiNumberStep
+
+O componente `tcloud-ui-number-step` exibe um indicador de progresso numérico em formato de círculos conectados por linhas. Cada etapa é representada por um círculo numerado que pode estar ativo, completo, ou inativo. Etapas concluídas exibem um ícone de check, e a linha de progresso entre os círculos indica visualmente o avanço. Ideal para fluxos de cadastro, wizards e processos sequenciais.
+
+## Características
+
+- Renderização dinâmica de N etapas com base no input `step`
+- Indicação visual do passo ativo com destaque no círculo
+- Exibição de ícone de check (`fa-check`) para etapas concluídas (anteriores ao `active`)
+- Modo completo (`complete`) que marca todas as etapas como finalizadas
+- Suporte a etapas inativas (`inactives`) exibidas com ícone de círculo vazio (`fa-circle`)
+- Linhas de progresso entre os círculos com preenchimento condicional
+- Evento de clique em cada etapa com emissão do número do passo
+- Componente standalone com dependência mínima
+
+## Instalação
+
+Importe o componente diretamente no módulo ou componente standalone:
+
+```typescript
+import { TCloudUiNumberStepComponent } from 'tcloud-ui';
+```
+
+## Propriedades
+
+### Inputs
+
+| Propriedade    | Tipo       | Padrão | Descrição                                                                                     |
+|----------------|------------|--------|-----------------------------------------------------------------------------------------------|
+| `step`         | `number`   | —      | **(Obrigatório)** Número total de etapas a serem exibidas                                     |
+| `active`       | `number`   | —      | Número da etapa ativa. Etapas anteriores são marcadas como concluídas com ícone de check       |
+| `complete`     | `boolean`  | —      | Quando `true`, marca todas as etapas como concluídas                                          |
+| `useIconCheck` | `boolean`  | —      | Habilita a exibição do ícone de check nas etapas concluídas                                   |
+| `inactives`    | `number[]` | `[]`   | Lista de números de etapas que devem ser exibidas como inativas (desabilitadas)                |
+
+### Outputs
+
+| Evento      | Tipo                   | Descrição                                                    |
+|-------------|------------------------|--------------------------------------------------------------|
+| `clickStep` | `EventEmitter<number>` | Emitido ao clicar em uma etapa, retorna o número da etapa clicada |
+
+## Exemplos de Uso
+
+### Básico — Progresso com etapa ativa
+
+```html
+<tcloud-ui-number-step
+  [step]="5"
+  [active]="3">
+</tcloud-ui-number-step>
+```
+
+```typescript
+import { TCloudUiNumberStepComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiNumberStepComponent],
+  template: `
+    <tcloud-ui-number-step
+      [step]="5"
+      [active]="etapaAtiva"
+      (clickStep)="onClickEtapa($event)">
+    </tcloud-ui-number-step>
+  `
+})
+export class ExemploBasicoComponent {
+  etapaAtiva = 3;
+
+  onClickEtapa(step: number) {
+    this.etapaAtiva = step;
+  }
+}
+```
+
+### Avançado — Todas as etapas completas
+
+```html
+<tcloud-ui-number-step
+  [step]="5"
+  [complete]="true"
+  [useIconCheck]="true">
+</tcloud-ui-number-step>
+```
+
+### Avançado — Etapas inativas com ícone de check
+
+```html
+<tcloud-ui-number-step
+  [step]="5"
+  [active]="4"
+  [inactives]="[2, 3]"
+  [useIconCheck]="true">
+</tcloud-ui-number-step>
+```
+
+```typescript
+import { TCloudUiNumberStepComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiNumberStepComponent],
+  template: `...`
+})
+export class ExemploAvancadoComponent {
+  etapaAtiva = 4;
+  etapasInativas = [2, 3];
+}
+```
+
+### Avançado — Avanço automático de etapa
+
+```typescript
+import { TCloudUiNumberStepComponent } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiNumberStepComponent],
+  template: `
+    <tcloud-ui-number-step
+      [step]="5"
+      [active]="etapaAtiva"
+      [useIconCheck]="true">
+    </tcloud-ui-number-step>
+  `
+})
+export class ExemploAutoComponent implements OnInit {
+  etapaAtiva = 2;
+
+  ngOnInit(): void {
+    setTimeout(() => this.etapaAtiva = 3, 5000);
+  }
+}
+```