# LabelValue

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

Componente para exibição de pares label/valor em modo somente leitura. Suporta cinco tipos de valor: texto simples, badge, moeda, número e data — cada um com formatação automática adequada ao locale da aplicação.

## Quando usar

- Painéis de visualização de detalhes de entidades (funcionário, produto, pedido)
- Resumos de formulários antes da submissão
- Seções de informações em cards ou modais onde os dados não são editáveis

## Quando não usar

- Campos editáveis — use um formulário convencional ou [`InlineEdit`](../inline-edit/README.md)
- Métricas numéricas com ícone e destaque visual — prefira o componente StatsCard

## Instalação

```typescript
import { LabelValueModule } from '@seniorsistemas/angular-components/label-value';

@NgModule({
    imports: [LabelValueModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-label-value [configuration]="{ type: 'Text', title: 'Nome', value: 'João Silva' }"></s-label-value>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `configuration` | `LabelValueConfiguration` | — | Sim | Configuração do par label/valor. O campo `type` determina como o valor é renderizado. |

### Tipos

```typescript
type LabelValueConfiguration =
    | TextConfiguration
    | BadgeConfiguration
    | CurrencyConfiguration
    | NumberConfiguration
    | DateConfiguration;

// Texto simples
type TextConfiguration = {
    type: 'Text';
    title: string;
    value: string;
};

// Badge(s)
type BadgeConfiguration = {
    type: 'Badge';
    title: string;
    value: Partial<Pick<BadgeComponent, 'type' | 'color' | 'text' | 'iconClass' | 'iconPosition'>>[];
};

// Valor monetário formatado pelo locale
type CurrencyConfiguration = {
    type: 'Currency';
    title: string;
    value: string | number;
    currency: string;  // Ex: 'BRL', 'USD', 'EUR'
};

// Valor numérico formatado pelo locale
type NumberConfiguration = {
    type: 'Number';
    title: string;
    value: string | number;
};

// Data formatada com moment.js
type DateConfiguration = {
    type: 'Date';
    title: string;
    value: string | Date;
    format?: string;  // Formato moment.js, padrão: 'L'
};
```

## Exemplos

### Tipo Text

```html
<s-label-value [configuration]="{ type: 'Text', title: 'Nome completo', value: 'João Silva' }">
</s-label-value>
```

### Tipo Badge com múltiplos badges

```html
<s-label-value [configuration]="{
    type: 'Badge',
    title: 'Permissões',
    value: [
        { text: 'Leitura', color: 'blue', iconClass: 'fa fa-eye' },
        { text: 'Escrita', color: 'green', iconClass: 'fa fa-edit' },
        { text: 'Admin', color: 'red', iconClass: 'fa fa-shield-alt' }
    ]
}"></s-label-value>
```

### Tipo Currency

```html
<s-label-value [configuration]="{ type: 'Currency', title: 'Salário', currency: 'BRL', value: 5750.99 }">
</s-label-value>
```

### Tipo Date com formato customizado

```html
<s-label-value [configuration]="{
    type: 'Date',
    title: 'Última atualização',
    value: '2024-11-01T18:21:16Z',
    format: 'L HH:mm:ss'
}"></s-label-value>
```

### Painel de detalhes com múltiplos campos

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;">
    <s-label-value [configuration]="{ type: 'Text', title: 'Nome', value: 'João Silva' }"></s-label-value>
    <s-label-value [configuration]="{ type: 'Text', title: 'CPF', value: '123.456.789-00' }"></s-label-value>
    <s-label-value [configuration]="{ type: 'Date', title: 'Admissão', value: '2020-03-01' }"></s-label-value>
    <s-label-value [configuration]="{ type: 'Currency', title: 'Salário', currency: 'BRL', value: 5750 }"></s-label-value>
    <s-label-value [configuration]="{ type: 'Badge', title: 'Status', value: [{ text: 'Ativo', color: 'green' }] }"></s-label-value>
    <s-label-value [configuration]="{ type: 'Number', title: 'Dias trabalhados', value: 1250 }"></s-label-value>
</div>
```

## Acessibilidade

- Quando `value` é nulo ou string vazia, exibe a mensagem "Não informado" (internacionalizada via `TranslateModule`)
- O `title` é sempre exibido em negrito como rótulo do campo
- Requer `LocaleModule.forRoot()` e `TranslateModule.forRoot()` no módulo raiz para formatação de moeda, número e data

## Componentes relacionados

- [`Badge`](../badge/README.md) — componente de badge usado internamente no tipo Badge
- [`InlineEdit`](../inline-edit/README.md) — quando os campos precisam ser editáveis inline