@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-hover-parent.md

@@ -0,0 +1,467 @@
+# Hover Parent
+
+A diretiva **Hover Parent** permite aplicar uma classe CSS a um elemento pai quando o usuário passa o mouse (hover) sobre o elemento que possui a diretiva. É útil para criar efeitos visuais coordenados entre elementos relacionados, como mudança de cor ou estilo quando o mouse atravessa um componente filho.
+
+## Características
+
+- **Interação mouse coordenada**: Aplica classes ao elemento pai em resposta ao hover do filho
+- **Identificação por ID**: Usa ID do elemento para localizar o alvo pai
+- **Classe personalizável**: Permite definir qualquer classe CSS via input
+- **Classe padrão**: Utiliza `tcloud-hover-parent` se nenhuma classe for especificada
+- **Removção automática**: Remove a classe quando o mouse sai do elemento
+- **Sem acoplamento**: Funciona com qualquer elemento HTML e estrutura de componentes
+
+## Instalação
+
+```typescript
+import { TCloudUiModule } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  imports: [TCloudUiModule],
+  // ... resto da configuração
+})
+export class MyComponent {}
+```
+
+## Propriedades (API)
+
+### Seletor
+
+| Seletor | Descrição |
+|---------|-----------|
+| `[TCHoverParent]` | Atributo aplicado a um elemento para ativar a diretiva de hover parent |
+
+### Inputs
+
+| Nome | Tipo | Descrição | Obrigatório |
+|------|------|-----------|-------------|
+| `TCHoverParent` | `string` | ID do elemento pai que receberá a classe de hover | ✓ Sim |
+| `TCHoverParentClass` | `string` | Nome da classe CSS a ser aplicada ao elemento pai. Se não fornecida, usa `tcloud-hover-parent` | ✗ Não |
+
+### Listeners do Host
+
+| Evento | Descrição |
+|--------|-----------|
+| `@HostListener('mouseover')` | Acionado quando o mouse entra no elemento, adiciona a classe ao pai |
+| `@HostListener('mouseout')` | Acionado quando o mouse sai do elemento, remove a classe do pai |
+
+## Comportamento
+
+- Quando o mouse entra no elemento com a diretiva, a classe especificada é adicionada ao elemento pai
+- Quando o mouse sai do elemento, a classe é removida do elemento pai
+- A diretiva localiza o elemento pai usando `document.getElementById()` no ID fornecido
+- Se o elemento pai não for encontrado, nenhuma classe é aplicada (silenciosamente ignorado)
+- Se nenhuma classe for especificada em `TCHoverParentClass`, a classe padrão `tcloud-hover-parent` é utilizada
+
+## Exemplos de Uso
+
+### Uso Básico
+
+Aplicar a classe padrão a um elemento pai ao fazer hover em um botão:
+
+```typescript
+@Component({
+  selector: 'app-hover-basic',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="parent-box" id="parent1">
+      <button 
+        [TCHoverParent]="'parent1'"
+      >
+        Passe o mouse aqui
+      </button>
+      
+      <p>O elemento pai receberá a classe 'tcloud-hover-parent'</p>
+    </div>
+  `,
+  styles: [`
+    .parent-box {
+      padding: 16px;
+      background: #f5f5f5;
+      border: 1px solid #ddd;
+    }
+    
+    .parent-box.tcloud-hover-parent {
+      background: #e3f2fd;
+      border-color: #1976d2;
+    }
+  `]
+})
+export class HoverBasicComponent {}
+```
+
+### Uso com Classe Personalizada
+
+Aplicar uma classe específica ao elemento pai durante hover:
+
+```typescript
+@Component({
+  selector: 'app-hover-custom',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="container" id="myContainer">
+      <button 
+        [TCHoverParent]="'myContainer'"
+        [TCHoverParentClass]="'hover-active'"
+      >
+        Hover com Classe Customizada
+      </button>
+    </div>
+  `,
+  styles: [`
+    .container {
+      padding: 20px;
+      background: #f5f5f5;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+    }
+
+    .container.hover-active {
+      background: #ffeb3b;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+      transform: scale(1.02);
+    }
+  `]
+})
+export class HoverCustomComponent {}
+```
+
+### Uso Avançado com Múltiplos Elementos
+
+Múltiplos elementos filhos acionando hover no mesmo elemento pai:
+
+```typescript
+@Component({
+  selector: 'app-hover-advanced',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="card" id="cardContainer">
+      <div class="card-header">
+        <h2>Título do Card</h2>
+        <button 
+          [TCHoverParent]="'cardContainer'"
+          [TCHoverParentClass]="'card-hover'"
+          title="Fechar"
+        >
+          ✕
+        </button>
+      </div>
+
+      <div class="card-content">
+        <p>Conteúdo do card</p>
+        
+        <button 
+          [TCHoverParent]="'cardContainer'"
+          [TCHoverParentClass]="'card-hover'"
+          class="tc-btn"
+        >
+          Ação Primária
+        </button>
+
+        <button 
+          [TCHoverParent]="'cardContainer'"
+          [TCHoverParentClass]="'card-hover'"
+          class="tc-btn tc-btn-secondary"
+        >
+          Ação Secundária
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      background: white;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      padding: 16px;
+      transition: all 0.2s ease;
+    }
+
+    .card.card-hover {
+      background: #fafafa;
+      border-color: #1976d2;
+      box-shadow: 0 2px 12px rgba(25, 118, 210, 0.15);
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .card-content {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    .card-content button {
+      cursor: pointer;
+    }
+  `]
+})
+export class HoverAdvancedComponent {}
+```
+
+### Uso com Estados Condicional de Hover
+
+Aplicar diferentes classes baseado em contexto:
+
+```typescript
+@Component({
+  selector: 'app-hover-conditional',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="list-container">
+      <div 
+        *ngFor="let item of items"
+        class="list-item"
+        [id]="'item-' + item.id"
+      >
+        <span class="item-title">{{ item.title }}</span>
+
+        <div class="item-actions">
+          <button
+            *ngFor="let action of item.actions"
+            [TCHoverParent]="'item-' + item.id"
+            [TCHoverParentClass]="'item-' + item.status"
+            [class]="'action-btn action-' + action.type"
+          >
+            {{ action.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .list-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px;
+      background: #f9f9f9;
+      border-left: 4px solid #ddd;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+    }
+
+    .list-item.item-success {
+      background: #e8f5e9;
+      border-left-color: #4caf50;
+    }
+
+    .list-item.item-warning {
+      background: #fff3e0;
+      border-left-color: #ff9800;
+    }
+
+    .list-item.item-danger {
+      background: #ffebee;
+      border-left-color: #f44336;
+    }
+
+    .item-title {
+      font-weight: 500;
+    }
+
+    .item-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    .action-btn {
+      padding: 4px 8px;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      background: white;
+      border-radius: 3px;
+      font-size: 12px;
+    }
+  `]
+})
+export class HoverConditionalComponent {
+  items = [
+    {
+      id: 1,
+      title: 'Exemplo Sucesso',
+      status: 'item-success',
+      actions: [
+        { label: 'Editar', type: 'edit' },
+        { label: 'Excluir', type: 'delete' }
+      ]
+    },
+    {
+      id: 2,
+      title: 'Exemplo Aviso',
+      status: 'item-warning',
+      actions: [
+        { label: 'Revisão', type: 'review' },
+        { label: 'Descartar', type: 'dismiss' }
+      ]
+    },
+    {
+      id: 3,
+      title: 'Exemplo Erro',
+      status: 'item-danger',
+      actions: [
+        { label: 'Tentar Novamente', type: 'retry' }
+      ]
+    }
+  ];
+}
+```
+
+### Uso com Row Interativa de Tabela
+
+Destaque de linha ao interagir com elementos dentro de uma tabela:
+
+```typescript
+@Component({
+  selector: 'app-hover-table-row',
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Nome</th>
+          <th>Status</th>
+          <th>Ações</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let row of tableData" [id]="'row-' + row.id" class="table-row">
+          <td>{{ row.id }}</td>
+          <td>{{ row.name }}</td>
+          <td>
+            <span [class]="'badge badge-' + row.status">
+              {{ row.status }}
+            </span>
+          </td>
+          <td class="actions-cell">
+            <button 
+              [TCHoverParent]="'row-' + row.id"
+              [TCHoverParentClass]="'row-hover'"
+              class="action-icon"
+              title="Visualizar"
+            >
+              👁️
+            </button>
+            <button 
+              [TCHoverParent]="'row-' + row.id"
+              [TCHoverParentClass]="'row-hover'"
+              class="action-icon"
+              title="Editar"
+            >
+              ✏️
+            </button>
+            <button 
+              [TCHoverParent]="'row-' + row.id"
+              [TCHoverParentClass]="'row-hover'"
+              class="action-icon danger"
+              title="Excluir"
+            >
+              🗑️
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+  styles: [`
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      background: white;
+    }
+
+    .table-row {
+      border-bottom: 1px solid #eee;
+      transition: all 0.2s ease;
+    }
+
+    .table-row.row-hover {
+      background: #e3f2fd;
+    }
+
+    .table-row td {
+      padding: 12px;
+    }
+
+    .actions-cell {
+      text-align: center;
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+    }
+
+    .action-icon {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 16px;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+    }
+
+    .action-icon:hover {
+      opacity: 1;
+    }
+
+    .action-icon.danger:hover {
+      color: #f44336;
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 4px 8px;
+      border-radius: 3px;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .badge-active {
+      background: #c8e6c9;
+      color: #2e7d32;
+    }
+
+    .badge-inactive {
+      background: #ffccbc;
+      color: #d84315;
+    }
+
+    .badge-pending {
+      background: #fff9c4;
+      color: #f57f17;
+    }
+  `]
+})
+export class HoverTableRowComponent {
+  tableData = [
+    { id: 1, name: 'Usuário A', status: 'active' },
+    { id: 2, name: 'Usuário B', status: 'inactive' },
+    { id: 3, name: 'Usuário C', status: 'pending' },
+    { id: 4, name: 'Usuário D', status: 'active' }
+  ];
+}
+```
+
+## Notas de Implementação
+
+- A diretiva utiliza `Renderer2` do Angular para adicionar/remover classes de forma segura
+- O elemento pai é localizado dinamicamente via `document.getElementById()`, permitindo qualquer elemento com ID como alvo
+- Se o elemento pai não existir no DOM no momento do evento, a operação é silenciosamente ignorada
+- A diretiva é **standalone** e pode ser usada em qualquer componente sem requerer um módulo
+- Não há validação se a classe CSS existe - qualquer string é aceita como nome de classe
+- Múltiplos elementos podem apontar para o mesmo elemento pai com a mesma ou diferentes classes
+- As classes são adicionadas/removidas usando `Renderer2.addClass()` e `Renderer2.removeClass()`, respeitando a segurança do Angular
+- Não há efeitos de transição ou animação na diretiva em si - use CSS `transition` no elemento pai para animar mudanças
+- A diretiva não interfere com outras diretivas ou listeners de mouse no mesmo elemento
+- O ID passado em `TCHoverParent` é sensível a maiúsculas/minúsculas

package/docs/tcloud-ui-icon-button.md

@@ -0,0 +1,104 @@
+# Icon Button
+
+## Características
+
+A diretiva `tcloudUiIconButton` transforma um elemento `<button>` em um botão de ícone estilizado. Ela aplica automaticamente classes CSS para controlar a variante (filled, outline, link), a cor (primary, light, danger, dark) e o tamanho (sm, md, lg). A diretiva utiliza signals e `effect()` para reagir a mudanças nos inputs e atualizar as classes dinamicamente.
+
+## Instalação
+
+Importe o `TCloudUiModule` ou a diretiva standalone `TCloudUiIconButtonDirective`:
+
+```typescript
+import { TCloudUiModule } from 'tcloud-ui';
+// ou
+import { TCloudUiIconButtonDirective } from 'tcloud-ui';
+```
+
+## API
+
+### Inputs
+
+| Nome                 | Tipo                                         | Descrição                                      | Valor Default |
+| -------------------- | -------------------------------------------- | ---------------------------------------------- | ------------- |
+| `color`              | `'primary' \| 'light' \| 'danger' \| 'dark'` | Define a cor do botão.                          | `'primary'`   |
+| `size`               | `'lg' \| 'md' \| 'sm'`                       | Define o tamanho do botão.                      | `'sm'`        |
+| `tcloudUiIconButton` | `'filled' \| 'outline' \| 'link'`            | Define a variante visual do botão (selector).   | `'filled'`    |
+
+## Exemplos de Uso
+
+### Uso Básico
+
+Botão de ícone com configuração padrão (filled, primary, sm):
+
+```html
+<button tcloudUiIconButton>
+  <i class="fa-solid fa-plus"></i>
+</button>
+```
+
+### Variantes
+
+Botões com diferentes variantes visuais:
+
+```html
+<!-- Filled (padrão) -->
+<button tcloudUiIconButton>
+  <i class="fa-solid fa-plus"></i>
+</button>
+
+<!-- Outline -->
+<button tcloudUiIconButton="outline">
+  <i class="fa-solid fa-pencil"></i>
+</button>
+
+<!-- Link -->
+<button tcloudUiIconButton="link">
+  <i class="fa-solid fa-trash"></i>
+</button>
+```
+
+### Cores
+
+```html
+<button tcloudUiIconButton color="primary">
+  <i class="fa-solid fa-plus"></i>
+</button>
+
+<button tcloudUiIconButton color="light">
+  <i class="fa-solid fa-pencil"></i>
+</button>
+
+<button tcloudUiIconButton color="danger">
+  <i class="fa-solid fa-trash"></i>
+</button>
+
+<button tcloudUiIconButton color="dark">
+  <i class="fa-solid fa-gear"></i>
+</button>
+```
+
+### Tamanhos
+
+```html
+<button tcloudUiIconButton size="sm">
+  <i class="fa-solid fa-plus"></i>
+</button>
+
+<button tcloudUiIconButton size="md">
+  <i class="fa-solid fa-plus"></i>
+</button>
+
+<button tcloudUiIconButton size="lg">
+  <i class="fa-solid fa-plus"></i>
+</button>
+```
+
+### Uso Avançado
+
+Combinando cor, tamanho e variante:
+
+```html
+<button tcloudUiIconButton="outline" color="danger" size="lg">
+  <i class="fa-solid fa-trash"></i>
+</button>
+```