import { type EventEmitter } from '../../stencil-public-runtime'; import { type FormValidationState } from '../../shared/utils/form'; import { type FormValidationChangeDetail } from '../../shared/utils/validator'; import type { DatetimePickerDateRange, DatetimePickerDateState, DatetimePickerDisabledDate, DatetimePickerDisabledDates, DatetimePickerInitialMoment, DatetimePickerLocale, DatetimePickerMode, DatetimePickerSelectionMode, DatetimePickerValidator, DatetimePickerWeekDayIndex } from './datetime-picker.types'; /** * ## Design System * * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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; formDisabledCallback(disabled: boolean): void; /** API nativa de reset de form-associated custom elements. */ formResetCallback(): void; /** API nativa de restauração de estado (histórico/autofill) do formulário. */ formStateRestoreCallback(state: string | File | FormData | null): void; /** Referência ao elemento host do componente no DOM. */ el: HTMLBrDatetimePickerElement; /** * Controla se o conteúdo do picker está visível. */ private isPickerOpen; private formDisabled; private hasFeedbackSlot; private customValidationMessage; private validatorMessage; private isValidating; private readonly feedbackId; /** Lista normalizada de datas indisponíveis para seleção. */ private normalizedDisabledDates; /** Data final selecionada no modo de intervalo. */ private rangeEnd; /** Data inicial selecionada no modo de intervalo. */ private rangeStart; /** * Mantém a data de referência que orienta a navegação visual do calendário. */ private referenceDate; /** * Define o modo de seleção exibido pelo componente: data, horário ou ambos. * * Valores aceitos: `date`, `time` ou `datetime`. * Valores inválidos são corrigidos automaticamente para o valor padrão, * mantendo o atributo refletido sempre consistente com o modo exibido. * * @default 'datetime' */ mode: DatetimePickerMode; /** * Define o locale usado pelos subcomponentes para formatar datas e rótulos. * * @default 'pt-BR' */ locale: DatetimePickerLocale; /** * Define o placeholder exibido no campo de entrada do datetime picker. * * @default '' */ placeholder: string; /** Nome do campo para submissão em formulários nativos. */ name: string; /** Indica se o campo deve ter valor antes do envio do formulário. */ required: boolean; /** Menor data/horário aceito, interpretado conforme `mode`. */ min: Date | string | null; /** Maior data/horário aceito, interpretado conforme `mode`. */ max: Date | string | null; /** Regra síncrona ou assíncrona aplicada à data ou intervalo selecionado. */ readonly validator?: DatetimePickerValidator; /** * Define o tipo de seleção de datas para o calendário: única ou intervalo. * * `range` só funciona em conjunto com `mode="date"`. * Se `selectionMode="range"` for informado, o componente ajusta automaticamente * `mode` para `date`. Se `mode` mudar para `time` ou `datetime`, o componente * normaliza `selectionMode` para `single` quando necessário. */ selectionMode: DatetimePickerSelectionMode; /** * Define o dia inicial da semana exibida no calendário. * * Valores suportados: 0 (domingo) a 6 (sábado). * * @default 0 */ weekStartsOn: DatetimePickerWeekDayIndex; /** * Define a seleção inicial do componente. * * Aceita: * - `'now'`: seleciona o momento atual. * - `Date` ou `string`: seleciona uma data arbitrária. * - `null`: inicia sem seleção. * * Reativo em runtime: mudanças na prop atualizam estado e subcomponentes. * * @default null */ initialMoment: DatetimePickerInitialMoment; /** * Valor selecionado pelo usuário. Pode ser controlado externamente e é atualizado * pelo evento `valueChange`. */ value: Date | null; /** * Representação serializada compatível com os formatos de controles HTML (`YYYY-MM-DD`, `HH:mm` * ou ISO local, conforme `mode`). Em intervalos, usa `início/fim`. * * Quando informada, tem precedência sobre o valor legado `value` durante a inicialização. */ serializedValue?: string; /** Espelho tipado da seleção atual, equivalente ao padrão `valueAsDate` dos controles HTML. */ valueAsDate?: Date | null; /** Intervalo controlado quando `selectionMode="range"`. */ rangeValue?: DatetimePickerDateRange; /** * Desabilita toda a interação do componente. * * Quando `true`, impede abrir o picker, alterar valores e navegar entre datas/horários. * * @default false */ disabled: boolean; /** * Define um conjunto de datas indisponíveis para seleção. * * Aceita uma lista de `Date` e/ou strings analisáveis, ou uma string com datas * separadas por espaço em branco. Datas inválidas são ignoradas com warning. * A comparação considera apenas o dia (ano/mês/dia), ignorando hora. * * @default null */ disabledDates: DatetimePickerDisabledDates; /** * Define se o calendário deve manter um número fixo de linhas (6 semanas = 42 dias) * ou variar conforme o mês. * * Quando `true`, o calendário sempre exibe 6 semanas completas. * Quando `false`, o calendário adapta-se ao mês, exibindo apenas as semanas necessárias. * * @default false */ fixedRowCount: boolean; /** * Revalida o modo sempre que a prop mudar. * * @param 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 newValue - Novo estado da prop. */ handleInitialMomentChange(newValue: DatetimePickerInitialMoment): void; /** Sincroniza alterações externas do valor com o estado visual e o formulário nativo. */ 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; /** Evento público emitido quando a data de referência ou a seleção mudam. */ dateStateChange: EventEmitter; /** * Evento emitido quando o valor selecionado muda. * @deprecated Use `input`/`change` e leia `event.target.value`. */ valueChange: EventEmitter; /** Emitido ao iniciar e concluir a validação customizada. */ brDatetimePickerValidationChange: EventEmitter; /** Registra o listener global somente enquanto o picker está aberto. */ connectedCallback(): void; /** Remove o listener global para evitar vazamento de eventos ao desmontar. */ disconnectedCallback(): void; /** * Normaliza o modo antes da primeira renderização e aplica a data atual quando solicitado. */ componentWillLoad(): void; componentDidLoad(): void; /** * Define programaticamente as datas desabilitadas por meio de array. * * Útil quando o componente é usado via HTML e o consumidor precisa enviar * uma lista tipada em runtime. * * @param dates - Lista de datas (Date|string) a bloquear. */ setDisabledDates(dates: DatetimePickerDisabledDate[] | null): Promise; /** Define o valor atual de forma imperativa aceitando Date, string serializada ou null. */ setValue(value: Date | string | null): Promise; /** Retorna uma cópia do valor selecionado atualmente. */ getValue(): Promise; /** Limpa valor e intervalo selecionados. */ clear(): Promise; /** Abre o picker quando o componente estiver habilitado. */ open(): Promise; /** Fecha o picker. */ close(): Promise; /** Alterna o estado de abertura do picker. */ toggle(): Promise; /** Move o foco para o input nativo interno. */ focusInput(): Promise; /** Define intervalo de datas de forma imperativa, forçando modo date e selectionMode range. */ setRange(start: Date | string | null, end: Date | string | null): Promise; /** * Retorna o intervalo de datas selecionado quando em modo `selectionMode="range"`. * * @returns Objeto com datas `start` e `end`, ou `null` se não estiver em modo range. */ getRange(): Promise<{ start: Date | null; end: Date | null; } | null>; /** * Consulta se o picker está atualmente aberto. * * @returns `true` se o picker está visível, `false` caso contrário. */ isOpen(): Promise; /** Restaura o estado inicial atualmente registrado para reset. */ resetToInitial(): Promise; /** Permite que consumidores acionem validação nativa do formulário via host. */ checkValidity(): Promise; /** Permite exibir mensagens nativas de validação no host. */ reportValidity(): Promise; /** Define ou limpa uma mensagem de validade customizada. */ setCustomValidity(message: string): Promise; /** Executa o validator do picker e retorna se a seleção atual é válida. */ validate(): Promise; /** Retorna um snapshot serializável da Constraint Validation API. */ getValidationState(): Promise; /** Snapshot da seleção inicial usada para restaurar em reset de formulário. */ private initialFormValue; private validationRunId; private isInitialized; private syncingCanonicalValues; /** Mapeia cada modo para a função responsável por renderizar seu conteúdo. */ private readonly modeRendererMap; /** * Valida o modo de seleção e corrige para padrão se inválido. * * @param value - Modo informado pelo consumidor do componente. */ private ensureValidSelectionMode; /** * Normaliza o modo de seleção logo na inicialização. */ private initializeSelectionMode; /** Normaliza o dia inicial da semana logo na inicialização. */ private initializeWeekStartsOn; /** Valida o dia inicial da semana e corrige para padrão quando necessário. */ private ensureValidWeekStartsOn; /** * Limpa o estado do intervalo de datas ao mudar para modo single. */ private clearRangeState; /** Indica quando o componente está operando em seleção de intervalo por data. */ private isRangeDateSelectionMode; /** * Resolve se o evento público deve ser emitido após um update vindo dos subcomponentes. * * No modo range, o evento externo só é emitido no clique final (quando `end` é definido). */ private resolvePublicEventEmissionForRange; /** Resolve a data efetivamente selecionada no evento para validar bloqueio em single/range. */ private resolveSelectedDateFromEvent; /** * Sincroniza o estado local com a emissão dos subcomponentes de data e horário. * * @param event - Evento com a data de referência e o valor selecionado. */ private handleDateStateChange; /** * Alterna visibilidade do picker quando o input solicita. */ private handleTogglePicker; /** * Fecha o picker quando o clique acontece fora do host. */ private handleOutsideClick; private outsideClickListenerAttached; private attachOutsideClickListener; private detachOutsideClickListener; /** * Garante que o componente inicie com um modo suportado. */ private initializeMode; /** * Normaliza a coleção de datas desabilitadas na inicialização. */ 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; /** * Aplica a seleção inicial configurada na prop. */ 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; /** Indica se o estado serializado deve ser interpretado como intervalo. */ private isRangeRestoreMode; /** Restaura estado de intervalo a partir do valor serializado do formulário. */ private restoreRangeStateFromSerialized; /** Restaura estado de seleção única a partir do valor serializado do formulário. */ private restoreSingleStateFromSerialized; /** Resolve Date|null a partir de valores aceitos pelos métodos públicos. */ private parseMethodValue; /** Aplica a ponte serializada usando os mesmos parsers já usados por restore de formulário. */ private restoreSerializedValue; /** Atualiza os nomes canônicos sem emitir eventos adicionais ou criar ciclos de watchers. */ private syncCanonicalValues; /** Retorna o mesmo valor que será submetido pelo ElementInternals. */ private getSerializedValue; private sameDate; /** Busca o input nativo interno para ações imperativas de foco. */ private getNativeInputElement; /** Atualiza estado interno, FormData e validação com uma única chamada. */ private setComponentValue; /** Propaga o estado atual consolidado para consumidores externos do componente raiz. */ private emitDateStateChange; /** Expande o intervalo completo e marca quais dias estão desabilitados. */ private buildRangeDatesState; /** Restaura seleção e data de referência a partir de uma data já validada. */ private restoreSelection; /** Atualiza o estado local de intervalo a partir do evento do calendário. */ private setRangeState; /** Mantém ElementInternals sincronizado com estado e regras do componente. */ private updateFormInternals; /** Atualiza o valor submetido no FormData do form-associated custom element. */ private syncFormValue; /** 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; /** Renderiza o campo de entrada responsável por abrir e sincronizar o picker. */ private renderInputField; /** Renderiza apenas o seletor de data. */ private renderDatePicker; /** Renderiza apenas o seletor de hora. */ private renderTimePicker; /** * 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; /** * 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; /** * Resolve o conteúdo interno conforme o modo atual do componente. */ private renderPickerContent; /** * Renderização principal do componente. */ render(): any; }