import { type EventEmitter } from '../../stencil-public-runtime'; import { type FormValidationState } from '../../shared/utils/form'; import { type FormValidationChangeDetail } from '../../shared/utils/validator'; import type { DatetimePickerChangeDetail, DatetimePickerDateRange, DatetimePickerDateState, DatetimePickerDisabledDate, DatetimePickerDisabledDates, DatetimePickerInitialMoment, DatetimePickerLocale, DatetimePickerMode, DatetimePickerSelectionMode, DatetimePickerValidator, DatetimePickerWeekDayIndex } from './datetime-picker.types'; /** * O `br-datetime-picker` é um campo para informar data, hora ou data e hora. A pessoa pode digitar ou escolher no calendário e nos controles de horário. * * Escolha o tipo em `mode`: `date`, `time` ou `datetime`. Para início e fim, use `selection-mode="range"`. * * ```html * * * * ``` * * ### Ler o valor * * | Onde | Formato | * | --- | --- | * | `value` | `Date` (ou `null`) | * | `rangeValue` | `{ start, end }` com `Date` | * | `serialized-value` e envio do formulário | `2026-05-20` (data), `14:30` (hora), `2026-05-20T14:30:00-03:00` (data e hora), `início/fim` (intervalo) | * * Atribua valores do tipo `Date` pelo JavaScript (`picker.value = new Date()`), não por atributo. Para restringir datas, use `min`, `max` e `disabled-dates`. * * ### Quando usar * * - Formulários que pedem uma data, um horário ou um período. * * ### Quando evitar * * - Para só exibir uma data: use texto formatado. * - Para escolher várias datas soltas: o componente aceita uma data ou um intervalo. * * O calendário (`br-date-picker`), os controles de horário (`br-time-picker`) e o campo de texto (`br-datetime-input`) são criados pelo próprio componente; não é preciso declará-los. * * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/datetimepicker?tab=designer). * * @category Formulários * @status stable * @slot feedback - Mensagem de validação, normalmente um `br-message`. * @part container - Parte para o container base do seletor. * @part panel - Parte para o painel em forma de card que engloba o seletor. * @part input-container - Container base do campo de entrada interno. * @part input-field - Campo textual interno. * @part input-icon - Ícone de ação (calendário/relógio). * @part feedback - Contêiner da mensagem de validação. */ export declare class DatetimePicker { /** Fornece acesso à API de formulários nativos via ElementInternals. */ elementInternals: ElementInternals; /** Referência ao elemento host do componente no DOM. */ el: HTMLBrDatetimePickerElement; /** * Modo exibido pelo componente. * * Valores: `date` | `time` | `datetime`. * Valores inválidos são normalizados para o padrão. * * @default 'datetime' */ mode: DatetimePickerMode; /** * Locale usado para formatação e rótulos. * * @default 'pt-BR' */ locale: DatetimePickerLocale; /** * Texto placeholder exibido no input. * * @default '' */ placeholder: string; /** * Nome do campo para submissão em formulários nativos. * * @default '' */ name: string; /** * Indica se o campo é requerido para submissão do formulário. * * @default false */ required: boolean; /** * Menor data/hora aceito (Date | string | null). * * @default null */ min: Date | string | null; /** * Maior data/hora aceito (Date | string | null). * * @default null */ max: Date | string | null; /** * Validador customizado (síncrono ou assíncrono) para a seleção. * * Recebe `Date | DatetimePickerDateRange | null` como valor. * * @default undefined */ readonly validator?: DatetimePickerValidator; /** * Tipo de seleção: `single` ou `range`. * * @default 'single' */ selectionMode: DatetimePickerSelectionMode; /** * Dia inicial da semana exibido no calendário (0 = Dom, 6 = Sáb). * * @default 0 */ weekStartsOn: DatetimePickerWeekDayIndex; /** * Valor inicial da seleção: `'now' | Date | string | null`. * * @default null */ initialMoment: DatetimePickerInitialMoment; /** * Valor selecionado pelo usuário (Date | null). * * Pode ser controlado externamente e é refletido internamente. * * @default null */ value: Date | null; /** * Representação serializada compatível com controles HTML. * * Formatos variam conforme `mode`. Em intervalos, usa `início/fim`. * * @default undefined */ serializedValue?: string; /** * Espelho tipado da seleção atual (`valueAsDate`). * * @internal Mantém compatibilidade com APIs legadas. * * @default undefined */ valueAsDate?: Date | null; /** * Intervalo controlado quando `selectionMode="range"`. * * Em `datetime`, preserva as datas e horários informados; término anterior ao * início torna o controle inválido, sem reordenar ou avançar datas. * * @default undefined */ rangeValue?: DatetimePickerDateRange; /** * Desabilita toda a interação do componente. * * @default false */ disabled: boolean; /** * Datas indisponíveis para seleção. Aceita `Date[]`, `string` ou `null`. * * Datas inválidas são ignoradas. A comparação considera apenas o dia. * * @default null */ disabledDates: DatetimePickerDisabledDates; /** * Mantém número fixo de linhas no calendário (6 semanas) quando `true`. * * @default false */ fixedRowCount: boolean; /** * Controla se o conteúdo do picker está visível. * * @internal Estado reativo interno; não usar externamente. */ private isPickerOpen; /** * Indica se o formulário associado desabilitou o componente. * * @internal Estado reativo interno. */ private formDisabled; /** * Indica se existe slot `feedback` presente no host. * * @internal Estado reativo interno. */ private hasFeedbackSlot; /** * Mensagem de validação customizada definida por `setCustomValidity`. * * @internal Estado reativo interno. */ private customValidationMessage; /** * Mensagem retornada pelo validator customizado, se houver. * * @internal Estado reativo interno. */ private validatorMessage; /** * Mensagem textual de validação proveniente do input interno. * * @internal Estado reativo interno. */ private inputValidationMessage; /** * Indica que o usuário está editando o texto do input e que a validação * textual está pendente (mensagem escondida até commit/blur). * * @internal */ private inputValidationPending; /** * Indicador de execução do validator assíncrono. * * @internal Estado reativo interno. */ private isValidating; /** * Lista normalizada de datas indisponíveis para seleção. * * @internal Mantida em formato `Date[]` para uso interno pelo calendário. */ private normalizedDisabledDates; /** * Data final selecionada no modo de intervalo. * * @internal Estado reativo interno. */ private rangeEnd; /** * Data inicial selecionada no modo de intervalo. * * @internal Estado reativo interno. */ private rangeStart; /** * Data de referência usada para navegação visual (mês/semana exibidos). * * @internal Controle de navegação do calendário. */ private referenceDate; /** * Evento público emitido quando a data de referência ou a seleção mudam. * * Payload (`DatetimePickerDateState`): * - `referenceDate`: Date — data usada para navegação visual (mês/semana exibidos). * - `value`: Date | null — valor selecionado atualmente. * * @event dateStateChange * @type {CustomEvent} */ dateStateChange: EventEmitter; /** * Evento emitido quando a seleção muda. * * Payload (`DatetimePickerChangeDetail`): * - `mode`: DatetimePickerMode — modo atual do componente (`date` | `time` | `datetime`). * - `selectionMode`: DatetimePickerSelectionMode — `single` ou `range`. * - `value`: Date | null | DatetimePickerDateRange — seleção atual (tipo depende de `selectionMode`). * - `serializedValue`: string | undefined — representação serializada para integração com formulários. * * @event brDatetimePickerChange * @type {CustomEvent} */ brDatetimePickerChange: EventEmitter; /** * Evento emitido quando o valor selecionado muda. * * @deprecated Use `brDatetimePickerChange` para receber a seleção completa e tipada. * * Payload (legacy): `Date | null` — valor selecionado. * * @event valueChange * @type {CustomEvent} */ valueChange: EventEmitter; /** * Emitido ao iniciar e concluir a validação customizada. * * Payload (`FormValidationChangeDetail`): * - `validating`: boolean — indica se a validação está em execução. * - `valid`: boolean | null — resultado da validação (`null` enquanto valida). * - `message`: string | null — mensagem de validação associada. * * @event brDatetimePickerValidationChange * @type {CustomEvent} */ brDatetimePickerValidationChange: EventEmitter; /** * ID único do contêiner de feedback interno. * Gerado por `Helpers.generateUniqueId` no momento da criação da instância * e usado para associar mensagens de validação ao input interno. * * @internal */ private readonly feedbackId; /** * Snapshot da seleção inicial usada para restaurar em reset de formulário. * Mantém uma cópia imutável do valor original para `formResetCallback`. * * @internal */ private initialFormValue; /** * Contador monótono usado para invalidar execuções assíncronas de validação. * Incrementado antes de cada execução; resultados com `runId` diferente são ignorados. * * @internal */ private validationRunId; /** * Indica se o componente já completou o ciclo `componentDidLoad`. * Evita executar lógica de inicialização mais de uma vez. * * @internal */ private isInitialized; /** * Flag para evitar loops de sincronização entre `value`, `valueAsDate` e `serializedValue`. * Setada temporariamente durante operações programáticas de sincronização. * * @internal */ private syncingCanonicalValues; /** * Flag que sinaliza atualizações internas em `rangeValue`. * Usada para distinguir atribuições programáticas de alterações externas. * * @internal */ private syncingRangeValueInternally; /** * Mapeia cada modo para a função responsável por renderizar seu conteúdo. * Facilita seleção de renderer sem condicionais espalhadas pelo código. * * @internal */ private readonly modeRendererMap; /** * Indica se o listener global de clique fora do componente está anexado. * Evita anexações/remoções redundantes do mesmo handler. * * @internal */ private outsideClickListenerAttached; /** * Revalida o modo sempre que a prop mudar. * * @param {string} newValue - Valor recebido via atributo/prop. */ handleModeChange(newValue: string): void; /** Revalida o estado do formulário quando required mudar. */ handleRequiredChange(): void; handleConstraintChange(): void; /** Exclui o valor do FormData enquanto o componente estiver desabilitado. */ handleDisabledChange(): void; /** Reage a mudanças no modo de seleção e limpa intervalo quando necessário. */ handleSelectionModeChange(newValue: DatetimePickerSelectionMode): void; /** Revalida o dia inicial da semana sempre que a prop mudar. */ handleWeekStartsOnChange(newValue: DatetimePickerWeekDayIndex): void; /** * Aplica ou limpa a seleção da data atual conforme o novo valor da prop. * * @param {DatetimePickerInitialMoment} newValue - Novo estado da prop. */ handleInitialMomentChange(newValue: DatetimePickerInitialMoment): void; /** Sincroniza alterações externas do valor com o estado visual e o formulário nativo. */ /** * @param {Date | null} newValue - Novo valor recebido via prop. */ handleValueChange(newValue: Date | null): void; /** Converte alterações externas no valor serializado sem mudar o tipo da prop legada `value`. */ handleSerializedValueChange(newValue?: string): void; /** Mantém `valueAsDate` e a prop legada `value` apontando para o mesmo estado observável. */ handleValueAsDateChange(newValue?: Date | null): void; handlePickerOpenChange(isOpen: boolean): void; /** * Recalcula a lista de datas desabilitadas quando a prop mudar. * * @param newValue - Nova configuração recebida via prop. */ handleDisabledDatesChange(newValue: DatetimePickerDisabledDates): void; handleRangeValueChange(newValue?: DatetimePickerDateRange): void; connectedCallback(): void; componentWillLoad(): void; componentDidLoad(): void; disconnectedCallback(): void; formDisabledCallback(disabled: boolean): void; /** Restaura o estado do componente quando o formulário é restaurado. */ formResetCallback(): void; /** * Restaura o estado do formulário (autofill / histórico). * * @param {string | File | FormData | null} state Estado serializado fornecido pelo navegador. */ formStateRestoreCallback(state: string | File | FormData | null): void; /** * Define programaticamente as datas desabilitadas. * * Use quando scripts externos precisam fornecer uma lista tipada de * datas a bloquear no calendário. Substitui a prop `disabledDates` para * atualizações imperativas. * * @param dates Lista de datas (`Date` | `string`) a bloquear, ou `null` para limpar. * @returns Promise — resolve quando a atualização interna for aplicada. */ setDisabledDates(dates: DatetimePickerDisabledDate[] | null): Promise; /** * Define o valor do componente de forma imperativa. * * Aceita `Date`, string compatível com o `mode`, ou `null` para limpar a seleção. * Validação de datas desabilitadas é aplicada antes da atribuição. * * @param value Date | string | null — valor a aplicar; `null` limpa a seleção. * @returns Promise — resolve quando o componente aplicar e sincronizar o valor. */ setValue(value: Date | string | null): Promise; /** * Retorna uma cópia do valor selecionado atualmente. * * @returns Promise — cópia imutável do `value` atual, ou `null`. */ getValue(): Promise; /** * Limpa valor e intervalo selecionados. * * Remove seleção atual e restaura a referência de navegação para a data atual. * * @returns Promise — resolve após a limpeza e sincronização internas. */ clear(): Promise; /** * Abre o picker quando o componente estiver habilitado. * * @returns Promise — resolve quando o estado visual for atualizado. */ open(): Promise; /** * Fecha o picker. * * @returns Promise — resolve após atualização do estado de visibilidade. */ close(): Promise; /** * Alterna o estado de abertura do picker. * * @returns Promise — resolve quando a transição de estado terminar. */ toggle(): Promise; /** * Move o foco para o input nativo interno. * * @returns Promise — resolve imediatamente após tentar focar o elemento. */ focusInput(): Promise; /** * Define um intervalo no modo atual e ativa `selectionMode="range"`. * * Valida datas contra bloqueios e sincroniza estado visual e de formulário. * Em `datetime`, mantém os limites informados e sinaliza intervalo inválido * quando o término precede o início, sem ajustar datas automaticamente. * * @param start Date | string | null — data inicial do intervalo. * @param end Date | string | null — data final do intervalo. * @returns Promise — resolve quando o intervalo for aplicado e sincronizado. */ setRange(start: Date | string | null, end: Date | string | null): Promise; /** * Retorna o intervalo de datas selecionado quando em modo `selectionMode="range"`. * * @returns Promise<{ start: Date | null; end: Date | null } | null> — objeto com `start`/`end` ou `null` quando * não estiver em modo `range`. */ getRange(): Promise<{ start: Date | null; end: Date | null; } | null>; /** * Consulta se o picker está atualmente aberto. * * @returns Promise — `true` se o picker está visível, `false` caso contrário. */ isOpen(): Promise; /** * Restaura o estado inicial atualmente registrado para reset. * * @returns Promise — resolve quando a seleção inicial for restaurada. */ resetToInitial(): Promise; /** * Permite que consumidores acionem validação nativa do formulário via host. * * @returns Promise — resultado da Constraint Validation API para o host. */ checkValidity(): Promise; /** * Permite exibir mensagens nativas de validação no host. * * @returns Promise — `true` se a mensagem foi exibida e o formulário é válido. */ reportValidity(): Promise; /** * Define ou limpa uma mensagem de validade customizada. * * @param message string — mensagem de validação; string vazia remove a mensagem. * @returns Promise — resolve após sincronizar a validade no host. */ setCustomValidity(message: string): Promise; /** * Executa o validator customizado (se houver) e valida o controle. * * Emite eventos de início/conclusão da validação e atualiza mensagens internas. * * @returns Promise — `true` se a seleção for considerada válida. */ validate(): Promise; /** * Retorna um snapshot serializável da Constraint Validation API. * * @returns Promise — estado atual de validação do host, * pronto para conversão e restauração via `formStateRestoreCallback`. */ getValidationState(): Promise; /** * Valida o modo de seleção e corrige para padrão se inválido. * * @param value - Modo informado pelo consumidor do componente. */ private ensureValidSelectionMode; private initializeSelectionMode; private initializeWeekStartsOn; /** * Valida o dia inicial da semana e corrige para padrão quando necessário. * * @param value unknown — valor recebido via prop/atributo a ser normalizado. */ private ensureValidWeekStartsOn; private clearRangeState; /** * Materializa os horários exibidos pelos dois timers como limites reais. * Assim o range de horário já nasce completo, o input pode representá-lo na * primeira renderização e nenhum timer depende da referência do outro. */ private initializeTimeRangeBoundaries; private isRangeDateSelectionMode; /** * Decide se um evento público deve ser emitido após atualização vinda de * subcomponentes (calendário/relógio). * * @param range DatetimePickerDateRange | undefined — estado parcial do range vindo do subcomponente. * @returns boolean — `true` quando o evento deve ser emitido externamente. */ private resolvePublicEventEmissionForRange; /** * Resolve a data efetivamente selecionada no evento para validações e bloqueios. * * @param range DatetimePickerDateRange | undefined — intervalo parcial (quando aplicável). * @param value Date | null — valor principal vindo do subcomponente. * @returns Date | null — data final a ser considerada para validação. */ private resolveSelectedDateFromEvent; /** * Handler disparado por `br-datetime-input` para propagar mensagens de * validação do input interno para o estado do componente. * * @param event CustomEvent<{ valid: boolean; message: string }> — detalhe com `valid` e `message`. * @returns void */ private handleInputValidationChange; /** * Identifica navegação visual que preserva integralmente o range selecionado. * * @param value Date | null — valor principal do evento. * @param range DatetimePickerDateRange | undefined — range parcial do evento. * @returns boolean — `true` quando a navegação não altera a seleção atual. */ private isRangeNavigationState; /** * Consolida um evento cujo valor principal permaneceu inalterado. * * @param range DatetimePickerDateRange | undefined — estado parcial do range. * @param shouldEmitPublicEvent boolean — indica se o evento público deve ser emitido. */ private handleUnchangedDateState; /** * Emite a seleção parcial de range quando os eventos públicos foram adiados * para evitar duplicidade com listeners legados. * * @param range DatetimePickerDateRange | undefined — snapshot parcial do range. * @param shouldEmitPublicEvent boolean — se deve ser emitido publicamente. */ private emitPendingRangeChange; /** * Handler principal que consolida eventos de `br-date-picker` / `br-time-picker`. * Contém lógica de proteção contra valores desabilitados, navegação e emissão * de eventos públicos apropriados. * * @param event CustomEvent — detalhe com `referenceDate`, `value` e `range`. */ private handleDateStateChange; /** * Atualiza somente o horário de um dos limites do intervalo. * * @param boundary 'start' | 'end' — qual limite será atualizado. * @param event CustomEvent — detalhe com novo `value`. */ private handleRangeTimeStateChange; private readonly handleRangeStartTimeStateChange; private readonly handleRangeEndTimeStateChange; /** * Alterna visibilidade do picker quando o input solicita. * * @param event Event — evento de toggle vindo do input. */ private handleTogglePicker; /** * Fecha o picker quando o clique acontece fora do host. * * @param event MouseEvent — clique ocorrido no documento. */ private handleOutsideClick; private attachOutsideClickListener; private detachOutsideClickListener; private initializeMode; private initializeDisabledDates; /** * Normaliza e aplica as datas desabilitadas, limpando valor atual quando necessário. * * @param value - Valor bruto recebido por prop/atributo ou método público. */ private syncDisabledDates; private initializeDefaultValue; /** * Aplica a seleção inicial recebida, com normalização de valores inválidos. * * @param selection - Configuração de seleção inicial. */ private applyInitialMoment; private isRangeRestoreMode; /** * Restaura estado de intervalo a partir do valor serializado do formulário. * * @param serializedState string — valor serializado vindo do formulário. */ private restoreRangeStateFromSerialized; /** * Restaura estado de seleção única a partir do valor serializado do formulário. * * @param serializedState string — valor serializado vindo do formulário. */ private restoreSingleStateFromSerialized; /** * Converte entradas aceitas por métodos públicos em `Date | null`. * * @param value Date | string | null — valor bruto recebido pelo método público. * @param mode DatetimePickerMode — modo atual para parsing de strings. * @returns Date | null — representação normalizada ou `null` se inválida. */ private parseMethodValue; /** * Aplica a ponte serializada usando os mesmos parsers já usados por restore de formulário. * * @param serializedValue string — valor serializado a ser restaurado. */ private restoreSerializedValue; /** Atualiza os nomes padrão sem emitir eventos adicionais ou criar ciclos de watchers. */ private syncCanonicalValues; /** * Retorna o mesmo valor que será submetido pelo ElementInternals. * * @returns string — valor serializado pronto para `setFormValue`. */ private getSerializedValue; private sameDate; /** * Busca o input nativo interno para ações imperativas de foco. * * @returns HTMLElement | undefined — elemento `input` nativo interno, quando disponível. */ private getNativeInputElement; /** * Atualiza estado interno, FormData e validação com uma única chamada. * * @param nextValue Date | null — próximo valor a ser aplicado no componente. * @param shouldEmitPublicEvent boolean — controla emissão de eventos públicos. * @returns void */ private setComponentValue; /** Propaga o estado atual consolidado para consumidores externos do componente raiz. */ private emitDateStateChange; /** Emite o contrato público sem expor detalhes incidentais do estado interno. */ private emitCanonicalChange; /** * Serializa uma data civil sem conversão para UTC ou mudança de dia. * * @param value Date — data a serializar (somente componente civil). * @returns string — formato `YYYY-MM-DD`. */ private serializeDateOnly; /** * Serializa um limite do intervalo conforme o modo sem expor objetos Date no payload. * * @param value Date | null — limite a serializar. * @returns string | null — representação serializada do limite ou `null`. */ private serializeRangeBoundary; /** * Expande o intervalo completo e marca quais dias estão desabilitados. * * @param start Date — início do intervalo. * @param end Date — fim do intervalo. * @returns Array<{date: Date, disabled: boolean}> — lista diária com flags. */ private buildRangeDatesState; /** * Restaura seleção e data de referência a partir de uma data já validada. * * @param nextValue Date | null — valor validado a ser restaurado como seleção. */ private restoreSelection; /** * Atualiza o estado local de intervalo a partir do evento do calendário. * * @param nextRange DatetimePickerDateRange | undefined — novo snapshot do intervalo. */ private setRangeState; private updateFormInternals; /** Atualiza o valor submetido no FormData do form-associated custom element. */ private syncFormValue; /** Deriva o erro de ordenação sem modificar os limites escolhidos. */ private getRangeOrderValidationMessage; /** Espelha a regra de required no mecanismo nativo de validade. */ private syncFormValidity; private parseConstraintValue; private isDisabled; /** Duplica datas para evitar compartilhamento de referência mutável. */ private cloneDate; /** * Verifica se a data pertence ao conjunto de dias bloqueados. * * @param date - Data candidata à seleção. * @returns `true` quando o dia estiver desabilitado. */ private isDateDisabled; /** * Corrige valores inválidos para o modo padrão, preservando a consistência do estado refletido. * * @param value - Modo informado pelo consumidor do componente. */ private ensureValidMode; /** * Resolve a função de renderização associada ao modo atual. * * @returns Função que renderiza o conteúdo interno do picker. */ private getModeRenderer; /** Retorna o conjunto de classes base aplicadas ao container do componente. */ private getCssClassMap; /** * Agrupa os bindings compartilhados para evitar divergência entre data e horário. */ private getSharedDateStateBindings; /** * Fecha o picker ao pressionar Escape, devolvendo o foco ao input interno. * * @param event - Evento de teclado disparado em qualquer descendente do componente. */ private handlePickerKeydown; /** Renderiza o campo de entrada responsável por abrir e sincronizar o picker. */ private renderInputField; /** Renderiza apenas o seletor de data. */ private renderDatePicker; /** Renderiza um seletor de hora simples ou um limite do intervalo. */ private renderTimePicker; /** Renderiza os horários inicial e final lado a lado no modo range. */ private renderRangeTimePickers; /** * Renderiza a combinação de data e horário no modo `datetime`. */ private renderDateTimePicker; /** Renderiza o separador visual entre data e hora no modo combinado. */ private renderDivider; /** * Resolve o conteúdo interno conforme o modo atual do componente. */ private renderPickerContent; /** * Renderização principal do componente. */ render(): any; }