@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-label-token.md

@@ -0,0 +1,286 @@
+# Label Token
+
+## Características
+- Componente standalone que exibe valores de token/chave com visualização alternada.
+- Modo mascarado padrão: exibe `#*#*#*#*#*#*#*#*#` ao invés do valor real.
+- Botão toggle para visualizar/ocultar o valor real.
+- Suporte a cópia automática para clipboard com feedback visual.
+- Ícone de checkmark por 3 segundos após copiar.
+- Emite evento ao copiar com o valor copiado.
+- Ideal para exibição de tokens, senhas, chaves de API, etc.
+
+## Instalação
+```ts
+import { TCloudUiLabelTokenComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiLabelTokenComponent],
+  template: `<tcloud-ui-label-token [value]="token" [copy]="true"></tcloud-ui-label-token>`
+})
+export class ExampleComponent {
+  token: string = 'seu_token_aqui';
+}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| value | any | Valor a ser exibido/mascarado. | '' |
+| copy | boolean | Se true, exibe botão para copiar o valor para clipboard. | false |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| onClick | EventEmitter<any> | Emite quando o texto é copiado. Retorna o valor copiado. |
+
+## Exemplos de Uso
+### Uso Básico - Apenas Visualizar/Ocultar
+```html
+<tcloud-ui-label-token [value]="token"></tcloud-ui-label-token>
+
+<p>Token: {{ token }}</p>
+```
+
+Componente:
+```ts
+export class ExampleComponent {
+  token: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9';
+}
+```
+
+### Com Funcionamento de Cópia
+```html
+<tcloud-ui-label-token 
+  [value]="apiKey"
+  [copy]="true"
+  (onClick)="onTokenCopied($event)">
+</tcloud-ui-label-token>
+```
+
+Componente:
+```ts
+export class ExampleComponent {
+  apiKey: string = 'sk_live_51234567890abcdefgh';
+
+  onTokenCopied(value: string) {
+    console.log('Chave de API copiada:', value);
+    // Mostrar notificação de sucesso
+  }
+}
+```
+
+### Para Exibição de Token de Segurança
+```html
+<div class="security-token">
+  <label>Token de Segurança:</label>
+  <tcloud-ui-label-token 
+    [value]="securityToken"
+    [copy]="true">
+  </tcloud-ui-label-token>
+</div>
+```
+
+Componente:
+```ts
+export class SecurityComponent {
+  securityToken: string = 'SEC_2024_xyz789abc123';
+}
+```
+
+## Uso Avançado
+### Com Múltiplos Tokens
+```ts
+export class TokenManagementComponent {
+  tokens = [
+    { name: 'API Key', value: 'api_key_12345' },
+    { name: 'Refresh Token', value: 'refresh_token_67890' },
+    { name: 'Access Token', value: 'access_token_abcde' }
+  ];
+
+  copiedToken: string | null = null;
+
+  onTokenCopied(token: string) {
+    this.copiedToken = token;
+    // Feedback visual
+    setTimeout(() => {
+      this.copiedToken = null;
+    }, 3000);
+  }
+}
+```
+
+```html
+<div class="token-list">
+  <div *ngFor="let item of tokens" class="token-item">
+    <label>{{ item.name }}:</label>
+    <tcloud-ui-label-token 
+      [value]="item.value"
+      [copy]="true"
+      (onClick)="onTokenCopied($event)">
+    </tcloud-ui-label-token>
+    <span *ngIf="copiedToken === item.value" class="copy-feedback">
+      ✓ Copiado
+    </span>
+  </div>
+</div>
+```
+
+### Em Formulário de Credenciais
+```ts
+export class CredentialsComponent {
+  credentials = {
+    username: 'admin@example.com',
+    password: 'P@ssw0rd123!',
+    apiToken: 'token_abc123xyz789'
+  };
+
+  showDetails: boolean = false;
+}
+```
+
+```html
+<form *ngIf="showDetails">
+  <div>
+    <label>Usuário:</label>
+    <tcloud-ui-label-token 
+      [value]="credentials.username"
+      [copy]="true">
+    </tcloud-ui-label-token>
+  </div>
+
+  <div>
+    <label>Senha:</label>
+    <tcloud-ui-label-token 
+      [value]="credentials.password"
+      [copy]="true">
+    </tcloud-ui-label-token>
+  </div>
+
+  <div>
+    <label>Token de API:</label>
+    <tcloud-ui-label-token 
+      [value]="credentials.apiToken"
+      [copy]="true">
+    </tcloud-ui-label-token>
+  </div>
+
+  <button (click)="showDetails = false">Fechar</button>
+</form>
+
+<button *ngIf="!showDetails" (click)="showDetails = true">
+  Mostrar Credenciais
+</button>
+```
+
+### Com Validação de Cópia
+```ts
+export class TokenWithValidationComponent {
+  apiKey: string = 'sk_live_abcdef123456789';
+  copyStatus: 'idle' | 'success' | 'error' = 'idle';
+
+  onTokenCopied(value: string) {
+    try {
+      // Validação adicional se necessário
+      if (value && value.length > 0) {
+        this.copyStatus = 'success';
+        console.log('Token copiado com sucesso:', value);
+      } else {
+        this.copyStatus = 'error';
+      }
+
+      setTimeout(() => {
+        this.copyStatus = 'idle';
+      }, 3000);
+    } catch (error) {
+      this.copyStatus = 'error';
+    }
+  }
+}
+```
+
+```html
+<div class="token-wrapper">
+  <tcloud-ui-label-token 
+    [value]="apiKey"
+    [copy]="true"
+    (onClick)="onTokenCopied($event)">
+  </tcloud-ui-label-token>
+
+  <div [ngClass]="'status-' + copyStatus">
+    <span *ngIf="copyStatus === 'success'">✓ Copiado!</span>
+    <span *ngIf="copyStatus === 'error'">✗ Erro ao copiar</span>
+  </div>
+</div>
+```
+
+### Em Listagem com Ações
+```ts
+export class TokenListComponent {
+  savedTokens = [
+    { id: 1, name: 'Production API', token: 'prod_key_xyz', createdAt: new Date() },
+    { id: 2, name: 'Development API', token: 'dev_key_abc', createdAt: new Date() },
+    { id: 3, name: 'Testing Token', token: 'test_key_123', createdAt: new Date() }
+  ];
+
+  deleteToken(id: number) {
+    this.savedTokens = this.savedTokens.filter(t => t.id !== id);
+  }
+
+  regenerateToken(id: number) {
+    const token = this.savedTokens.find(t => t.id === id);
+    if (token) {
+      token.token = this.generateNewToken();
+    }
+  }
+
+  private generateNewToken(): string {
+    return 'token_' + Math.random().toString(36).substring(2, 15);
+  }
+}
+```
+
+```html
+<table class="token-table">
+  <thead>
+    <tr>
+      <th>Nome</th>
+      <th>Token</th>
+      <th>Criado em</th>
+      <th>Ações</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let item of savedTokens">
+      <td>{{ item.name }}</td>
+      <td>
+        <tcloud-ui-label-token 
+          [value]="item.token"
+          [copy]="true">
+        </tcloud-ui-label-token>
+      </td>
+      <td>{{ item.createdAt | date: 'dd/MM/yyyy HH:mm' }}</td>
+      <td>
+        <button (click)="regenerateToken(item.id)">Regenerar</button>
+        <button (click)="deleteToken(item.id)">Deletar</button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## Comportamento
+- **Estado Padrão**: O token é exibido mascarado como `#*#*#*#*#*#*#*#*#`
+- **Ao Clicar no Olho**: Alterna entre visualizar o valor real ou mascarado
+- **Ao Copiar**: O valor real é copiado para clipboard, e o ícone muda para checkmark por 3 segundos
+- **Feedback Visual**: O checkmark permanece visível durante 3 segundos antes de voltar ao ícone de cópia
+
+## Casos de Uso
+- Exibição segura de tokens JWT
+- Gerenciamento de chaves de API
+- Mostra de senhas e credenciais
+- Tokens de verificação por email
+- Códigos de autenticação
+- Chaves de criptografia

package/docs/tcloud-ui-legend.md

@@ -0,0 +1,72 @@
+# Legend
+
+## Características
+
+O `TCloudUiLegendComponent` é um componente Angular standalone que exibe uma legenda visual de status com dois indicadores (sucesso e erro). Utiliza dots coloridos para representar estados distintos.
+
+Funcionalidades principais:
+- Exibição de legenda com dois status: sucesso (verde) e erro (vermelho).
+- Labels configuráveis via Angular Signals (`input.required`).
+- Estratégia de detecção de mudanças `OnPush` para melhor performance.
+- Acessibilidade com `role="group"` e `aria-label`.
+
+## Instalação
+
+Importe o `TCloudUiLegendComponent` no componente standalone:
+
+```typescript
+import { TCloudUiLegendComponent } from 'tcloud-ui';
+
+@Component({
+    selector: 'app-exemplo',
+    standalone: true,
+    imports: [TCloudUiLegendComponent],
+    template: '...'
+})
+export class ExemploComponent {}
+```
+
+## Propriedades (API)
+
+### Inputs
+
+| Nome        | Tipo     | Descrição                                        | Valor Default |
+|-------------|----------|--------------------------------------------------|---------------|
+| sucessLabel | `string` | Label exibido ao lado do dot de sucesso (verde). | **Obrigatório** |
+| errorLabel  | `string` | Label exibido ao lado do dot de erro (vermelho). | **Obrigatório** |
+
+> Ambos os inputs utilizam `input.required<string>()` (Angular Signals), portanto são obrigatórios.
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```html
+<tcloud-ui-legend sucessLabel="Ativo" errorLabel="Inativo"></tcloud-ui-legend>
+```
+
+### Uso com Labels Customizados
+
+```html
+<tcloud-ui-legend sucessLabel="Aprovado" errorLabel="Rejeitado"></tcloud-ui-legend>
+```
+
+### Uso Avançado — Binding Dinâmico
+
+```typescript
+@Component({
+    selector: 'app-exemplo',
+    standalone: true,
+    imports: [TCloudUiLegendComponent],
+    template: `
+      <tcloud-ui-legend
+        [sucessLabel]="successText"
+        [errorLabel]="errorText">
+      </tcloud-ui-legend>
+    `
+})
+export class ExemploComponent {
+  successText = 'Com lock';
+  errorText = 'Sem lock';
+}
+```

package/docs/tcloud-ui-line-step-circle.md

@@ -0,0 +1,98 @@
+# TCloud UI Line Step Circle
+
+Componente Angular standalone para exibir trilhas de passos em linha com estados de progresso, passo ativo e passos inativos.
+
+## Características
+
+- ✅ Suporte a `step` variável para definir a quantidade total de passos (padrão: 7)
+- ✅ Recalcula a trilha sempre que `active`, `inactives` ou `complete` mudam
+- ✅ Garante que `active` não ultrapasse o total de passos; força `complete` quando necessário
+- ✅ Destaca o passo ativo e marca passos desabilitados via `inactives`
+- ✅ Disponível no `TCloudUiModule` ou importável como componente standalone
+
+## Instalação
+
+O componente já está disponível no módulo agregador:
+
+```typescript
+import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
+
+@NgModule({
+  imports: [TCloudUiModule]
+})
+export class MyModule { }
+```
+
+Ou importe apenas o componente standalone:
+
+```typescript
+import { TCloudUiLineStepCircleComponent } from 'projects/tcloud-ui/src/lib/_modules/tcloud-ui-line-step-circle/tcloud-ui-line-step-circle.component';
+
+@Component({
+  standalone: true,
+  imports: [TCloudUiLineStepCircleComponent]
+})
+export class MyStandaloneComponent {}
+```
+
+## Uso Básico
+
+```typescript
+export class ExampleComponent {
+  stepActive = 2;
+}
+```
+
+```html
+<tcloud-ui-line-step-circle
+  [step]="5"
+  [active]="stepActive">
+</tcloud-ui-line-step-circle>
+```
+
+## Uso Avançado
+
+```typescript
+export class WizardComponent {
+  totalSteps = 6;
+  stepActive = 3;
+  disabledSteps = [2, 5];
+  isComplete = false;
+
+  next() {
+    if (this.stepActive < this.totalSteps) {
+      this.stepActive++;
+    } else {
+      this.isComplete = true; // marca trilha como concluída
+    }
+  }
+}
+```
+
+```html
+<tcloud-ui-line-step-circle
+  [step]="totalSteps"
+  [active]="stepActive"
+  [inactives]="disabledSteps"
+  [complete]="isComplete">
+</tcloud-ui-line-step-circle>
+
+<button (click)="next()">Avançar</button>
+```
+
+## API
+
+### Componente: `tcloud-ui-line-step-circle`
+
+#### Inputs
+
+| Propriedade | Tipo | Padrão | Descrição | Obrigatório |
+|-------------|------|--------|-----------|-------------|
+| `step` | `number` | `7` | Quantidade total de passos renderizados. | ❌ |
+| `active` | `number` | `0` | Índice (1-based) do último passo alcançado; clampa para `step` quando ultrapassa. | ❌ |
+| `inactives` | `number[]` | `[]` | Lista 1-based de passos marcados como inativos/indisponíveis. | ❌ |
+| `complete` | `boolean` | `false` | Indica conclusão da trilha; mantém todos os passos com estado de progresso. | ❌ |
+
+#### Outputs
+
+Nenhum output público disponível.

package/docs/tcloud-ui-line-step-title.md

@@ -0,0 +1,194 @@
+# Line Step Title
+
+## Características
+- Componente standalone que exibe uma barra de progresso com títulos de etapas.
+- Progresso controlável de duas formas: pela propriedade `completed` de cada step ou pelo `@Input currentStep`.
+- Animação de entrada na barra de progresso (1.5s ease).
+- Contagem de etapas opcional com numeração automática.
+- Cálculo automático de progresso baseado nos steps completados.
+- Barra de progresso com largura proporcional ao número de etapas concluídas.
+- Interface `LineStepTitleData` para tipagem dos dados.
+
+## Instalação
+```ts
+import { TCloudUiLineStepTitleComponent, LineStepTitleData } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiLineStepTitleComponent],
+  template: `<tcloud-ui-line-step-title [steps]="steps"></tcloud-ui-line-step-title>`
+})
+export class ExampleComponent {
+  steps: LineStepTitleData[] = [
+    { title: 'Etapa 1', completed: true },
+    { title: 'Etapa 2', completed: false }
+  ];
+}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| steps | LineStepTitleData[] | Array de etapas a serem exibidas. | (obrigatório) |
+| currentStep | number | Número do step atual (controle externo). Sobrescreve a propriedade `completed` dos steps. | undefined |
+| showStepCounter | boolean | Se true, exibe numeração automática ao lado do título (ex: "1. Etapa"). | true |
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| (não possui) | - | Componente não emite eventos. |
+
+## Interface LineStepTitleData
+```ts
+export interface LineStepTitleData {
+  title: string;       // Título da etapa
+  completed?: boolean; // Se true, etapa está concluída
+  id?: any;            // Identificador opcional
+}
+```
+
+## Exemplos de Uso
+### Uso Básico - Controlado por `completed`
+```ts
+export class ExampleComponent {
+  steps: LineStepTitleData[] = [
+    { title: 'Provisionamento', completed: true },
+    { title: 'Clonar base produtiva', completed: false },
+    { title: 'Migração de Dados', completed: false },
+    { title: 'Atualizar aplicação', completed: false },
+    { title: 'Concluir Migração', completed: false },
+    { title: 'Quarentena', completed: false }
+  ];
+}
+```
+
+```html
+<tcloud-ui-line-step-title [steps]="steps"></tcloud-ui-line-step-title>
+```
+
+### Controlado por `currentStep`
+```html
+<!-- Marca as primeiras 4 etapas como completas -->
+<tcloud-ui-line-step-title 
+  [steps]="steps"
+  [currentStep]="4">
+</tcloud-ui-line-step-title>
+```
+
+### Sem Numeração
+```html
+<tcloud-ui-line-step-title 
+  [steps]="steps"
+  [showStepCounter]="false">
+</tcloud-ui-line-step-title>
+```
+
+## Uso Avançado
+### Avançar Steps Dinamicamente
+```ts
+export class StepComponent {
+  steps: LineStepTitleData[] = [
+    { title: 'Provisionamento', completed: true },
+    { title: 'Clonar base produtiva', completed: false },
+    { title: 'Migração de Dados', completed: false },
+    { title: 'Atualizar aplicação', completed: false },
+    { title: 'Concluir Migração', completed: false },
+    { title: 'Quarentena', completed: false }
+  ];
+
+  nextStep(): void {
+    const lastCompletedStep = this.steps.filter(x => x.completed).length;
+    this.steps.forEach((x, index) => {
+      if (index === lastCompletedStep) {
+        x.completed = true;
+      }
+    });
+  }
+
+  resetSteps(): void {
+    this.steps.forEach(x => x.completed = false);
+  }
+}
+```
+
+```html
+<tcloud-ui-line-step-title [steps]="steps"></tcloud-ui-line-step-title>
+
+<button (click)="nextStep()">Avançar</button>
+<button (click)="resetSteps()">Resetar</button>
+```
+
+### Com `currentStep` Dinâmico
+```ts
+export class DynamicStepComponent {
+  currentStep: number = 1;
+
+  steps: LineStepTitleData[] = [
+    { title: 'Dados Pessoais' },
+    { title: 'Endereço' },
+    { title: 'Pagamento' },
+    { title: 'Confirmação' }
+  ];
+
+  advance(): void {
+    if (this.currentStep < this.steps.length) {
+      this.currentStep++;
+    }
+  }
+
+  goBack(): void {
+    if (this.currentStep > 0) {
+      this.currentStep--;
+    }
+  }
+}
+```
+
+```html
+<tcloud-ui-line-step-title 
+  [steps]="steps"
+  [currentStep]="currentStep">
+</tcloud-ui-line-step-title>
+
+<button (click)="goBack()" [disabled]="currentStep <= 0">Voltar</button>
+<button (click)="advance()" [disabled]="currentStep >= steps.length">Avançar</button>
+```
+
+### Com ID e Controle por Evento Externo
+```ts
+export class StepWithIdComponent {
+  steps: LineStepTitleData[] = [
+    { id: 'provision', title: 'Provisionamento', completed: false },
+    { id: 'clone', title: 'Clonar Base', completed: false },
+    { id: 'migrate', title: 'Migração', completed: false },
+    { id: 'finish', title: 'Finalizar', completed: false }
+  ];
+
+  completeStep(id: string): void {
+    const step = this.steps.find(s => s.id === id);
+    if (step) {
+      step.completed = true;
+    }
+  }
+}
+```
+
+```html
+<tcloud-ui-line-step-title [steps]="steps"></tcloud-ui-line-step-title>
+
+<button (click)="completeStep('provision')">Completar Provisionamento</button>
+<button (click)="completeStep('clone')">Completar Clone</button>
+<button (click)="completeStep('migrate')">Completar Migração</button>
+<button (click)="completeStep('finish')">Completar Finalização</button>
+```
+
+## Modos de Controle
+O componente suporta dois modos de controle do progresso:
+
+1. **Via `completed`**: Cada step define individualmente se está concluído. O progresso é calculado como `completedSteps / totalSteps * 100%`.
+
+2. **Via `currentStep`**: Um número externo define quantas etapas estão completas. Sobrescreve a propriedade `completed` dos steps. O progresso é calculado como `currentStep / totalSteps * 100%`.
+
+Se ambos forem informados, `currentStep` tem prioridade.