# StarRating

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

Componente de avaliação por estrelas para coletar feedback de usuários. Permite selecionar uma nota em uma escala visual de estrelas, com suporte à integração com Reactive Forms e ngModel.

## Quando usar

- Avaliação de produtos em e-commerce
- Coleta de feedback de serviços ou atendimento
- Classificação de conteúdo (artigos, vídeos, cursos)
- Formulários de satisfação do usuário

## Quando não usar

- Escalas de avaliação com texto descritivo por nível — prefira `RadioButtonGroup` com labels
- Coleta de sentimento binário (positivo/negativo) — prefira um par de botões ou `Switch`
- Exibição de média de avaliações sem interação — considere usar ícones estáticos

## Instalação

```typescript
import { StarRatingComponent } from '@seniorsistemas/angular-components/star-rating';

@Component({ standalone: true, imports: [StarRatingComponent] })
export class MeuComponent {}
```

## Uso básico

```html
<s-star-rating formControlName="avaliacao" [starsRange]="5" />
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `selectedStar` | `ModelSignal<number>` | `0` | Não | Índice da estrela selecionada (1-based). Suporta `[(selectedStar)]` |
| `starsRange` | `InputSignal<number>` | `5` | Não | Número total de estrelas exibidas |
| `justifyContent` | `JustifyTypes` | `'center'` | Não | Alinhamento horizontal das estrelas |
| `disabled` | `ModelSignal<boolean>` | `false` | Não | Desabilita a seleção de estrelas. Suporta `[(disabled)]` |

### Tipos

```typescript
type JustifyTypes =
  | 'start' | 'end' | 'center'
  | 'between' | 'around' | 'evenly'
  | 'stretch' | 'baseline' | 'normal'
  | 'end-safe' | 'center-safe';
```

## Exemplos

### Avaliação padrão com 5 estrelas

```html
<s-star-rating
  [selectedStar]="3"
  [starsRange]="5"
  justifyContent="center"
></s-star-rating>
```

### Integração com Reactive Forms

```html
<form [formGroup]="formGroup">
  <s-star-rating
    formControlName="avaliacao"
    [starsRange]="5"
    justifyContent="center"
  ></s-star-rating>
  <p>Valor selecionado: {{ formGroup.get('avaliacao')?.value }} estrela(s)</p>
</form>
```

```typescript
formGroup = new FormGroup({
  avaliacao: new FormControl(2),
});
```

### Escala customizada de 10 estrelas

```html
<s-star-rating
  [(selectedStar)]="nota"
  [starsRange]="10"
  justifyContent="center"
></s-star-rating>
```

### Somente leitura (desabilitado)

```html
<s-star-rating
  [selectedStar]="mediaAvaliacoes"
  [starsRange]="5"
  [disabled]="true"
  justifyContent="start"
></s-star-rating>
```

### Alinhamento à esquerda em listagem

```html
<s-star-rating
  [selectedStar]="produto.avaliacao"
  [starsRange]="5"
  justifyContent="start"
></s-star-rating>
```

## Acessibilidade

- Cada estrela é renderizada com `role="radio"` dentro de um grupo de radiobuttons
- Navegação por teclado: `Tab` para focar o grupo, `ArrowLeft`/`ArrowRight` para navegar entre estrelas
- Clicar na estrela já selecionada a deseleciona (retorna o valor para `0`)
- O estado `disabled` bloqueia totalmente a interação e é propagado via `setDisabledState` do `ControlValueAccessor`

## Componentes relacionados

- [`RadioButtonGroup`](../radio-button-group/README.md) — seleção única com rótulos descritivos por opção