@govbr-ds/webcomponents 2.1.0 → 2.1.1

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

@@ -0,0 +1,913 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { addDays } from "date-fns/addDays";
+import { addMonths } from "date-fns/addMonths";
+import { compareAsc } from "date-fns/compareAsc";
+import { eachDayOfInterval } from "date-fns/eachDayOfInterval";
+import { endOfMonth } from "date-fns/endOfMonth";
+import { endOfWeek } from "date-fns/endOfWeek";
+import { format } from "date-fns/format";
+import { isAfter } from "date-fns/isAfter";
+import { isBefore } from "date-fns/isBefore";
+import { isSameDay } from "date-fns/isSameDay";
+import { isSameMonth } from "date-fns/isSameMonth";
+import { parse } from "date-fns/parse";
+import { set } from "date-fns/set";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfWeek } from "date-fns/startOfWeek";
+import { subMonths } from "date-fns/subMonths";
+import { toDate } from "date-fns/toDate";
+import { dispatchNativeFormEvent } from "../../../shared/utils/event";
+import { resolveSsrLocalDate } from "../../../shared/utils/ssr-date";
+import { DATETIME_PICKER_LOCALE, NAVIGATION_ACTION } from "../datetime-picker-constants";
+import { getMonthLabels, getWeekdayLabels, resolveDateFnsLocale } from "./date-picker-locale";
+import { normalizeLocale, normalizeWeekStartsOn } from "./date-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/date-picker?tab=designer).
+ *
+ * @part container - Parte para o container base do calendário.
+ * @part header - Cabeçalho do calendário (contendo navegação e seleção de mês/ano).
+ * @part month-select - Elemento de seleção do mês.
+ * @part year-input - Elemento de entrada do ano.
+ * @part calendar - Grade geral do calendário.
+ * @part weekdays - Container para os rótulos dos dias da semana.
+ * @part weekday - Rótulo individual do dia da semana.
+ * @part grid - Grade de dias do mês.
+ * @part day - Célula individual do dia no calendário.
+ */
+export class DatePicker {
+    constructor() {
+        /** Data com foco atual na navegação por teclado do calendário. */
+        this.focusedDate = new Date();
+        /** Define o índice do dia em que a semana começa na interface do calendário. */
+        this.weekStartsOn = 0;
+        /** Data usada como base visual para o mês atualmente exibido. */
+        this.referenceDate = new Date();
+        /** Data atualmente selecionada pelo usuário, ou `null` quando não há seleção. */
+        this.value = null;
+        /** Define se a seleção ocorre por data única ou por intervalo. */
+        this.selectionMode = 'single';
+        /** Data inicial selecionada quando o calendário opera no modo de intervalo. */
+        this.rangeStart = null;
+        /** Data final selecionada quando o calendário opera no modo de intervalo. */
+        this.rangeEnd = null;
+        /** Desabilita a interação do calendário quando ativo. */
+        this.disabled = false;
+        /** Lista de datas indisponíveis para seleção no calendário. */
+        this.disabledDates = [];
+        /** Locale usado para gerar nomes de meses e dias da semana. */
+        this.locale = DATETIME_PICKER_LOCALE.DEFAULT;
+        /**
+         * 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;
+        /** Sinaliza ao componentDidRender que deve mover o foco para a célula atual. */
+        this.shouldFocusDate = false;
+        /** Mantém handlers estáveis por data para evitar recriação a cada renderização. */
+        this.dayClickHandlers = new WeakMap();
+        /**
+         * Atualiza o mês exibido a partir da seleção do usuário.
+         *
+         * @param event - Mudança do `<select>` de mês.
+         */
+        this.handleMonthChange = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            const select = event.currentTarget;
+            const monthIndex = Number(select.value);
+            if (Number.isNaN(monthIndex) || monthIndex < 0 || monthIndex > 11) {
+                console.warn(`Índice de mês inválido selecionado: ${select.value}`);
+                return;
+            }
+            const date = set(this.baseDate, { month: monthIndex, date: 1 });
+            this.emitDateStateChange(date);
+        };
+        /**
+         * Executa a ação de navegação associada ao botão clicado.
+         *
+         * @param event - Clique no botão de navegação.
+         */
+        this.handleNavigationClick = (event) => {
+            const action = event.currentTarget.dataset.action;
+            if (action === undefined) {
+                console.warn('Botão de navegação clicado sem data-action definido');
+                return;
+            }
+            switch (action) {
+                case NAVIGATION_ACTION.PREVIOUS_MONTH:
+                    this.decreaseMonth();
+                    break;
+                case NAVIGATION_ACTION.NEXT_MONTH:
+                    this.increaseMonth();
+                    break;
+                default:
+                    console.warn(`Ação de navegação desconhecida: ${action}`);
+            }
+        };
+        /**
+         * Atualiza o ano exibido a partir do valor digitado.
+         *
+         * @param event - Mudança do campo de ano.
+         */
+        this.handleYearChange = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            const input = event.currentTarget;
+            const year = Number(input.value);
+            if (Number.isNaN(year) || year < 1 || year > 9999) {
+                console.warn(`Ano inválido digitado: ${input.value}`);
+                return;
+            }
+            const date = set(this.baseDate, { year, month: this.baseDate.getMonth(), date: 1 });
+            const range = this.selectionMode === 'range' && this.rangeStart !== null && this.rangeEnd !== null
+                ? { start: this.rangeStart, end: this.rangeEnd }
+                : undefined;
+            this.emitDateStateChange(date, this.value, range);
+        };
+        /**
+         * Gerencia a navegação por teclado dentro da grade de dias.
+         *
+         * Teclas suportadas:
+         * - `ArrowLeft` / `ArrowRight`: avança ou recua um dia.
+         * - `ArrowUp` / `ArrowDown`: avança ou recua sete dias (linha inteira).
+         * - `PageUp` / `PageDown`: navega entre meses.
+         * - `Home` / `End`: primeiro ou último dia da semana atual.
+         * - `Enter` / `Space`: seleciona o dia com foco.
+         *
+         * @param event - Evento de teclado disparado na grade.
+         */
+        this.handleGridKeydown = (event) => {
+            const HANDLED_KEYS = [
+                'ArrowLeft',
+                'ArrowRight',
+                'ArrowUp',
+                'ArrowDown',
+                'PageUp',
+                'PageDown',
+                'Home',
+                'End',
+                'Enter',
+                ' ',
+            ];
+            if (!HANDLED_KEYS.includes(event.key))
+                return;
+            const target = event.target;
+            const dateKey = target.dataset?.date;
+            if (dateKey === undefined)
+                return;
+            event.preventDefault();
+            const current = parse(dateKey, 'yyyy-MM-dd', new Date());
+            if (event.key === 'Enter' || event.key === ' ') {
+                if (!this.isDateDisabled(current)) {
+                    this.handleDayClick(current);
+                }
+                return;
+            }
+            let next;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    next = addDays(current, -1);
+                    break;
+                case 'ArrowRight':
+                    next = addDays(current, 1);
+                    break;
+                case 'ArrowUp':
+                    next = addDays(current, -7);
+                    break;
+                case 'ArrowDown':
+                    next = addDays(current, 7);
+                    break;
+                case 'PageUp':
+                    next = addMonths(current, -1);
+                    break;
+                case 'PageDown':
+                    next = addMonths(current, 1);
+                    break;
+                case 'Home':
+                    next = startOfWeek(current, { weekStartsOn: this.weekStartsOn });
+                    break;
+                case 'End':
+                    next = endOfWeek(current, { weekStartsOn: this.weekStartsOn });
+                    break;
+                default:
+                    return;
+            }
+            this.moveFocusTo(next);
+        };
+    }
+    handleRangeValueChange(newValue) {
+        if (!newValue)
+            return;
+        this.rangeStart = newValue.start;
+        this.rangeEnd = newValue.end;
+    }
+    /**
+     * Sincroniza `focusedDate` quando o valor selecionado muda externamente.
+     *
+     * @param newValue - Novo valor recebido via prop.
+     */
+    handleValueChange(newValue) {
+        if (newValue !== null) {
+            this.focusedDate = toDate(newValue);
+        }
+    }
+    /**
+     * Revalida a configuração quando o início da semana muda.
+     *
+     * @param newValue - Novo valor recebido via prop.
+     */
+    handleWeekStartsOnChange(newValue) {
+        this.ensureValidWeekStartsOn(newValue);
+    }
+    /**
+     * Revalida o locale quando a prop muda.
+     *
+     * @param newValue - Novo valor recebido via prop.
+     */
+    handleLocaleChange(newValue) {
+        this.ensureValidLocale(newValue);
+    }
+    /**
+     * Normaliza os valores públicos antes da primeira renderização.
+     */
+    componentWillLoad() {
+        this.referenceDate = resolveSsrLocalDate(this.el, this.referenceDate);
+        this.ensureValidWeekStartsOn();
+        this.ensureValidLocale();
+        this.focusedDate = toDate(this.value ?? this.referenceDate);
+    }
+    /**
+     * Move o foco para a célula correspondente ao `focusedDate` após re-renderização.
+     */
+    componentDidRender() {
+        if (!this.shouldFocusDate)
+            return;
+        this.shouldFocusDate = false;
+        const normalizedDate = this.getNormalizedFocusedDate();
+        const dateKey = format(normalizedDate, 'yyyy-MM-dd');
+        const cell = this.el.shadowRoot?.querySelector(`[data-date="${dateKey}"]`);
+        cell?.focus();
+    }
+    /**
+     * Garante que o valor de `weekStartsOn` esteja dentro do domínio suportado.
+     *
+     * @param value - Valor bruto informado pelo consumidor.
+     */
+    ensureValidWeekStartsOn(value = this.weekStartsOn) {
+        const normalizedWeekStartsOn = normalizeWeekStartsOn(value);
+        if (normalizedWeekStartsOn !== value) {
+            this.weekStartsOn = normalizedWeekStartsOn;
+        }
+    }
+    /**
+     * Garante que o locale informado seja suportado.
+     *
+     * @param value - Valor bruto informado pelo consumidor.
+     */
+    ensureValidLocale(value = this.locale) {
+        const normalizedLocale = normalizeLocale(value);
+        if (normalizedLocale !== value) {
+            this.locale = normalizedLocale;
+        }
+    }
+    /**
+     * Emite o estado consolidado do componente para manter a navegação sincronizada.
+     *
+     * @param nextReferenceDate - Nova data de referência após a interação.
+     * @param nextValue - Valor selecionado final; por padrão, mantém a seleção atual.
+     */
+    emitDateStateChange(nextReferenceDate, nextValue = this.value, nextRange = undefined) {
+        // Garantir segundos zerados (componente não manipula segundos)
+        const normalizedReference = set(nextReferenceDate, { seconds: 0, milliseconds: 0 });
+        const normalizedValue = nextValue === null ? null : set(nextValue, { seconds: 0, milliseconds: 0 });
+        const valueChanged = this.value?.getTime() !== normalizedValue?.getTime();
+        this.value = normalizedValue;
+        this.dateStateChange.emit({
+            referenceDate: normalizedReference,
+            value: normalizedValue,
+            range: nextRange,
+        });
+        if (nextRange)
+            this.rangeValue = nextRange;
+        if (valueChanged || nextRange !== undefined) {
+            dispatchNativeFormEvent(this.el, 'input');
+            dispatchNativeFormEvent(this.el, 'change');
+        }
+    }
+    /**
+     * Resolve o ícone usado em cada ação de navegação.
+     *
+     * @param action - Ação de navegação representada pelo botão.
+     * @returns Nome do ícone ou um fallback quando a ação não é reconhecida.
+     */
+    getIconForAction(action) {
+        switch (action) {
+            case NAVIGATION_ACTION.PREVIOUS_MONTH:
+                return 'fa6-solid:chevron-left';
+            case NAVIGATION_ACTION.NEXT_MONTH:
+                return 'fa6-solid:chevron-right';
+            default:
+                return 'fa6-solid:question';
+        }
+    }
+    /**
+     * Aplica a data clicada preservando hora e minuto da referência atual.
+     *
+     * @param date - Dia selecionado no calendário.
+     */
+    handleDayClick(date) {
+        if (this.disabled || this.isDateDisabled(date)) {
+            return;
+        }
+        const newDate = set(date, {
+            hours: this.referenceDate.getHours(),
+            minutes: this.referenceDate.getMinutes(),
+            seconds: 0,
+            milliseconds: 0,
+        });
+        if (this.selectionMode === 'range') {
+            this.handleRangeDayClick(newDate);
+            return;
+        }
+        this.emitDateStateChange(newDate, newDate);
+    }
+    /** Atualiza o intervalo selecionado com base no clique atual. */
+    handleRangeDayClick(clickedDate) {
+        const start = this.rangeStart;
+        const end = this.rangeEnd;
+        if (start === null || end !== null) {
+            this.emitDateStateChange(clickedDate, clickedDate, {
+                start: clickedDate,
+                end: null,
+            });
+            return;
+        }
+        const [normalizedStart, normalizedEnd] = this.normalizeRangeBounds(start, clickedDate);
+        this.emitDateStateChange(clickedDate, normalizedEnd, {
+            start: normalizedStart,
+            end: normalizedEnd,
+        });
+    }
+    /** Decrementa o mês mantendo o primeiro dia do mês exibido e preservando a seleção de range. */
+    decreaseMonth() {
+        if (this.disabled) {
+            return;
+        }
+        const date = set(subMonths(this.baseDate, 1), { date: 1 });
+        const range = this.selectionMode === 'range' && this.rangeStart !== null && this.rangeEnd !== null
+            ? { start: this.rangeStart, end: this.rangeEnd }
+            : undefined;
+        this.emitDateStateChange(date, this.value, range);
+    }
+    /** Incrementa o mês mantendo o primeiro dia do mês exibido e preservando a seleção de range. */
+    increaseMonth() {
+        if (this.disabled) {
+            return;
+        }
+        const date = set(addMonths(this.baseDate, 1), { date: 1 });
+        const range = this.selectionMode === 'range' && this.rangeStart !== null && this.rangeEnd !== null
+            ? { start: this.rangeStart, end: this.rangeEnd }
+            : undefined;
+        this.emitDateStateChange(date, this.value, range);
+    }
+    /** Indica se um dia está indisponível para seleção. */
+    isDateDisabled(date) {
+        return this.disabledDates.some((disabledDate) => isSameDay(disabledDate, date));
+    }
+    /** Data base usada para todos os cálculos de calendário. */
+    get baseDate() {
+        return this.referenceDate;
+    }
+    /**
+     * Recupera um handler estável para a célula do dia informado.
+     *
+     * @param date - Dia representado pela célula.
+     * @returns Função de clique reutilizável.
+     */
+    getDayClickHandler(date) {
+        let handler = this.dayClickHandlers.get(date);
+        if (handler === undefined) {
+            handler = () => this.handleDayClick(date);
+            this.dayClickHandlers.set(date, handler);
+        }
+        return handler;
+    }
+    /** Formata o dia exibido com zero à esquerda. */
+    getDayWithLeadingZero(date) {
+        return format(date, 'dd');
+    }
+    /**
+     * Constrói o rótulo acessível completo da célula de dia.
+     *
+     * @param date - Dia representado pela célula.
+     * @returns Texto anunciado pelo leitor de tela, incluindo estado de seleção.
+     */
+    getDayCellAriaLabel(date) {
+        const fullDate = format(date, "d 'de' MMMM 'de' yyyy", { locale: this.dateFnsLocale });
+        const isSelected = this.selectionMode === 'single' && this.value !== null && isSameDay(date, this.value);
+        const isRangeStart = this.selectionMode === 'range' && this.rangeStart !== null && isSameDay(date, this.rangeStart);
+        const isRangeEnd = this.selectionMode === 'range' && this.rangeEnd !== null && isSameDay(date, this.rangeEnd);
+        const isBetween = this.selectionMode === 'range' &&
+            this.rangeStart !== null &&
+            this.rangeEnd !== null &&
+            this.isDateBetweenRange(date, this.rangeStart, this.rangeEnd);
+        if (isSelected)
+            return `${fullDate}, selecionado`;
+        if (isRangeStart)
+            return `${fullDate}, início do intervalo`;
+        if (isRangeEnd)
+            return `${fullDate}, fim do intervalo`;
+        if (isBetween)
+            return `${fullDate}, no intervalo selecionado`;
+        return fullDate;
+    }
+    /** Locale do date-fns derivado da prop pública do componente. */
+    get dateFnsLocale() {
+        return resolveDateFnsLocale(this.locale);
+    }
+    /**
+     * Calcula as classes CSS da célula do dia com base em seleção, mês e data atual.
+     *
+     * @param date - Dia da grade do calendário.
+     */
+    getDayCssClasses(date) {
+        const selected = this.value;
+        const rangeStart = this.rangeStart;
+        const rangeEnd = this.rangeEnd;
+        const hasRange = rangeStart !== null && rangeEnd !== null;
+        const isRangeStart = rangeStart !== null && isSameDay(date, rangeStart);
+        const isRangeEnd = rangeEnd !== null && isSameDay(date, rangeEnd);
+        const isBetweenRange = hasRange && this.isDateBetweenRange(date, rangeStart, rangeEnd);
+        return {
+            day: true,
+            'outside-month': !isSameMonth(date, this.baseDate),
+            today: isSameDay(date, toDate(new Date())),
+            selected: this.selectionMode === 'single' && selected !== null && isSameDay(date, selected),
+            'range-start': this.selectionMode === 'range' && isRangeStart,
+            'range-end': this.selectionMode === 'range' && isRangeEnd,
+            'in-range': this.selectionMode === 'range' && isBetweenRange,
+        };
+    }
+    /** Normaliza os limites do intervalo para garantir ordem cronológica. */
+    normalizeRangeBounds(start, end) {
+        return compareAsc(start, end) <= 0 ? [start, end] : [end, start];
+    }
+    /** Verifica se uma data está estritamente entre início e fim do intervalo. */
+    isDateBetweenRange(date, start, end) {
+        return isAfter(date, start) && isBefore(date, end);
+    }
+    /** Gera a sequência completa de dias visíveis na grade do mês. */
+    getMonthViewDates() {
+        const start = startOfWeek(startOfMonth(this.baseDate), { weekStartsOn: this.weekStartsOn });
+        let end = endOfWeek(endOfMonth(this.baseDate), { weekStartsOn: this.weekStartsOn });
+        // Se fixedRowCount está ativo, garante sempre 6 semanas (42 dias)
+        if (this.fixedRowCount) {
+            // Calcula o número de semanas que seriam normalmente geradas
+            const normalizedDates = eachDayOfInterval({ start, end });
+            const currentWeekCount = Math.ceil(normalizedDates.length / 7);
+            const targetWeekCount = 6;
+            // Se não houver 6 semanas, estende o final para alcançar 42 dias
+            if (currentWeekCount < targetWeekCount) {
+                const daysToAdd = (targetWeekCount - currentWeekCount) * 7;
+                end = addDays(end, daysToAdd);
+            }
+        }
+        return eachDayOfInterval({ start, end });
+    }
+    /**
+     * Retorna o `focusedDate` normalizado para estar sempre dentro da grade visível.
+     *
+     * Se `focusedDate` não estiver visível no mês atual, retorna o primeiro dia
+     * da grade do mês para garantir que sempre haja um elemento com `tabIndex={0}`.
+     *
+     * @returns Data focada normalizada ou primeiro dia da grade.
+     */
+    getNormalizedFocusedDate() {
+        const visibleDates = this.getMonthViewDates();
+        const isInCurrentMonth = visibleDates.some((d) => isSameDay(d, this.focusedDate));
+        if (isInCurrentMonth) {
+            return this.focusedDate;
+        }
+        return visibleDates[0] ?? this.focusedDate;
+    }
+    /**
+     * Constrói o rótulo acessível dos botões de navegação do mês.
+     *
+     * @param action - Ação associada ao botão.
+     * @returns Texto acessível exibido para leitores de tela.
+     */
+    getNavigationAriaLabel(action) {
+        switch (action) {
+            case NAVIGATION_ACTION.PREVIOUS_MONTH:
+                return `Ir para o mês anterior, ${format(addMonths(this.referenceDate, -1), 'MMMM', { locale: this.dateFnsLocale })}`;
+            case NAVIGATION_ACTION.NEXT_MONTH:
+                return `Ir para o próximo mês, ${format(addMonths(this.referenceDate, 1), 'MMMM', { locale: this.dateFnsLocale })}`;
+            default:
+                return 'Navegar';
+        }
+    }
+    /** Retorna os rótulos das semanas conforme locale e início da semana. */
+    getWeekdayLabels() {
+        return getWeekdayLabels(this.locale, this.weekStartsOn);
+    }
+    /** Retorna os rótulos dos meses no locale atual. */
+    getMonthLabels() {
+        return getMonthLabels(this.locale);
+    }
+    /**
+     * Renderiza um botão consistente de navegação do calendário.
+     *
+     * @param action - Ação executada pelo botão.
+     */
+    renderNavigationButton(action) {
+        return (h("br-button", { emphasis: "tertiary", density: "small", shape: "circle", disabled: this.disabled, "data-action": action, "aria-label": this.getNavigationAriaLabel(action), onClick: this.handleNavigationClick }, h("br-icon", { iconName: this.getIconForAction(action), width: "20", height: "20", "aria-hidden": "true" })));
+    }
+    /** Renderiza o cabeçalho do calendário com navegação, mês e ano. */
+    renderCalendarHeader() {
+        return (h("div", { class: "header", part: "header" }, this.renderNavigationButton(NAVIGATION_ACTION.PREVIOUS_MONTH), this.renderMonthSelection(), this.renderYearSelection(), this.renderNavigationButton(NAVIGATION_ACTION.NEXT_MONTH)));
+    }
+    /** Renderiza a seleção de mês com label acessível. */
+    renderMonthSelection() {
+        return (h("label", { class: "month-selection" }, h("span", { class: "visually-hidden" }, "Selecionar m\u00EAs"), h("select", { onChange: this.handleMonthChange, "aria-label": "Selecionar m\u00EAs", disabled: this.disabled, part: "month-select" }, this.getMonthLabels().map(this.renderMonthOption, this))));
+    }
+    /** Renderiza o campo de ano com label acessível. */
+    renderYearSelection() {
+        return (h("label", { class: "year-selection" }, h("span", { class: "visually-hidden" }, "Selecionar ano"), h("input", { type: "number", value: this.referenceDate.getFullYear(), onChange: this.handleYearChange, "aria-label": "Selecionar ano", disabled: this.disabled, part: "year-input" })));
+    }
+    /** Renderiza uma opção do seletor de meses. */
+    renderMonthOption(month, index) {
+        return (h("option", { key: `month-${index}`, value: index, selected: index === this.referenceDate.getMonth() }, month));
+    }
+    /** Renderiza a estrutura principal do calendário. */
+    renderCalendar() {
+        const monthLabel = format(this.baseDate, "MMMM 'de' yyyy", { locale: this.dateFnsLocale });
+        return (h("div", { class: "calendar", role: "grid", "aria-label": `Calendário de ${monthLabel}`, part: "calendar" }, this.renderWeekdays(), this.renderMonthGrid()));
+    }
+    /** Renderiza a linha de rótulos dos dias da semana. */
+    renderWeekdays() {
+        const labels = this.getWeekdayLabels();
+        return (h("div", { class: "weekdays", role: "row", tabIndex: -1, part: "weekdays" }, labels.map((label, index) => (h("div", { key: `weekday-${index}`, class: "weekday", role: "columnheader", tabIndex: -1, "aria-label": label, part: "weekday" }, label)))));
+    }
+    /** Renderiza a grade com os dias do mês atual. */
+    renderMonthGrid() {
+        const dates = this.getMonthViewDates();
+        const weeks = Array.from({ length: Math.ceil(dates.length / 7) }, (_, index) => dates.slice(index * 7, index * 7 + 7));
+        return (h("div", { class: "monthdays", role: "rowgroup", onKeyDown: this.handleGridKeydown, part: "grid" }, weeks.map((week) => (h("div", { key: `week-${format(week[0], 'yyyy-MM-dd')}`, class: "week", role: "row", tabIndex: -1 }, week.map(this.renderDayCell, this))))));
+    }
+    /**
+     * Move o foco de teclado para a data informada, navegando de mês quando necessário.
+     *
+     * @param date - Data de destino do foco.
+     */
+    moveFocusTo(date) {
+        this.focusedDate = date;
+        this.shouldFocusDate = true;
+        if (!isSameMonth(date, this.baseDate)) {
+            this.emitDateStateChange(date, this.value);
+        }
+    }
+    /** Renderiza uma célula de dia com estado visual apropriado. */
+    renderDayCell(date) {
+        const disabled = this.disabled || this.isDateDisabled(date);
+        const isSelected = this.selectionMode === 'single' && this.value !== null && isSameDay(date, this.value);
+        const isRangeStart = this.selectionMode === 'range' && this.rangeStart !== null && isSameDay(date, this.rangeStart);
+        const isRangeEnd = this.selectionMode === 'range' && this.rangeEnd !== null && isSameDay(date, this.rangeEnd);
+        const isActiveDay = isSelected || isRangeStart || isRangeEnd;
+        const isFocused = isSameDay(date, this.getNormalizedFocusedDate());
+        return (h("div", { key: format(date, 'yyyy-MM-dd'), role: "gridcell", tabIndex: this.disabled ? undefined : isFocused ? 0 : -1, "data-date": format(date, 'yyyy-MM-dd'), class: { ...this.getDayCssClasses(date), disabled }, onClick: disabled ? undefined : this.getDayClickHandler(date), onKeyDown: disabled ? undefined : this.handleGridKeydown, "aria-label": this.getDayCellAriaLabel(date), "aria-selected": isActiveDay ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, part: "day" }, this.getDayWithLeadingZero(date)));
+    }
+    render() {
+        return (h(Host, { key: 'b2bba9b38a0b935e0599348dbb8492a7bb3fa7ac' }, h("div", { key: '101d12846aa77d98e3a926bd43a1cdbc779de202', class: "br-date-picker", part: "container" }, this.renderCalendarHeader(), this.renderCalendar())));
+    }
+    static get is() { return "br-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "weekStartsOn": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "WeekDayIndex",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "WeekDayIndex": {
+                            "location": "import",
+                            "path": "../datetime-picker.types",
+                            "id": "src/components/datetime-picker/datetime-picker.types.ts::WeekDayIndex",
+                            "referenceLocation": "WeekDayIndex"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o \u00EDndice do dia em que a semana come\u00E7a na interface do calend\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "week-starts-on",
+                "defaultValue": "0"
+            },
+            "referenceDate": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data usada como base visual para o m\u00EAs atualmente exibido."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new Date()"
+            },
+            "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": "Data atualmente selecionada pelo usu\u00E1rio, ou `null` quando n\u00E3o h\u00E1 sele\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "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 se a sele\u00E7\u00E3o ocorre por data \u00FAnica ou por intervalo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selection-mode",
+                "defaultValue": "'single'"
+            },
+            "rangeStart": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data inicial selecionada quando o calend\u00E1rio opera no modo de intervalo."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "rangeEnd": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data final selecionada quando o calend\u00E1rio opera no modo de intervalo."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "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 no modo `range`."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita a intera\u00E7\u00E3o do calend\u00E1rio quando ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date[]",
+                    "resolved": "Date[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de datas indispon\u00EDveis para sele\u00E7\u00E3o no calend\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale usado para gerar nomes de meses e dias da semana."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "locale",
+                "defaultValue": "'pt-BR'"
+            },
+            "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 {
+            "focusedDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateStateChange",
+                "name": "dateStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento 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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "rangeValue",
+                "methodName": "handleRangeValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "weekStartsOn",
+                "methodName": "handleWeekStartsOnChange"
+            }, {
+                "propName": "locale",
+                "methodName": "handleLocaleChange"
+            }];
+    }
+}