@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-radio.md

@@ -0,0 +1,83 @@
+# Radio
+
+Diretiva para estilizar inputs do tipo radio com o padrão visual do TCloud UI.
+
+## Características
+
+- Aplica automaticamente a classe CSS `tcloud-ui-radio` ao elemento `<input type="radio">`
+- Uso simples via atributo `tcloudUiRadio` no input
+- Compatível com `ngModel` e `formControl` para two-way binding
+- Suporte nativo a `disabled` e `checked`
+
+## Instalação
+
+```typescript
+import { TCloudUiModule } from 'tcloud-ui';
+
+@NgModule({
+  imports: [TCloudUiModule]
+})
+export class AppModule { }
+```
+
+Ou importe a diretiva standalone diretamente:
+
+```typescript
+import { TCloudUiRadioDirective } from 'tcloud-ui';
+
+@Component({
+  imports: [TCloudUiRadioDirective]
+})
+export class MeuComponent { }
+```
+
+## Propriedades (API)
+
+A diretiva não possui `@Input` ou `@Output` próprios. Ela atua como uma diretiva de atributo pura, adicionando a classe CSS `tcloud-ui-radio` ao host element.
+
+| Seletor | Descrição |
+|---|---|
+| `input[type="radio"][tcloudUiRadio]` | Aplica a diretiva a inputs do tipo radio |
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```html
+<label>
+  <input type="radio" tcloudUiRadio name="opcao" value="1" /> Opção 1
+</label>
+<label>
+  <input type="radio" tcloudUiRadio name="opcao" value="2" /> Opção 2
+</label>
+```
+
+### Uso com ngModel
+
+```typescript
+selectedOption: string = 'option1';
+```
+
+```html
+<label>
+  <input type="radio" tcloudUiRadio name="example" value="option1" [(ngModel)]="selectedOption" />
+  Opção 1
+</label>
+<label>
+  <input type="radio" tcloudUiRadio name="example" value="option2" [(ngModel)]="selectedOption" />
+  Opção 2
+</label>
+
+<p>Selecionado: {{ selectedOption }}</p>
+```
+
+### Uso com estado desabilitado
+
+```html
+<label>
+  <input type="radio" tcloudUiRadio name="disabled" value="1" [disabled]="true" /> Desabilitado
+</label>
+<label>
+  <input type="radio" tcloudUiRadio name="disabled" value="2" [disabled]="true" [checked]="true" /> Desabilitado e marcado
+</label>
+```

package/docs/tcloud-ui-reorder-items.md

@@ -0,0 +1,418 @@
+# Reorder Items
+
+O componente **Reorder Items** fornece uma interface interativa para reordenar uma lista de itens através de botões de seta para cima e para baixo. Suporta tanto arrays de strings simples quanto arrays de objetos com descrição, permitindo comparação entre valores antes e depois da reordenação.
+
+## Características
+
+- **Reordenação interativa**: Botões para mover itens para cima ou para baixo
+- **Suporte a dois formatos**: Arrays de strings ou arrays de objetos com `name` e `description`
+- **Descrições opcionais**: Exibe descrição adicional de cada item quando disponível
+- **Two-way binding**: Funciona com `[(items)]` para sincronização bidirecional
+- **Validação de limites**: Desabilita botões automaticamente nos extremos da lista
+- **Reatividade em tempo real**: Emite mudanças imediatamente via `itemsChange`
+- **Tabela intuitiva**: Apresentação clara com layout de nome/descrição e ações
+
+## Instalação
+
+```typescript
+import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  imports: [TCloudUiModule],
+  // ... resto da configuração
+})
+export class MyComponent {}
+```
+
+## Propriedades (API)
+
+### Inputs
+
+| Nome | Tipo | Descrição | Valor Default |
+|------|------|-----------|---------------|
+| `items` | `any[]` | Array de itens a reordenar. Pode ser strings ou objetos com `name` e `description` | `[]` |
+
+### Outputs
+
+| Nome | Tipo de Evento | Descrição |
+|------|--------|-----------|
+| `itemsChange` | `any[]` | Emite o array reordenado quando um item é movido |
+
+### Formatos de Dados Suportados
+
+#### Formato 1: Array de Strings
+
+```typescript
+items: string[] = ['Item A', 'Item B', 'Item C'];
+```
+
+#### Formato 2: Array de Objetos
+
+```typescript
+items: Array<{ name: string; description: string }> = [
+  { name: 'Protheus', description: 'Produto - Protheus' },
+  { name: 'RM', description: 'Produto - RM' },
+  { name: 'Datasul', description: 'Produto - Datasul' }
+];
+```
+
+## Exemplos de Uso
+
+### Uso Básico com Array de Strings
+
+Reordenação simples de um array de strings:
+
+```typescript
+@Component({
+  selector: 'app-reorder-basic',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div>
+      <h3>Reordenar Produtos</h3>
+      
+      <tcloud-ui-reorder-items 
+        [(items)]="products"
+      ></tcloud-ui-reorder-items>
+
+      <div class="result">
+        <h4>Ordem Atual:</h4>
+        <pre>{{ products | json }}</pre>
+      </div>
+    </div>
+  `
+})
+export class ReorderBasicComponent {
+  products: string[] = ['Protheus', 'RM', 'Datasul', 'Fluig'];
+}
+```
+
+### Uso com Array de Objetos e Descrições
+
+Reordenação com informações descritivas:
+
+```typescript
+@Component({
+  selector: 'app-reorder-objects',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="reorder-container">
+      <h3>Reordenar Módulos</h3>
+      
+      <tcloud-ui-reorder-items 
+        [(items)]="modules"
+      ></tcloud-ui-reorder-items>
+
+      <div class="preview">
+        <h4>Configuração Atual:</h4>
+        <div *ngFor="let module of modules" class="module-item">
+          <strong>{{ module.name }}</strong>
+          <p>{{ module.description }}</p>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .module-item {
+      padding: 12px;
+      margin: 8px 0;
+      border-left: 4px solid #1976d2;
+      background: #f5f5f5;
+    }
+  `]
+})
+export class ReorderObjectsComponent {
+  modules = [
+    { name: 'Autenticação', description: 'Sistema de login e autenticação' },
+    { name: 'Dashboard', description: 'Painel principal da aplicação' },
+    { name: 'Relatórios', description: 'Módulo de geração de relatórios' },
+    { name: 'Configurações', description: 'Preferências e ajustes do sistema' }
+  ];
+}
+```
+
+### Uso Avançado com Controle e Validação
+
+Reordenação com verificação de alterações e persistência:
+
+```typescript
+@Component({
+  selector: 'app-reorder-advanced',
+  imports: [CommonModule, ReactiveFormsModule, TCloudUiModule],
+  template: `
+    <div class="reorder-advanced">
+      <h3>Gerenciar Ordem de Prioridades</h3>
+
+      <div class="controls">
+        <button 
+          (click)="resetOrder()"
+          [disabled]="!hasChanges"
+          class="tc-btn"
+        >
+          Restaurar Original
+        </button>
+
+        <button 
+          (click)="saveOrder()"
+          [disabled]="!hasChanges"
+          class="tc-btn tc-btn-primary"
+        >
+          Salvar Ordem
+        </button>
+      </div>
+
+      <div class="status" *ngIf="hasChanges" class="warning-banner">
+        ⚠️ Existem alterações não salvas
+      </div>
+
+      <tcloud-ui-reorder-items 
+        [(items)]="priorities"
+        (itemsChange)="onPrioritiesChange($event)"
+      ></tcloud-ui-reorder-items>
+
+      <div class="comparison">
+        <div class="column">
+          <h4>Original</h4>
+          <ol>
+            <li *ngFor="let item of originalPriorities">
+              {{ item.name }}
+            </li>
+          </ol>
+        </div>
+
+        <div class="column">
+          <h4>Modificado</h4>
+          <ol>
+            <li *ngFor="let item of priorities">
+              {{ item.name }}
+              <span class="changed" *ngIf="isItemMoved(item.name)">
+                (↻ reordenado)
+              </span>
+            </li>
+          </ol>
+        </div>
+      </div>
+
+      <div *ngIf="saveSuccess" class="success-message">
+        ✓ Ordem salva com sucesso!
+      </div>
+    </div>
+  `,
+  styles: [`
+    .controls {
+      margin-bottom: 16px;
+    }
+
+    .warning-banner {
+      background: #fff3cd;
+      border-left: 4px solid #ffc107;
+      padding: 12px;
+      margin: 12px 0;
+      border-radius: 4px;
+    }
+
+    .comparison {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-top: 24px;
+    }
+
+    .column {
+      background: #f5f5f5;
+      padding: 16px;
+      border-radius: 4px;
+    }
+
+    .column h4 {
+      margin-top: 0;
+    }
+
+    .column ol {
+      margin: 0;
+      padding-left: 20px;
+    }
+
+    .changed {
+      color: #ff9800;
+      font-size: 0.9em;
+    }
+
+    .success-message {
+      background: #c8e6c9;
+      border-left: 4px solid #4caf50;
+      padding: 12px;
+      margin-top: 12px;
+      border-radius: 4px;
+      color: #2e7d32;
+    }
+  `]
+})
+export class ReorderAdvancedComponent implements OnInit {
+  priorities: Array<{ name: string; description: string }> = [];
+  originalPriorities: Array<{ name: string; description: string }> = [];
+  hasChanges: boolean = false;
+  saveSuccess: boolean = false;
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.initializePriorities();
+  }
+
+  initializePriorities() {
+    this.originalPriorities = [
+      { name: 'Crítica', description: 'Impacto crítico no sistema' },
+      { name: 'Alta', description: 'Impacto significativo' },
+      { name: 'Média', description: 'Impacto moderado' },
+      { name: 'Baixa', description: 'Impacto mínimo' }
+    ];
+    
+    this.priorities = JSON.parse(JSON.stringify(this.originalPriorities));
+  }
+
+  onPrioritiesChange(items: any[]) {
+    this.priorities = items;
+    this.hasChanges = this.checkHasChanges();
+    this.saveSuccess = false;
+  }
+
+  checkHasChanges(): boolean {
+    for (let i = 0; i < this.originalPriorities.length; i++) {
+      if (this.originalPriorities[i].name !== this.priorities[i]?.name) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  isItemMoved(name: string): boolean {
+    const originalIndex = this.originalPriorities.findIndex(p => p.name === name);
+    const currentIndex = this.priorities.findIndex(p => p.name === name);
+    return originalIndex !== currentIndex;
+  }
+
+  saveOrder() {
+    // Simular persistência em servidor
+    console.log('Salvando ordem:', this.priorities);
+    
+    this.saveSuccess = true;
+    this.originalPriorities = JSON.parse(JSON.stringify(this.priorities));
+    this.hasChanges = false;
+
+    setTimeout(() => {
+      this.saveSuccess = false;
+    }, 3000);
+  }
+
+  resetOrder() {
+    this.priorities = JSON.parse(JSON.stringify(this.originalPriorities));
+    this.hasChanges = false;
+  }
+}
+```
+
+### Uso com Filtro e Busca
+
+Reordenação combinada com busca de itens:
+
+```typescript
+@Component({
+  selector: 'app-reorder-with-search',
+  imports: [CommonModule, FormsModule, TCloudUiModule],
+  template: `
+    <div class="search-reorder">
+      <input 
+        type="text" 
+        placeholder="Buscar item..."
+        [(ngModel)]="searchTerm"
+        (ngModelChange)="filterItems()"
+        class="search-input"
+      >
+
+      <div *ngIf="filteredItems.length === 0 && searchTerm" class="no-results">
+        Nenhum item encontrado para "{{ searchTerm }}"
+      </div>
+
+      <tcloud-ui-reorder-items 
+        *ngIf="filteredItems.length > 0"
+        [(items)]="filteredItems"
+        (itemsChange)="onReorderComplete($event)"
+      ></tcloud-ui-reorder-items>
+
+      <div class="stats">
+        <p>Total: {{ filteredItems.length }} itens</p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .search-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-bottom: 16px;
+    }
+
+    .no-results {
+      background: #ffebee;
+      border-left: 4px solid #f44336;
+      padding: 12px;
+      color: #c62828;
+      border-radius: 4px;
+    }
+
+    .stats {
+      margin-top: 16px;
+      padding: 8px;
+      background: #e3f2fd;
+      border-radius: 4px;
+      text-align: center;
+    }
+  `]
+})
+export class ReorderWithSearchComponent {
+  items = [
+    { name: 'Angular', description: 'Framework JavaScript' },
+    { name: 'React', description: 'Biblioteca JavaScript' },
+    { name: 'Vue', description: 'Framework progressivo' },
+    { name: 'Svelte', description: 'Compilador Frontend' },
+    { name: 'TypeScript', description: 'Linguagem com tipos' }
+  ];
+
+  filteredItems: any[] = [];
+  searchTerm: string = '';
+
+  ngOnInit() {
+    this.filteredItems = [...this.items];
+  }
+
+  filterItems() {
+    if (!this.searchTerm.trim()) {
+      this.filteredItems = [...this.items];
+    } else {
+      this.filteredItems = this.items.filter(item =>
+        item.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
+        item.description.toLowerCase().includes(this.searchTerm.toLowerCase())
+      );
+    }
+  }
+
+  onReorderComplete(reorderedItems: any[]) {
+    console.log('Itens reordenados:', reorderedItems);
+    // Atualizar dados persistidos
+  }
+}
+```
+
+## Notas de Implementação
+
+- O componente mantém dois arrays internos: `sort_items` (para exibição) e `items` (dados originais)
+- Quando `items` contém strings, `sort_items` cria uma cópia das strings para exibição
+- Quando `items` contém objetos com propriedade `name`, `sort_items` extrai apenas os nomes
+- A descrição é buscada dinamicamente através do método `get_description()` durante a renderização
+- Os botões de movimento (cima/baixo) são automaticamente desabilitados nos extremos da lista
+- O evento `itemsChange` emite o array completo reordenado (strings ou objetos)
+- Duas-way binding `[(items)]` fornece sincronização automática com o componente pai
+- A reordenação atual é feita através de troca de posições (swap) mantendo referências
+- Se os itens originais são objetos, o componente preserva todas as propriedades após reordenação
+- Nenhuma validação de tipos é feita - o componente detecta automaticamente se é string ou objeto verificando a propriedade `name`

package/docs/tcloud-ui-respective.md

@@ -0,0 +1,167 @@
+# RespectivePipe
+
+O pipe `respective` traduz chaves internas do sistema (strings em inglês ou siglas) para seus nomes legíveis em português. Utiliza um mapa interno de pares chave-valor organizado por categorias: tipos de ambientes, implantação/migração, portes de clientes, produtos TOTVS, sistemas operacionais e tipos de responsáveis. A comparação é case-insensitive e normaliza underscores (`_`) para hifens (`-`).
+
+## Características
+
+- Tradução de chaves do sistema para nomes legíveis em português
+- Comparação case-insensitive (converte para lowercase antes de comparar)
+- Normalização de underscores para hifens na comparação
+- Remoção de espaços em branco nas extremidades
+- Retorna o valor original quando não encontra correspondência no mapa
+- Retorna string vazia para valores não-string (objetos, números)
+- Pipe standalone
+
+## Instalação
+
+Importe o pipe diretamente no módulo ou componente standalone:
+
+```typescript
+import { RespectivePipe } from 'tcloud-ui';
+```
+
+## API
+
+### Sintaxe do Pipe
+
+```
+{{ valor | respective }}
+```
+
+### Parâmetros
+
+Este pipe não recebe parâmetros adicionais.
+
+### Mapa de Traduções
+
+#### Tipos de Ambientes
+
+| Chave         | Valor              |
+|---------------|---------------------|
+| `production`  | Produção            |
+| `development` | Desenvolvimento     |
+| `qa`          | Qualidade           |
+
+#### Implantação / Migração
+
+| Chave    | Valor       |
+|----------|-------------|
+| `golive` | Pré GoLive  |
+| `kickoff`| Kickoff     |
+
+#### Portes de Clientes
+
+| Chave   | Valor    |
+|---------|----------|
+| `prime` | Prime    |
+| `p`     | Pequeno  |
+| `m`     | Médio    |
+| `g`     | Grande   |
+
+#### Produtos TOTVS
+
+| Chave             | Valor             |
+|-------------------|-------------------|
+| `2c`              | Carol             |
+| `carol`           | carol             |
+| `consinco`        | Consinco          |
+| `datasul`         | Datasul           |
+| `fluig`           | Fluig             |
+| `license-server`  | License Server    |
+| `pep`             | PEP               |
+| `protheus`        | Protheus          |
+| `pvi`             | PVI               |
+| `rm`              | RM                |
+| `sfa`             | SFA               |
+| `smartrm`         | Smart RM          |
+| `smartrmcluster`  | Smart RM Cluster  |
+| `smartrmcontrol`  | Smart RM Control  |
+| `taf`             | TAF               |
+| `treports`        | Treports          |
+| `tss`             | TSS               |
+| `winthor`         | Winthor           |
+
+#### Sistemas Operacionais
+
+| Chave     | Valor   |
+|-----------|---------|
+| `windows` | Windows |
+| `linux`   | Linux   |
+
+#### Tipos de Responsáveis
+
+| Chave                    | Valor               |
+|--------------------------|----------------------|
+| `prime_customer_success` | Customer Success     |
+| `project_manager`        | Gerente de Projetos  |
+| `prime_engineer`         | Engenheiro Prime     |
+
+## Exemplos de Uso
+
+### Básico — Tradução de ambiente e produto
+
+```html
+<p>{{ 'production' | respective }}</p>
+<!-- Resultado: Produção -->
+
+<p>{{ 'protheus' | respective }}</p>
+<!-- Resultado: Protheus -->
+
+<p>{{ 'prime_customer_success' | respective }}</p>
+<!-- Resultado: Customer Success -->
+```
+
+```typescript
+import { RespectivePipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [RespectivePipe],
+  template: `
+    <p>{{ ambiente | respective }}</p>
+  `
+})
+export class ExemploBasicoComponent {
+  ambiente = 'production';
+}
+```
+
+### Avançado — Listagem de ambientes com tradução
+
+```html
+<table class="table">
+  <thead>
+    <tr>
+      <th>Ambiente</th>
+      <th>Produto</th>
+      <th>SO</th>
+      <th>Porte</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let item of servidores">
+      <td>{{ item.ambiente | respective }}</td>
+      <td>{{ item.produto | respective }}</td>
+      <td>{{ item.so | respective }}</td>
+      <td>{{ item.porte | respective }}</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```typescript
+import { RespectivePipe } from 'tcloud-ui';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, RespectivePipe],
+  template: `...`
+})
+export class ExemploAvancadoComponent {
+  servidores = [
+    { ambiente: 'production', produto: 'protheus', so: 'linux', porte: 'g' },
+    { ambiente: 'development', produto: 'rm', so: 'windows', porte: 'm' },
+    { ambiente: 'qa', produto: 'datasul', so: 'linux', porte: 'p' }
+  ];
+}
+```