@seniorsistemas/angular-components 19.7.4 → 19.7.6

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

@@ -3,15 +3,432 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, signal, viewChild, ElementRef, inject, Injector, computed, afterNextRender, Component } from '@angular/core';
+import { input, model, output, signal, viewChild, ElementRef, inject, Injector, DestroyRef, computed, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
 import { NgControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+
+const DATE_FORMAT_TOKEN_RE = /yyyy|yy|MM|mm|dd|d/g;
+const YEAR_SEGMENT_LENGTH = 4;
+const SHORT_SEGMENT_LENGTH = 2;
+const HOURS_PER_MERIDIEM = 12;
+const MAX_HOUR_24 = 23;
+const MAX_MINUTE_SECOND = 59;
+const GENERIC_MAX_DAY = 31;
+const LEAP_REFERENCE_YEAR = 2000;
+function isEditableSegment(segment) {
+    return segment.kind !== 'literal';
+}
+/** Tokeniza um `dateFormat` (ex.: `dd/MM/yyyy`, `MM/dd/yy`) em tokens de dia/mês/ano + literais. */
+function tokenizeDateFormat(format) {
+    const tokens = [];
+    let lastIndex = 0;
+    DATE_FORMAT_TOKEN_RE.lastIndex = 0;
+    let match;
+    while ((match = DATE_FORMAT_TOKEN_RE.exec(format))) {
+        if (match.index > lastIndex) {
+            tokens.push({ kind: 'literal', raw: format.slice(lastIndex, match.index) });
+        }
+        const raw = match[0];
+        const kind = raw[0] === 'y' ? 'year' : raw[0] === 'd' ? 'day' : 'month';
+        tokens.push({ kind, raw });
+        lastIndex = DATE_FORMAT_TOKEN_RE.lastIndex;
+    }
+    if (lastIndex < format.length) {
+        tokens.push({ kind: 'literal', raw: format.slice(lastIndex) });
+    }
+    return tokens;
+}
+/** Dias no mês (1-12), já resolvendo fevereiro/ano bissexto via rollover nativo do `Date`. */
+function daysInMonth(month, year) {
+    return new Date(year, month, 0).getDate();
+}
+function buildDateSegments(dateFormat) {
+    return tokenizeDateFormat(dateFormat).map((token) => {
+        if (token.kind === 'literal')
+            return { kind: 'literal', text: token.raw };
+        if (token.kind === 'year')
+            return { kind: 'year', length: YEAR_SEGMENT_LENGTH, text: '' };
+        if (token.kind === 'month')
+            return { kind: 'month', length: SHORT_SEGMENT_LENGTH, text: '' };
+        return { kind: 'day', length: SHORT_SEGMENT_LENGTH, text: '' };
+    });
+}
+function buildMonthSegments(dateFormat) {
+    const all = buildDateSegments(dateFormat);
+    const dayIdx = all.findIndex((s) => s.kind === 'day');
+    if (dayIdx === -1)
+        return all;
+    const dropIndexes = new Set([dayIdx]);
+    if (all[dayIdx + 1]?.kind === 'literal') {
+        dropIndexes.add(dayIdx + 1);
+    }
+    else if (all[dayIdx - 1]?.kind === 'literal') {
+        dropIndexes.add(dayIdx - 1);
+    }
+    return all.filter((_, i) => !dropIndexes.has(i));
+}
+function buildTimeSegments(hourFormat, showSeconds) {
+    const segments = [
+        { kind: 'hour', length: SHORT_SEGMENT_LENGTH, text: '' },
+        { kind: 'literal', text: ':' },
+        { kind: 'minute', length: SHORT_SEGMENT_LENGTH, text: '' },
+    ];
+    if (showSeconds) {
+        segments.push({ kind: 'literal', text: ':' }, { kind: 'second', length: SHORT_SEGMENT_LENGTH, text: '' });
+    }
+    if (hourFormat === '12') {
+        segments.push({ kind: 'literal', text: ' ' }, { kind: 'ampm', length: SHORT_SEGMENT_LENGTH, text: '' });
+    }
+    return segments;
+}
+function buildSegmentsFor(config) {
+    switch (config.mode) {
+        case 'date':
+            return buildDateSegments(config.dateFormat);
+        case 'month':
+            return buildMonthSegments(config.dateFormat);
+        case 'time':
+            return buildTimeSegments(config.hourFormat, config.showSeconds);
+        case 'datetime':
+            return [
+                ...buildDateSegments(config.dateFormat),
+                { kind: 'literal', text: ' ' },
+                ...buildTimeSegments(config.hourFormat, config.showSeconds),
+            ];
+    }
+}
+/**
+ * Engine de segmentos (dia/mês/ano/hora/minuto/segundo/ampm) para o trigger do datepicker.
+ * Sem dependências de Angular — DOM/CVA ficam por conta do componente que a consome.
+ */
+class DateSegmentEngine {
+    segments = [];
+    config = null;
+    activeIndex = null;
+    freshEntry = true;
+    configure(config) {
+        this.config = config;
+        this.segments = buildSegmentsFor(config);
+        this.activeIndex = null;
+        this.freshEntry = true;
+    }
+    getDisplayString() {
+        return this.segments.map((s) => (isEditableSegment(s) ? this.renderSegment(s) : s.text)).join('');
+    }
+    renderSegment(segment) {
+        return segment.text + '_'.repeat(Math.max(0, segment.length - segment.text.length));
+    }
+    segmentRenderLength(segment) {
+        return isEditableSegment(segment) ? segment.length : segment.text.length;
+    }
+    getSegmentRange(index) {
+        let start = 0;
+        for (let i = 0; i < index; i++) {
+            start += this.segmentRenderLength(this.segments[i]);
+        }
+        return [start, start + this.segmentRenderLength(this.segments[index])];
+    }
+    getFirstEditableIndex() {
+        return this.segments.findIndex((s) => isEditableSegment(s));
+    }
+    getLastEditableIndex() {
+        for (let i = this.segments.length - 1; i >= 0; i--) {
+            if (isEditableSegment(this.segments[i]))
+                return i;
+        }
+        return -1;
+    }
+    getActiveIndex() {
+        return this.activeIndex;
+    }
+    activeKind() {
+        if (this.activeIndex === null)
+            return null;
+        const segment = this.segments[this.activeIndex];
+        return isEditableSegment(segment) ? segment.kind : null;
+    }
+    selectSegmentAt(charIndex) {
+        let acc = 0;
+        for (let i = 0; i < this.segments.length; i++) {
+            const len = this.segmentRenderLength(this.segments[i]);
+            if (charIndex < acc + len) {
+                return this.nearestEditableFrom(i);
+            }
+            acc += len;
+        }
+        return this.getLastEditableIndex();
+    }
+    nearestEditableFrom(index) {
+        for (let i = index; i < this.segments.length; i++) {
+            if (isEditableSegment(this.segments[i]))
+                return i;
+        }
+        return this.getLastEditableIndex();
+    }
+    selectSegment(index) {
+        if (index < 0 || index >= this.segments.length || !isEditableSegment(this.segments[index]))
+            return;
+        this.activeIndex = index;
+        this.freshEntry = true;
+    }
+    selectFirstSegment() {
+        this.selectSegment(this.getFirstEditableIndex());
+    }
+    /** Commita (pad/clamp) o segmento ativo e move para o próximo/anterior editável. */
+    moveToAdjacentSegment(direction) {
+        this.commitActiveSegment();
+        if (this.activeIndex === null)
+            return 'boundary';
+        let next = this.activeIndex;
+        do {
+            next += direction;
+        } while (next >= 0 && next < this.segments.length && !isEditableSegment(this.segments[next]));
+        if (next < 0 || next >= this.segments.length) {
+            this.activeIndex = null;
+            return 'boundary';
+        }
+        this.selectSegment(next);
+        return 'moved';
+    }
+    typeDigit(digit) {
+        if (this.activeIndex === null)
+            return;
+        const segment = this.segments[this.activeIndex];
+        if (!isEditableSegment(segment) || segment.kind === 'ampm')
+            return;
+        if (this.freshEntry) {
+            segment.text = '';
+            this.freshEntry = false;
+        }
+        if (segment.text.length >= segment.length)
+            return;
+        segment.text += digit;
+        if (segment.text.length >= segment.length) {
+            this.commitActiveSegment();
+            this.autoAdvance();
+        }
+    }
+    autoAdvance() {
+        if (this.activeIndex === null)
+            return;
+        let next = this.activeIndex;
+        do {
+            next += 1;
+        } while (next < this.segments.length && !isEditableSegment(this.segments[next]));
+        if (next < this.segments.length) {
+            this.selectSegment(next);
+        }
+    }
+    setAmPm(value) {
+        if (this.activeIndex === null)
+            return;
+        const segment = this.segments[this.activeIndex];
+        if (!isEditableSegment(segment) || segment.kind !== 'ampm')
+            return;
+        segment.text = value === 1 ? 'PM' : 'AM';
+        this.freshEntry = true;
+    }
+    clearActiveSegment(kind) {
+        if (this.activeIndex === null)
+            return;
+        const segment = this.segments[this.activeIndex];
+        if (!isEditableSegment(segment))
+            return;
+        if (segment.text === '') {
+            if (kind === 'backspace') {
+                let prev = this.activeIndex;
+                do {
+                    prev -= 1;
+                } while (prev >= 0 && !isEditableSegment(this.segments[prev]));
+                if (prev >= 0) {
+                    this.activeIndex = prev;
+                    this.freshEntry = false;
+                }
+            }
+            return;
+        }
+        segment.text = '';
+        this.freshEntry = true;
+    }
+    /** Limpa todos os segmentos editáveis (usado quando o campo inteiro está selecionado, ex.: Ctrl+A). */
+    clearAll() {
+        for (const segment of this.segments) {
+            if (isEditableSegment(segment))
+                segment.text = '';
+        }
+        this.activeIndex = this.getFirstEditableIndex();
+        this.freshEntry = true;
+    }
+    /** Incrementa/decrementa o segmento ativo, dando a volta (wrap) dentro do range válido. */
+    incrementActiveSegment(delta) {
+        if (this.activeIndex === null)
+            return;
+        const segment = this.segments[this.activeIndex];
+        if (!isEditableSegment(segment))
+            return;
+        if (segment.kind === 'ampm') {
+            this.setAmPm(segment.text === 'PM' ? 0 : 1);
+            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;
+        const next = (((current + delta - min) % range) + range) % range + min;
+        segment.text = String(next).padStart(segment.length, '0');
+        this.freshEntry = true;
+        this.reconcileDayIfNeeded(segment.kind);
+    }
+    /** Pad/clamp do segmento ativo (ex.: "2" -> "02", "45" no dia -> clamp para daysInMonth). */
+    commitActiveSegment() {
+        if (this.activeIndex === null)
+            return;
+        const segment = this.segments[this.activeIndex];
+        if (!isEditableSegment(segment))
+            return;
+        const kind = segment.kind;
+        segment.text = this.clampAndPad(segment);
+        this.freshEntry = true;
+        this.reconcileDayIfNeeded(kind);
+    }
+    /** Commita o segmento ativo e sai do modo de edição (usado no blur do campo). */
+    deactivate() {
+        this.commitActiveSegment();
+        this.activeIndex = null;
+    }
+    clampAndPad(segment) {
+        if (segment.kind === 'ampm' || segment.kind === 'year' || !segment.text) {
+            return segment.text;
+        }
+        const num = parseInt(segment.text, 10);
+        const { min, max } = this.boundsFor(segment.kind);
+        const clamped = Math.min(max, Math.max(min, num));
+        return String(clamped).padStart(segment.length, '0');
+    }
+    boundsFor(kind) {
+        switch (kind) {
+            case 'day':
+                return { min: 1, max: this.daysInMonthNow() };
+            case 'month':
+                return { min: 1, max: HOURS_PER_MERIDIEM };
+            case 'hour':
+                return this.config?.hourFormat === '12'
+                    ? { min: 1, max: HOURS_PER_MERIDIEM }
+                    : { min: 0, max: MAX_HOUR_24 };
+            case 'minute':
+            case 'second':
+                return { min: 0, max: MAX_MINUTE_SECOND };
+            default:
+                return { min: 0, max: 9999 };
+        }
+    }
+    /**
+     * Bound do dia dependendo do que já é conhecido de mês/ano. Nunca "adivinha" com o mês/ano
+     * atuais do sistema — isso estreitaria o range antes da hora (ex.: dia=29 digitado antes do
+     * ano, mês=fevereiro conhecido mas ano ainda não -> se assumisse o ano atual do sistema e ele
+     * não fosse bissexto, o dia seria clampado para 28 e nunca mais reexpandido para 29 mesmo que
+     * o ano realmente digitado depois seja bissexto). Em vez disso, fica sempre no lado permissivo
+     * até que a informação realmente exista.
+     */
+    daysInMonthNow() {
+        const monthSegment = this.findEditable('month');
+        const monthKnown = !!monthSegment?.text && monthSegment.text.length === monthSegment.length;
+        if (!monthSegment || !monthKnown)
+            return GENERIC_MAX_DAY;
+        const month = parseInt(monthSegment.text, 10);
+        const yearSegment = this.findEditable('year');
+        const yearKnown = !!yearSegment?.text && yearSegment.text.length === YEAR_SEGMENT_LENGTH;
+        if (!yearSegment || !yearKnown)
+            return daysInMonth(month, LEAP_REFERENCE_YEAR);
+        return daysInMonth(month, parseInt(yearSegment.text, 10));
+    }
+    reconcileDayIfNeeded(committedKind) {
+        if (committedKind !== 'month' && committedKind !== 'year')
+            return;
+        const daySegment = this.findEditable('day');
+        if (!daySegment || daySegment.text.length !== daySegment.length)
+            return;
+        const max = this.daysInMonthNow();
+        const dayNum = parseInt(daySegment.text, 10);
+        if (dayNum > max) {
+            daySegment.text = String(max).padStart(daySegment.length, '0');
+        }
+    }
+    findEditable(kind) {
+        return this.segments.find((s) => isEditableSegment(s) && s.kind === kind);
+    }
+    isEmpty() {
+        return this.segments.every((s) => !isEditableSegment(s) || s.text === '');
+    }
+    isComplete() {
+        return this.segments.every((s) => !isEditableSegment(s) || s.text.length === s.length);
+    }
+    loadFromDate(date) {
+        for (const segment of this.segments) {
+            if (isEditableSegment(segment))
+                segment.text = '';
+        }
+        this.activeIndex = null;
+        this.freshEntry = true;
+        if (!date)
+            return;
+        for (const segment of this.segments) {
+            if (!isEditableSegment(segment))
+                continue;
+            segment.text = this.renderValueFor(segment.kind, date);
+        }
+    }
+    renderValueFor(kind, date) {
+        switch (kind) {
+            case 'day':
+                return String(date.getDate()).padStart(SHORT_SEGMENT_LENGTH, '0');
+            case 'month':
+                return String(date.getMonth() + 1).padStart(SHORT_SEGMENT_LENGTH, '0');
+            case 'year':
+                return String(date.getFullYear()).padStart(YEAR_SEGMENT_LENGTH, '0');
+            case 'hour': {
+                const h = date.getHours();
+                const display = this.config?.hourFormat === '12' ? (h % HOURS_PER_MERIDIEM === 0 ? HOURS_PER_MERIDIEM : h % HOURS_PER_MERIDIEM) : h;
+                return String(display).padStart(SHORT_SEGMENT_LENGTH, '0');
+            }
+            case 'minute':
+                return String(date.getMinutes()).padStart(SHORT_SEGMENT_LENGTH, '0');
+            case 'second':
+                return String(date.getSeconds()).padStart(SHORT_SEGMENT_LENGTH, '0');
+            case 'ampm':
+                return date.getHours() < HOURS_PER_MERIDIEM ? 'AM' : 'PM';
+        }
+    }
+    /** Constrói o `Date` a partir dos segmentos; `null` enquanto incompleto. Usa `referenceDate` para preencher partes ausentes (ex.: hora ao editar só a data). */
+    toDate(referenceDate) {
+        if (!this.isComplete())
+            return null;
+        const ref = referenceDate ?? new Date();
+        const getNum = (kind) => {
+            const segment = this.findEditable(kind);
+            return segment ? parseInt(segment.text, 10) : null;
+        };
+        const year = getNum('year') ?? ref.getFullYear();
+        const monthNum = getNum('month');
+        const month = monthNum !== null ? monthNum - 1 : ref.getMonth();
+        const day = this.config?.mode === 'month' ? 1 : (getNum('day') ?? ref.getDate());
+        let hour = getNum('hour');
+        const minute = getNum('minute') ?? ref.getMinutes();
+        const second = getNum('second') ?? ref.getSeconds();
+        if (hour !== null && this.config?.hourFormat === '12') {
+            const ampmSegment = this.findEditable('ampm');
+            const isPm = ampmSegment?.text === 'PM';
+            hour = hour % HOURS_PER_MERIDIEM;
+            if (isPm)
+                hour += HOURS_PER_MERIDIEM;
+        }
+        return new Date(year, month, day, hour ?? ref.getHours(), minute, second);
+    }
+}
 
 const DAY_MATCH_GROUP = 3;
-const MINUTES_MATCH_GROUP = 5;
-const MAX_MONTH_INDEX = 11;
 function formatNativeDate(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -20,8 +437,7 @@ function formatNativeDate(date) {
 }
 /**
  * Formata uma data segundo um padrão simples contendo os tokens `dd`, `MM` e `yyyy`.
- * Usado apenas para exibição em campos `type="text"` (modo `range`), onde o browser
- * não controla o formato. Para `type="date"` nativo o formato é definido pelo browser.
+ * Usado para exibição em campos `type="text"` (modos `range` e seleção múltipla).
  */
 function formatWithPattern(date, pattern) {
     const dd = String(date.getDate()).padStart(2, '0');
@@ -35,10 +451,6 @@ function formatWithPattern(date, pattern) {
         .replace('MM', MM)
         .replace('mm', MM); // PrimeNG compat: lowercase mm = month
 }
-function formatTime(h, m, s) {
-    const base = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
-    return s !== undefined ? `${base}:${String(s).padStart(2, '0')}` : base;
-}
 /** Parses yyyy-MM-dd. Returns null when invalid. */
 function parseDate(raw) {
     const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw.trim());
@@ -78,19 +490,6 @@ function parseRangeInput(raw, separator = '—') {
     }
     return { start, end };
 }
-function parseTimeInput(raw, base, maxHours, maxMinutes) {
-    const match = /^(\d{1,2}):(\d{2})$/.exec(raw.trim());
-    if (!match) {
-        return null;
-    }
-    const hours = parseInt(match[1], 10);
-    const mins = parseInt(match[2], 10);
-    if (hours >= maxHours || mins >= maxMinutes) {
-        return null;
-    }
-    const baseDate = base ?? new Date();
-    return new Date(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate(), hours, mins);
-}
 function parseYearInput(raw) {
     const match = /^(\d{4})$/.exec(raw.trim());
     if (!match) {
@@ -102,59 +501,20 @@ function parseYearInput(raw) {
     }
     return new Date(year, 0, 1);
 }
-function parseMonthInput(raw) {
-    const match = /^(\d{4})-(\d{2})$/.exec(raw.trim());
-    if (!match) {
-        return null;
-    }
-    const year = parseInt(match[1], 10);
-    const month = parseInt(match[2], 10) - 1;
-    if (year < 1000) {
-        return null;
-    }
-    if (month < 0 || month > MAX_MONTH_INDEX) {
-        return null;
-    }
-    return new Date(year, month, 1);
-}
-function parseDateTimeInput(raw) {
-    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(raw.trim());
-    if (!match) {
-        return null;
-    }
-    const year = parseInt(match[1], 10);
-    const month = parseInt(match[2], 10) - 1;
-    const day = parseInt(match[DAY_MATCH_GROUP], 10);
-    const hours = parseInt(match[4], 10);
-    const mins = parseInt(match[MINUTES_MATCH_GROUP], 10);
-    if (year < 1000 || hours >= 24 || mins >= 60) {
-        return null;
-    }
-    const date = new Date(year, month, day, hours, mins);
-    if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
-        return null;
-    }
-    return date;
-}
-function parseInput(mode, raw, base, maxHours, maxMinutes, rangeSeparator = '—') {
+function parseInput(mode, raw, rangeSeparator = '—') {
     if (!raw?.trim()) {
         return null;
     }
     switch (mode) {
         case 'range':
             return parseRangeInput(raw, rangeSeparator);
-        case 'time':
-            return parseTimeInput(raw, base, maxHours, maxMinutes);
-        case 'month':
-            return parseMonthInput(raw);
         case 'year':
             return parseYearInput(raw);
-        case 'datetime':
-            return parseDateTimeInput(raw);
         default:
             return parseDate(raw);
     }
 }
+/** Formata range/seleção múltipla (dateFormat) e o ano em `mode='year'`. Demais modos são resolvidos pela engine de segmentos. */
 function formatValueForInput(mode, value, rangeSeparator = ' — ', dateFormat, multipleSeparator = ', ') {
     if (!value) {
         return '';
@@ -172,23 +532,10 @@ function formatValueForInput(mode, value, rangeSeparator = ' — ', dateFormat,
             ? `${formatPart(range.start)}${rangeSeparator}${formatPart(range.end)}`
             : formatPart(range.start);
     }
-    if (!(value instanceof Date)) {
-        return '';
-    }
-    switch (mode) {
-        case 'time':
-            return formatTime(value.getHours(), value.getMinutes());
-        case 'month': {
-            const month = String(value.getMonth() + 1).padStart(2, '0');
-            return `${value.getFullYear()}-${month}`;
-        }
-        case 'year':
-            return String(value.getFullYear());
-        case 'datetime':
-            return `${formatNativeDate(value)}T${formatTime(value.getHours(), value.getMinutes())}`;
-        default:
-            return formatNativeDate(value);
+    if (value instanceof Date && mode === 'year') {
+        return String(value.getFullYear());
     }
+    return '';
 }
 
 function numericKeysOnly() {
@@ -217,6 +564,7 @@ class DatepickerComponent {
     static MAX_HOURS = 24;
     static MAX_MINUTES = 60;
     static HOURS_PER_MERIDIEM = 12;
+    static DOUBLE_CLICK_THRESHOLD_MS = 400;
     static nextId() {
         DatepickerComponent.idCounter++;
         return `s-datepicker-${DatepickerComponent.idCounter}`;
@@ -258,10 +606,16 @@ class DatepickerComponent {
     max = input(null);
     /** Data exibida ao abrir o calendário quando nenhuma data está selecionada. */
     defaultDate = input(null);
-    /** Formato de exibição da data no campo (usado apenas para display). */
-    dateFormat = input('dd/MM/yyyy');
-    /** Formato de exibição das horas: `'12'` ou `'24'`. */
-    hourFormat = input('24');
+    /**
+     * Formato de exibição da data no campo. Quando omitido, é resolvido a partir do
+     * locale ativo (chave `platform.angular_components.date_format`), com fallback para `dd/MM/yyyy`.
+     */
+    dateFormat = input(undefined);
+    /**
+     * Formato de exibição das horas: `'12'` ou `'24'`. Quando omitido, é resolvido a partir
+     * do locale ativo (chave `platform.angular_components.hour_format`), com fallback para `'24'`.
+     */
+    hourFormat = input(undefined);
     /** Incremento em minutos ao usar as setas do time picker. */
     minuteStep = input(DatepickerComponent.DEFAULT_MINUTE_STEP);
     /** Quando `true`, exibe o campo de segundos no time picker. */
@@ -339,19 +693,68 @@ class DatepickerComponent {
     pendingRangeStart = signal(null);
     hoverDate = signal(null);
     _hasFormatError = false;
-    _isBadInput = false;
     onValidatorChange = () => { };
     _onChange = () => { };
     _onTouched = () => { };
     popupPanel = viewChild('popupPanel', { read: ElementRef });
     increaseHourButton = viewChild('increaseHourButton', { read: ElementRef });
     iconButton = viewChild('iconButton', { read: ElementRef });
+    triggerInput = viewChild.required('triggerInput', { read: ElementRef });
     injector = inject(Injector);
     hostElement = inject(ElementRef);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    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();
+    lastSegmentConfig = null;
+    measureCanvas;
+    /** Incrementado a cada mutação do usuário — invalida callbacks de clique/foco adiados que ficaram obsoletos. */
+    interactionGeneration = 0;
+    /** `timeStamp` do último mousedown no input segmentado — usado pra detectar duplo clique na mão. */
+    lastMouseDownAt = 0;
+    constructor() {
+        this.translateService.onLangChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+            this.currentLang.set(event.lang);
+        });
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            const mediaQuery = window.matchMedia('(pointer: coarse)');
+            const handlePointerChange = (event) => this.isTouchDevice.set(event.matches);
+            mediaQuery.addEventListener('change', handlePointerChange);
+            this.destroyRef.onDestroy(() => mediaQuery.removeEventListener('change', handlePointerChange));
+        }
+    }
     // ── Computed ──────────────────────────────────────────────────────────
     resolvedIcon = computed(() => (this.mode() === 'time' ? 'fas fa-clock' : this.icon()));
+    /** `dateFormat` explícito ou resolvido a partir do locale ativo (fallback `dd/MM/yyyy`). */
+    resolvedDateFormat = computed(() => {
+        this.currentLang();
+        return (this.dateFormat() ??
+            this.resolveTranslatedOrDefault('platform.angular_components.date_format', 'dd/MM/yyyy'));
+    });
+    /** `hourFormat` explícito ou resolvido a partir do locale ativo (fallback `'24'`). */
+    resolvedHourFormat = computed(() => {
+        this.currentLang();
+        const explicit = this.hourFormat();
+        if (explicit)
+            return explicit;
+        const translated = this.resolveTranslatedOrDefault('platform.angular_components.hour_format', '24');
+        return translated === '12' ? '12' : '24';
+    });
+    /** Modos cujo formato de exibição é resolvido pela engine de segmentos (independente de touch/readonly). */
+    isSegmentModeCandidate = computed(() => {
+        if (this.isMultipleMode())
+            return false;
+        const mode = this.mode();
+        return mode === 'date' || mode === 'month' || mode === 'time' || mode === 'datetime';
+    });
+    /** Interatividade de digitação por segmento — desligada em touch ou quando `readonlyInput` é usado. */
+    isSegmentedMode = computed(() => this.isSegmentModeCandidate() && !this.isTouchDevice() && !this.readonlyInput());
     /** Indica se o time picker deve usar o formato de 12 horas com seletor AM/PM. */
-    is12HourFormat = computed(() => this.hourFormat() === '12');
+    is12HourFormat = computed(() => this.resolvedHourFormat() === '12');
     /** Hora exibida no time picker: 1–12 no formato 12h, 0–23 no formato 24h. */
     displayHours = computed(() => {
         if (!this.is12HourFormat())
@@ -377,16 +780,6 @@ class DatepickerComponent {
         const start = this.firstDayOfWeek();
         return [...this.weekDayKeys.slice(start), ...this.weekDayKeys.slice(0, start)];
     });
-    inputType = computed(() => {
-        if (this.isMultipleMode())
-            return 'text';
-        const mode = this.mode();
-        if (mode === 'datetime')
-            return 'datetime-local';
-        if (mode === 'range' || mode === 'year')
-            return 'text';
-        return mode;
-    });
     dialogAriaLabelKey = computed(() => this.mode() === 'range'
         ? 'platform.angular_components.datepicker_select_range'
         : 'platform.angular_components.datepicker_select_date');
@@ -520,7 +913,7 @@ class DatepickerComponent {
             const d = this.defaultDate();
             if (d && !this.value() && !this.rangeValue() && this.multipleValues().length === 0) {
                 this.value.set(d);
-                this.inputDate = this.formatForDisplay(d);
+                this.setDisplayFor(d);
                 this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
                 this._onChange(d);
             }
@@ -532,7 +925,7 @@ class DatepickerComponent {
             this.value.set(null);
             this.rangeValue.set(null);
             this.multipleValues.set([]);
-            this.inputDate = '';
+            this.setDisplayFor(null);
             return;
         }
         if (Array.isArray(value)) {
@@ -552,8 +945,8 @@ class DatepickerComponent {
             return;
         }
         this.value.set(value);
-        this.inputDate = this.formatForDisplay(value);
         const d = value;
+        this.setDisplayFor(d);
         this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
         this.hours.set(d.getHours());
         this.minutes.set(d.getMinutes());
@@ -649,6 +1042,42 @@ class DatepickerComponent {
             this.iconButton()?.nativeElement.focus();
         }, { injector: this.injector });
     }
+    /**
+     * O backdrop do CDK Overlay cobre a tela inteira, incluindo o próprio trigger — clicar no
+     * input ou nos botões do trigger enquanto o painel já está aberto também dispara
+     * `backdropClick` (o próprio `<input>` nunca recebe o `click` nesse caso, então
+     * `handleInputClick` nunca dispara). Sem este filtro, clicar no input para trocar de
+     * segmento fecharia o painel e roubaria o foco para o botão do ícone (via `closePanel`).
+     * Quando o clique caiu especificamente sobre o `<input>`, reaplicamos a mesma lógica de
+     * reposicionamento de segmento que `handleInputClick` faria, em vez de só ignorar o clique.
+     */
+    handleBackdropClick(event) {
+        // `event.target` de um backdropClick do CDK Overlay é sempre o próprio <div> do
+        // backdrop, nunca o elemento realmente clicado — então checar `.contains(event.target)`
+        // nunca funciona. Em vez disso, comparamos a coordenada real do clique (que o
+        // MouseEvent sempre carrega corretamente) contra os retângulos dos elementos do trigger.
+        const inputEl = this.triggerInput()?.nativeElement;
+        if (inputEl && this.isSegmentedMode()) {
+            const inputRect = inputEl.getBoundingClientRect();
+            const clickedOnInput = event.clientX >= inputRect.left &&
+                event.clientX <= inputRect.right &&
+                event.clientY >= inputRect.top &&
+                event.clientY <= inputRect.bottom;
+            if (clickedOnInput) {
+                this.handleSegmentPointerDown(inputEl, event.clientX, event.timeStamp);
+                return;
+            }
+        }
+        const rect = this.hostElement.nativeElement.getBoundingClientRect();
+        const clickedOnTrigger = event.clientX >= rect.left &&
+            event.clientX <= rect.right &&
+            event.clientY >= rect.top &&
+            event.clientY <= rect.bottom;
+        if (clickedOnTrigger) {
+            return;
+        }
+        this.closePanel();
+    }
     toggle() {
         if (this.isOpen()) {
             this.closePanel();
@@ -662,14 +1091,169 @@ class DatepickerComponent {
             this.closePanel();
         }
     }
-    handleInputClick() { }
+    handleInputClick(event) {
+        if (!this.isSegmentedMode() || !(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        // Bound to `mousedown`, não `click` (veja o comentário em `applySegmentClick`). O
+        // comportamento nativo padrão do browser pra mousedown num `<input>` de texto é
+        // posicionar o caret/iniciar seleção de texto na coordenada do clique — isso roda
+        // *depois* dos nossos listeners e sobrescreveria o `setSelectionRange` do segmento
+        // aplicado logo abaixo. `preventDefault()` evita essa corrida.
+        event.preventDefault();
+        this.handleSegmentPointerDown(event.target, event.clientX, event.timeStamp);
+    }
+    /**
+     * Ponto de entrada único pro clique no input segmentado — chamado tanto por
+     * `handleInputClick` (mousedown direto no `<input>`, o primeiro clique, antes do backdrop
+     * existir) quanto por `handleBackdropClick` (cliques seguintes, já com o painel aberto e o
+     * backdrop cobrindo o input). Precisa ser único porque os dois cliques de um duplo clique
+     * real costumam chegar por caminhos DIFERENTES — o primeiro via mousedown no input, o
+     * segundo via backdropClick — então rastrear o timestamp do "último clique" separadamente
+     * em cada handler nunca detectaria um duplo clique de verdade. Nem `dblclick` nem
+     * `event.detail` são confiáveis aqui (dependem da contagem/targeting interna de cliques do
+     * browser, que nossas manipulações de foco/seleção parecem atrapalhar — observado
+     * empiricamente: `event.detail` fica sempre 1), daí a detecção manual por timestamp.
+     */
+    handleSegmentPointerDown(input, clientX, timeStamp) {
+        const isDoubleClick = timeStamp - this.lastMouseDownAt < DatepickerComponent.DOUBLE_CLICK_THRESHOLD_MS;
+        this.lastMouseDownAt = timeStamp;
+        if (isDoubleClick) {
+            this.lastMouseDownAt = 0; // evita que um terceiro clique encadeie em outro "duplo"
+            this.selectWholeField(input);
+            return;
+        }
+        this.applySegmentClick(input, clientX);
+    }
+    /**
+     * Seleciona o segmento sob a coordenada `clientX` de um clique no input segmentado.
+     * Compartilhado por `handleInputClick` (mousedown real no `<input>` — usamos `mousedown`
+     * em vez de `click` porque o `focus`/`openOnFocus` disparado no meio do gesto pode montar
+     * o backdrop do CDK Overlay embaixo do cursor antes do `mouseup`, fazendo o browser resolver
+     * o `click` pro ancestral comum entre o alvo do mousedown e o do mouseup — na prática,
+     * `<body>` — em vez do `<input>` ou do backdrop) e `handleBackdropClick` (clique no trigger
+     * com o painel já aberto em regime estável, interceptado pelo backdrop do CDK Overlay).
+     */
+    applySegmentClick(input, clientX) {
+        this.ensureSegmentEngineConfigured();
+        // Calcula o segmento a partir da coordenada do clique (clientX), não de
+        // `input.selectionStart` — o browser ajusta a posição do caret de forma assíncrona
+        // após o clique (observado empiricamente, especialmente na transição de foco), então
+        // ler `selectionStart` nesse momento é uma fonte não confiável. `clientX` é síncrono
+        // e imediato, sem essa corrida.
+        const charIndex = this.clickClientXToCharIndex(input, clientX);
+        const generation = ++this.interactionGeneration;
+        // Foca e seleciona o segmento juntos, e reaplica os dois algumas vezes logo em seguida —
+        // o browser/CDK Overlay pode mexer no foco de forma assíncrona depois do clique (blur
+        // nativo do backdrop, cdkTrapFocus do painel, etc.); em vez de tentar prever/evitar cada
+        // causa, simplesmente vencemos reafirmando foco+seleção por cima.
+        const focusAndSelect = () => {
+            if (generation !== this.interactionGeneration)
+                return;
+            const index = this.segmentEngine.selectSegmentAt(charIndex);
+            this.segmentEngine.selectSegment(index);
+            input.focus();
+            this.selectActiveSegmentRange(input);
+        };
+        focusAndSelect();
+        setTimeout(focusAndSelect, 0);
+        setTimeout(focusAndSelect, 50);
+    }
+    /** Duplo clique seleciona o input inteiro (todos os segmentos), como num `<input>` de texto comum. */
+    handleInputDblClick(event) {
+        if (!this.isSegmentedMode() || !(event.target instanceof HTMLInputElement))
+            return;
+        this.selectWholeField(event.target);
+    }
+    /**
+     * Seleciona todos os segmentos do input (usado tanto pelo duplo clique detectado na mão em
+     * `handleSegmentPointerDown` quanto por `handleInputDblClick`, mantido como caminho direto
+     * pra quem dispara um `dblclick` de verdade, ex.: acessibilidade/testes).
+     */
+    selectWholeField(input) {
+        this.ensureSegmentEngineConfigured();
+        // Garante um segmento ativo *antes* de focar: se o CDK Overlay tiver roubado o foco de
+        // forma assíncrona (blur) entre os cliques que compõem o duplo clique, o `input.focus()`
+        // abaixo dispara um evento `focus` genuíno, e handleInputFocus só evita agendar sua própria
+        // reaplicação concorrente (que sobrescreveria nossa seleção do campo inteiro mais tarde)
+        // quando encontra `getActiveIndex() !== null` — o mesmo motivo pelo qual handleInputClick
+        // sempre chama `segmentEngine.selectSegment(index)` antes de `input.focus()`.
+        if (this.segmentEngine.getActiveIndex() === null) {
+            this.segmentEngine.selectFirstSegment();
+        }
+        const generation = ++this.interactionGeneration;
+        // Mesmo padrão defensivo de handleInputClick: o clique que fecha o duplo clique já rodou
+        // handleInputClick (selecionando só um segmento) e pode ter agendado suas próprias
+        // reaplicações adiadas — a geração recém-incrementada as invalida, então só a seleção do
+        // campo inteiro sobrevive.
+        const focusAndSelectAll = () => {
+            if (generation !== this.interactionGeneration)
+                return;
+            input.focus();
+            input.setSelectionRange(0, input.value.length);
+        };
+        focusAndSelectAll();
+        setTimeout(focusAndSelectAll, 0);
+        setTimeout(focusAndSelectAll, 50);
+    }
     handleInputFocus(event) {
         this.isFocused.set(true);
         this.focused.emit(event);
+        if (this.isSegmentedMode() && event.target instanceof HTMLInputElement) {
+            this.ensureSegmentEngineConfigured();
+            const input = event.target;
+            if (input.value === '') {
+                input.value = this.segmentEngine.getDisplayString();
+            }
+            if (this.segmentEngine.getActiveIndex() === null) {
+                // Foco "genuíno" (Tab a partir de outro campo, ou primeiro foco no campo) —
+                // nenhum segmento ativo ainda, então seleciona o primeiro.
+                const generation = ++this.interactionGeneration;
+                this.segmentEngine.selectFirstSegment();
+                this.selectActiveSegmentRange(input);
+                setTimeout(() => {
+                    if (generation !== this.interactionGeneration)
+                        return;
+                    if (this.segmentEngine.getActiveIndex() !== null) {
+                        this.selectActiveSegmentRange(input);
+                    }
+                }, 0);
+            }
+            else {
+                // 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.
+                this.selectActiveSegmentRange(input);
+            }
+        }
         if (this.showOnFocus()) {
             this.openOnFocus();
         }
     }
+    /** Mapeia a coordenada X (viewport) de um clique para o índice de caractere mais próximo no valor exibido. */
+    clickClientXToCharIndex(input, clientX) {
+        const style = getComputedStyle(input);
+        const canvas = (this.measureCanvas ??= document.createElement('canvas'));
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return 0;
+        ctx.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+        const rect = input.getBoundingClientRect();
+        const paddingLeft = parseFloat(style.paddingLeft) || 0;
+        const localX = clientX - rect.left - paddingLeft + input.scrollLeft;
+        const text = input.value;
+        let bestIndex = 0;
+        let bestDistance = Infinity;
+        for (let i = 0; i <= text.length; i++) {
+            const distance = Math.abs(ctx.measureText(text.slice(0, i)).width - localX);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                bestIndex = i;
+            }
+        }
+        return bestIndex;
+    }
     handleNativeInput(event) {
         this.valueInput.emit(event);
     }
@@ -677,14 +1261,27 @@ class DatepickerComponent {
         this.isFocused.set(false);
         this.blurred.emit(event);
         const input = event.target;
-        this._isBadInput = input.validity?.badInput ?? false;
+        const wasSegmented = this.isSegmentedMode();
+        if (wasSegmented) {
+            this.ensureSegmentEngineConfigured();
+            this.segmentEngine.deactivate();
+            this.commitSegmentedValueIfComplete();
+            this.inputDate = this.segmentEngine.isEmpty() ? '' : this.segmentEngine.getDisplayString();
+            input.value = this.inputDate;
+        }
         if (!input.value?.trim()) {
             this.onValidatorChange();
         }
         if (this.isOpen()) {
             const relatedTarget = event.relatedTarget;
             const panel = this.popupPanel()?.nativeElement;
-            if (!relatedTarget || !panel?.contains(relatedTarget)) {
+            // Em modo segmentado, um blur sem `relatedTarget` normalmente não é uma saída real
+            // de foco — é o backdrop transparente do próprio popup (não focável) interceptando
+            // um clique no trigger para trocar de segmento. Não redireciona o foco pro painel
+            // nesse caso; deixa handleInputClick/handleInputFocus resolverem (eles refocam o
+            // input e reaplicam o segmento correto logo em seguida).
+            const looksLikeOwnTriggerClick = wasSegmented && !relatedTarget;
+            if (!looksLikeOwnTriggerClick && (!relatedTarget || !panel?.contains(relatedTarget))) {
                 if (this.mode() === 'time') {
                     this.increaseHourButton()?.nativeElement.focus();
                 }
@@ -698,6 +1295,8 @@ class DatepickerComponent {
         }
     }
     handleInputChange(raw) {
+        if (this.isSegmentModeCandidate())
+            return;
         if (!raw?.trim()) {
             this.value.set(null);
             this.rangeValue.set(null);
@@ -706,14 +1305,13 @@ class DatepickerComponent {
             this._onChange(null);
             return;
         }
-        const parsed = parseInput(this.mode(), raw, this.value(), this.maxHours, this.maxMinutes, this.rangeSeparator());
+        const parsed = parseInput(this.mode(), raw, this.rangeSeparator());
         if (parsed === null) {
             this._hasFormatError = true;
             this.onValidatorChange();
             return;
         }
         this._hasFormatError = false;
-        this._isBadInput = false;
         this.onValidatorChange();
         if (this.isDateRange(parsed)) {
             this.rangeValue.set(parsed);
@@ -729,11 +1327,121 @@ class DatepickerComponent {
         }
     }
     handleTriggerKeydown(event) {
+        if (this.isSegmentedMode() && event.target instanceof HTMLInputElement) {
+            this.handleSegmentedKeydown(event, event.target);
+        }
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             this.open();
         }
     }
+    /** Teclas que devem passar direto para o browser sem inserir/alterar nada no campo. */
+    static SEGMENTED_PASSTHROUGH_KEYS = ['Home', 'End', 'Shift', 'CapsLock', 'Escape', 'Enter', ' '];
+    /** Digitação por segmento (dia/mês/ano/hora/minuto/segundo/ampm) no input do trigger. */
+    handleSegmentedKeydown(event, input) {
+        this.ensureSegmentEngineConfigured();
+        const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
+        if (ctrlKey || metaKey || altKey || key.startsWith('F'))
+            return;
+        if (DatepickerComponent.SEGMENTED_PASSTHROUGH_KEYS.includes(key))
+            return;
+        this.interactionGeneration++;
+        if (key === 'Tab') {
+            const result = this.segmentEngine.moveToAdjacentSegment(shiftKey ? -1 : 1);
+            this.syncSegmentedInput(input);
+            if (result === 'moved') {
+                event.preventDefault();
+            }
+            return;
+        }
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            event.preventDefault();
+            // Ao contrário do Tab, seta no primeiro/último segmento não deve sair do campo nem
+            // desativar a seleção — `moveToAdjacentSegment` zera `activeIndex` ao bater no limite
+            // (comportamento certo pro Tab escapar do campo), então na borda a gente reseleciona
+            // o segmento que já estava ativo, imitando o `<input type="date">` nativo (a seta some
+            // no limite, não navega pra fora).
+            const before = this.segmentEngine.getActiveIndex();
+            const result = this.segmentEngine.moveToAdjacentSegment(key === 'ArrowLeft' ? -1 : 1);
+            if (result === 'boundary' && before !== null) {
+                this.segmentEngine.selectSegment(before);
+            }
+            this.syncSegmentedInput(input);
+            return;
+        }
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            event.preventDefault();
+            this.segmentEngine.incrementActiveSegment(key === 'ArrowUp' ? 1 : -1);
+            this.syncSegmentedInput(input);
+            return;
+        }
+        if (key === 'Backspace' || key === 'Delete') {
+            event.preventDefault();
+            const isWholeFieldSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+            if (isWholeFieldSelected) {
+                this.segmentEngine.clearAll();
+            }
+            else {
+                this.segmentEngine.clearActiveSegment(key === 'Backspace' ? 'backspace' : 'delete');
+            }
+            this.syncSegmentedInput(input);
+            return;
+        }
+        if (/^[0-9]$/.test(key)) {
+            event.preventDefault();
+            this.segmentEngine.typeDigit(key);
+            this.syncSegmentedInput(input);
+            return;
+        }
+        if (this.segmentEngine.activeKind() === 'ampm' && /^[apAP]$/.test(key)) {
+            event.preventDefault();
+            this.segmentEngine.setAmPm(key.toLowerCase() === 'a' ? 0 : 1);
+            this.syncSegmentedInput(input);
+            return;
+        }
+        // Qualquer outra tecla imprimível (letras, símbolos) não é inserida no campo.
+        event.preventDefault();
+    }
+    /** Sincroniza o DOM com o estado atual da engine (valor + seleção do segmento ativo) após uma mutação. */
+    syncSegmentedInput(input) {
+        this.inputDate = this.segmentEngine.getDisplayString();
+        input.value = this.inputDate;
+        this.selectActiveSegmentRange(input);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        this.commitSegmentedValueIfComplete();
+    }
+    selectActiveSegmentRange(input) {
+        const index = this.segmentEngine.getActiveIndex();
+        if (index === null)
+            return;
+        const [start, end] = this.segmentEngine.getSegmentRange(index);
+        input.setSelectionRange(start, end);
+    }
+    /** Propaga o valor da engine para o modelo (CVA) assim que todos os segmentos estiverem completos. */
+    commitSegmentedValueIfComplete() {
+        if (!this.segmentEngine.isComplete()) {
+            if (this.value() !== null) {
+                this.value.set(null);
+                this._onChange(null);
+            }
+            return;
+        }
+        const base = this.value() ??
+            new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), this.hours(), this.minutes(), this.showSeconds() ? this.seconds() : 0);
+        const date = this.segmentEngine.toDate(base);
+        if (!date)
+            return;
+        this.value.set(date);
+        if (this.showCalendar()) {
+            this.viewDate.set(new Date(date.getFullYear(), date.getMonth(), 1));
+        }
+        if (this.showTimePicker()) {
+            this.hours.set(date.getHours());
+            this.minutes.set(date.getMinutes());
+            this.seconds.set(date.getSeconds());
+        }
+        this._onChange(date);
+    }
     // ── Navigation ────────────────────────────────────────────────────────
     navigatePrev() {
         const view = this.viewDate();
@@ -861,13 +1569,13 @@ class DatepickerComponent {
         const newDate = new Date(day.date.getFullYear(), day.date.getMonth(), day.date.getDate(), this.hours(), this.minutes(), this.showSeconds() ? this.seconds() : 0);
         this.value.set(newDate);
         if (this.mode() === 'date') {
-            this.inputDate = this.formatForDisplay(newDate);
+            this.setDisplayFor(newDate);
             this._onChange(newDate);
             this.selected.emit(newDate);
             this.closePanel();
         }
         else if (this.mode() === 'datetime') {
-            this.inputDate = this.formatForDisplay(newDate);
+            this.setDisplayFor(newDate);
             this._onChange(newDate);
             this.selected.emit(newDate);
             if (this.hideOnDateTimeSelect()) {
@@ -907,7 +1615,7 @@ class DatepickerComponent {
         const newViewDate = new Date(year, monthIndex, 1);
         if (this.mode() === 'month') {
             this.value.set(newViewDate);
-            this.inputDate = this.formatForDisplay(newViewDate);
+            this.setDisplayFor(newViewDate);
             this._onChange(newViewDate);
             this.selected.emit(newViewDate);
             this.closePanel();
@@ -944,7 +1652,7 @@ class DatepickerComponent {
         this.rangeValue.set(null);
         this.multipleValues.set([]);
         this.pendingRangeStart.set(null);
-        this.inputDate = '';
+        this.setDisplayFor(null);
         this._onChange(null);
         this.clearClick.emit(event);
         this.closePanel();
@@ -953,7 +1661,7 @@ class DatepickerComponent {
         const current = this.value() ?? new Date();
         const confirmed = new Date(current.getFullYear(), current.getMonth(), current.getDate(), this.hours(), this.minutes(), this.showSeconds() ? this.seconds() : 0);
         this.value.set(confirmed);
-        this.inputDate = this.formatForDisplay(confirmed);
+        this.setDisplayFor(confirmed);
         this._onChange(confirmed);
         this.selected.emit(confirmed);
         this.closePanel();
@@ -1068,7 +1776,7 @@ class DatepickerComponent {
         if (disabledDays.length && disabledDays.includes(date.getDay()))
             return true;
         const disabledDates = this.disabledDates();
-        if (disabledDates.length && disabledDates.some(d => isSameDay(d, date)))
+        if (disabledDates.length && disabledDates.some((d) => isSameDay(d, date)))
             return true;
         return false;
     }
@@ -1108,7 +1816,7 @@ class DatepickerComponent {
         return String(value).padStart(2, '0');
     }
     formatDayAriaLabel(date) {
-        return date.toLocaleDateString(undefined, {
+        return date.toLocaleDateString(this.currentLang(), {
             weekday: 'long',
             year: 'numeric',
             month: 'long',
@@ -1117,13 +1825,62 @@ class DatepickerComponent {
     }
     /** Formata o valor para exibição no input, aplicando rangeSeparator, dateFormat e multipleSeparator. */
     formatForDisplay(value) {
-        return formatValueForInput(this.mode(), value, this.rangeSeparator(), this.dateFormat(), this.multipleSeparator());
+        return formatValueForInput(this.mode(), value, this.rangeSeparator(), this.resolvedDateFormat(), this.multipleSeparator());
+    }
+    /**
+     * Atualiza `inputDate` a partir de um valor único, roteando pela engine de segmentos
+     * (date/month/time/datetime) ou pelo formatador legado (range/year/multiple).
+     */
+    setDisplayFor(value) {
+        if (this.isSegmentModeCandidate()) {
+            this.ensureSegmentEngineConfigured();
+            this.segmentEngine.loadFromDate(value);
+            this.inputDate = value ? this.segmentEngine.getDisplayString() : '';
+            return;
+        }
+        this.inputDate = this.formatForDisplay(value);
+    }
+    /**
+     * (Re)configura a engine de segmentos quando `mode`/`dateFormat`/`hourFormat`/`showSeconds`
+     * mudaram desde a última chamada, recarregando o valor atual. Chamado de forma síncrona a
+     * partir de todo ponto de entrada que usa a engine — não depende de um `effect()` (que só
+     * roda em um ciclo de change detection, tarde demais para leituras/escritas imediatas).
+     */
+    ensureSegmentEngineConfigured() {
+        const mode = this.mode();
+        if (mode !== 'date' && mode !== 'month' && mode !== 'time' && mode !== 'datetime')
+            return;
+        const config = {
+            mode,
+            dateFormat: this.resolvedDateFormat(),
+            hourFormat: this.resolvedHourFormat(),
+            showSeconds: this.showSeconds(),
+        };
+        const last = this.lastSegmentConfig;
+        if (last &&
+            last.mode === config.mode &&
+            last.dateFormat === config.dateFormat &&
+            last.hourFormat === config.hourFormat &&
+            last.showSeconds === config.showSeconds) {
+            return;
+        }
+        this.lastSegmentConfig = config;
+        this.segmentEngine.configure(config);
+        this.segmentEngine.loadFromDate(this.value());
+    }
+    /** Retorna a tradução de `key`, ou `fallback` quando a chave não está traduzida (ngx-translate retorna a própria chave). */
+    resolveTranslatedOrDefault(key, fallback) {
+        const translated = this.translateService.instant(key);
+        if (typeof translated !== 'string' || !translated || translated === key) {
+            return fallback;
+        }
+        return translated;
     }
     syncTimeToValue() {
         const date = this.value() ?? new Date();
         const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.hours(), this.minutes(), this.showSeconds() ? this.seconds() : 0);
         this.value.set(newDate);
-        this.inputDate = this.formatForDisplay(newDate);
+        this.setDisplayFor(newDate);
         if (this.mode() === 'time') {
             this._onChange(newDate);
         }
@@ -1155,8 +1912,6 @@ class DatepickerComponent {
     computeValidationErrors(value, control) {
         if (this._hasFormatError)
             return { invalidFormat: true };
-        if (this._isBadInput)
-            return { badInput: true };
         if (!value || (Array.isArray(value) && value.length === 0))
             return Validators.nullValidator(control);
         const min = this.min();
@@ -1208,7 +1963,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 }], 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        class=\"hide-native-icon 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]=\"inputType()\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonlyInput() || mode() === 'range' || mode() === 'year' || isMultipleMode()\"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (click)=\"handleInputClick()\"\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 class=\"fas fa-times text-xs\" aria-hidden=\"true\"></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 [class]=\"resolvedIcon()\" aria-hidden=\"true\"></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)=\"closePanel()\"\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 class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-[10px]\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div class=\"grid grid-cols-7 px-3 pt-2\" role=\"row\">\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]=\"'platform.angular_components.datepicker_calendar_label' | translate: { month: (currentMonthKey() | translate), year: currentYear() }\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div role=\"row\" class=\"contents\">\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]=\"day.isSelected || day.isRangeStart || day.isRangeEnd ? 'selected' : day.isToday ? 'today' : null\"\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 &&\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !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 class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</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_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></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]=\"isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary': isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10': !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 class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-arrow-left\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\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 class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\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 class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></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", 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}input.hide-native-icon::-webkit-calendar-picker-indicator{display:none}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: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 }] });
 }
 __decorate([
     numericKeysOnly()
@@ -1242,8 +1997,8 @@ 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        class=\"hide-native-icon 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]=\"inputType()\"\n        [placeholder]=\"placeholder() ?? (placeholderKey() | translate)\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonlyInput() || mode() === 'range' || mode() === 'year' || isMultipleMode()\"\n        [tabIndex]=\"tabindex() ?? null\"\n        [autofocus]=\"autofocus()\"\n        [(ngModel)]=\"inputDate\"\n        (ngModelChange)=\"handleInputChange($event)\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        (click)=\"handleInputClick()\"\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 class=\"fas fa-times text-xs\" aria-hidden=\"true\"></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 [class]=\"resolvedIcon()\" aria-hidden=\"true\"></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)=\"closePanel()\"\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 class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-[10px]\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <!-- Cabe\u00E7alhos dos dias da semana -->\n                <div class=\"grid grid-cols-7 px-3 pt-2\" role=\"row\">\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]=\"'platform.angular_components.datepicker_calendar_label' | translate: { month: (currentMonthKey() | translate), year: currentYear() }\"\n                    (keydown)=\"handleCalendarGridKeydown($event)\"\n                >\n                    @for (week of calendarWeeks(); track $index) {\n                        <div role=\"row\" class=\"contents\">\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]=\"day.isSelected || day.isRangeStart || day.isRangeEnd ? 'selected' : day.isToday ? 'today' : null\"\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 &&\n                                            !day.isSelected &&\n                                            !day.isRangeStart &&\n                                            !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 class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n\n                    <span class=\"text-sm font-medium text-grayscale-90\">{{ currentDecadeStart() }} \u2013 {{ currentDecadeStart() + 11 }}</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_decade' | translate\"\n                        (click)=\"navigateNext()\"\n                    >\n                        <i class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></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]=\"isYearSelected(year) ? 'selected' : isCurrentYear(year) ? 'today' : null\"\n                                [disabled]=\"isYearDisabled(year)\"\n                                [ngClass]=\"{\n                                    'bg-primary font-semibold text-grayscale-0': isYearSelected(year),\n                                    'ring-2 ring-inset ring-primary': isCurrentYear(year) && !isYearSelected(year) && !isYearDisabled(year),\n                                    'text-grayscale-90 hover:bg-grayscale-10': !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 class=\"fas fa-chevron-left text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-right text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-arrow-left\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\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 class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @if (showSeconds()) {\n                    <span class=\"text-xl font-bold text-grayscale-60\" aria-hidden=\"true\">:</span>\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 class=\"fas fa-chevron-up text-xs\" aria-hidden=\"true\"></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 class=\"fas fa-chevron-down text-xs\" aria-hidden=\"true\"></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", 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}input.hide-native-icon::-webkit-calendar-picker-indicator{display:none}button[type=button]:focus-visible{outline:2px solid #428BCA;outline-offset:1px;border-radius:inherit}\n"] }]
-        }], propDecorators: { handleHoursKeydown: [], handleMinutesKeydown: [], handleSecondsKeydown: [] } });
+                    ], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { handleHoursKeydown: [], handleMinutesKeydown: [], handleSecondsKeydown: [] } });
 
 /**
  * Generated bundle index. Do not edit.