DateNavigator
Tipo: Componente Angular
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
Definição Funcional
Seção intitulada “Definição Funcional”O DateNavigator é um seletor de datas horizontal que permite a navegação e visualização de disponibilidade por períodos (semanal ou mensal). Ele funciona como um filtro de contexto que, ao ser acionado, atualiza os dados da página para exibir recursos disponíveis, como horários e docas. )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Alternância de Visão: O componente deve permitir a expansão (através da seta inferior) para alternar entre a visão de Semana (foco em agendamento imediato) e Mês (planejamento a longo prazo).
- Indicação de Disponibilidade: Utilize estilos visuais distintos (como azul para dias com vagas e cinza para dias sem vagas/indisponíveis).
- Navegação Temporal: As setas laterais devem permitir o avanço ou retrocesso dos períodos (semana a semana ou mês a mês).
- Formatação de Datas: No cabeçalho, utilize o intervalo de datas de forma concisa.
- Exemplo: 08/AGO - 14/AGO.
- Vá Direto ao Ponto: Os rótulos dos dias da semana devem ser abreviados com três letras em Caixa Alta (DOM, SEG, TER) para otimizar o espaço e garantir o alinhamento.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Direto) |
|---|---|---|
| Cabeçalho | Semana de 08 até 14 de agosto | 08/AGO - 14/AGO |
| Tooltip (se houver) | Não existem docas livres neste dia | Sem disponibilidade |
| Tooltip (se houver) | Clique aqui para ver os horários | Ver horários |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-date-navigator
O date navigator é um navegador de datas com visualização por semana ou por mês, para seleção de data
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
view ⇄ |
MdsDateNavigatorView |
'week' |
Visualização da navegação |
changeToWeekOnSelect |
boolean |
true |
Quando selecionado o dia, muda para a visão de semana |
loading |
boolean |
false |
Habilita modo de loading enquanto estiver carregando as datas |
formControl |
UntypedFormControl |
new UntypedFormControl() |
FormControl que manipula a data selecionada no formato YYYY-MM-DDT03:00:00.000Z |
avaiableDatesArray |
CalendarDate[] | null |
null |
Array com as datas e disponibilidades - formato: [{mDate: Date, avaiable: boolean}] |
⇄ = binding bidirecional ([(input)]).
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onSelect |
any |
Evento emitido ao selecionar um dia |
onMonthChange |
any |
Evento emitido quando é alterado o range do mês |