@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-statusinfo.md

@@ -0,0 +1,138 @@
+# StatusInfoPipe
+
+O pipe `statusinfo` traduz chaves de status do sistema (em inglês) para descrições legíveis em português. Suporta dois temas de tradução: o padrão (`status_default`) e o de propostas (`proposal`), além de um modo especial `ALL` que concatena os valores de todos os temas. A comparação é case-insensitive.
+
+## Características
+
+- Tradução de status do sistema para português
+- Dois mapas de tradução: padrão e proposta (`proposal`)
+- Modo `ALL` que busca em todos os mapas e concatena os resultados
+- Comparação case-insensitive
+- Retorna o valor original quando não encontra correspondência
+- Pipe standalone
+
+## Instalação
+
+Importe o pipe diretamente no módulo ou componente standalone:
+
+```typescript
+import { StatusInfoPipe } from 'tcloud-ui';
+```
+
+## API
+
+### Sintaxe do Pipe
+
+```
+{{ valor | statusinfo }}
+{{ valor | statusinfo:'proposal' }}
+{{ valor | statusinfo:'ALL' }}
+```
+
+### Parâmetros
+
+| Parâmetro | Tipo     | Obrigatório | Descrição                                                                                           |
+|-----------|----------|-------------|------------------------------------------------------------------------------------------------------|
+| `tema`    | `string` | Não         | Tema de tradução. Valores: `'proposal'` (mapa de propostas), `'ALL'` (concatena todos os mapas). Sem parâmetro usa o mapa padrão |
+
+### Mapa Padrão (Default)
+
+| Chave          | Valor              |
+|----------------|---------------------|
+| `SUCCEEDED`    | Finalizado          |
+| `PENDING`      | Pendente            |
+| `FAILED`       | Erro                |
+| `RUNNING`      | Em andamento        |
+| `REGISTRATION` | Cadastro Pendente   |
+| `SUCCEED`      | Finalizado          |
+| `WAITING`      | Aguardando          |
+| `REJECTED`     | Rejeitado           |
+
+### Mapa de Propostas (`proposal`)
+
+| Chave          | Valor                      |
+|----------------|----------------------------|
+| `SUCCEEDED`    | Finalizado                 |
+| `PENDING`      | Aguardando Aprovação       |
+| `FAILED`       | Erro                       |
+| `RUNNING`      | Provisionando Ambientes    |
+| `REGISTRATION` | Cadastro Pendente          |
+| `SUCCEED`      | Finalizado                 |
+| `WAITING`      | Provisionando Ambientes    |
+| `REJECTED`     | Rejeitada                  |
+
+## Exemplos de Uso
+
+### Básico — Status padrão
+
+```html
+<p>{{ 'SUCCEEDED' | statusinfo }}</p>
+<!-- Resultado: Finalizado -->
+
+<p>{{ 'PENDING' | statusinfo }}</p>
+<!-- Resultado: Pendente -->
+
+<p>{{ 'RUNNING' | statusinfo }}</p>
+<!-- Resultado: Em andamento -->
+```
+
+```typescript
+import { StatusInfoPipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [StatusInfoPipe],
+  template: `
+    <span>{{ status | statusinfo }}</span>
+  `
+})
+export class ExemploBasicoComponent {
+  status = 'SUCCEEDED';
+}
+```
+
+### Avançado — Tema de propostas
+
+```html
+<p>{{ 'PENDING' | statusinfo:'proposal' }}</p>
+<!-- Resultado: Aguardando Aprovação -->
+
+<p>{{ 'RUNNING' | statusinfo:'proposal' }}</p>
+<!-- Resultado: Provisionando Ambientes -->
+```
+
+```typescript
+import { StatusInfoPipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, StatusInfoPipe],
+  template: `
+    <table class="table">
+      <thead>
+        <tr><th>Proposta</th><th>Status</th></tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let proposta of propostas">
+          <td>{{ proposta.nome }}</td>
+          <td>{{ proposta.status | statusinfo:'proposal' }}</td>
+        </tr>
+      </tbody>
+    </table>
+  `
+})
+export class ExemploAvancadoComponent {
+  propostas = [
+    { nome: 'Proposta A', status: 'PENDING' },
+    { nome: 'Proposta B', status: 'RUNNING' },
+    { nome: 'Proposta C', status: 'REJECTED' }
+  ];
+}
+```
+
+### Avançado — Modo ALL (busca em todos os temas)
+
+```html
+<p>{{ 'PENDING' | statusinfo:'ALL' }}</p>
+<!-- Resultado: Pendente Aguardando Aprovação -->
+```

package/docs/tcloud-ui-tab-group.md

@@ -0,0 +1,376 @@
+# Tab Group
+
+## Características
+
+O componente `tcloud-ui-tab-group` é um componente de navegação por abas que permite organizar conteúdo em múltiplas abas. Funciona em conjunto com o componente `tcloud-ui-tab-item` para criar interfaces responsivas com scroll horizontal automático em telas grandes e deslize de toque em dispositivos móveis.
+
+## Instalação
+
+Para utilizar o componente Tab Group, importe o módulo `TCloudUiModule`:
+
+```typescript
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item>Aba 1</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item>Aba 2</tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+  `
+})
+export class ExampleComponent {}
+```
+
+Ou importe diretamente os componentes:
+
+```typescript
+import { TCloudUiTabGroupComponent, TCloudUiTabItemComponent } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiTabGroupComponent, TCloudUiTabItemComponent],
+  template: `...`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+
+### TCloudUiTabGroupComponent
+
+O componente principal que envolve as abas com controle de overflow e scroll.
+
+**Propriedades:**
+- `isCarouselOverflowed: boolean` - Indica se há overflow horizontal
+- `scrollTabsCarousel(direction: 'left' | 'right'): void` - Método para scroll manual do carousel
+
+### TCloudUiTabItemComponent
+
+Componente individual de aba que pode funcionar como botão ou link.
+
+**Inputs:**
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `active` | `boolean` | Estado ativo da aba | `false` |
+| `url` | `string` | URL para navegação. Se vazio, funciona como botão | `''` |
+| `disabled` | `boolean` | Se a aba está desabilitada | `false` |
+| `fullWidth` | `boolean` | Se a aba ocupa toda a largura | `false` |
+
+**Outputs:**
+
+| Nome | Emite | Descrição |
+|------|-------|-----------|
+| `onClick` | `MouseEvent` | Emitido quando a aba é clicada |
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-basic-tabs',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item>Aba 1</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item>Aba 2</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item>Aba 3</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item>Aba 4</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item>Aba 5</tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+  `
+})
+export class BasicTabsComponent {}
+```
+
+### Abas com Estados
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-states-tabs',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item 
+        [active]="activeTab() === 0"
+        (onClick)="activeTab.set(0)">
+        Dashboard
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        [active]="activeTab() === 1"
+        (onClick)="activeTab.set(1)">
+        Relatórios
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        [active]="activeTab() === 2"
+        (onClick)="activeTab.set(2)">
+        Configurações
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item
+        [disabled]="true">
+        Desabilitado
+      </tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+
+    <div class="content">
+      @switch (activeTab()) {
+        @case (0) {
+          Conteúdo do Dashboard
+        }
+        @case (1) {
+          Conteúdo de Relatórios
+        }
+        @case (2) {
+          Conteúdo de Configurações
+        }
+      }
+    </div>
+  `,
+  styles: [`
+    .content {
+      padding: 1rem;
+      border-top: 1px solid var(--c-neutral-300);
+    }
+  `]
+})
+export class StatesTabsComponent {
+  activeTab = signal<number>(0);
+}
+```
+
+### Abas com Links de Navegação
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-navigation-tabs',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item 
+        [url]="'/dashboard'"
+        [active]="isActive('/dashboard')">
+        Dashboard
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        [url]="'/users'"
+        [active]="isActive('/users')">
+        Usuários
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        [url]="'/reports'"
+        [active]="isActive('/reports')">
+        Relatórios
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item
+        [url]="'/settings'"
+        [active]="isActive('/settings')">
+        Configurações
+      </tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+  `
+})
+export class NavigationTabsComponent {
+  isActive(url: string): boolean {
+    return false; // Implementar lógica real de verificação da rota ativa
+  }
+}
+```
+
+### Abas com Conteúdo Dinâmico
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-dynamic-tabs',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      @for (tab of tabs(); track tab.id) {
+        <tcloud-ui-tab-item 
+          [active]="activeTab() === tab.id"
+          [disabled]="tab.disabled"
+          (onClick)="activeTab.set(tab.id)">
+          {{ tab.label }}
+        </tcloud-ui-tab-item>
+      }
+    </tcloud-ui-tab-group>
+
+    <div class="content">
+      @let activeContent = tabs().find(t => t.id === activeTab());
+      @if (activeContent) {
+        <h3>{{ activeContent.label }}</h3>
+        <p>{{ activeContent.content }}</p>
+      }
+    </div>
+  `,
+  styles: [`
+    .content {
+      padding: 1rem;
+      border-top: 1px solid var(--c-neutral-300);
+    }
+  `]
+})
+export class DynamicTabsComponent {
+  activeTab = signal<string>('tab1');
+  
+  tabs = signal([
+    { id: 'tab1', label: 'Produtos', content: 'Lista de produtos', disabled: false },
+    { id: 'tab2', label: 'Categorias', content: 'Gerenciamento de categorias', disabled: false },
+    { id: 'tab3', label: 'Estoque', content: 'Controle de estoque', disabled: false },
+    { id: 'tab4', label: 'Relatórios', content: 'Geração de relatórios', disabled: true }
+  ]);
+}
+```
+
+### Abas em Largura Cheia
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-fullwidth-tabs',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item 
+        [fullWidth]="true"
+        [active]="activeTab() === 0"
+        (onClick)="activeTab.set(0)">
+        Opção A
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        [fullWidth]="true"
+        [active]="activeTab() === 1"
+        (onClick)="activeTab.set(1)">
+        Opção B
+      </tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+  `
+})
+export class FullWidthTabsComponent {
+  activeTab = signal<number>(0);
+}
+```
+
+### Tratamento de Click em Abas
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-click-handler-tabs',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item 
+        (onClick)="onTabClick('analytics')">
+        Analytics
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        (onClick)="onTabClick('performance')">
+        Performance
+      </tcloud-ui-tab-item>
+      <tcloud-ui-tab-item 
+        (onClick)="onTabClick('metrics')">
+        Métricas
+      </tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+
+    @if (selectedTab) {
+      <p>Aba selecionada: {{ selectedTab }}</p>
+    }
+  `
+})
+export class ClickHandlerTabsComponent {
+  selectedTab: string | null = null;
+
+  onTabClick(tabName: string): void {
+    this.selectedTab = tabName;
+    console.log(`Navegando para ${tabName}`);
+  }
+}
+```
+
+## Responsividade
+
+O componente `tcloud-ui-tab-group` é totalmente responsivo:
+
+- **Desktop**: Exibe botões de scroll esquerda/direita quando há overflow
+- **Mobile**: Permite deslize de toque para navegação entre abas
+
+O breakpoint de transição entre os modos é **480px**.
+
+## Comportamentos Especiais
+
+1. **Detecção Automática de Overflow**: O componente detecta automaticamente quando há mais abas do que espaço disponível
+2. **Scroll Suave**: O scroll é executado com comportamento smooth para melhor UX
+3. **Estados Visuais**: 
+   - Normal: Fundo cinza claro
+   - Hover/Focus: Fundo cinza mais escuro com texto azul
+   - Ativo: Fundo azul claro com borda azul
+   - Desabilitado: Cores acinzentadas com cursor not-allowed
+
+## Integração com Roteamento
+
+Para integrar com Angular Router, use a propriedade `url`:
+
+```typescript
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-router-tabs',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <tcloud-ui-tab-group>
+      <tcloud-ui-tab-item url="/users">Usuários</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item url="/products">Produtos</tcloud-ui-tab-item>
+      <tcloud-ui-tab-item url="/orders">Pedidos</tcloud-ui-tab-item>
+    </tcloud-ui-tab-group>
+  `
+})
+export class RouterTabsComponent {}
+```
+
+## Casos de Uso
+
+- Navegação principal de seções de uma aplicação
+- Organização de conteúdo em painel de controle
+- Tabulação de dados relacionados
+- Filtros interativos
+- Exibição de diferentes modos de visualização
+- Configurações por categoria

package/docs/tcloud-ui-tab-menu.md

@@ -0,0 +1,109 @@
+# Tab Menu
+
+## Características
+- Sistema de abas standalone com cabeçalho, títulos/subtítulos e conteúdos associados.
+- Gerencia estado via serviço interno (TabMenuService) com suporte a loading, scroll, linha inferior e modo full.
+- Suporta registrar aba ativa na URL (`registerInUrl`) e alternar aba programaticamente por `active`.
+- Componentes auxiliares: `tcloud-ui-tab-head`, `tcloud-ui-tab-title`, `tcloud-ui-tab-subtitle`, `tcloud-ui-tab-content`.
+
+## Instalação
+```ts
+import {
+  TCloudUiTabMenuComponent,
+  TCloudUiTabHeadComponent,
+  TCloudUiTabTitleComponent,
+  TCloudUiTabSubtitleComponent,
+  TCloudUiTabContentComponent
+} from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [
+    TCloudUiTabMenuComponent,
+    TCloudUiTabHeadComponent,
+    TCloudUiTabTitleComponent,
+    TCloudUiTabSubtitleComponent,
+    TCloudUiTabContentComponent
+  ],
+  template: `<tcloud-ui-tab-menu></tcloud-ui-tab-menu>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+### `tcloud-ui-tab-menu`
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| registerInUrl | boolean | Atualiza query param `tab` com a aba ativa. | false |
+| loading | boolean | Propaga estado de carregamento para abas. | false |
+| active | string | Id da aba ativa inicial (aceita atualização). | '' |
+| full | boolean | Habilita modo full (layout mais largo). | false |
+
+### `tcloud-ui-tab-head`
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| scroll | boolean | Controla scroll horizontal do cabeçalho. | true |
+| background | boolean | Aplica fundo padrão. | true |
+| backgroundColor | '#FFFFFF'\|'#F1F1F1'\|'white'\|'transparent' | Cor de fundo quando `background=true`. | 'transparent' (ajustado para branco/cinza) |
+| bottom_line | boolean | Exibe linha inferior. | false |
+
+### `tcloud-ui-tab-title` / `tcloud-ui-tab-subtitle`
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| tab | string | Identificador da aba. | '' |
+| disabled | boolean | Desabilita seleção da aba. | false |
+
+### `tcloud-ui-tab-content`
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| tab | string | Identificador da aba que o conteúdo representa. | '' |
+| hideContent | boolean | Esconde conteúdo mantendo estrutura. | false |
+
+### Outputs
+`TCloudUiTabMenuComponent`:
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| onChange | EventEmitter<string> | Emite o id da aba ativa ao trocar. |
+
+## Exemplos de Uso
+### Uso Básico
+```html
+<tcloud-ui-tab-menu [active]="'tab-1'" (onChange)="onTab($event)">
+  <tcloud-ui-tab-head [bottom_line]="true" [background]="true">
+    <tcloud-ui-tab-title tab="tab-1">Tab 1</tcloud-ui-tab-title>
+    <tcloud-ui-tab-title tab="tab-2">Tab 2</tcloud-ui-tab-title>
+  </tcloud-ui-tab-head>
+
+  <tcloud-ui-tab-content tab="tab-1">Conteúdo 1</tcloud-ui-tab-content>
+  <tcloud-ui-tab-content tab="tab-2">Conteúdo 2</tcloud-ui-tab-content>
+</tcloud-ui-tab-menu>
+```
+
+### Subtítulos, full e desabilitado
+```html
+<tcloud-ui-tab-menu [active]="'a1'" [full]="true">
+  <tcloud-ui-tab-head [bottom_line]="false" [background]="false">
+    <tcloud-ui-tab-subtitle tab="a1">Alterar Senha</tcloud-ui-tab-subtitle>
+    <tcloud-ui-tab-subtitle tab="a2" [disabled]="true">Excluir usuários</tcloud-ui-tab-subtitle>
+    <tcloud-ui-tab-subtitle tab="a3">Aplicativos</tcloud-ui-tab-subtitle>
+  </tcloud-ui-tab-head>
+
+  <tcloud-ui-tab-content tab="a1">Content A1</tcloud-ui-tab-content>
+  <tcloud-ui-tab-content tab="a2">Content A2</tcloud-ui-tab-content>
+  <tcloud-ui-tab-content tab="a3">Content A3</tcloud-ui-tab-content>
+</tcloud-ui-tab-menu>
+```
+
+### Com registro na URL
+```html
+<tcloud-ui-tab-menu [active]="'tab-1'" [registerInUrl]="true"></tcloud-ui-tab-menu>
+```
+
+## Tipos auxiliares
+```ts
+export interface ITab {
+  id: string;
+  disabled: boolean;
+}
+```