@seniorsistemas/angular-components 19.9.8 → 19.9.9

package/fesm2022/seniorsistemas-angular-components-datepicker.mjs

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { LiveAnnouncer, CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -150,6 +150,13 @@ class DateSegmentEngine {
         const segment = this.segments[this.activeIndex];
         return isEditableSegment(segment) ? segment.kind : null;
     }
+    /** Texto bruto (sem padding de sublinhado) do segmento ativo — usado pelo anúncio de acessibilidade. */
+    getActiveSegmentText() {
+        if (this.activeIndex === null)
+            return null;
+        const segment = this.segments[this.activeIndex];
+        return isEditableSegment(segment) ? segment.text : null;
+    }
     selectSegmentAt(charIndex) {
         let acc = 0;
         for (let i = 0; i < this.segments.length; i++) {
@@ -262,7 +269,11 @@ class DateSegmentEngine {
         this.activeIndex = this.getFirstEditableIndex();
         this.freshEntry = true;
     }
-    /** Incrementa/decrementa o segmento ativo, dando a volta (wrap) dentro do range válido. */
+    /**
+     * Incrementa/decrementa o segmento ativo, dando a volta (wrap) dentro do range válido.
+     * Exceção: ano vazio sempre pousa no ano atual do sistema na primeira seta (up ou down),
+     * em vez de 0000/9999 — só passa a incrementar/decrementar a partir da segunda seta.
+     */
     incrementActiveSegment(delta) {
         if (this.activeIndex === null)
             return;
@@ -273,6 +284,12 @@ class DateSegmentEngine {
             this.setAmPm(segment.text === 'PM' ? 0 : 1);
             return;
         }
+        if (segment.kind === 'year' && !segment.text) {
+            segment.text = String(new Date().getFullYear()).padStart(segment.length, '0');
+            this.freshEntry = true;
+            this.reconcileDayIfNeeded(segment.kind);
+            return;
+        }
         const { min, max } = this.boundsFor(segment.kind);
         const range = max - min + 1;
         const current = segment.text ? parseInt(segment.text, 10) : delta > 0 ? min - 1 : min;
@@ -704,12 +721,20 @@ class DatepickerComponent {
     hostElement = inject(ElementRef);
     translateService = inject(TranslateService);
     destroyRef = inject(DestroyRef);
+    liveAnnouncer = inject(LiveAnnouncer);
     currentLang = signal(this.translateService.currentLang);
     /** Reflete `(pointer: coarse)` — dispositivos touch preferem o popup do calendário ao teclado. */
     isTouchDevice = signal(typeof window !== 'undefined' && typeof window.matchMedia === 'function'
         ? window.matchMedia('(pointer: coarse)').matches
         : false);
     segmentEngine = new DateSegmentEngine();
+    /** Elemento que tinha foco antes do painel abrir — ver `captureFocusOrigin`/`closePanel`. */
+    elementToRestoreFocusTo = null;
+    /** `true` só durante o `.focus()` programático de restauração em `closePanel()` — evita que
+     *  `handleInputFocus` interprete esse foco como um foco genuíno do usuário e reabra o painel
+     *  na hora via `showOnFocus` (ex.: selecionar uma data devolve o foco pro input, que senão
+     *  reabriria o painel imediatamente depois de fechá-lo). */
+    isRestoringFocusOnClose = false;
     lastSegmentConfig = null;
     measureCanvas;
     /** Incrementado a cada mutação do usuário — invalida callbacks de clique/foco adiados que ficaram obsoletos. */
@@ -744,6 +769,15 @@ class DatepickerComponent {
         const translated = this.resolveTranslatedOrDefault('platform.angular_components.hour_format', '24');
         return translated === '12' ? '12' : '24';
     });
+    static SEGMENT_LABEL_KEYS = {
+        day: 'platform.angular_components.datepicker_segment_day',
+        month: 'platform.angular_components.datepicker_segment_month',
+        year: 'platform.angular_components.datepicker_segment_year',
+        hour: 'platform.angular_components.datepicker_hour',
+        minute: 'platform.angular_components.datepicker_minute',
+        second: 'platform.angular_components.datepicker_second',
+        ampm: 'platform.angular_components.datepicker_segment_ampm',
+    };
     /** Modos cujo formato de exibição é resolvido pela engine de segmentos (independente de touch/readonly). */
     isSegmentModeCandidate = computed(() => {
         if (this.isMultipleMode())
@@ -756,14 +790,33 @@ class DatepickerComponent {
     /** Indica se o time picker deve usar o formato de 12 horas com seletor AM/PM. */
     is12HourFormat = computed(() => this.resolvedHourFormat() === '12');
     /** Hora exibida no time picker: 1–12 no formato 12h, 0–23 no formato 24h. */
-    displayHours = computed(() => {
+    displayHours = computed(() => this.displayHourFor(this.hours()));
+    /** Meridiano atual derivado da hora interna (0–23). */
+    amPm = computed(() => this.meridiemFor(this.hours()));
+    displayHourFor(hours24) {
         if (!this.is12HourFormat())
-            return this.hours();
-        const h12 = this.hours() % DatepickerComponent.HOURS_PER_MERIDIEM;
+            return hours24;
+        const h12 = hours24 % DatepickerComponent.HOURS_PER_MERIDIEM;
         return h12 === 0 ? DatepickerComponent.HOURS_PER_MERIDIEM : h12;
-    });
-    /** Meridiano atual derivado da hora interna (0–23). */
-    amPm = computed(() => this.hours() < DatepickerComponent.HOURS_PER_MERIDIEM ? 'AM' : 'PM');
+    }
+    meridiemFor(hours24) {
+        return hours24 < DatepickerComponent.HOURS_PER_MERIDIEM ? 'AM' : 'PM';
+    }
+    /** Texto (com AM/PM quando aplicável) da hora de destino do botão "aumentar"/"diminuir hora"
+     *  — mesma motivação de `prevMonthTarget`/`nextMonthTarget`/`prevYearTarget`/`nextYearTarget`:
+     *  sem isso, o botão só diz "aumentar hora", sem dizer qual hora vai resultar. */
+    formatHourTarget(hours24) {
+        const padded = this.padTime(this.displayHourFor(hours24));
+        return this.is12HourFormat() ? `${padded} ${this.meridiemFor(hours24)}` : padded;
+    }
+    prevHourTarget = computed(() => this.formatHourTarget((this.hours() - this.stepHour() + this.maxHours) % this.maxHours));
+    nextHourTarget = computed(() => this.formatHourTarget((this.hours() + this.stepHour()) % this.maxHours));
+    /** Mesma motivação, para os botões de minuto/segundo/AM-PM. */
+    prevMinuteTarget = computed(() => this.padTime((this.minutes() - this.minuteStep() + this.maxMinutes) % this.maxMinutes));
+    nextMinuteTarget = computed(() => this.padTime((this.minutes() + this.minuteStep()) % this.maxMinutes));
+    prevSecondTarget = computed(() => this.padTime((this.seconds() - this.stepSecond() + 60) % 60));
+    nextSecondTarget = computed(() => this.padTime((this.seconds() + this.stepSecond()) % 60));
+    nextMeridiemTarget = computed(() => (this.amPm() === 'AM' ? 'PM' : 'AM'));
     positions = [
         { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
         { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
@@ -772,17 +825,74 @@ class DatepickerComponent {
     currentMonthIndex = computed(() => this.viewDate().getMonth());
     currentYear = computed(() => this.viewDate().getFullYear());
     currentMonthKey = computed(() => this.monthKeys[this.currentMonthIndex()]);
+    /** Ano de destino do botão "ano anterior"/"próximo ano" (view de meses) — pro aria-label
+     *  anunciar pra onde o botão vai, já que "Ano anterior" sozinho não diz qual ano é esse. */
+    prevYearTarget = computed(() => this.currentYear() - 1);
+    nextYearTarget = computed(() => this.currentYear() + 1);
+    /** Mês/ano de destino do botão "mês anterior"/"próximo mês" (view de calendário) — mesma
+     *  motivação de `prevYearTarget`/`nextYearTarget`: "Mês anterior" sozinho não diz qual mês é
+     *  esse, e cruzar a fronteira do ano (ex.: janeiro → dezembro do ano anterior) tornaria essa
+     *  falta de contexto ainda mais confusa sem o ano junto. */
+    prevMonthTarget = computed(() => {
+        const view = this.viewDate();
+        const target = new Date(view.getFullYear(), view.getMonth() - 1, 1);
+        return target.toLocaleDateString(this.currentLang(), { month: 'long', year: 'numeric' });
+    });
+    nextMonthTarget = computed(() => {
+        const view = this.viewDate();
+        const target = new Date(view.getFullYear(), view.getMonth() + 1, 1);
+        return target.toLocaleDateString(this.currentLang(), { month: 'long', year: 'numeric' });
+    });
     showCalendar = computed(() => this.mode() !== 'time');
     showTimePicker = computed(() => this.mode() === 'datetime' || this.mode() === 'time');
     /** Seleção múltipla ativa: apenas no modo `date` com `selectionMode = 'multiple'`. */
     isMultipleMode = computed(() => this.selectionMode() === 'multiple' && this.mode() === 'date');
+    /** Instrução lida junto do rótulo da grade de dias — cada modo com semântica de seleção não
+     *  óbvia (múltipla, intervalo) ganha uma frase própria; `range` ainda se divide em duas fases
+     *  (escolhendo início vs. já com `pendingRangeStart`, escolhendo fim). */
+    calendarGridAriaLabelKey = computed(() => {
+        if (this.isMultipleMode())
+            return 'platform.angular_components.datepicker_calendar_label_multiple';
+        if (this.mode() === 'range') {
+            return this.pendingRangeStart()
+                ? 'platform.angular_components.datepicker_calendar_label_range_pending'
+                : 'platform.angular_components.datepicker_calendar_label_range';
+        }
+        return 'platform.angular_components.datepicker_calendar_label';
+    });
     orderedWeekDayKeys = computed(() => {
         const start = this.firstDayOfWeek();
         return [...this.weekDayKeys.slice(start), ...this.weekDayKeys.slice(0, start)];
     });
-    dialogAriaLabelKey = computed(() => this.mode() === 'range'
-        ? 'platform.angular_components.datepicker_select_range'
-        : 'platform.angular_components.datepicker_select_date');
+    /** Ciente da fase de seleção em `range`: enquanto não há `pendingRangeStart`, é a mesma chave
+     *  de sempre ("selecionar intervalo"); depois do primeiro clique, muda pra uma chave que cita
+     *  a data inicial já escolhida, já que reabrir/reentrar no diálogo nesse meio-tempo não dava
+     *  nenhuma pista de que a segunda metade do fluxo era a que faltava. */
+    dialogAriaLabelKey = computed(() => {
+        if (this.mode() !== 'range')
+            return 'platform.angular_components.datepicker_select_date';
+        return this.pendingRangeStart()
+            ? 'platform.angular_components.datepicker_select_range_end'
+            : 'platform.angular_components.datepicker_select_range';
+    });
+    dialogAriaLabelParams = computed(() => {
+        const pending = this.pendingRangeStart();
+        return pending ? { date: this.formatDayAriaLabel(pending) } : {};
+    });
+    rangeStatusElementId = computed(() => `${this.inputId()}-range-status`);
+    /** Texto do `<span>` `sr-only` referenciado por `aria-describedby` no `<input>` — dá ao campo
+     *  um conteúdo persistente e acessível enquanto só a data inicial do intervalo foi escolhida,
+     *  já que `inputDate` só reflete o valor completo depois da segunda escolha (a atualização
+     *  parcial em `selectDate()` cobre o texto visível; isto cobre o que um leitor de tela lê ao
+     *  focar/reler o campo). Usa `aria-describedby`, não `aria-label`, pra só ACRESCENTAR
+     *  informação sem sobrescrever o nome acessível que integrações (dynamic-form, showcase)
+     *  já controlam por fora do componente. */
+    rangePendingStatusText = computed(() => {
+        if (this.mode() !== 'range')
+            return '';
+        const pending = this.pendingRangeStart();
+        return pending ? this.buildRangeStartSelectedText(pending) : '';
+    });
     placeholderKey = computed(() => {
         const mode = this.mode();
         return `platform.angular_components.datepicker_placeholder_${mode}`;
@@ -846,6 +956,19 @@ class DatepickerComponent {
         return rows;
     });
     currentDecadeStart = computed(() => Math.floor(this.currentYear() / 10) * 10);
+    /** Intervalo de destino do botão "década anterior"/"próxima década" (view de anos) — mesma
+     *  motivação de `prevYearTarget`/`nextYearTarget`. `navigatePrev`/`navigateNext` deslocam
+     *  `viewDate` em ±10 anos (não ±12) nessa view; o grid exibido é que mostra 12 anos por
+     *  página (ver `yearsGrid`) — daí o intervalo ir de `currentDecadeStart() ± 10` até
+     *  `+ 11` pra bater exatamente com a página que o clique realmente abre. */
+    prevDecadeRange = computed(() => {
+        const start = this.currentDecadeStart() - 10;
+        return { startYear: start, endYear: start + 11 };
+    });
+    nextDecadeRange = computed(() => {
+        const start = this.currentDecadeStart() + 10;
+        return { startYear: start, endYear: start + 11 };
+    });
     yearsGrid = computed(() => {
         const start = this.currentDecadeStart();
         const rows = [];
@@ -982,33 +1105,58 @@ class DatepickerComponent {
     open() {
         if (this.disabled())
             return;
+        this.captureFocusOrigin();
         this.isOpen.set(true);
         this.prepareOpenView();
         this.show.emit();
-        if (this.mode() === 'time') {
-            afterNextRender(() => this.increaseHourButton()?.nativeElement.focus(), { injector: this.injector });
-        }
-        else {
-            this.focusBestCalendarTarget();
-        }
+        this.focusPanelAfterOpen();
     }
-    /** Abre o painel sem transferir o foco para o dropdown (usado pelo showOnFocus). */
+    /** Abre o painel sem transferir o foco por padrão (usado pelo showOnFocus). Em modos sem
+     *  digitação por segmento (multiple/range/year/touch) o foco segue pro calendário igual em
+     *  open(); em modo segmentado o foco permanece no input pra continuar digitando. */
     openOnFocus() {
         if (this.disabled() || this.isOpen())
             return;
+        this.captureFocusOrigin();
         this.isOpen.set(true);
         this.prepareOpenView();
         this.show.emit();
-        // Foco permanece no input — não chama focusBestCalendarTarget()
+        if (!this.isSegmentedMode()) {
+            this.focusPanelAfterOpen();
+        }
+    }
+    focusPanelAfterOpen() {
+        if (this.mode() === 'time') {
+            afterNextRender(() => this.increaseHourButton()?.nativeElement.focus(), { injector: this.injector });
+        }
+        else {
+            this.focusBestCalendarTarget();
+        }
+    }
+    /** Guarda o elemento focado no momento em que o painel abre, pra devolver o foco pra lá ao
+     *  fechar em vez de sempre forçar pro botão do ícone — ver `closePanel()`. */
+    captureFocusOrigin() {
+        this.elementToRestoreFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     }
     /**
      * Define a view inicial do painel e posiciona o calendário no `defaultDate`
      * quando nenhum valor está selecionado.
      */
     prepareOpenView() {
-        const defaultDate = this.defaultDate();
-        if (defaultDate && !this.value() && !this.rangeValue()) {
-            this.viewDate.set(new Date(defaultDate.getFullYear(), defaultDate.getMonth(), 1));
+        const range = this.rangeValue();
+        if (this.mode() === 'range' && range?.start) {
+            // Reabrir um intervalo já definido precisa cair sempre no mês do início — senão
+            // `viewDate` fica onde uma navegação anterior parou por acaso (ex.: cruzar mês ao
+            // escolher o fim), e `focusBestCalendarTarget()` (primeiro `[data-focus="selected"]`
+            // em ordem de DOM) acaba focando o fim ou nenhuma célula, dependendo de qual mês
+            // calha de estar em exibição.
+            this.viewDate.set(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+        }
+        else {
+            const defaultDate = this.defaultDate();
+            if (defaultDate && !this.value() && !this.rangeValue()) {
+                this.viewDate.set(new Date(defaultDate.getFullYear(), defaultDate.getMonth(), 1));
+            }
         }
         if (this.mode() === 'month') {
             this.pickerView.set('months');
@@ -1025,21 +1173,64 @@ class DatepickerComponent {
             const panel = this.popupPanel()?.nativeElement;
             if (!panel)
                 return;
-            const target = panel.querySelector('[data-focus="selected"]') ??
+            const navHeaderTarget = this.pickerView() === 'calendar'
+                ? null
+                : panel.querySelector('[data-nav-header] button:not([disabled])');
+            const target = navHeaderTarget ??
+                panel.querySelector('[data-focus="selected"]') ??
                 panel.querySelector('[data-focus="today"]') ??
                 panel.querySelector('button:not([disabled])');
             target?.focus();
         }, { injector: this.injector });
     }
-    closePanel() {
-        const panel = (this.popupPanel()?.nativeElement ?? this.hostElement.nativeElement);
-        this.isOpen.set(false);
+    /** Zera o estado de intervalo em andamento — usado tanto pelo fechamento total do painel
+     *  (`closePanel`, onde não faz sentido anunciar nada porque o diálogo inteiro está sumindo)
+     *  quanto pelo cancelamento leve via Escape dentro da grade (`cancelPendingRangeStart`), que
+     *  mantém o painel aberto e por isso anuncia a mudança separadamente. */
+    resetPendingRangeSelection() {
         this.pendingRangeStart.set(null);
         this.hoverDate.set(null);
+    }
+    /** Cancelamento leve de uma seleção de intervalo em andamento (ver `handleCalendarGridKeydown`,
+     *  tecla Escape) — ao contrário de `closePanel`, o painel continua aberto, então aqui faz
+     *  sentido anunciar a mudança de estado. */
+    cancelPendingRangeStart() {
+        this.resetPendingRangeSelection();
+        // A escolha do início (ramo `!pending` de selectDate()) grava o início pendente em
+        // `inputDate` pra não deixar o campo obsoleto durante a seleção parcial (ver selectDate())
+        // — cancelar essa escolha precisa desfazer isso também, voltando pro intervalo já
+        // confirmado (ou vazio, se nenhum) — testado manualmente via devtools: sem esta linha, o
+        // campo ficava preso mostrando a data pendente descartada mesmo com o intervalo antigo
+        // ainda destacado no calendário.
+        this.inputDate = this.formatForDisplay(this.rangeValue());
+        void this.liveAnnouncer.announce(this.translateService.instant('platform.angular_components.datepicker_range_selection_cancelled'), 'polite');
+    }
+    closePanel() {
+        const panelElement = this.popupPanel()?.nativeElement;
+        this.isOpen.set(false);
+        this.resetPendingRangeSelection();
         this._onTouched();
-        this.closed.emit(panel);
+        this.closed.emit(panelElement ?? this.hostElement.nativeElement);
+        // Só força o foco pra outro lugar se ele estiver dentro do painel que está sendo fechado
+        // (senão o usuário ficaria com foco "preso" num elemento que está prestes a sumir do DOM).
+        // Se o foco já está em outro lugar — ex.: o próprio input segmentado, que abriu o painel
+        // via `openOnFocus` e nunca chegou a perder o foco — deixamos como está, em vez de puxar
+        // o foco pro botão do ícone sem nenhum motivo (bug relatado via GNOME Orca: fechar o
+        // painel clicando fora, com o foco ainda no input, fazia o foco pular pro ícone).
+        const focusIsInsidePanel = panelElement != null && document.activeElement instanceof Node && panelElement.contains(document.activeElement);
+        if (!focusIsInsidePanel)
+            return;
+        const restoreTarget = this.elementToRestoreFocusTo;
+        this.elementToRestoreFocusTo = null;
         afterNextRender(() => {
-            this.iconButton()?.nativeElement.focus();
+            this.isRestoringFocusOnClose = true;
+            if (restoreTarget && document.contains(restoreTarget)) {
+                restoreTarget.focus();
+            }
+            else {
+                this.iconButton()?.nativeElement.focus();
+            }
+            this.isRestoringFocusOnClose = false;
         }, { injector: this.injector });
     }
     /**
@@ -1154,6 +1345,7 @@ class DatepickerComponent {
             this.segmentEngine.selectSegment(index);
             input.focus();
             this.selectActiveSegmentRange(input);
+            this.announceActiveSegment();
         };
         focusAndSelect();
         setTimeout(focusAndSelect, 0);
@@ -1211,6 +1403,7 @@ class DatepickerComponent {
                 const generation = ++this.interactionGeneration;
                 this.segmentEngine.selectFirstSegment();
                 this.selectActiveSegmentRange(input);
+                this.announceGenuineFocus();
                 setTimeout(() => {
                     if (generation !== this.interactionGeneration)
                         return;
@@ -1223,11 +1416,13 @@ class DatepickerComponent {
                 // Já existe um segmento ativo — por exemplo, handleInputClick acabou de
                 // defini-lo e está refocando o input programaticamente após um blur espúrio.
                 // Não reinicia para o primeiro segmento; só garante que a seleção visual bata
-                // com o estado atual.
+                // com o estado atual, e anuncia só o segmento (o resumo do valor inteiro é
+                // reservado ao primeiro foco genuíno).
                 this.selectActiveSegmentRange(input);
+                this.announceActiveSegment();
             }
         }
-        if (this.showOnFocus()) {
+        if (this.showOnFocus() && !this.isRestoringFocusOnClose) {
             this.openOnFocus();
         }
     }
@@ -1265,6 +1460,7 @@ class DatepickerComponent {
         if (wasSegmented) {
             this.ensureSegmentEngineConfigured();
             this.segmentEngine.deactivate();
+            this.liveAnnouncer.clear();
             this.commitSegmentedValueIfComplete();
             this.inputDate = this.segmentEngine.isEmpty() ? '' : this.segmentEngine.getDisplayString();
             input.value = this.inputDate;
@@ -1407,6 +1603,7 @@ class DatepickerComponent {
         this.inputDate = this.segmentEngine.getDisplayString();
         input.value = this.inputDate;
         this.selectActiveSegmentRange(input);
+        this.announceActiveSegment();
         input.dispatchEvent(new Event('input', { bubbles: true }));
         this.commitSegmentedValueIfComplete();
     }
@@ -1417,6 +1614,67 @@ class DatepickerComponent {
         const [start, end] = this.segmentEngine.getSegmentRange(index);
         input.setSelectionRange(start, end);
     }
+    /** "{rótulo do segmento}, {valor}" (ex.: "Dia, 03") — texto do anúncio de nível de segmento. */
+    buildSegmentAnnouncementText() {
+        const kind = this.segmentEngine.activeKind();
+        if (kind === null)
+            return '';
+        const label = this.translateService.instant(DatepickerComponent.SEGMENT_LABEL_KEYS[kind]);
+        const text = this.segmentEngine.getActiveSegmentText();
+        const value = text || this.translateService.instant('platform.angular_components.datepicker_segment_empty');
+        return `${label}, ${value}`;
+    }
+    /** Anuncia via LiveAnnouncer o segmento ativo — chamado em todo ponto que muda o segmento ativo/seu
+     *  valor DEPOIS do primeiro foco genuíno (que já recebe esse mesmo texto embutido em `announceGenuineFocus`). */
+    announceActiveSegment() {
+        const text = this.buildSegmentAnnouncementText();
+        if (text)
+            void this.liveAnnouncer.announce(text, 'polite');
+    }
+    /** Resumo humanizado do valor inteiro (ex.: "10 de outubro de 2020", ou a frase genérica de campo
+     *  vazio) — complementa o `<input>` segmentado, que o leitor de tela lê de forma literal/pouco
+     *  natural (esqueleto de sublinhados quando vazio, dígitos separados por barra quando completo).
+     *  Formatação pura via `Intl`, sem chaves de tradução novas (exceto a frase de campo vazio).
+     *  Espelha `formatDayAriaLabel` pro modo `date`. */
+    describeWholeValue() {
+        if (this.segmentEngine.isEmpty()) {
+            return this.translateService.instant('platform.angular_components.datepicker_no_value_selected');
+        }
+        const date = this.value();
+        if (!date)
+            return ''; // valor parcialmente digitado (incompleto) — nada humanizável ainda.
+        const lang = this.currentLang();
+        switch (this.mode()) {
+            case 'date':
+                return this.formatDayAriaLabel(date);
+            case 'month':
+                return date.toLocaleDateString(lang, { month: 'long', year: 'numeric' });
+            case 'time':
+                return date.toLocaleTimeString(lang, {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    second: this.showSeconds() ? '2-digit' : undefined,
+                    hour12: this.resolvedHourFormat() === '12',
+                });
+            case 'datetime':
+                return date.toLocaleString(lang, {
+                    dateStyle: 'long',
+                    timeStyle: this.showSeconds() ? 'medium' : 'short',
+                    hour12: this.resolvedHourFormat() === '12',
+                });
+            default:
+                return ''; // isSegmentedMode() já restringe a date/month/time/datetime
+        }
+    }
+    /** Anúncio combinado no primeiro foco genuíno do campo: resumo do valor inteiro + segmento ativo,
+     *  numa ÚNICA chamada a `announce` (evita duas regiões concorrentes/uma cortando a outra). */
+    announceGenuineFocus() {
+        const summary = this.describeWholeValue();
+        const segmentText = this.buildSegmentAnnouncementText();
+        const combined = summary ? `${summary}. ${segmentText}` : segmentText;
+        if (combined)
+            void this.liveAnnouncer.announce(combined, 'polite');
+    }
     /** Propaga o valor da engine para o modelo (CVA) assim que todos os segmentos estiverem completos. */
     commitSegmentedValueIfComplete() {
         if (!this.segmentEngine.isComplete()) {
@@ -1448,15 +1706,19 @@ class DatepickerComponent {
         if (this.pickerView() === 'years') {
             this.viewDate.set(new Date(view.getFullYear() - 10, view.getMonth(), 1));
             this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() - 10 });
+            this.announceDecadeChange();
         }
         else if (this.pickerView() === 'months') {
-            this.viewDate.set(new Date(view.getFullYear() - 1, view.getMonth(), 1));
-            this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() - 1 });
+            const newDate = new Date(view.getFullYear() - 1, view.getMonth(), 1);
+            this.viewDate.set(newDate);
+            this.yearChange.emit({ month: view.getMonth(), year: newDate.getFullYear() });
+            this.announceYearChange(newDate);
         }
         else {
             const newDate = new Date(view.getFullYear(), view.getMonth() - 1, 1);
             this.viewDate.set(newDate);
             this.monthChange.emit({ month: newDate.getMonth(), year: newDate.getFullYear() });
+            this.announceMonthChange(newDate);
         }
     }
     navigateNext() {
@@ -1464,18 +1726,55 @@ class DatepickerComponent {
         if (this.pickerView() === 'years') {
             this.viewDate.set(new Date(view.getFullYear() + 10, view.getMonth(), 1));
             this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() + 10 });
+            this.announceDecadeChange();
         }
         else if (this.pickerView() === 'months') {
-            this.viewDate.set(new Date(view.getFullYear() + 1, view.getMonth(), 1));
-            this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() + 1 });
+            const newDate = new Date(view.getFullYear() + 1, view.getMonth(), 1);
+            this.viewDate.set(newDate);
+            this.yearChange.emit({ month: view.getMonth(), year: newDate.getFullYear() });
+            this.announceYearChange(newDate);
         }
         else {
             const newDate = new Date(view.getFullYear(), view.getMonth() + 1, 1);
             this.viewDate.set(newDate);
             this.monthChange.emit({ month: newDate.getMonth(), year: newDate.getFullYear() });
+            this.announceMonthChange(newDate);
         }
     }
+    /** Anuncia só "{mês} de {ano}" (ex.: "outubro de 2026") ao cruzar fronteira de mês na grade de dias.
+     *  O novo foco (button[role="gridcell"]) já carrega essa info dentro do aria-label longo de
+     *  `formatDayAriaLabel`, mas o nome do mês fica "enterrado" no meio da frase e passa despercebido
+     *  (confirmado com teste manual via Orca). Sem prefixo tipo "agora exibindo", mesma convenção
+     *  adotada por outros calendários acessíveis (ex.: react-aria). */
+    announceMonthChange(newDate) {
+        void this.liveAnnouncer.announce(newDate.toLocaleDateString(this.currentLang(), { month: 'long', year: 'numeric' }), 'polite');
+    }
+    /** Anuncia o ano atualmente exibido ao paginar a view 'months' (ex.: "2025"). O `<span>` central
+     *  que mostra esse ano no cabeçalho não é focável, e o aria-label dos botões de navegação só
+     *  fala o ano de DESTINO ("Ano anterior, 2025") — sem isso, o leitor de tela nunca confirma o
+     *  ano que passou a estar em exibição, só os alvos "anterior"/"próximo". */
+    announceYearChange(newDate) {
+        void this.liveAnnouncer.announce(newDate.toLocaleDateString(this.currentLang(), { year: 'numeric' }), 'polite');
+    }
+    /** Mesma motivação de `announceYearChange`, para a view 'years' (paginação de década) — anuncia
+     *  o intervalo atualmente exibido (ex.: "2020 – 2031"), espelhando o texto do `<span>` central. */
+    announceDecadeChange() {
+        void this.liveAnnouncer.announce(`${this.currentDecadeStart()} – ${this.currentDecadeStart() + 11}`, 'polite');
+    }
     handleCalendarGridKeydown(event) {
+        if (event.key === 'Escape' && this.mode() === 'range' && this.pendingRangeStart() !== null) {
+            event.preventDefault();
+            // Cancelamento leve: desiste só da data inicial pendente, mantendo o painel aberto,
+            // em vez de fechar o diálogo inteiro (o único caminho antes disso). `stopPropagation`
+            // impede esse mesmo Escape de borbulhar até `document.body`, onde o
+            // `OverlayKeyboardDispatcher` do CDK escuta `keydown` (fase de bubble, sem capture) e
+            // dispararia `handleOverlayKeydown`/`closePanel()` — sem isso, o cancelamento leve e o
+            // fechamento total aconteceriam nesse mesmo Escape. Sem `pendingRangeStart`, esse `if`
+            // é falso e o Escape segue intocado até `document.body`, fechando o painel como sempre.
+            event.stopPropagation();
+            this.cancelPendingRangeStart();
+            return;
+        }
         const ARROWS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
         if (!ARROWS.includes(event.key))
             return;
@@ -1554,6 +1853,11 @@ class DatepickerComponent {
             const pending = this.pendingRangeStart();
             if (!pending) {
                 this.pendingRangeStart.set(day.date);
+                // Sem isso o <input> ficava com o valor anterior (ou vazio) enquanto só a data
+                // inicial estava escolhida — tanto o texto visível quanto o que um leitor de tela
+                // lê ao focar o campo ficavam obsoletos até a segunda escolha.
+                this.inputDate = this.formatForDisplay({ start: day.date, end: null });
+                this.announceRangeStartSelected(day.date);
             }
             else {
                 const [start, end] = pending.getTime() <= day.date.getTime() ? [pending, day.date] : [day.date, pending];
@@ -1562,6 +1866,7 @@ class DatepickerComponent {
                 this.inputDate = this.formatForDisplay(range);
                 this._onChange(range);
                 this.selected.emit(range);
+                this.announceRangeCompleted(range);
                 this.closePanel();
             }
             return;
@@ -1597,6 +1902,44 @@ class DatepickerComponent {
         this.onValidatorChange();
         this._onChange(emitValue);
         this.selected.emit(emitValue);
+        this.announceMultipleDateToggle(normalized, index < 0);
+    }
+    /** Anuncia via LiveAnnouncer a data completa (dia da semana, dia, mês, ano) e se ela acabou
+     *  de ser selecionada ou desmarcada — pro usuário de leitor de tela saber exatamente o que
+     *  mudou antes de seguir escolhendo a próxima data. */
+    announceMultipleDateToggle(date, isNowSelected) {
+        const dateText = this.formatDayAriaLabel(date);
+        const key = isNowSelected
+            ? 'platform.angular_components.datepicker_date_selected'
+            : 'platform.angular_components.datepicker_date_deselected';
+        void this.liveAnnouncer.announce(this.translateService.instant(key, { date: dateText }), 'polite');
+    }
+    /** Texto compartilhado entre o anúncio transitório de início de intervalo escolhido
+     *  (`announceRangeStartSelected`) e o status persistente exposto via `aria-describedby` no
+     *  `<input>` (`rangePendingStatusText`) — mesma redação nos dois lugares de propósito, pra não
+     *  soarem como dois estados diferentes pro mesmo momento. */
+    buildRangeStartSelectedText(date) {
+        return this.translateService.instant('platform.angular_components.datepicker_range_start_selected', {
+            date: this.formatDayAriaLabel(date),
+        });
+    }
+    /** Anuncia que a data INICIAL do intervalo foi escolhida — o primeiro clique em `range` era
+     *  mudo (ao contrário do toggle em modo `multiple`, sempre anunciado). Recebe um `Date` puro,
+     *  não um clique: `selectToday()` chama `selectDate()` internamente e herda este anúncio de
+     *  graça, sem precisar de uma segunda chamada. */
+    announceRangeStartSelected(date) {
+        void this.liveAnnouncer.announce(this.buildRangeStartSelectedText(date), 'polite');
+    }
+    /** Anuncia o intervalo concluído, chamado antes de `closePanel()` — o `LiveAnnouncer` escreve
+     *  numa região `aria-live` própria e desacoplada do foco, então não é cortado pela restauração
+     *  de foco que `closePanel()` agenda um tick depois via `afterNextRender`. */
+    announceRangeCompleted(range) {
+        if (!range.start || !range.end)
+            return;
+        void this.liveAnnouncer.announce(this.translateService.instant('platform.angular_components.datepicker_range_selected', {
+            start: this.formatDayAriaLabel(range.start),
+            end: this.formatDayAriaLabel(range.end),
+        }), 'polite');
     }
     selectYear(year) {
         if (this.isYearDisabled(year))
@@ -1642,9 +1985,20 @@ class DatepickerComponent {
             };
             this.selectDate(calDay);
             this.todayClick.emit(today);
+            if (this.mode() === 'range' && this.isOpen()) {
+                // Em range, selectDate() só fecha o painel na segunda escolha (ver seu ramo
+                // 'range'); na primeira, o foco fica parado no botão "Hoje" do rodapé, fora da
+                // grade — sem isso o usuário não tinha nenhuma pista de que precisava voltar pra
+                // grade pra escolher a data final. A célula de hoje já carrega
+                // `data-focus="selected"` (isRangeStart acabou de ser setado por selectDate), que
+                // focusBestCalendarTarget() já prioriza. O anúncio de "início selecionado" já
+                // disparou dentro de selectDate() antes deste bloco rodar.
+                this.focusBestCalendarTarget();
+            }
         }
     }
     clearValue(event) {
+        const hadRangeInProgress = this.mode() === 'range' && (this.pendingRangeStart() !== null || this.rangeValue() !== null);
         this.value.set(null);
         this.hours.set(0);
         this.minutes.set(0);
@@ -1655,6 +2009,11 @@ class DatepickerComponent {
         this.setDisplayFor(null);
         this._onChange(null);
         this.clearClick.emit(event);
+        if (hadRangeInProgress) {
+            // Só anuncia quando havia de fato algo a limpar — evita "intervalo limpo" toda vez
+            // que alguém aperta "Limpar" por garantia, sem nada selecionado ainda.
+            void this.liveAnnouncer.announce(this.translateService.instant('platform.angular_components.datepicker_range_cleared'), 'polite');
+        }
         this.closePanel();
     }
     confirm() {
@@ -1815,13 +2174,38 @@ class DatepickerComponent {
     padTime(value) {
         return String(value).padStart(2, '0');
     }
-    formatDayAriaLabel(date) {
-        return date.toLocaleDateString(this.currentLang(), {
+    /** `day` é opcional e só usado em `mode="range"` — os demais call sites (resumo do valor
+     *  segmentado, anúncio de toggle em modo `multiple`) nunca têm um `CalendarDay` à mão e nunca
+     *  rodam em `range`, então continuam recebendo exatamente o texto de sempre. */
+    formatDayAriaLabel(date, day) {
+        const base = date.toLocaleDateString(this.currentLang(), {
             weekday: 'long',
             year: 'numeric',
             month: 'long',
             day: 'numeric',
         });
+        if (!day || this.mode() !== 'range')
+            return base;
+        const suffix = this.rangeDayStatusSuffix(day);
+        return suffix ? `${base}, ${suffix}` : base;
+    }
+    /** Sufixo que diz o papel do dia dentro do intervalo selecionado — sem isso, toda célula da
+     *  grade soa idêntica pro leitor de tela, e o único jeito de saber onde está o início/fim é
+     *  enxergando o destaque visual. */
+    rangeDayStatusSuffix(day) {
+        if (day.isRangeStart && day.isRangeEnd) {
+            return this.translateService.instant('platform.angular_components.datepicker_range_start_end');
+        }
+        if (day.isRangeStart) {
+            return this.translateService.instant('platform.angular_components.datepicker_range_start');
+        }
+        if (day.isRangeEnd) {
+            return this.translateService.instant('platform.angular_components.datepicker_range_end');
+        }
+        if (day.isInRange) {
+            return this.translateService.instant('platform.angular_components.datepicker_range_in_range');
+        }
+        return '';
     }
     /** Formata o valor para exibição no input, aplicando rangeSeparator, dateFormat e multipleSeparator. */
     formatForDisplay(value) {
@@ -1963,7 +2347,7 @@ class DatepickerComponent {
                 useExisting: DatepickerComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "popupPanel", first: true, predicate: ["popupPanel"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "increaseHourButton", first: true, predicate: ["increaseHourButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "iconButton", first: true, predicate: ["iconButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        #triggerInput\n        class=\"h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus:border-primary\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        type=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n    />\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled() && !isFocused()\"\n            [class.border-primary]=\"isFocused() && !disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"handleBackdropClick($event)\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_month' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_month' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"\n                        'platform.angular_components.datepicker_calendar_label'\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-[50%] text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date)\"\n                                    [attr.aria-selected]=\"day.isSelected || day.isRangeStart || day.isRangeEnd || null\"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_decade' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        @for (year of row; track year) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                [attr.data-focus]=\"\n                                    isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                \"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary':\n                                        isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isYearSelected(year) && !isYearDisabled(year),\n                                    'cursor-not-allowed text-grayscale-30': isYearDisabled(year),\n                                }\"\n                                (click)=\"selectYear(year)\"\n                            >\n                                {{ year }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_year' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_year' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        @for (month of row; track month.index) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                [disabled]=\"isMonthDisabled(month.index)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                    'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index),\n                                }\"\n                                (click)=\"selectMonth(month.index)\"\n                            >\n                                {{ month.key | translate }}\n                            </button>\n                        }\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_hour' | translate\"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_hour' | translate\"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_minute' | translate\"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_minute' | translate\"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_increment_second' | translate\"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_second' | translate\"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_toggle_meridiem' | translate\"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}button[type=button]:focus-visible{outline:2px solid #428bca;outline-offset:1px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], viewQueries: [{ propertyName: "popupPanel", first: true, predicate: ["popupPanel"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "increaseHourButton", first: true, predicate: ["increaseHourButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "iconButton", first: true, predicate: ["iconButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        #triggerInput\n        class=\"h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        type=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n        [attr.aria-describedby]=\"mode() === 'range' ? rangeStatusElementId() : null\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    />\n\n    @if (mode() === 'range') {\n        <span\n            class=\"sr-only\"\n            [id]=\"rangeStatusElementId()\"\n            >{{ rangePendingStatusText() }}</span\n        >\n    }\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled() && !isFocused()\"\n            [class.border-primary]=\"isFocused() && !disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"handleBackdropClick($event)\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_month'\n                                | translate: { month: prevMonthTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_next_month'\n                                | translate: { month: nextMonthTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"\n                        calendarGridAriaLabelKey()\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    [attr.aria-multiselectable]=\"mode() === 'range' ? true : null\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-[50%] text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date, day)\"\n                                    [attr.aria-selected]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd || day.isInRange || null\n                                    \"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (focus)=\"onDayHover(day.date)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\n                >\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_decade' | translate: prevDecadeRange()\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_next_decade' | translate: nextDecadeRange()\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (year of row; track year) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                    [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                    [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                    [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                    [attr.data-focus]=\"\n                                        isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                    \"\n                                    [disabled]=\"isYearDisabled(year)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                        'ring-2 ring-inset ring-primary':\n                                            isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !isYearSelected(year) && !isYearDisabled(year),\n                                        'cursor-not-allowed text-grayscale-30': isYearDisabled(year),\n                                    }\"\n                                    (click)=\"selectYear(year)\"\n                                >\n                                    {{ year }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\n                >\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_year' | translate: { year: prevYearTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_next_year' | translate: { year: nextYearTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (month of row; track month.index) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                    [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                    [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                    [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                    [disabled]=\"isMonthDisabled(month.index)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                        'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index),\n                                    }\"\n                                    (click)=\"selectMonth(month.index)\"\n                                >\n                                    {{ month.key | translate }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_increment_hour'\n                                | translate: { time: nextHourTarget() }\n                        \"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_decrement_hour'\n                                | translate: { time: prevHourTarget() }\n                        \"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_increment_minute'\n                                | translate: { time: nextMinuteTarget() }\n                        \"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_decrement_minute'\n                                | translate: { time: prevMinuteTarget() }\n                        \"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"\n                                'platform.angular_components.datepicker_increment_second'\n                                    | translate: { time: nextSecondTarget() }\n                            \"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"\n                                'platform.angular_components.datepicker_decrement_second'\n                                    | translate: { time: prevSecondTarget() }\n                            \"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_toggle_meridiem'\n                                | translate: { meridiem: nextMeridiemTarget() }\n                        \"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}button[type=button]:focus-visible{outline:2px solid #428bca;outline-offset:1px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 __decorate([
     numericKeysOnly()
@@ -1997,7 +2381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: DatepickerComponent,
                             multi: true,
                         },
-                    ], template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        #triggerInput\n        class=\"h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus:border-primary\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        type=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n    />\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled() && !isFocused()\"\n            [class.border-primary]=\"isFocused() && !disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"handleBackdropClick($event)\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_month' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_month' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"\n                        'platform.angular_components.datepicker_calendar_label'\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-[50%] text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date)\"\n                                    [attr.aria-selected]=\"day.isSelected || day.isRangeStart || day.isRangeEnd || null\"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_decade' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        @for (year of row; track year) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                [attr.data-focus]=\"\n                                    isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                \"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary':\n                                        isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isYearSelected(year) && !isYearDisabled(year),\n                                    'cursor-not-allowed text-grayscale-30': isYearDisabled(year),\n                                }\"\n                                (click)=\"selectYear(year)\"\n                            >\n                                {{ year }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_prev_year' | translate\"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_next_year' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        @for (month of row; track month.index) {\n                            <button\n                                type=\"button\"\n                                role=\"gridcell\"\n                                class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                [disabled]=\"isMonthDisabled(month.index)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                    'text-grayscale-90 hover:bg-grayscale-10':\n                                        !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                    'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index),\n                                }\"\n                                (click)=\"selectMonth(month.index)\"\n                            >\n                                {{ month.key | translate }}\n                            </button>\n                        }\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_hour' | translate\"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_hour' | translate\"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_increment_minute' | translate\"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_minute' | translate\"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_increment_second' | translate\"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus:border-primary focus:outline-1 focus:outline-primary\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_decrement_second' | translate\"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_toggle_meridiem' | translate\"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}button[type=button]:focus-visible{outline:2px solid #428bca;outline-offset:1px;border-radius:inherit}\n"] }]
+                    ], template: "<div\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"relative flex w-full items-center\"\n    role=\"combobox\"\n    aria-haspopup=\"grid\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"popupId()\"\n>\n    <input\n        #triggerInput\n        class=\"h-[35px] w-full rounded-small border border-solid border-grayscale-30 pl-3 text-sm outline-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n        [class.pr-10]=\"showIcon() && !showClear()\"\n        [class.pr-16]=\"showIcon() && showClear()\"\n        [class.pr-6]=\"!showIcon() && showClear()\"\n        [class.bg-grayscale-0]=\"!disabled()\"\n        [class.text-grayscale-90]=\"!disabled()\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.bg-grayscale-5]=\"disabled()\"\n        [class.text-grayscale-30]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"inputId()\"\n        [name]=\"name() ?? inputId()\"\n        type=\"text\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"\n            readonlyInput() ||\n            mode() === 'range' ||\n            mode() === 'year' ||\n            isMultipleMode() ||\n            (isSegmentModeCandidate() && isTouchDevice())\n        \"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (mousedown)=\"handleInputClick($event)\"\n        (keydown)=\"handleTriggerKeydown($event)\"\n        (input)=\"handleNativeInput($event)\"\n        [attr.aria-invalid]=\"ngControl?.control?.invalid || null\"\n        [attr.aria-describedby]=\"mode() === 'range' ? rangeStatusElementId() : null\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    />\n\n    @if (mode() === 'range') {\n        <span\n            class=\"sr-only\"\n            [id]=\"rangeStatusElementId()\"\n            >{{ rangePendingStatusText() }}</span\n        >\n    }\n\n    @if (showClear() && inputDate) {\n        <button\n            type=\"button\"\n            class=\"absolute flex h-[35px] w-6 items-center justify-center text-grayscale-60 transition-colors hover:text-grayscale-90\"\n            [class.right-9]=\"showIcon()\"\n            [class.right-0]=\"!showIcon()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_clear' | translate\"\n            (click)=\"clearValue($event)\"\n        >\n            <i\n                class=\"fas fa-times text-xs\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    @if (showIcon()) {\n        <button\n            #iconButton\n            type=\"button\"\n            class=\"absolute right-0 flex h-[35px] w-9 items-center justify-center border-l border-solid transition-colors\"\n            [class.border-grayscale-20]=\"disabled()\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.cursor-not-allowed]=\"disabled()\"\n            [class.border-grayscale-30]=\"!disabled() && !isFocused()\"\n            [class.border-primary]=\"isFocused() && !disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.hover:bg-grayscale-10]=\"!disabled()\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'platform.angular_components.datepicker_open' | translate\"\n            (click)=\"toggle()\"\n            (keydown)=\"handleTriggerKeydown($event)\"\n        >\n            <i\n                [class]=\"resolvedIcon()\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (backdropClick)=\"handleBackdropClick($event)\"\n    (overlayKeydown)=\"handleOverlayKeydown($event)\"\n    (detach)=\"isOpen.set(false)\"\n>\n    <div\n        #popupPanel\n        class=\"z-50 w-72 rounded-medium border border-solid border-grayscale-30 bg-grayscale-0 shadow-md\"\n        role=\"dialog\"\n        cdkTrapFocus\n        [id]=\"popupId()\"\n        [attr.aria-label]=\"dialogAriaLabelKey() | translate: dialogAriaLabelParams()\"\n    >\n        @if (showCalendar()) {\n            @if (pickerView() === 'calendar') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o mensal -->\n                <div class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_month'\n                                | translate: { month: prevMonthTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex items-center gap-1 rounded-small px-2 py-1 text-sm font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_select_month_year' | translate\"\n                        (click)=\"switchToMonths()\"\n                    >\n                        {{ currentMonthKey() | translate }}&nbsp;{{ currentYear() }}\n                        <i\n                            class=\"fas fa-chevron-down text-[10px]\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_next_month'\n                                | translate: { month: nextMonthTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pt-2\"\n                    role=\"row\"\n                >\n                    @for (dayKey of orderedWeekDayKeys(); track dayKey) {\n                        <div\n                            class=\"flex h-8 items-center justify-center text-xs font-medium text-grayscale-60\"\n                            role=\"columnheader\"\n                            [attr.aria-label]=\"dayKey | translate\"\n                        >\n                            {{ dayKey | translate }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Grade do calend\u00E1rio -->\n                <div\n                    class=\"grid grid-cols-7 px-3 pb-2\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"\n                        calendarGridAriaLabelKey()\n                            | translate: { month: (currentMonthKey() | translate), year: currentYear() }\n                    \"\n                    [attr.aria-multiselectable]=\"mode() === 'range' ? true : null\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (day of week; track day.date.toISOString()) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-8 w-8 items-center justify-center rounded-[50%] text-sm font-normal transition-colors\"\n                                    [class.invisible]=\"!showOtherMonths() && !day.isCurrentMonth\"\n                                    [attr.aria-label]=\"formatDayAriaLabel(day.date, day)\"\n                                    [attr.aria-selected]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd || day.isInRange || null\n                                    \"\n                                    [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                                    [attr.aria-disabled]=\"day.isDisabled ? 'true' : null\"\n                                    [attr.aria-hidden]=\"!showOtherMonths() && !day.isCurrentMonth ? 'true' : null\"\n                                    [attr.data-focus]=\"\n                                        day.isSelected || day.isRangeStart || day.isRangeEnd\n                                            ? 'selected'\n                                            : day.isToday\n                                              ? 'today'\n                                              : null\n                                    \"\n                                    [disabled]=\"day.isDisabled\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0':\n                                            day.isSelected || day.isRangeStart || day.isRangeEnd,\n                                        'bg-grayscale-10 hover:bg-grayscale-20':\n                                            day.isInRange && !day.isRangeStart && !day.isRangeEnd,\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            day.isCurrentMonth,\n                                        'text-grayscale-60 hover:bg-grayscale-10':\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !day.isRangeEnd &&\n                                            !day.isDisabled &&\n                                            !day.isCurrentMonth,\n                                        'ring-2 ring-inset ring-primary':\n                                            day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd,\n                                        'cursor-not-allowed text-grayscale-30': day.isDisabled,\n                                    }\"\n                                    (mouseenter)=\"onDayHover(day.date)\"\n                                    (mouseleave)=\"onDayHover(null)\"\n                                    (focus)=\"onDayHover(day.date)\"\n                                    (click)=\"selectDate(day)\"\n                                >\n                                    {{ day.dayOfMonth }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'years') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o por d\u00E9cada -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\n                >\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_decade' | translate: prevDecadeRange()\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\"\n                        >{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</span\n                    >\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_next_decade' | translate: nextDecadeRange()\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de anos -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_year' | translate\"\n                >\n                    @for (row of yearsGrid(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (year of row; track year) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                    [attr.aria-selected]=\"isYearSelected(year) || null\"\n                                    [attr.aria-disabled]=\"isYearDisabled(year) ? 'true' : null\"\n                                    [attr.aria-current]=\"isCurrentYear(year) ? 'date' : null\"\n                                    [attr.data-focus]=\"\n                                        isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\n                                    \"\n                                    [disabled]=\"isYearDisabled(year)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                        'ring-2 ring-inset ring-primary':\n                                            isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !isYearSelected(year) && !isYearDisabled(year),\n                                        'cursor-not-allowed text-grayscale-30': isYearDisabled(year),\n                                    }\"\n                                    (click)=\"selectYear(year)\"\n                                >\n                                    {{ year }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (pickerView() === 'months') {\n                <!-- Cabe\u00E7alho de navega\u00E7\u00E3o anual -->\n                <div\n                    data-nav-header\n                    class=\"flex items-center justify-between border-b border-solid border-grayscale-30 px-3 py-2\"\n                >\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"prevDisabled()\"\n                        [attr.aria-disabled]=\"prevDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_prev_year' | translate: { year: prevYearTarget() }\n                        \"\n                        (click)=\"navigatePrev()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-left text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentYear() }}</span>\n\n                    <button\n                        type=\"button\"\n                        class=\"flex h-7 w-7 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10 disabled:cursor-not-allowed disabled:text-grayscale-30\"\n                        [disabled]=\"nextDisabled()\"\n                        [attr.aria-disabled]=\"nextDisabled() ? 'true' : null\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_next_year' | translate: { year: nextYearTarget() }\n                        \"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-right text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <!-- Grade de meses -->\n                <div\n                    class=\"grid grid-cols-3 gap-2 px-3 py-3\"\n                    role=\"grid\"\n                    [attr.aria-label]=\"'platform.angular_components.datepicker_select_month' | translate\"\n                >\n                    @for (row of monthsGrid(); track $index) {\n                        <div\n                            role=\"row\"\n                            class=\"contents\"\n                        >\n                            @for (month of row; track month.index) {\n                                <button\n                                    type=\"button\"\n                                    role=\"gridcell\"\n                                    class=\"flex h-9 items-center justify-center rounded-small text-sm font-normal transition-colors\"\n                                    [attr.aria-selected]=\"isMonthSelected(month.index) || null\"\n                                    [attr.aria-disabled]=\"isMonthDisabled(month.index) ? 'true' : null\"\n                                    [attr.data-focus]=\"isMonthSelected(month.index) ? 'selected' : null\"\n                                    [disabled]=\"isMonthDisabled(month.index)\"\n                                    [ngClass]=\"{\n                                        'bg-primary font-semibold text-grayscale-0': isMonthSelected(month.index),\n                                        'text-grayscale-90 hover:bg-grayscale-10':\n                                            !isMonthSelected(month.index) && !isMonthDisabled(month.index),\n                                        'cursor-not-allowed text-grayscale-30': isMonthDisabled(month.index),\n                                    }\"\n                                    (click)=\"selectMonth(month.index)\"\n                                >\n                                    {{ month.key | translate }}\n                                </button>\n                            }\n                        </div>\n                    }\n                </div>\n\n                @if (mode() !== 'month') {\n                    <div class=\"border-t border-solid border-grayscale-30 px-3 py-2\">\n                        <button\n                            type=\"button\"\n                            class=\"flex items-center gap-2 rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"backToCalendar()\"\n                        >\n                            <i\n                                class=\"fas fa-arrow-left\"\n                                aria-hidden=\"true\"\n                            ></i>\n                            {{ 'platform.angular_components.datepicker_back_to_calendar' | translate }}\n                        </button>\n                    </div>\n                }\n            }\n        }\n\n        <!-- Time picker -->\n        @if (showTimePicker()) {\n            <div\n                class=\"flex items-center justify-center gap-3 px-4 py-3\"\n                [class.border-t]=\"showCalendar()\"\n                [class.border-solid]=\"showCalendar()\"\n                [class.border-grayscale-30]=\"showCalendar()\"\n                [attr.aria-label]=\"'platform.angular_components.datepicker_select_time' | translate\"\n            >\n                <!-- Horas -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        #increaseHourButton\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_increment_hour'\n                                | translate: { time: nextHourTarget() }\n                        \"\n                        (click)=\"incrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                        [value]=\"padTime(displayHours())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_hour' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleHoursKeydown($event)\"\n                        (change)=\"handleHoursInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_decrement_hour'\n                                | translate: { time: prevHourTarget() }\n                        \"\n                        (click)=\"decrementHours()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                <span\n                    class=\"text-xl font-bold text-grayscale-60\"\n                    aria-hidden=\"true\"\n                    >:</span\n                >\n\n                <!-- Minutos -->\n                <div class=\"flex flex-col items-center gap-1\">\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_increment_minute'\n                                | translate: { time: nextMinuteTarget() }\n                        \"\n                        (click)=\"incrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-up text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                    <input\n                        type=\"text\"\n                        inputmode=\"numeric\"\n                        [attr.maxlength]=\"timeInputMaxLength\"\n                        class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                        [value]=\"padTime(minutes())\"\n                        [attr.aria-label]=\"'platform.angular_components.datepicker_minute' | translate\"\n                        aria-live=\"polite\"\n                        pattern=\"[0-9]+\"\n                        (keydown)=\"handleMinutesKeydown($event)\"\n                        (change)=\"handleMinutesInput($event)\"\n                    />\n                    <button\n                        type=\"button\"\n                        class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_decrement_minute'\n                                | translate: { time: prevMinuteTarget() }\n                        \"\n                        (click)=\"decrementMinutes()\"\n                    >\n                        <i\n                            class=\"fas fa-chevron-down text-xs\"\n                            aria-hidden=\"true\"\n                        ></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span\n                        class=\"text-xl font-bold text-grayscale-60\"\n                        aria-hidden=\"true\"\n                        >:</span\n                    >\n\n                    <!-- Segundos -->\n                    <div class=\"flex flex-col items-center gap-1\">\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"\n                                'platform.angular_components.datepicker_increment_second'\n                                    | translate: { time: nextSecondTarget() }\n                            \"\n                            (click)=\"incrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-up text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                        <input\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            [attr.maxlength]=\"timeInputMaxLength\"\n                            class=\"h-9 w-12 rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-center text-base font-medium text-grayscale-90 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                            [value]=\"padTime(seconds())\"\n                            [attr.aria-label]=\"'platform.angular_components.datepicker_second' | translate\"\n                            aria-live=\"polite\"\n                            pattern=\"[0-9]+\"\n                            (keydown)=\"handleSecondsKeydown($event)\"\n                            (change)=\"handleSecondsInput($event)\"\n                        />\n                        <button\n                            type=\"button\"\n                            class=\"flex h-6 w-6 items-center justify-center rounded-small text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            [attr.aria-label]=\"\n                                'platform.angular_components.datepicker_decrement_second'\n                                    | translate: { time: prevSecondTarget() }\n                            \"\n                            (click)=\"decrementSeconds()\"\n                        >\n                            <i\n                                class=\"fas fa-chevron-down text-xs\"\n                                aria-hidden=\"true\"\n                            ></i>\n                        </button>\n                    </div>\n                }\n\n                @if (is12HourFormat()) {\n                    <!-- Seletor AM/PM -->\n                    <button\n                        type=\"button\"\n                        class=\"flex h-9 w-12 items-center justify-center rounded-small border border-solid border-grayscale-30 bg-grayscale-5 text-base font-medium text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                        [attr.aria-label]=\"\n                            'platform.angular_components.datepicker_toggle_meridiem'\n                                | translate: { meridiem: nextMeridiemTarget() }\n                        \"\n                        aria-live=\"polite\"\n                        (click)=\"toggleAmPm()\"\n                    >\n                        {{ amPm() }}\n                    </button>\n                }\n            </div>\n        }\n\n        <!-- Rodap\u00E9 de a\u00E7\u00F5es -->\n        @if (showButtonBar() || mode() === 'datetime' || mode() === 'time') {\n            <div class=\"flex items-center justify-between border-t border-solid border-grayscale-30 px-3 py-2\">\n                @if (showButtonBar()) {\n                    <div>\n                        @if (mode() === 'date' || mode() === 'datetime' || mode() === 'range') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                                (click)=\"selectToday()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_today' | translate }}\n                            </button>\n                        }\n                    </div>\n\n                    <div class=\"flex gap-2\">\n                        <button\n                            type=\"button\"\n                            class=\"rounded-small px-2 py-1 text-sm text-grayscale-90 transition-colors hover:bg-grayscale-10\"\n                            (click)=\"clearValue($event)\"\n                        >\n                            {{ 'platform.angular_components.datepicker_clear' | translate }}\n                        </button>\n\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                } @else {\n                    <div></div>\n                    <div>\n                        @if (mode() === 'datetime' || mode() === 'time') {\n                            <button\n                                type=\"button\"\n                                class=\"rounded-small bg-primary px-3 py-1 text-sm font-medium text-grayscale-0 transition-colors hover:opacity-90\"\n                                (click)=\"confirm()\"\n                            >\n                                {{ 'platform.angular_components.datepicker_confirm' | translate }}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n\n", styles: [":host{display:block;position:relative;width:100%}:host.ng-invalid.ng-dirty input{border-color:#c13018}:host.ng-invalid.ng-dirty input:focus{border-color:#c13018;outline-color:#c13018}:host.ng-invalid.ng-dirty button[type=button]{border-color:#c13018}:host.no-icon button[type=button]{display:none}:host.no-icon input{padding-right:.75rem}button[type=button]:focus-visible{outline:2px solid #428bca;outline-offset:1px;border-radius:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handleHoursKeydown: [], handleMinutesKeydown: [], handleSecondsKeydown: [] } });
 
 /**