# ObjectCard

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de card para exibição de um objeto de análise com cabeçalho principal, campos adicionais e painel expansível. Distribui automaticamente os campos visíveis conforme a largura disponível e suporta nível de severidade visual.

## Quando usar

- Listar entidades de negócio (funcionários, contratos, produtos, servidores) com atributos estruturados
- Painéis de detalhes de registros que precisam exibir múltiplas informações de forma compacta e responsiva
- Dashboards com indicadores de status ou alertas visuais em entidades

## Quando não usar

- Para exibir apenas métricas numéricas — use `StatsCard`
- Para containers genéricos de conteúdo sem estrutura de campos — use `Card` ou `Panel`
- Quando os dados são tabulares — use `Table`

## Instalação

```typescript
import { ObjectCardModule } from '@seniorsistemas/angular-components/object-card';

@NgModule({ imports: [ObjectCardModule] })
export class MeuModulo {}
```

## Uso básico

```html
<s-object-card>
  <s-object-card-main
    label="Senior Sistemas"
    description="Tecnologia para Gestão Empresarial"
    iconClass="fa fa-building"
  ></s-object-card-main>
  <s-object-card-field label="Fundação" description="1988"></s-object-card-field>
  <s-object-card-field label="Cidade" description="Blumenau - SC"></s-object-card-field>
</s-object-card>
```

## API

### Inputs (`s-object-card`)

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `id` | `string` | `'s-object-card-{n}'` | Não | Identificador do componente no DOM. Gerado automaticamente se omitido |
| `expanded` | `boolean` | `false` | Não | Define se o painel expansível está aberto |
| `expandTooltip` | `string` | `'Abrir painel'` | Não | Tooltip do botão de expandir |
| `collapseTooltip` | `string` | `'Fechar painel'` | Não | Tooltip do botão de colapsar |
| `fieldsMinWidth` | `number` | `200` | Não | Largura mínima em pixels de cada campo visível |
| `severity` | `Severities` | `'default'` | Não | Nível de severidade que altera o estilo da borda |
| `borderButtonOptions` | `BorderButtonOptions` | `undefined` | Não | Configuração do botão animado na borda lateral |

### Outputs (`s-object-card`)

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `expandedChange` | `EventEmitter<boolean>` | Emitido quando o estado de expansão muda |

### Inputs (`s-object-card-main`)

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `label` | `string` | `undefined` | Não | Texto principal do cabeçalho |
| `description` | `string` | `undefined` | Não | Subtítulo do cabeçalho |
| `imageSource` | `string` | `undefined` | Não | URL da imagem do thumbnail |
| `imageAlt` | `string` | `undefined` | Não | Texto alternativo da imagem |
| `imageFallback` | `string` | `undefined` | Não | URL de imagem de fallback |
| `iconClass` | `string` | `'fa fa-picture-o'` | Não | Classe de ícone exibido quando não há imagem |
| `hasThumbnail` | `boolean` | `true` | Não | Exibe ou oculta a área de thumbnail |
| `hasDescription` | `boolean` | `true` | Não | Exibe ou oculta a descrição |
| `isBrand` | `boolean` | `false` | Não | Modo logo/marca — altera proporção do thumbnail |
| `buttonLabel` | `string` | `undefined` | Não | Label do botão de ações |
| `buttonModel` | `TieredMenuItemData[]` | `[]` | Não | Itens do menu de ações |

### Inputs (`s-object-card-field`)

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `label` | `string` | `undefined` | Não | Rótulo do campo |
| `description` | `string` | `undefined` | Não | Valor textual do campo |
| `iconClass` | `string` | `undefined` | Não | Classe de ícone exibido no campo |
| `buttonLabel` | `string` | `undefined` | Não | Label de botão no campo (ex: link) |
| `buttonModel` | `TieredMenuItemData[]` | `[]` | Não | Itens do menu do botão do campo |
| `badge` | `string` | `''` | Não | Texto do badge colorido |
| `badgeColor` | `BadgeColors` | `'blue'` | Não | Cor do badge |

### Tipos

```typescript
type Severities = 'default' | 'info' | 'warn' | 'error' | 'success';

interface BorderButtonOptions {
  visible?: (severity: Severities) => boolean;
  label?: (severity: Severities) => string;
  tooltip?: (severity: Severities) => string;
  icon?: (severity: Severities) => string;
  onClick?: () => void;
}
```

## Exemplos

### Com botão de ações e campos

```html
<s-object-card [expanded]="false" [fieldsMinWidth]="200">
  <s-object-card-main
    label="Colaborador"
    description="Departamento de TI"
    iconClass="far fa-user"
    buttonLabel="Ações"
    [buttonModel]="actionMenu"
  ></s-object-card-main>
  <s-object-card-field label="Cargo" description="Desenvolvedor Frontend"></s-object-card-field>
  <s-object-card-field label="E-mail" buttonLabel="contato@empresa.com" iconClass="fa fa-envelope"></s-object-card-field>
  <s-object-card-field label="Status" badge="Ativo" badgeColor="green"></s-object-card-field>
</s-object-card>
```

### Com severidade visual

```html
<s-object-card [severity]="'error'">
  <s-object-card-main
    label="Servidor de Produção"
    description="Infraestrutura"
    iconClass="fa fa-server"
  ></s-object-card-main>
  <s-object-card-field label="CPU" description="87%"></s-object-card-field>
  <s-object-card-field label="Status" badge="Crítico" badgeColor="red"></s-object-card-field>
</s-object-card>
```

### Com template customizado no label

```html
<s-object-card-main description="Empresa parceira" iconClass="fa fa-building">
  <span labelTemplate style="color: #2d7d46; font-weight: 600;">
    <i class="fa fa-check-circle"></i> Senior Sistemas
  </span>
</s-object-card-main>
```

## Acessibilidade

- O botão de expandir/colapsar possui tooltip acessível via `expandTooltip` e `collapseTooltip`
- Campos ocultos são acessíveis via teclado após expandir o painel
- Responsivo: em telas pequenas (≤ SM), todos os campos ficam ocultos e acessíveis via expansão
- Suporta navegação por teclado no botão de ações e no chevron de expansão

## Componentes relacionados

- [`Card`](../card/README.md) — container genérico de conteúdo
- [`StatsCard`](../stats-card/README.md) — exibição de métricas numéricas
- [`Thumbnail`](../thumbnail/README.md) — exibição de imagem em miniatura