# Documentação de Componentes

## 📦 @seniorsistemas/components-ai

Esta biblioteca fornece componentes reutilizáveis com inteligência artificial para aplicações da Senior Sistemas.

---

## 🎨 Componentes Disponíveis

### Dynamic Form Component

Componente de formulário dinâmico que renderiza campos baseado em configuração.

**Seletor**: `sia-dynamic-form`

**Inputs**:
- `formFields: DynamicFormFieldConfig[]` - Configuração dos campos (modo direto)
- `formSections: DynamicFormSection[]` - Configuração com seções
- `entity: any` - Entidade para edição (opcional)
- `mode: 'create' | 'edit' | 'filter' | 'inline-edit'` - Modo do formulário
- `displayMode: 'inline' | 'dialog' | 'drawer'` - Modo de exibição
- `visible: boolean` - Visibilidade (para dialog/drawer)
- `dialogHeader: string` - Título do dialog/drawer
- `submitButtonLabel: string` - Label do botão submit
- `cancelButtonLabel: string` - Label do botão cancelar

**Outputs**:
- `onSubmit: EventEmitter<any>` - Emitido ao submeter o formulário
- `onCancel: EventEmitter<void>` - Emitido ao cancelar
- `visibleChange: EventEmitter<boolean>` - Two-way binding de visibilidade

**Métodos Públicos**:
- `getForm(): FormGroup` - Retorna o FormGroup
- `resetForm(): void` - Reseta o formulário

**Exemplo Básico**:
```typescript
<sia-dynamic-form
  [formFields]="fields"
  [mode]="'create'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

**Exemplo com Dialog**:
```typescript
<sia-dynamic-form
  [(visible)]="showDialog"
  [formFields]="fields"
  [entity]="selectedEntity"
  [mode]="'edit'"
  [displayMode]="'dialog'"
  [dialogHeader]="'Editar Registro'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

**Exemplo com Seções**:
```typescript
<sia-dynamic-form
  [formSections]="sections"
  [mode]="'create'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

**Exemplo Inline Edit**:
```typescript
<sia-dynamic-form
  [formFields]="fields"
  [entity]="entity"
  [mode]="'inline-edit'"
  (onSubmit)="handleSubmit($event)"
></sia-dynamic-form>
```

---

### Export Dialog Component

Dialog para exportação de dados em Excel ou PDF.

**Seletor**: `sia-export-dialog`

**Inputs**:
- `visible: boolean` - Visibilidade do dialog
- `data: any[]` - Dados para exportação
- `columns: ColumnOption[]` - Configuração das colunas
- `fileName: string` - Nome do arquivo (padrão: 'export')

**Outputs**:
- `visibleChange: EventEmitter<boolean>` - Two-way binding de visibilidade

**Exemplo**:
```typescript
<sia-export-dialog
  [(visible)]="showExportDialog"
  [data]="records"
  [columns]="exportColumns"
  [fileName]="'relatorio-produtos'"
></sia-export-dialog>
```

---

### Bulk Delete Dialog Component

Dialog para exclusão em massa de registros.

**Seletor**: `sia-bulk-delete-dialog`

**Inputs**:
- `visible: boolean` - Visibilidade do dialog
- `selectedItems: any[]` - Itens selecionados
- `entityName: string` - Nome da entidade (singular)
- `entityPluralName: string` - Nome da entidade (plural)

**Outputs**:
- `visibleChange: EventEmitter<boolean>` - Two-way binding de visibilidade
- `onConfirm: EventEmitter<void>` - Emitido ao confirmar exclusão

**Exemplo**:
```typescript
<sia-bulk-delete-dialog
  [(visible)]="showBulkDeleteDialog"
  [selectedItems]="selectedRecords"
  [entityName]="'produto'"
  [entityPluralName]="'produtos'"
  (onConfirm)="handleBulkDelete()"
></sia-bulk-delete-dialog>
```

---

### Breadcrumb Component

Componente de navegação breadcrumb.

**Seletor**: `sia-breadcrumb`

**Inputs**:
- `items: MenuItem[]` - Itens do breadcrumb (PrimeNG MenuItem)
- `home: MenuItem` - Item home (opcional)

**Exemplo**:
```typescript
<sia-breadcrumb
  [items]="breadcrumbItems"
  [home]="{ icon: 'pi pi-home', routerLink: '/' }"
></sia-breadcrumb>
```

```typescript
breadcrumbItems: MenuItem[] = [
  { label: 'Cadastros' },
  { label: 'Produtos', routerLink: '/products' },
  { label: 'Editar' }
];
```

---

## 🔧 Tipos e Interfaces

### DynamicFormFieldConfig

```typescript
interface DynamicFormFieldConfig {
  name: string;                    // Nome do campo
  label: string;                   // Label exibido
  type: FieldType;                 // Tipo do campo
  value?: any;                     // Valor inicial
  required?: boolean;              // Campo obrigatório
  disabled?: boolean;              // Campo desabilitado
  placeholder?: string;            // Placeholder
  options?: SelectOption[];        // Opções (select, radio, checkbox)
  rows?: number;                   // Linhas (textarea)
  mask?: string;                   // Máscara (text)
  validators?: ValidatorFn[];      // Validadores customizados
  lookupConfig?: LookupConfig;     // Config para lookup
  dateFormat?: string;             // Formato de data
  showTime?: boolean;              // Mostrar hora (date)
  minDate?: Date;                  // Data mínima
  maxDate?: Date;                  // Data máxima
  accept?: string;                 // Tipos aceitos (file)
  multiple?: boolean;              // Múltiplos arquivos
  min?: number;                    // Valor mínimo (number)
  max?: number;                    // Valor máximo (number)
  step?: number;                   // Incremento (number)
  cols?: number;                   // Colunas do grid (1-12)
}
```

### DynamicFormSection

```typescript
interface DynamicFormSection {
  title: string;                   // Título da seção
  fields: DynamicFormFieldConfig[]; // Campos da seção
  collapsible?: boolean;           // Seção colapsável
  collapsed?: boolean;             // Inicialmente colapsada
}
```

### FieldType

```typescript
enum FieldType {
  TEXT = 'text',
  TEXTAREA = 'textarea',
  NUMBER = 'number',
  EMAIL = 'email',
  PASSWORD = 'password',
  DATE = 'date',
  DATETIME = 'datetime',
  SELECT = 'select',
  MULTISELECT = 'multiselect',
  CHECKBOX = 'checkbox',
  RADIO = 'radio',
  SWITCH = 'switch',
  LOOKUP = 'lookup',
  FILE = 'file',
  HIDDEN = 'hidden'
}
```

### ColumnOption

```typescript
interface ColumnOption {
  field: string;                   // Nome do campo
  header: string;                  // Cabeçalho da coluna
  selected?: boolean;              // Selecionada para exportação
}
```

---

## 📱 Responsividade

Todos os componentes são responsivos e se adaptam a diferentes tamanhos de tela:

- **Desktop**: Layout completo com todas as features
- **Tablet**: Layout adaptado com priorização de conteúdo
- **Mobile**: Layout otimizado para toque e telas pequenas

---

## 🎨 Temas

Os componentes suportam temas do PrimeNG e se adaptam automaticamente ao tema configurado na aplicação.

---

## ♿ Acessibilidade

Todos os componentes seguem as diretrizes de acessibilidade:

- Labels associados aos campos
- Navegação por teclado
- ARIA attributes
- Contraste adequado
- Foco visível

---

## 🔗 Veja Também

- [Exemplos Práticos](./EXAMPLES.md)
- [Referência da API](./API.md)
- [Guia de Migração](./MIGRATION.md)
