# SlideInBar

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

Componente de painel deslizante lateral que expande e colapsa ao clicar em um botão de toggle. Em telas pequenas (largura <= 420px), entra automaticamente em modo overlay, sobrepondo o conteúdo.

> **Nota:** O seletor `s-slide-panel` e o pacote `slide-panel` estão descontinuados. Use `s-slide-in-bar` e o pacote `slide-in-bar` em novos projetos. O seletor antigo será removido na versão 20.0.0.

## Quando usar

- Filtros laterais em listas e tabelas que podem ser ocultados para dar mais espaço ao conteúdo
- Painéis de detalhes ou configurações que coexistem com o conteúdo principal
- Propriedades ou atributos de um elemento selecionado na área principal
- Quando o painel deve empurrar o layout adjacente (`noOverlap`) ou flutuar sobre ele

## Quando não usar

- Painéis que precisam de overlay com backdrop — prefira `Sidebar`
- Conteúdo que deve aparecer temporariamente em resposta a uma ação — prefira `Dialog` ou `Sidebar`

## Instalação

```typescript
import { SlideInBarModule, SlideInBarService } from '@seniorsistemas/angular-components/slide-in-bar';

@NgModule({
  imports: [SlideInBarModule],
  providers: [SlideInBarService],
})
export class MeuModule {}
```

## Uso básico

```html
<s-slide-in-bar (panelOpened)="onAbrir()" (panelClosed)="onFechar()">
  <div slide-content>
    <!-- conteúdo do painel deslizante -->
  </div>
  <div side-content>
    <!-- conteúdo principal ao lado do painel -->
  </div>
</s-slide-in-bar>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `id` | `string` | `slide-panel-{n}` | Não | Identificador único do painel. Usado pelo `SlideInBarService` para fechar programaticamente |
| `openIcon` | `string` | `'fas fa-chevron-right'` | Não | Classe Font Awesome do ícone no botão de abertura |
| `closeIcon` | `string` | `'fas fa-chevron-left'` | Não | Classe Font Awesome do ícone no botão de fechamento |
| `cache` | `boolean` | `false` | Não | Mantém o conteúdo no DOM quando fechado, preservando estado interno |
| `createOpen` | `boolean` | `false` | Não | Inicia o painel já aberto |
| `noOverlap` | `boolean` | `false` | Não | O painel empurra o layout adjacente em vez de sobrepor o conteúdo |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `panelOpened` | `EventEmitter<void>` | Emitido quando o painel é aberto pelo usuário |
| `panelClosed` | `EventEmitter<void>` | Emitido quando o painel é fechado pelo usuário |

## Exemplos

### Painel de filtros

```html
<div style="display: flex; height: 400px;">
  <s-slide-in-bar [cache]="true" (panelOpened)="onAbrir()">
    <div slide-content style="padding: 16px; min-width: 200px;">
      <h4>Filtros</h4>
      <!-- inputs de filtro -->
    </div>
    <div side-content style="padding: 16px; flex: 1;">
      <!-- conteúdo principal (tabela, lista) -->
    </div>
  </s-slide-in-bar>
</div>
```

### Iniciando aberto com ícones customizados

```html
<s-slide-in-bar
  [createOpen]="true"
  openIcon="fas fa-plus"
  closeIcon="fas fa-minus"
>
  <div slide-content>Conteúdo do painel</div>
  <div side-content>Conteúdo principal</div>
</s-slide-in-bar>
```

### Fechando programaticamente via serviço

```typescript
constructor(private slideInBarService: SlideInBarService) {}

fecharPainel(): void {
  this.slideInBarService.closeModal('meu-painel-id');
}
```

```html
<s-slide-in-bar id="meu-painel-id">
  <div slide-content>Painel</div>
  <div side-content>Conteúdo</div>
</s-slide-in-bar>
```

## Acessibilidade

- O botão de toggle é focável via teclado e pode ser acionado com `Enter` ou `Espaço`
- Em telas com largura <= 420px, o painel entra automaticamente em modo overlay
- A animação de abertura/fechamento tem duração de 200ms para não prejudicar a experiência de usuários sensíveis a movimento

## Componentes relacionados

- [`Sidebar`](../sidebar/README.md) — painel lateral com backdrop e suporte a templates customizados