@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/datetime-picker/datetime-picker.js

@@ -0,0 +1,1925 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Fragment, Host, h, } from "@stencil/core";
+import { eachDayOfInterval } from "date-fns/eachDayOfInterval";
+import { isSameDay } from "date-fns/isSameDay";
+import { set } from "date-fns/set";
+import { toDate } from "date-fns/toDate";
+import { dispatchNativeFormEvent } from "../../shared/utils/event";
+import { getFormValidationState, isFormControlDisabled, setFormValidity, } from "../../shared/utils/form";
+import { hasAssignedSlotContent } from "../../shared/utils/slot";
+import { resolveSsrLocalDate } from "../../shared/utils/ssr-date";
+import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+import { DATETIME_PICKER_LOCALE, DATETIME_PICKER_MODE } from "./datetime-picker-constants";
+import { hasDatetimePickerMissingValue, parseDatetimePickerSerializedRange, parseDatetimePickerSerializedValue, serializeDatetimePickerFormValue, } from "./datetime-picker-form-associated";
+import { normalizeDatetimePickerDisabledDates, normalizeDatetimePickerInitialMoment, normalizeDatetimePickerMode, normalizeDatetimePickerSelectionMode, normalizeDatetimePickerWeekStartsOn, } from "./datetime-picker-props-validation";
+/**
+ * ## 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 class DatetimePicker {
+    constructor() {
+        /**
+         * Controla se o conteúdo do picker está visível.
+         */
+        this.isPickerOpen = false;
+        this.formDisabled = false;
+        this.hasFeedbackSlot = false;
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.isValidating = false;
+        this.feedbackId = `br-datetime-picker-feedback-${datetimePickerId++}`;
+        /** Lista normalizada de datas indisponíveis para seleção. */
+        this.normalizedDisabledDates = [];
+        /** Data final selecionada no modo de intervalo. */
+        this.rangeEnd = null;
+        /** Data inicial selecionada no modo de intervalo. */
+        this.rangeStart = null;
+        /**
+         * Mantém a data de referência que orienta a navegação visual do calendário.
+         */
+        this.referenceDate = new Date();
+        /**
+         * 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'
+         */
+        this.mode = DATETIME_PICKER_MODE.DEFAULT;
+        /**
+         * Define o locale usado pelos subcomponentes para formatar datas e rótulos.
+         *
+         * @default 'pt-BR'
+         */
+        this.locale = DATETIME_PICKER_LOCALE.DEFAULT;
+        /**
+         * Define o placeholder exibido no campo de entrada do datetime picker.
+         *
+         * @default ''
+         */
+        this.placeholder = '';
+        /** Nome do campo para submissão em formulários nativos. */
+        this.name = '';
+        /** Indica se o campo deve ter valor antes do envio do formulário. */
+        this.required = false;
+        /** Menor data/horário aceito, interpretado conforme `mode`. */
+        this.min = null;
+        /** Maior data/horário aceito, interpretado conforme `mode`. */
+        this.max = null;
+        /**
+         * 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.
+         */
+        this.selectionMode = 'single';
+        /**
+         * Define o dia inicial da semana exibida no calendário.
+         *
+         * Valores suportados: 0 (domingo) a 6 (sábado).
+         *
+         * @default 0
+         */
+        this.weekStartsOn = 0;
+        /**
+         * 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
+         */
+        this.initialMoment = null;
+        /**
+         * Valor selecionado pelo usuário. Pode ser controlado externamente e é atualizado
+         * pelo evento `valueChange`.
+         */
+        this.value = null;
+        /**
+         * Desabilita toda a interação do componente.
+         *
+         * Quando `true`, impede abrir o picker, alterar valores e navegar entre datas/horários.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * 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
+         */
+        this.disabledDates = null;
+        /**
+         * 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
+         */
+        this.fixedRowCount = false;
+        /** Snapshot da seleção inicial usada para restaurar em reset de formulário. */
+        this.initialFormValue = null;
+        this.validationRunId = 0;
+        this.isInitialized = false;
+        this.syncingCanonicalValues = false;
+        /** Mapeia cada modo para a função responsável por renderizar seu conteúdo. */
+        this.modeRendererMap = {
+            [DATETIME_PICKER_MODE.DATE]: () => this.renderDatePicker(),
+            [DATETIME_PICKER_MODE.TIME]: () => this.renderTimePicker(),
+            [DATETIME_PICKER_MODE.DATETIME]: () => this.renderDateTimePicker(),
+        };
+        /**
+         * 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.
+         */
+        this.handleDateStateChange = (event) => {
+            // Evita que o evento interno dos subcomponentes vaze para fora do host.
+            event.stopPropagation();
+            if (this.isDisabled()) {
+                return;
+            }
+            const { referenceDate, value, range } = event.detail;
+            const selectedDate = this.resolveSelectedDateFromEvent(range, value);
+            if (selectedDate !== null && this.isDateDisabled(selectedDate)) {
+                return;
+            }
+            this.referenceDate = toDate(referenceDate);
+            const shouldEmitPublicEvent = this.resolvePublicEventEmissionForRange(range);
+            this.setComponentValue(value === null ? null : toDate(value), shouldEmitPublicEvent && this.isInitialized);
+        };
+        /**
+         * Alterna visibilidade do picker quando o input solicita.
+         */
+        this.handleTogglePicker = (event) => {
+            if (this.isDisabled()) {
+                return;
+            }
+            event.stopPropagation();
+            const willOpen = !this.isPickerOpen;
+            if (willOpen) {
+                this.referenceDate = this.value === null ? toDate(new Date()) : toDate(this.value);
+            }
+            this.isPickerOpen = willOpen;
+        };
+        /**
+         * Fecha o picker quando o clique acontece fora do host.
+         */
+        this.handleOutsideClick = (event) => {
+            const eventPath = event.composedPath();
+            if (eventPath.includes(this.el)) {
+                return;
+            }
+            this.isPickerOpen = false;
+        };
+        this.outsideClickListenerAttached = false;
+        /**
+         * Fecha o picker ao pressionar Escape, devolvendo o foco ao input interno.
+         *
+         * @param event - Evento de teclado disparado em qualquer descendente do componente.
+         */
+        this.handlePickerKeydown = (event) => {
+            if (event.key !== 'Escape' || !this.isPickerOpen)
+                return;
+            event.stopPropagation();
+            this.isPickerOpen = false;
+            this.getNativeInputElement()?.focus();
+        };
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    /** API nativa de reset de form-associated custom elements. */
+    formResetCallback() {
+        this.customValidationMessage = '';
+        this.validatorMessage = null;
+        this.validationRunId++;
+        this.restoreSelection(this.initialFormValue);
+    }
+    /** API nativa de restauração de estado (histórico/autofill) do formulário. */
+    formStateRestoreCallback(state) {
+        if (typeof state !== 'string') {
+            this.restoreSelection(null);
+            return;
+        }
+        if (this.isRangeRestoreMode()) {
+            this.restoreRangeStateFromSerialized(state);
+            return;
+        }
+        this.restoreSingleStateFromSerialized(state);
+    }
+    /**
+     * Revalida o modo sempre que a prop mudar.
+     *
+     * @param newValue - Valor recebido via atributo/prop.
+     */
+    handleModeChange(newValue) {
+        this.ensureValidMode(newValue);
+        if (this.selectionMode === 'range' && this.mode !== DATETIME_PICKER_MODE.DATE) {
+            this.selectionMode = 'single';
+            return;
+        }
+        this.updateFormInternals();
+    }
+    /** Revalida o estado do formulário quando required mudar. */
+    handleRequiredChange() {
+        this.updateFormInternals();
+    }
+    handleConstraintChange() {
+        this.updateFormInternals();
+    }
+    /** Exclui o valor do FormData enquanto o componente estiver desabilitado. */
+    handleDisabledChange() {
+        this.updateFormInternals();
+    }
+    /** Reage a mudanças no modo de seleção e limpa intervalo quando necessário. */
+    handleSelectionModeChange(newValue) {
+        this.ensureValidSelectionMode(newValue);
+        if (this.selectionMode === 'range' && this.mode !== DATETIME_PICKER_MODE.DATE) {
+            this.mode = DATETIME_PICKER_MODE.DATE;
+            return;
+        }
+        if (this.selectionMode === 'single') {
+            this.clearRangeState();
+            return;
+        }
+        this.updateFormInternals();
+    }
+    /** Revalida o dia inicial da semana sempre que a prop mudar. */
+    handleWeekStartsOnChange(newValue) {
+        this.ensureValidWeekStartsOn(newValue);
+    }
+    /**
+     * Aplica ou limpa a seleção da data atual conforme o novo valor da prop.
+     *
+     * @param newValue - Novo estado da prop.
+     */
+    handleInitialMomentChange(newValue) {
+        this.applyInitialMoment(newValue, this.isInitialized);
+        this.initialFormValue = this.cloneDate(this.value);
+    }
+    /** Sincroniza alterações externas do valor com o estado visual e o formulário nativo. */
+    handleValueChange(newValue) {
+        const normalizedValue = newValue instanceof Date && !Number.isNaN(newValue.getTime()) ? toDate(newValue) : null;
+        if (newValue !== null && normalizedValue === null) {
+            this.value = null;
+            return;
+        }
+        if (normalizedValue !== null) {
+            this.referenceDate = normalizedValue;
+        }
+        this.syncCanonicalValues();
+        this.updateFormInternals();
+    }
+    /** Converte alterações externas no valor serializado sem mudar o tipo da prop legada `value`. */
+    handleSerializedValueChange(newValue) {
+        if (this.syncingCanonicalValues || newValue === undefined)
+            return;
+        this.restoreSerializedValue(newValue);
+    }
+    /** Mantém `valueAsDate` e a prop legada `value` apontando para o mesmo estado observável. */
+    handleValueAsDateChange(newValue) {
+        if (this.syncingCanonicalValues || newValue === undefined)
+            return;
+        const normalizedValue = newValue instanceof Date && !Number.isNaN(newValue.getTime()) ? toDate(newValue) : null;
+        if (this.sameDate(this.value, normalizedValue))
+            return;
+        this.value = normalizedValue;
+    }
+    handlePickerOpenChange(isOpen) {
+        if (isOpen) {
+            this.attachOutsideClickListener();
+        }
+        else {
+            this.detachOutsideClickListener();
+        }
+    }
+    /**
+     * Recalcula a lista de datas desabilitadas quando a prop mudar.
+     *
+     * @param newValue - Nova configuração recebida via prop.
+     */
+    handleDisabledDatesChange(newValue) {
+        this.syncDisabledDates(newValue);
+    }
+    handleRangeValueChange(newValue) {
+        if (!newValue || this.selectionMode !== 'range')
+            return;
+        this.rangeStart = this.cloneDate(newValue.start);
+        this.rangeEnd = this.cloneDate(newValue.end);
+        const nextValue = newValue.end ?? newValue.start;
+        this.referenceDate = nextValue ? toDate(nextValue) : this.referenceDate;
+        this.setComponentValue(nextValue);
+    }
+    /** Registra o listener global somente enquanto o picker está aberto. */
+    connectedCallback() {
+        if (this.isPickerOpen)
+            this.attachOutsideClickListener();
+    }
+    /** Remove o listener global para evitar vazamento de eventos ao desmontar. */
+    disconnectedCallback() {
+        this.detachOutsideClickListener();
+    }
+    /**
+     * Normaliza o modo antes da primeira renderização e aplica a data atual quando solicitado.
+     */
+    componentWillLoad() {
+        this.referenceDate = resolveSsrLocalDate(this.el, this.referenceDate);
+        this.initializeMode();
+        this.initializeSelectionMode();
+        this.initializeWeekStartsOn();
+        this.initializeDisabledDates();
+        this.initializeDefaultValue();
+        if (this.serializedValue !== undefined) {
+            this.restoreSerializedValue(this.serializedValue);
+        }
+        else if (this.valueAsDate !== undefined) {
+            this.handleValueAsDateChange(this.valueAsDate);
+        }
+        this.initialFormValue = this.cloneDate(this.value);
+        this.syncCanonicalValues();
+        this.updateFormInternals();
+    }
+    componentDidLoad() {
+        this.isInitialized = true;
+        this.hasFeedbackSlot = this.el.querySelector('[slot="feedback"]') !== null;
+    }
+    /**
+     * 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.
+     */
+    async setDisabledDates(dates) {
+        this.syncDisabledDates(dates);
+    }
+    /** Define o valor atual de forma imperativa aceitando Date, string serializada ou null. */
+    async setValue(value) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const nextValue = this.parseMethodValue(value, this.mode);
+        if (nextValue !== null && this.isDateDisabled(nextValue)) {
+            this.setComponentValue(null);
+            return;
+        }
+        if (this.selectionMode === 'single') {
+            this.rangeStart = null;
+            this.rangeEnd = null;
+        }
+        this.referenceDate = nextValue === null ? toDate(new Date()) : toDate(nextValue);
+        this.setComponentValue(nextValue);
+    }
+    /** Retorna uma cópia do valor selecionado atualmente. */
+    async getValue() {
+        return this.cloneDate(this.value);
+    }
+    /** Limpa valor e intervalo selecionados. */
+    async clear() {
+        this.rangeStart = null;
+        this.rangeEnd = null;
+        this.referenceDate = toDate(new Date());
+        this.setComponentValue(null);
+    }
+    /** Abre o picker quando o componente estiver habilitado. */
+    async open() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.referenceDate = this.value === null ? toDate(new Date()) : toDate(this.value);
+        this.isPickerOpen = true;
+    }
+    /** Fecha o picker. */
+    async close() {
+        this.isPickerOpen = false;
+    }
+    /** Alterna o estado de abertura do picker. */
+    async toggle() {
+        if (this.isPickerOpen) {
+            await this.close();
+            return;
+        }
+        await this.open();
+    }
+    /** Move o foco para o input nativo interno. */
+    async focusInput() {
+        this.getNativeInputElement()?.focus();
+    }
+    /** Define intervalo de datas de forma imperativa, forçando modo date e selectionMode range. */
+    async setRange(start, end) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.selectionMode = 'range';
+        this.mode = DATETIME_PICKER_MODE.DATE;
+        const normalizedStart = this.parseMethodValue(start, DATETIME_PICKER_MODE.DATE);
+        const normalizedEnd = this.parseMethodValue(end, DATETIME_PICKER_MODE.DATE);
+        if ((normalizedStart !== null && this.isDateDisabled(normalizedStart)) ||
+            (normalizedEnd !== null && this.isDateDisabled(normalizedEnd))) {
+            this.clearRangeState();
+            return;
+        }
+        this.rangeStart = this.cloneDate(normalizedStart);
+        this.rangeEnd = this.cloneDate(normalizedEnd);
+        const nextValue = normalizedEnd ?? normalizedStart;
+        this.referenceDate = nextValue === null ? toDate(new Date()) : toDate(nextValue);
+        this.setComponentValue(nextValue);
+    }
+    /**
+     * 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.
+     */
+    async getRange() {
+        if (this.selectionMode !== 'range' || this.mode !== DATETIME_PICKER_MODE.DATE) {
+            return null;
+        }
+        return {
+            start: this.cloneDate(this.rangeStart),
+            end: this.cloneDate(this.rangeEnd),
+        };
+    }
+    /**
+     * Consulta se o picker está atualmente aberto.
+     *
+     * @returns `true` se o picker está visível, `false` caso contrário.
+     */
+    async isOpen() {
+        return this.isPickerOpen;
+    }
+    /** Restaura o estado inicial atualmente registrado para reset. */
+    async resetToInitial() {
+        this.restoreSelection(this.initialFormValue);
+    }
+    /** Permite que consumidores acionem validação nativa do formulário via host. */
+    async checkValidity() {
+        return this.elementInternals.checkValidity();
+    }
+    /** Permite exibir mensagens nativas de validação no host. */
+    async reportValidity() {
+        return this.elementInternals.reportValidity();
+    }
+    /** Define ou limpa uma mensagem de validade customizada. */
+    async setCustomValidity(message) {
+        this.customValidationMessage = message;
+        this.syncFormValidity();
+    }
+    /** Executa o validator do picker e retorna se a seleção atual é válida. */
+    async validate() {
+        const validator = resolveFormValidator(this.validator);
+        if (!validator || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        this.syncFormValidity();
+        this.brDatetimePickerValidationChange.emit({ validating: true, valid: null, message: null });
+        const value = this.selectionMode === 'range'
+            ? { start: this.cloneDate(this.rangeStart), end: this.cloneDate(this.rangeEnd) }
+            : this.cloneDate(this.value);
+        const message = await runFormValidator(validator, value);
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        this.syncFormValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brDatetimePickerValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    /**
+     * Valida o modo de seleção e corrige para padrão se inválido.
+     *
+     * @param value - Modo informado pelo consumidor do componente.
+     */
+    ensureValidSelectionMode(value) {
+        this.selectionMode = normalizeDatetimePickerSelectionMode(value);
+    }
+    /**
+     * Normaliza o modo de seleção logo na inicialização.
+     */
+    initializeSelectionMode() {
+        this.handleSelectionModeChange(this.selectionMode);
+    }
+    /** Normaliza o dia inicial da semana logo na inicialização. */
+    initializeWeekStartsOn() {
+        this.handleWeekStartsOnChange(this.weekStartsOn);
+    }
+    /** Valida o dia inicial da semana e corrige para padrão quando necessário. */
+    ensureValidWeekStartsOn(value) {
+        this.weekStartsOn = normalizeDatetimePickerWeekStartsOn(value);
+    }
+    /**
+     * Limpa o estado do intervalo de datas ao mudar para modo single.
+     */
+    clearRangeState() {
+        this.rangeStart = null;
+        this.rangeEnd = null;
+        this.updateFormInternals();
+    }
+    /** Indica quando o componente está operando em seleção de intervalo por data. */
+    isRangeDateSelectionMode() {
+        return this.selectionMode === 'range' && this.mode === DATETIME_PICKER_MODE.DATE;
+    }
+    /**
+     * 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).
+     */
+    resolvePublicEventEmissionForRange(range) {
+        if (!this.isRangeDateSelectionMode()) {
+            return true;
+        }
+        if (range === undefined) {
+            return false;
+        }
+        const isFinalRangeClick = this.rangeEnd === null && range.end !== null;
+        this.setRangeState(range);
+        return isFinalRangeClick;
+    }
+    /** Resolve a data efetivamente selecionada no evento para validar bloqueio em single/range. */
+    resolveSelectedDateFromEvent(range, value) {
+        if (!this.isRangeDateSelectionMode() || range === undefined) {
+            return value;
+        }
+        return range.end ?? range.start ?? value;
+    }
+    attachOutsideClickListener() {
+        if (this.outsideClickListenerAttached)
+            return;
+        document.addEventListener('click', this.handleOutsideClick);
+        this.outsideClickListenerAttached = true;
+    }
+    detachOutsideClickListener() {
+        if (!this.outsideClickListenerAttached)
+            return;
+        document.removeEventListener('click', this.handleOutsideClick);
+        this.outsideClickListenerAttached = false;
+    }
+    /**
+     * Garante que o componente inicie com um modo suportado.
+     */
+    initializeMode() {
+        this.ensureValidMode(this.mode);
+    }
+    /**
+     * Normaliza a coleção de datas desabilitadas na inicialização.
+     */
+    initializeDisabledDates() {
+        this.syncDisabledDates(this.disabledDates);
+    }
+    /**
+     * 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.
+     */
+    syncDisabledDates(value) {
+        this.normalizedDisabledDates = normalizeDatetimePickerDisabledDates(value);
+        if (this.rangeStart !== null && this.isDateDisabled(this.rangeStart)) {
+            this.rangeStart = null;
+        }
+        if (this.rangeEnd !== null && this.isDateDisabled(this.rangeEnd)) {
+            this.rangeEnd = null;
+        }
+        if (this.value !== null && this.isDateDisabled(this.value)) {
+            this.setComponentValue(null);
+        }
+    }
+    /**
+     * Aplica a seleção inicial configurada na prop.
+     */
+    initializeDefaultValue() {
+        if (this.value instanceof Date && !Number.isNaN(this.value.getTime())) {
+            this.referenceDate = toDate(this.value);
+            return;
+        }
+        this.value = null;
+        this.applyInitialMoment(this.initialMoment, false);
+    }
+    /**
+     * Aplica a seleção inicial recebida, com normalização de valores inválidos.
+     *
+     * @param selection - Configuração de seleção inicial.
+     */
+    applyInitialMoment(selection, shouldEmitEvents = true) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const normalizedSelection = normalizeDatetimePickerInitialMoment(selection);
+        if (normalizedSelection === 'now') {
+            const now = toDate(new Date());
+            this.referenceDate = now;
+            this.setComponentValue(now, shouldEmitEvents);
+            return;
+        }
+        if (normalizedSelection === null) {
+            this.rangeStart = null;
+            this.rangeEnd = null;
+            this.setComponentValue(null, shouldEmitEvents);
+            return;
+        }
+        const selectedDate = toDate(normalizedSelection);
+        if (this.isDateDisabled(selectedDate)) {
+            this.setComponentValue(null, shouldEmitEvents);
+            return;
+        }
+        this.referenceDate = selectedDate;
+        this.rangeStart = null;
+        this.rangeEnd = null;
+        this.setComponentValue(selectedDate, shouldEmitEvents);
+    }
+    /** Indica se o estado serializado deve ser interpretado como intervalo. */
+    isRangeRestoreMode() {
+        return this.selectionMode === 'range' && this.mode === DATETIME_PICKER_MODE.DATE;
+    }
+    /** Restaura estado de intervalo a partir do valor serializado do formulário. */
+    restoreRangeStateFromSerialized(serializedState) {
+        const restoredRange = parseDatetimePickerSerializedRange(serializedState);
+        if (restoredRange === null) {
+            this.restoreSelection(null);
+            return;
+        }
+        const { start, end } = restoredRange;
+        this.rangeStart = start;
+        this.rangeEnd = end;
+        this.restoreSelection(end);
+    }
+    /** Restaura estado de seleção única a partir do valor serializado do formulário. */
+    restoreSingleStateFromSerialized(serializedState) {
+        const restoredValue = parseDatetimePickerSerializedValue(serializedState, this.mode, this.referenceDate);
+        if (restoredValue !== null && this.isDateDisabled(restoredValue)) {
+            this.restoreSelection(null);
+            return;
+        }
+        this.restoreSelection(restoredValue);
+    }
+    /** Resolve Date|null a partir de valores aceitos pelos métodos públicos. */
+    parseMethodValue(value, mode) {
+        if (value === null) {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : toDate(value);
+        }
+        return parseDatetimePickerSerializedValue(value, mode, this.referenceDate);
+    }
+    /** Aplica a ponte serializada usando os mesmos parsers já usados por restore de formulário. */
+    restoreSerializedValue(serializedValue) {
+        if (this.isRangeRestoreMode()) {
+            this.restoreRangeStateFromSerialized(serializedValue);
+            return;
+        }
+        this.restoreSingleStateFromSerialized(serializedValue);
+    }
+    /** Atualiza os nomes canônicos sem emitir eventos adicionais ou criar ciclos de watchers. */
+    syncCanonicalValues() {
+        const nextSerializedValue = this.getSerializedValue();
+        const nextValueAsDate = this.cloneDate(this.value);
+        if (this.serializedValue === nextSerializedValue && this.sameDate(this.valueAsDate ?? null, nextValueAsDate))
+            return;
+        this.syncingCanonicalValues = true;
+        this.serializedValue = nextSerializedValue;
+        this.valueAsDate = nextValueAsDate;
+        this.syncingCanonicalValues = false;
+    }
+    /** Retorna o mesmo valor que será submetido pelo ElementInternals. */
+    getSerializedValue() {
+        const zero = (date) => (date === null ? null : set(date, { seconds: 0, milliseconds: 0 }));
+        return (serializeDatetimePickerFormValue(this.value === null ? null : zero(this.value), {
+            mode: this.mode,
+            selectionMode: this.selectionMode,
+            rangeStart: zero(this.rangeStart),
+            rangeEnd: zero(this.rangeEnd),
+            referenceDate: zero(this.referenceDate) ?? this.referenceDate,
+        }) ?? '');
+    }
+    sameDate(left, right) {
+        return left === right || (left !== null && right !== null && left.getTime() === right.getTime());
+    }
+    /** Busca o input nativo interno para ações imperativas de foco. */
+    getNativeInputElement() {
+        return this.el.shadowRoot
+            ?.querySelector('br-datetime-input')
+            ?.shadowRoot?.querySelector('br-input')
+            ?.shadowRoot?.querySelector('input');
+    }
+    /** Atualiza estado interno, FormData e validação com uma única chamada. */
+    setComponentValue(nextValue, shouldEmitPublicEvent = true) {
+        this.value = this.cloneDate(nextValue);
+        this.syncCanonicalValues();
+        if (shouldEmitPublicEvent && this.isInitialized) {
+            this.emitDateStateChange();
+            void this.validate();
+        }
+        this.updateFormInternals();
+    }
+    /** Propaga o estado atual consolidado para consumidores externos do componente raiz. */
+    emitDateStateChange() {
+        const range = this.selectionMode === 'range' && this.mode === DATETIME_PICKER_MODE.DATE
+            ? {
+                start: this.cloneDate(this.rangeStart),
+                end: this.cloneDate(this.rangeEnd),
+            }
+            : undefined;
+        const rangeDates = range !== undefined && range.start !== null && range.end !== null
+            ? this.buildRangeDatesState(range.start, range.end)
+            : undefined;
+        this.dateStateChange.emit({
+            referenceDate: this.cloneDate(this.referenceDate),
+            value: this.cloneDate(this.value),
+            range,
+            rangeDates,
+        });
+        if (range)
+            this.rangeValue = range;
+        this.valueChange.emit(this.cloneDate(this.value));
+        dispatchNativeFormEvent(this.el, 'input');
+        dispatchNativeFormEvent(this.el, 'change');
+    }
+    /** Expande o intervalo completo e marca quais dias estão desabilitados. */
+    buildRangeDatesState(start, end) {
+        const intervalStart = start.getTime() <= end.getTime() ? start : end;
+        const intervalEnd = start.getTime() <= end.getTime() ? end : start;
+        return eachDayOfInterval({
+            start: intervalStart,
+            end: intervalEnd,
+        }).map((date) => ({
+            date: toDate(date),
+            disabled: this.isDateDisabled(date),
+        }));
+    }
+    /** Restaura seleção e data de referência a partir de uma data já validada. */
+    restoreSelection(nextValue) {
+        this.value = this.cloneDate(nextValue);
+        if (this.selectionMode === 'single') {
+            this.rangeStart = null;
+            this.rangeEnd = null;
+        }
+        this.referenceDate = nextValue === null ? toDate(new Date()) : toDate(nextValue);
+        this.syncCanonicalValues();
+        this.updateFormInternals();
+    }
+    /** Atualiza o estado local de intervalo a partir do evento do calendário. */
+    setRangeState(nextRange) {
+        this.rangeStart = this.cloneDate(nextRange?.start ?? null);
+        this.rangeEnd = this.cloneDate(nextRange?.end ?? null);
+    }
+    /** Mantém ElementInternals sincronizado com estado e regras do componente. */
+    updateFormInternals() {
+        this.syncFormValue();
+        this.syncFormValidity();
+    }
+    /** Atualiza o valor submetido no FormData do form-associated custom element. */
+    syncFormValue() {
+        try {
+            const zero = (d) => (d === null ? null : set(d, { seconds: 0, milliseconds: 0 }));
+            const nextValue = this.isDisabled()
+                ? null
+                : serializeDatetimePickerFormValue(this.value === null ? null : zero(this.value), {
+                    mode: this.mode,
+                    selectionMode: this.selectionMode,
+                    rangeStart: zero(this.rangeStart),
+                    rangeEnd: zero(this.rangeEnd),
+                    referenceDate: zero(this.referenceDate) ?? this.referenceDate,
+                });
+            this.elementInternals.setFormValue(nextValue);
+        }
+        catch {
+            // Ambientes de teste podem esconder attachInternals parcialmente.
+        }
+    }
+    /** Espelha a regra de required no mecanismo nativo de validade. */
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: consolida flags nativos relacionados sem esconder a precedência das mensagens.
+    syncFormValidity() {
+        try {
+            const missing = hasDatetimePickerMissingValue({
+                required: this.required,
+                disabled: this.isDisabled(),
+                value: this.value,
+                mode: this.mode,
+                selectionMode: this.selectionMode,
+                rangeStart: this.rangeStart,
+                rangeEnd: this.rangeEnd,
+                referenceDate: this.referenceDate,
+            });
+            const min = this.parseConstraintValue(this.min);
+            const max = this.parseConstraintValue(this.max);
+            const values = this.selectionMode === 'range' ? [this.rangeStart, this.rangeEnd] : [this.value];
+            const rangeUnderflow = min !== null && values.some((value) => value !== null && value.getTime() < min.getTime());
+            const rangeOverflow = max !== null && values.some((value) => value !== null && value.getTime() > max.getTime());
+            const invalidRange = this.selectionMode === 'range' &&
+                this.rangeStart !== null &&
+                this.rangeEnd !== null &&
+                this.rangeStart.getTime() > this.rangeEnd.getTime();
+            const flags = {
+                customError: this.customValidationMessage !== '' || Boolean(this.validatorMessage) || invalidRange,
+                rangeOverflow,
+                rangeUnderflow,
+                valueMissing: missing,
+            };
+            const message = this.customValidationMessage ||
+                this.validatorMessage ||
+                (missing
+                    ? 'Preencha este campo.'
+                    : invalidRange
+                        ? 'A data inicial deve anteceder a data final.'
+                        : rangeUnderflow
+                            ? 'Selecione uma data igual ou posterior ao mínimo.'
+                            : rangeOverflow
+                                ? 'Selecione uma data igual ou anterior ao máximo.'
+                                : '');
+            setFormValidity(this.elementInternals, flags, message, this.getNativeInputElement());
+        }
+        catch {
+            // Ambientes sem ElementInternals completo não devem falhar.
+        }
+    }
+    parseConstraintValue(value) {
+        return value === null ? null : this.parseMethodValue(value, this.mode);
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled);
+    }
+    /** Duplica datas para evitar compartilhamento de referência mutável. */
+    cloneDate(value) {
+        return value === null ? null : toDate(value);
+    }
+    /**
+     * Verifica se a data pertence ao conjunto de dias bloqueados.
+     *
+     * @param date - Data candidata à seleção.
+     * @returns `true` quando o dia estiver desabilitado.
+     */
+    isDateDisabled(date) {
+        return this.normalizedDisabledDates.some((disabledDate) => isSameDay(disabledDate, date));
+    }
+    /**
+     * Corrige valores inválidos para o modo padrão, preservando a consistência do estado refletido.
+     *
+     * @param value - Modo informado pelo consumidor do componente.
+     */
+    ensureValidMode(value) {
+        const normalizedMode = normalizeDatetimePickerMode(value);
+        if (normalizedMode !== value) {
+            this.mode = normalizedMode;
+        }
+    }
+    /**
+     * Resolve a função de renderização associada ao modo atual.
+     *
+     * @returns Função que renderiza o conteúdo interno do picker.
+     */
+    getModeRenderer() {
+        return this.modeRendererMap[this.mode];
+    }
+    /** Retorna o conjunto de classes base aplicadas ao container do componente. */
+    getCssClassMap() {
+        return {
+            'br-datetime-picker': true,
+        };
+    }
+    /**
+     * Agrupa os bindings compartilhados para evitar divergência entre data e horário.
+     */
+    getSharedDateStateBindings() {
+        return {
+            referenceDate: this.referenceDate,
+            value: this.value,
+            selectionMode: this.selectionMode,
+            rangeStart: this.rangeStart,
+            rangeEnd: this.rangeEnd,
+            onDateStateChange: this.handleDateStateChange,
+        };
+    }
+    /** Renderiza o campo de entrada responsável por abrir e sincronizar o picker. */
+    renderInputField() {
+        return (h("br-datetime-input", { referenceDate: this.referenceDate, value: this.value, selectionMode: this.selectionMode, rangeStart: this.rangeStart, rangeEnd: this.rangeEnd, placeholder: this.placeholder, mode: this.mode, disabled: this.isDisabled(), onDateStateChange: this.handleDateStateChange, onTogglePicker: this.handleTogglePicker, exportparts: "container: input-container, input: input-field, icon: input-icon" }));
+    }
+    /** Renderiza apenas o seletor de data. */
+    renderDatePicker() {
+        const effectiveSelectionMode = this.mode === DATETIME_PICKER_MODE.DATE ? this.selectionMode : 'single';
+        return (h("br-date-picker", { ...this.getSharedDateStateBindings(), selectionMode: effectiveSelectionMode, weekStartsOn: this.weekStartsOn, locale: this.locale, disabled: this.isDisabled(), disabledDates: this.normalizedDisabledDates, fixedRowCount: this.fixedRowCount }));
+    }
+    /** Renderiza apenas o seletor de hora. */
+    renderTimePicker() {
+        return h("br-time-picker", { ...this.getSharedDateStateBindings(), disabled: this.isDisabled() });
+    }
+    /**
+     * Renderiza a combinação de data e horário no modo `datetime`.
+     */
+    renderDateTimePicker() {
+        return (h(Fragment, null, this.renderDatePicker(), this.renderDivider(), this.renderTimePicker()));
+    }
+    /** Renderiza o separador visual entre data e hora no modo combinado. */
+    renderDivider() {
+        return h("br-divider", { thickness: "medium", color: "#e6e6e6", "margin-top": "10px", "margin-bottom": "10px" });
+    }
+    /**
+     * Resolve o conteúdo interno conforme o modo atual do componente.
+     */
+    renderPickerContent() {
+        if (!this.isPickerOpen) {
+            return null;
+        }
+        const renderContent = this.getModeRenderer();
+        return h("br-card", { part: "panel" }, renderContent());
+    }
+    /**
+     * Renderização principal do componente.
+     */
+    render() {
+        return (h(Host, { key: '3b5767a6ee82dfd10d095c4c3c4855d75f22bbd4', onKeyDown: this.handlePickerKeydown, "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage ? this.feedbackId : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot ? this.feedbackId : null }, h("div", { key: '7b7c74d3cea1c568d53c5be9d8a687d95472e568', class: this.getCssClassMap(), part: "container" }, this.renderInputField(), this.renderPickerContent()), h("div", { key: '442f9d5e82c126ee9c1527eb26d3bfca7141caf2', id: this.feedbackId, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '830105a39d1e42db3f13d091f88fd7313330dee7', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+    }
+    static get is() { return "br-datetime-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datetime-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datetime-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatetimePickerMode",
+                    "resolved": "\"date\" | \"datetime\" | \"time\"",
+                    "references": {
+                        "DatetimePickerMode": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerMode",
+                            "referenceLocation": "DatetimePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'datetime'"
+                        }],
+                    "text": "Define o modo de sele\u00E7\u00E3o exibido pelo componente: data, hor\u00E1rio ou ambos.\n\nValores aceitos: `date`, `time` ou `datetime`.\nValores inv\u00E1lidos s\u00E3o corrigidos automaticamente para o valor padr\u00E3o,\nmantendo o atributo refletido sempre consistente com o modo exibido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'datetime'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatetimePickerLocale",
+                    "resolved": "string",
+                    "references": {
+                        "DatetimePickerLocale": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerLocale",
+                            "referenceLocation": "DatetimePickerLocale"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'pt-BR'"
+                        }],
+                    "text": "Define o locale usado pelos subcomponentes para formatar datas e r\u00F3tulos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "locale",
+                "defaultValue": "'pt-BR'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "Define o placeholder exibido no campo de entrada do datetime picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do campo para submiss\u00E3o em formul\u00E1rios nativos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o campo deve ter valor antes do envio do formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string | null",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menor data/hor\u00E1rio aceito, interpretado conforme `mode`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "null"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string | null",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maior data/hor\u00E1rio aceito, interpretado conforme `mode`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "null"
+            },
+            "validator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatetimePickerValidator",
+                    "resolved": "(value: Date | DatetimePickerDateRange) => string | Promise<string>",
+                    "references": {
+                        "DatetimePickerValidator": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerValidator",
+                            "referenceLocation": "DatetimePickerValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada \u00E0 data ou intervalo selecionado."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatetimePickerSelectionMode",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {
+                        "DatetimePickerSelectionMode": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerSelectionMode",
+                            "referenceLocation": "DatetimePickerSelectionMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o tipo de sele\u00E7\u00E3o de datas para o calend\u00E1rio: \u00FAnica ou intervalo.\n\n`range` s\u00F3 funciona em conjunto com `mode=\"date\"`.\nSe `selectionMode=\"range\"` for informado, o componente ajusta automaticamente\n`mode` para `date`. Se `mode` mudar para `time` ou `datetime`, o componente\nnormaliza `selectionMode` para `single` quando necess\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selection-mode",
+                "defaultValue": "'single'"
+            },
+            "weekStartsOn": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatetimePickerWeekDayIndex",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "DatetimePickerWeekDayIndex": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerWeekDayIndex",
+                            "referenceLocation": "DatetimePickerWeekDayIndex"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Define o dia inicial da semana exibida no calend\u00E1rio.\n\nValores suportados: 0 (domingo) a 6 (s\u00E1bado)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "week-starts-on",
+                "defaultValue": "0"
+            },
+            "initialMoment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatetimePickerInitialMoment",
+                    "resolved": "Date | string",
+                    "references": {
+                        "DatetimePickerInitialMoment": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerInitialMoment",
+                            "referenceLocation": "DatetimePickerInitialMoment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Define a sele\u00E7\u00E3o inicial do componente.\n\nAceita:\n- `'now'`: seleciona o momento atual.\n- `Date` ou `string`: seleciona uma data arbitr\u00E1ria.\n- `null`: inicia sem sele\u00E7\u00E3o.\n\nReativo em runtime: mudan\u00E7as na prop atualizam estado e subcomponentes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-moment",
+                "defaultValue": "null"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado pelo usu\u00E1rio. Pode ser controlado externamente e \u00E9 atualizado\npelo evento `valueChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "serializedValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Representa\u00E7\u00E3o serializada compat\u00EDvel com os formatos de controles HTML (`YYYY-MM-DD`, `HH:mm`\nou ISO local, conforme `mode`). Em intervalos, usa `in\u00EDcio/fim`.\n\nQuando informada, tem preced\u00EAncia sobre o valor legado `value` durante a inicializa\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "serialized-value"
+            },
+            "valueAsDate": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Espelho tipado da sele\u00E7\u00E3o atual, equivalente ao padr\u00E3o `valueAsDate` dos controles HTML."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "rangeValue": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatetimePickerDateRange",
+                    "resolved": "{ start: Date; end: Date; }",
+                    "references": {
+                        "DatetimePickerDateRange": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDateRange",
+                            "referenceLocation": "DatetimePickerDateRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intervalo controlado quando `selectionMode=\"range\"`."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Desabilita toda a intera\u00E7\u00E3o do componente.\n\nQuando `true`, impede abrir o picker, alterar valores e navegar entre datas/hor\u00E1rios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatetimePickerDisabledDates",
+                    "resolved": "DatetimePickerDisabledDate[] | string",
+                    "references": {
+                        "DatetimePickerDisabledDates": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDisabledDates",
+                            "referenceLocation": "DatetimePickerDisabledDates"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Define um conjunto de datas indispon\u00EDveis para sele\u00E7\u00E3o.\n\nAceita uma lista de `Date` e/ou strings analis\u00E1veis, ou uma string com datas\nseparadas por espa\u00E7o em branco. Datas inv\u00E1lidas s\u00E3o ignoradas com warning.\nA compara\u00E7\u00E3o considera apenas o dia (ano/m\u00EAs/dia), ignorando hora."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-dates",
+                "defaultValue": "null"
+            },
+            "fixedRowCount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Define se o calend\u00E1rio deve manter um n\u00FAmero fixo de linhas (6 semanas = 42 dias)\nou variar conforme o m\u00EAs.\n\nQuando `true`, o calend\u00E1rio sempre exibe 6 semanas completas.\nQuando `false`, o calend\u00E1rio adapta-se ao m\u00EAs, exibindo apenas as semanas necess\u00E1rias."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fixed-row-count",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPickerOpen": {},
+            "formDisabled": {},
+            "hasFeedbackSlot": {},
+            "customValidationMessage": {},
+            "validatorMessage": {},
+            "isValidating": {},
+            "normalizedDisabledDates": {},
+            "rangeEnd": {},
+            "rangeStart": {},
+            "referenceDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateStateChange",
+                "name": "dateStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento p\u00FAblico emitido quando a data de refer\u00EAncia ou a sele\u00E7\u00E3o mudam."
+                },
+                "complexType": {
+                    "original": "DatetimePickerDateState",
+                    "resolved": "{ referenceDate: Date; value: Date; range?: DatetimePickerDateRange; rangeDates?: DatetimePickerRangeDateState[]; }",
+                    "references": {
+                        "DatetimePickerDateState": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDateState",
+                            "referenceLocation": "DatetimePickerDateState"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `input`/`change` e leia `event.target.value`."
+                        }],
+                    "text": "Evento emitido quando o valor selecionado muda."
+                },
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "brDatetimePickerValidationChange",
+                "name": "brDatetimePickerValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao iniciar e concluir a valida\u00E7\u00E3o customizada."
+                },
+                "complexType": {
+                    "original": "FormValidationChangeDetail",
+                    "resolved": "FormValidationChangeDetail",
+                    "references": {
+                        "FormValidationChangeDetail": {
+                            "location": "import",
+                            "path": "../../shared/utils/validator",
+                            "id": "src/shared/utils/validator.ts::FormValidationChangeDetail",
+                            "referenceLocation": "FormValidationChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setDisabledDates": {
+                "complexType": {
+                    "signature": "(dates: DatetimePickerDisabledDate[] | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "dates",
+                            "type": "DatetimePickerDisabledDate[]",
+                            "docs": "- Lista de datas (Date|string) a bloquear."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DatetimePickerDisabledDate": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDisabledDate",
+                            "referenceLocation": "DatetimePickerDisabledDate"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define programaticamente as datas desabilitadas por meio de array.\n\n\u00DAtil quando o componente \u00E9 usado via HTML e o consumidor precisa enviar\numa lista tipada em runtime.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "dates - Lista de datas (Date|string) a bloquear."
+                        }]
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: Date | string | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o valor atual de forma imperativa aceitando Date, string serializada ou null.",
+                    "tags": []
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<Date | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<Date>"
+                },
+                "docs": {
+                    "text": "Retorna uma c\u00F3pia do valor selecionado atualmente.",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Limpa valor e intervalo selecionados.",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre o picker quando o componente estiver habilitado.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha o picker.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Alterna o estado de abertura do picker.",
+                    "tags": []
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Move o foco para o input nativo interno.",
+                    "tags": []
+                }
+            },
+            "setRange": {
+                "complexType": {
+                    "signature": "(start: Date | string | null, end: Date | string | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "start",
+                            "type": "string | Date",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "string | Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define intervalo de datas de forma imperativa, for\u00E7ando modo date e selectionMode range.",
+                    "tags": []
+                }
+            },
+            "getRange": {
+                "complexType": {
+                    "signature": "() => Promise<{ start: Date | null; end: Date | null; } | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<{ start: Date; end: Date; }>"
+                },
+                "docs": {
+                    "text": "Retorna o intervalo de datas selecionado quando em modo `selectionMode=\"range\"`.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Objeto com datas `start` e `end`, ou `null` se n\u00E3o estiver em modo range."
+                        }]
+                }
+            },
+            "isOpen": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Consulta se o picker est\u00E1 atualmente aberto.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "`true` se o picker est\u00E1 vis\u00EDvel, `false` caso contr\u00E1rio."
+                        }]
+                }
+            },
+            "resetToInitial": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Restaura o estado inicial atualmente registrado para reset.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Permite que consumidores acionem valida\u00E7\u00E3o nativa do formul\u00E1rio via host.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Permite exibir mensagens nativas de valida\u00E7\u00E3o no host.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define ou limpa uma mensagem de validade customizada.",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        },
+                        "DatetimePickerDateRange": {
+                            "location": "import",
+                            "path": "./datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::DatetimePickerDateRange",
+                            "referenceLocation": "DatetimePickerDateRange"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Executa o validator do picker e retorna se a sele\u00E7\u00E3o atual \u00E9 v\u00E1lida.",
+                    "tags": []
+                }
+            },
+            "getValidationState": {
+                "complexType": {
+                    "signature": "() => Promise<FormValidationState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormValidationState": {
+                            "location": "import",
+                            "path": "../../shared/utils/form",
+                            "id": "src/shared/utils/form.ts::FormValidationState",
+                            "referenceLocation": "FormValidationState"
+                        }
+                    },
+                    "return": "Promise<FormValidationState>"
+                },
+                "docs": {
+                    "text": "Retorna um snapshot serializ\u00E1vel da Constraint Validation API.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredChange"
+            }, {
+                "propName": "min",
+                "methodName": "handleConstraintChange"
+            }, {
+                "propName": "max",
+                "methodName": "handleConstraintChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "selectionMode",
+                "methodName": "handleSelectionModeChange"
+            }, {
+                "propName": "weekStartsOn",
+                "methodName": "handleWeekStartsOnChange"
+            }, {
+                "propName": "initialMoment",
+                "methodName": "handleInitialMomentChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "serializedValue",
+                "methodName": "handleSerializedValueChange"
+            }, {
+                "propName": "valueAsDate",
+                "methodName": "handleValueAsDateChange"
+            }, {
+                "propName": "isPickerOpen",
+                "methodName": "handlePickerOpenChange"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "handleDisabledDatesChange"
+            }, {
+                "propName": "rangeValue",
+                "methodName": "handleRangeValueChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+let datetimePickerId = 0;