@seniorsistemas/angular-components 19.5.5 → 19.6.0

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

@@ -0,0 +1,1250 @@
+import { __decorate } from 'tslib';
+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 * 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';
+
+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');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+/**
+ * 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.
+ */
+function formatWithPattern(date, pattern) {
+    const dd = String(date.getDate()).padStart(2, '0');
+    const MM = String(date.getMonth() + 1).padStart(2, '0');
+    const yyyy = String(date.getFullYear());
+    const yy = yyyy.slice(-2);
+    return pattern
+        .replace('yyyy', yyyy)
+        .replace('yy', yy) // must come after yyyy
+        .replace('dd', dd)
+        .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());
+    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);
+    if (year < 1000) {
+        return null;
+    }
+    const date = new Date(year, month, day);
+    if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+        return null;
+    }
+    return date;
+}
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function stripTime(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function parseRangeInput(raw, separator = '—') {
+    const trimmedSeparator = separator.trim() || '—';
+    const parts = raw.split(trimmedSeparator).map((part) => part.trim());
+    if (parts.length !== 2) {
+        return null;
+    }
+    const start = parseDate(parts[0]);
+    const end = parseDate(parts[1]);
+    if (!start || !end) {
+        return null;
+    }
+    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) {
+        return null;
+    }
+    const year = parseInt(match[1], 10);
+    if (year < 1000) {
+        return null;
+    }
+    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 = '—') {
+    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);
+    }
+}
+function formatValueForInput(mode, value, rangeSeparator = ' — ', dateFormat, multipleSeparator = ', ') {
+    if (!value) {
+        return '';
+    }
+    const formatPart = (date) => dateFormat ? formatWithPattern(date, dateFormat) : formatNativeDate(date);
+    if (Array.isArray(value)) {
+        return value.map(formatPart).join(multipleSeparator);
+    }
+    if (mode === 'range') {
+        const range = value;
+        if (!range.start) {
+            return '';
+        }
+        return range.end
+            ? `${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);
+    }
+}
+
+function numericKeysOnly() {
+    return (_target, _key, descriptor) => {
+        const original = descriptor.value;
+        descriptor.value = function (event) {
+            const isValidKey = ['ArrowUp', 'ArrowDown', 'Backspace', 'Delete', 'Tab'].includes(event.key) || /^\d$/.test(event.key);
+            if (!isValidKey) {
+                event.preventDefault();
+            }
+            else {
+                original.call(this, event);
+            }
+        };
+        return descriptor;
+    };
+}
+class DatepickerComponent {
+    static idCounter = 0;
+    static DAYS_IN_WEEK = 7;
+    static MONTHS_IN_YEAR = 12;
+    static MONTHS_PER_ROW = 3;
+    static YEARS_PER_GRID = 12;
+    static YEARS_PER_ROW = 3;
+    static DEFAULT_MINUTE_STEP = 5;
+    static MAX_HOURS = 24;
+    static MAX_MINUTES = 60;
+    static HOURS_PER_MERIDIEM = 12;
+    static nextId() {
+        DatepickerComponent.idCounter++;
+        return `s-datepicker-${DatepickerComponent.idCounter}`;
+    }
+    // ── Inputs ────────────────────────────────────────────────────────────
+    /** HTML `id` aplicado ao elemento `<input>`. Auto-gerado quando omitido. */
+    inputId = input(DatepickerComponent.nextId());
+    /** Atributo `name` do `<input>` nativo. */
+    name = input();
+    /** Texto exibido quando nenhum valor está selecionado. */
+    placeholder = input();
+    /**
+     * Modo de seleção do componente.
+     * - `'date'` — seleção de data única (padrão)
+     * - `'month'` — seleção de mês/ano
+     * - `'datetime'` — data com hora (requer confirmação)
+     * - `'time'` — apenas seleção de hora
+     * - `'range'` — intervalo entre duas datas
+     */
+    mode = input('date');
+    /**
+     * Modo de seleção quando `mode` é `'date'`.
+     * - `'single'` — seleção de uma única data (padrão)
+     * - `'multiple'` — seleção de múltiplas datas avulsas
+     */
+    selectionMode = input('single');
+    /** Separador exibido entre as datas no modo `selectionMode = 'multiple'`. */
+    multipleSeparator = input(', ');
+    /** Quando `true`, exibe o botão de ícone ao lado do campo. */
+    showIcon = input(true);
+    /**
+     * Classe do ícone exibido no botão do campo.
+     * Quando `mode` é `'time'`, o padrão muda automaticamente para `'fas fa-clock'`.
+     */
+    icon = input('fas fa-calendar');
+    /** Data mínima selecionável. Dias/meses anteriores ficam desabilitados. */
+    min = input(null);
+    /** Data máxima selecionável. Dias/meses posteriores ficam desabilitados. */
+    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');
+    /** 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. */
+    showSeconds = input(false);
+    /** Separador exibido entre as datas no modo `'range'`. */
+    rangeSeparator = input(' — ');
+    /** Abre o painel ao focar o input; foco permanece no input, não pula para o dropdown. */
+    showOnFocus = input(true);
+    /** Impede digitação manual; valor só pode ser selecionado pelo calendário. */
+    readonlyInput = input(false);
+    /** Primeiro dia da semana (0 = domingo, 1 = segunda-feira, ..., 6 = sábado). */
+    firstDayOfWeek = input(0);
+    /** Exibe/oculta a barra de botões Hoje e Limpar no rodapé. */
+    showButtonBar = input(true);
+    /** Exibe ícone de limpar inline no campo de input. */
+    showClear = input(false);
+    /** Exibe dias de meses adjacentes na grade do calendário. */
+    showOtherMonths = input(true);
+    /** Permite selecionar dias de meses adjacentes na grade do calendário. */
+    selectOtherMonths = input(false);
+    /** Fecha o painel após selecionar uma data no modo `datetime`. */
+    hideOnDateTimeSelect = input(false);
+    /** Incremento de horas no time picker. */
+    stepHour = input(1);
+    /** Incremento de segundos no time picker. */
+    stepSecond = input(1);
+    /** Índice de tab do campo de input. */
+    tabindex = input();
+    /** Foca automaticamente o campo ao carregar o componente. */
+    autofocus = input(false);
+    /** Datas específicas desabilitadas no calendário. */
+    disabledDates = input([]);
+    /** Dias da semana desabilitados (0 = domingo, ..., 6 = sábado). */
+    disabledDays = input([]);
+    // ── Two-way models ────────────────────────────────────────────────────
+    /** Estado desabilitado do componente. */
+    disabled = model(false);
+    // ── Outputs ───────────────────────────────────────────────────────────
+    /** Emitido quando o campo perde o foco. */
+    blurred = output();
+    /** Emitido quando o campo recebe o foco. */
+    focused = output();
+    /** Emitido ao selecionar uma data, mês, horário ou intervalo. */
+    selected = output();
+    /** Emitido quando o painel do calendário fecha. Emite o elemento do painel. */
+    closed = output();
+    /** Emitido ao clicar no botão "Hoje". */
+    todayClick = output();
+    /** Emitido ao clicar no botão "Limpar" ou no ícone de limpar inline. */
+    clearClick = output();
+    /** Emitido quando o mês visualizado muda. */
+    monthChange = output();
+    /** Emitido quando o ano visualizado muda. */
+    yearChange = output();
+    /** Emitido quando o painel do calendário abre. */
+    show = output();
+    /** Emitido quando o usuário digita manualmente no campo. */
+    valueInput = output();
+    // ── Internal state ────────────────────────────────────────────────────
+    maxHours = DatepickerComponent.MAX_HOURS;
+    maxMinutes = DatepickerComponent.MAX_MINUTES;
+    timeInputMaxLength = 2;
+    inputDate = '';
+    ngControl = null;
+    value = signal(null);
+    isOpen = signal(false);
+    viewDate = signal(new Date());
+    pickerView = signal('calendar');
+    hours = signal(0);
+    minutes = signal(0);
+    seconds = signal(0);
+    rangeValue = signal(null);
+    multipleValues = signal([]);
+    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 });
+    injector = inject(Injector);
+    hostElement = inject(ElementRef);
+    // ── Computed ──────────────────────────────────────────────────────────
+    resolvedIcon = computed(() => (this.mode() === 'time' ? 'fas fa-clock' : this.icon()));
+    /** Indica se o time picker deve usar o formato de 12 horas com seletor AM/PM. */
+    is12HourFormat = computed(() => this.hourFormat() === '12');
+    /** Hora exibida no time picker: 1–12 no formato 12h, 0–23 no formato 24h. */
+    displayHours = computed(() => {
+        if (!this.is12HourFormat())
+            return this.hours();
+        const h12 = this.hours() % DatepickerComponent.HOURS_PER_MERIDIEM;
+        return h12 === 0 ? DatepickerComponent.HOURS_PER_MERIDIEM : h12;
+    });
+    /** Meridiano atual derivado da hora interna (0–23). */
+    amPm = computed(() => this.hours() < DatepickerComponent.HOURS_PER_MERIDIEM ? 'AM' : 'PM');
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
+    popupId = computed(() => `${this.inputId()}-popup`);
+    currentMonthIndex = computed(() => this.viewDate().getMonth());
+    currentYear = computed(() => this.viewDate().getFullYear());
+    currentMonthKey = computed(() => this.monthKeys[this.currentMonthIndex()]);
+    showCalendar = computed(() => this.mode() !== 'time');
+    showTimePicker = computed(() => this.mode() === 'datetime' || this.mode() === 'time');
+    /** Seleção múltipla ativa: apenas no modo `date` com `selectionMode = 'multiple'`. */
+    isMultipleMode = computed(() => this.selectionMode() === 'multiple' && this.mode() === 'date');
+    orderedWeekDayKeys = computed(() => {
+        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');
+    placeholderKey = computed(() => {
+        const mode = this.mode();
+        return `platform.angular_components.datepicker_placeholder_${mode}`;
+    });
+    effectiveRange = computed(() => {
+        const pending = this.pendingRangeStart();
+        const hover = this.hoverDate();
+        if (pending) {
+            if (hover) {
+                const [start, end] = pending.getTime() <= hover.getTime() ? [pending, hover] : [hover, pending];
+                return { start, end };
+            }
+            return { start: pending, end: null };
+        }
+        return this.rangeValue() ?? { start: null, end: null };
+    });
+    calendarWeeks = computed(() => {
+        const year = this.currentYear();
+        const month = this.currentMonthIndex();
+        const today = new Date();
+        const selected = this.value();
+        const range = this.effectiveRange();
+        const rangeStartTime = range.start ? stripTime(range.start) : null;
+        const rangeEndTime = range.end ? stripTime(range.end) : null;
+        const firstDayOfMonth = new Date(year, month, 1);
+        const startWeekDay = firstDayOfMonth.getDay();
+        const adjustedStartDay = (startWeekDay - this.firstDayOfWeek() + 7) % 7;
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrevMonth = new Date(year, month, 0).getDate();
+        const allDays = [];
+        for (let i = adjustedStartDay - 1; i >= 0; i--) {
+            const date = new Date(year, month - 1, daysInPrevMonth - i);
+            allDays.push(this.buildCalendarDay(date, false, today, selected, range, rangeStartTime, rangeEndTime));
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            const date = new Date(year, month, d);
+            allDays.push(this.buildCalendarDay(date, true, today, selected, range, rangeStartTime, rangeEndTime));
+        }
+        const totalCells = Math.ceil(allDays.length / DatepickerComponent.DAYS_IN_WEEK) * DatepickerComponent.DAYS_IN_WEEK;
+        let nextDay = 1;
+        while (allDays.length < totalCells) {
+            const date = new Date(year, month + 1, nextDay);
+            nextDay++;
+            allDays.push(this.buildCalendarDay(date, false, today, selected, range, rangeStartTime, rangeEndTime));
+        }
+        const weeks = [];
+        for (let i = 0; i < allDays.length; i += DatepickerComponent.DAYS_IN_WEEK) {
+            weeks.push(allDays.slice(i, i + DatepickerComponent.DAYS_IN_WEEK));
+        }
+        return weeks;
+    });
+    monthsGrid = computed(() => {
+        const rows = [];
+        for (let i = 0; i < DatepickerComponent.MONTHS_IN_YEAR; i += DatepickerComponent.MONTHS_PER_ROW) {
+            rows.push([
+                { key: this.monthKeys[i], index: i },
+                { key: this.monthKeys[i + 1], index: i + 1 },
+                { key: this.monthKeys[i + 2], index: i + 2 },
+            ]);
+        }
+        return rows;
+    });
+    currentDecadeStart = computed(() => Math.floor(this.currentYear() / 10) * 10);
+    yearsGrid = computed(() => {
+        const start = this.currentDecadeStart();
+        const rows = [];
+        for (let i = 0; i < DatepickerComponent.YEARS_PER_GRID; i += DatepickerComponent.YEARS_PER_ROW) {
+            rows.push([start + i, start + i + 1, start + i + 2]);
+        }
+        return rows;
+    });
+    prevDisabled = computed(() => {
+        const min = this.min();
+        if (!min)
+            return false;
+        const view = this.viewDate();
+        if (this.pickerView() === 'years') {
+            return this.currentDecadeStart() <= min.getFullYear();
+        }
+        if (this.pickerView() === 'months') {
+            return view.getFullYear() <= min.getFullYear();
+        }
+        return (view.getFullYear() < min.getFullYear() ||
+            (view.getFullYear() === min.getFullYear() && view.getMonth() <= min.getMonth()));
+    });
+    nextDisabled = computed(() => {
+        const max = this.max();
+        if (!max)
+            return false;
+        const view = this.viewDate();
+        if (this.pickerView() === 'years') {
+            return this.currentDecadeStart() + DatepickerComponent.YEARS_PER_GRID - 1 >= max.getFullYear();
+        }
+        if (this.pickerView() === 'months') {
+            return view.getFullYear() >= max.getFullYear();
+        }
+        return (view.getFullYear() > max.getFullYear() ||
+            (view.getFullYear() === max.getFullYear() && view.getMonth() >= max.getMonth()));
+    });
+    // ── Translation keys ──────────────────────────────────────────────────
+    weekDayKeys = [
+        'platform.angular_components.datepicker_day_sun',
+        'platform.angular_components.datepicker_day_mon',
+        'platform.angular_components.datepicker_day_tue',
+        'platform.angular_components.datepicker_day_wed',
+        'platform.angular_components.datepicker_day_thu',
+        'platform.angular_components.datepicker_day_fri',
+        'platform.angular_components.datepicker_day_sat',
+    ];
+    monthKeys = [
+        'platform.angular_components.datepicker_month_jan',
+        'platform.angular_components.datepicker_month_feb',
+        'platform.angular_components.datepicker_month_mar',
+        'platform.angular_components.datepicker_month_apr',
+        'platform.angular_components.datepicker_month_may',
+        'platform.angular_components.datepicker_month_jun',
+        'platform.angular_components.datepicker_month_jul',
+        'platform.angular_components.datepicker_month_aug',
+        'platform.angular_components.datepicker_month_sep',
+        'platform.angular_components.datepicker_month_oct',
+        'platform.angular_components.datepicker_month_nov',
+        'platform.angular_components.datepicker_month_dec',
+    ];
+    // ── Lifecycle ─────────────────────────────────────────────────────────
+    ngOnInit() {
+        this.ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
+        afterNextRender(() => {
+            const d = this.defaultDate();
+            if (d && !this.value() && !this.rangeValue() && this.multipleValues().length === 0) {
+                this.value.set(d);
+                this.inputDate = this.formatForDisplay(d);
+                this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
+                this._onChange(d);
+            }
+        }, { injector: this.injector });
+    }
+    // ── ControlValueAccessor ──────────────────────────────────────────────
+    writeValue(value) {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+            this.value.set(null);
+            this.rangeValue.set(null);
+            this.multipleValues.set([]);
+            this.inputDate = '';
+            return;
+        }
+        if (Array.isArray(value)) {
+            const sorted = [...value].sort((a, b) => a.getTime() - b.getTime());
+            this.multipleValues.set(sorted);
+            this.inputDate = this.formatForDisplay(sorted);
+            const first = sorted[0];
+            this.viewDate.set(new Date(first.getFullYear(), first.getMonth(), 1));
+            return;
+        }
+        if (this.isDateRange(value)) {
+            this.rangeValue.set(value);
+            this.inputDate = this.formatForDisplay(value);
+            if (value.start) {
+                this.viewDate.set(new Date(value.start.getFullYear(), value.start.getMonth(), 1));
+            }
+            return;
+        }
+        this.value.set(value);
+        this.inputDate = this.formatForDisplay(value);
+        const d = value;
+        this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
+        this.hours.set(d.getHours());
+        this.minutes.set(d.getMinutes());
+        this.seconds.set(d.getSeconds());
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // ── Validator ─────────────────────────────────────────────────────────
+    validate(control) {
+        let value;
+        if (this.isMultipleMode()) {
+            value = this.multipleValues();
+        }
+        else if (this.mode() === 'range') {
+            value = this.rangeValue();
+        }
+        else {
+            value = this.value();
+        }
+        return this.computeValidationErrors(value, control);
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ── Public actions ────────────────────────────────────────────────────
+    open() {
+        if (this.disabled())
+            return;
+        this.isOpen.set(true);
+        this.prepareOpenView();
+        this.show.emit();
+        if (this.mode() === 'time') {
+            afterNextRender(() => this.increaseHourButton()?.nativeElement.focus(), { injector: this.injector });
+        }
+        else {
+            this.focusBestCalendarTarget();
+        }
+    }
+    /** Abre o painel sem transferir o foco para o dropdown (usado pelo showOnFocus). */
+    openOnFocus() {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.prepareOpenView();
+        this.show.emit();
+        // Foco permanece no input — não chama focusBestCalendarTarget()
+    }
+    /**
+     * Define a view inicial do painel e posiciona o calendário no `defaultDate`
+     * quando nenhum valor está selecionado.
+     */
+    prepareOpenView() {
+        const defaultDate = this.defaultDate();
+        if (defaultDate && !this.value() && !this.rangeValue()) {
+            this.viewDate.set(new Date(defaultDate.getFullYear(), defaultDate.getMonth(), 1));
+        }
+        if (this.mode() === 'month') {
+            this.pickerView.set('months');
+        }
+        else if (this.mode() === 'year') {
+            this.pickerView.set('years');
+        }
+        else {
+            this.pickerView.set('calendar');
+        }
+    }
+    focusBestCalendarTarget() {
+        afterNextRender(() => {
+            const panel = this.popupPanel()?.nativeElement;
+            if (!panel)
+                return;
+            const target = panel.querySelector('[data-focus="selected"]') ??
+                panel.querySelector('[data-focus="today"]') ??
+                panel.querySelector('button:not([disabled])');
+            target?.focus();
+        }, { injector: this.injector });
+    }
+    closePanel() {
+        const panel = (this.popupPanel()?.nativeElement ?? this.hostElement.nativeElement);
+        this.isOpen.set(false);
+        this.pendingRangeStart.set(null);
+        this.hoverDate.set(null);
+        this._onTouched();
+        this.closed.emit(panel);
+        afterNextRender(() => {
+            this.iconButton()?.nativeElement.focus();
+        }, { injector: this.injector });
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.closePanel();
+        }
+        else {
+            this.open();
+        }
+    }
+    handleOverlayKeydown(event) {
+        if (event.key === 'Escape') {
+            this.closePanel();
+        }
+    }
+    handleInputClick() { }
+    handleInputFocus(event) {
+        this.focused.emit(event);
+        if (this.showOnFocus()) {
+            this.openOnFocus();
+        }
+    }
+    handleNativeInput(event) {
+        this.valueInput.emit(event);
+    }
+    handleInputBlur(event) {
+        this.blurred.emit(event);
+        const input = event.target;
+        this._isBadInput = input.validity?.badInput ?? false;
+        if (!input.value?.trim()) {
+            this.onValidatorChange();
+        }
+        if (this.isOpen()) {
+            const relatedTarget = event.relatedTarget;
+            const panel = this.popupPanel()?.nativeElement;
+            if (!relatedTarget || !panel?.contains(relatedTarget)) {
+                if (this.mode() === 'time') {
+                    this.increaseHourButton()?.nativeElement.focus();
+                }
+                else {
+                    const target = panel?.querySelector('[data-focus="selected"]') ??
+                        panel?.querySelector('[data-focus="today"]') ??
+                        panel?.querySelector('button:not([disabled])');
+                    target?.focus();
+                }
+            }
+        }
+    }
+    handleInputChange(raw) {
+        if (!raw?.trim()) {
+            this.value.set(null);
+            this.rangeValue.set(null);
+            this._hasFormatError = false;
+            this.onValidatorChange();
+            this._onChange(null);
+            return;
+        }
+        const parsed = parseInput(this.mode(), raw, this.value(), this.maxHours, this.maxMinutes, 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);
+            this._onChange(parsed);
+        }
+        else {
+            const d = parsed;
+            this.value.set(d);
+            this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
+            this.hours.set(d.getHours());
+            this.minutes.set(d.getMinutes());
+            this._onChange(d);
+        }
+    }
+    handleTriggerKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    // ── Navigation ────────────────────────────────────────────────────────
+    navigatePrev() {
+        const view = this.viewDate();
+        if (this.pickerView() === 'years') {
+            this.viewDate.set(new Date(view.getFullYear() - 10, view.getMonth(), 1));
+            this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() - 10 });
+        }
+        else if (this.pickerView() === 'months') {
+            this.viewDate.set(new Date(view.getFullYear() - 1, view.getMonth(), 1));
+            this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() - 1 });
+        }
+        else {
+            const newDate = new Date(view.getFullYear(), view.getMonth() - 1, 1);
+            this.viewDate.set(newDate);
+            this.monthChange.emit({ month: newDate.getMonth(), year: newDate.getFullYear() });
+        }
+    }
+    navigateNext() {
+        const view = this.viewDate();
+        if (this.pickerView() === 'years') {
+            this.viewDate.set(new Date(view.getFullYear() + 10, view.getMonth(), 1));
+            this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() + 10 });
+        }
+        else if (this.pickerView() === 'months') {
+            this.viewDate.set(new Date(view.getFullYear() + 1, view.getMonth(), 1));
+            this.yearChange.emit({ month: view.getMonth(), year: view.getFullYear() + 1 });
+        }
+        else {
+            const newDate = new Date(view.getFullYear(), view.getMonth() + 1, 1);
+            this.viewDate.set(newDate);
+            this.monthChange.emit({ month: newDate.getMonth(), year: newDate.getFullYear() });
+        }
+    }
+    handleCalendarGridKeydown(event) {
+        const ARROWS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+        if (!ARROWS.includes(event.key))
+            return;
+        event.preventDefault();
+        const grid = event.currentTarget;
+        const buttons = Array.from(grid.querySelectorAll('button[role="gridcell"]'));
+        const currentIdx = buttons.indexOf(event.target);
+        if (currentIdx === -1)
+            return;
+        let delta = 0;
+        if (event.key === 'ArrowRight')
+            delta = 1;
+        else if (event.key === 'ArrowLeft')
+            delta = -1;
+        else if (event.key === 'ArrowDown')
+            delta = DatepickerComponent.DAYS_IN_WEEK;
+        else if (event.key === 'ArrowUp')
+            delta = -DatepickerComponent.DAYS_IN_WEEK;
+        const nextIdx = currentIdx + delta;
+        if (nextIdx < 0) {
+            if (this.prevDisabled())
+                return;
+            this.navigatePrev();
+            afterNextRender(() => {
+                const panel = this.popupPanel()?.nativeElement;
+                const btns = Array.from(panel?.querySelectorAll('button[role="gridcell"]') ?? []);
+                const targetIdx = Math.max(0, btns.length + nextIdx);
+                const target = DatepickerComponent.findEnabled(btns, targetIdx, -1) ??
+                    DatepickerComponent.findEnabled(btns, targetIdx, 1);
+                target?.focus();
+            }, { injector: this.injector });
+            return;
+        }
+        if (nextIdx >= buttons.length) {
+            if (this.nextDisabled())
+                return;
+            this.navigateNext();
+            afterNextRender(() => {
+                const panel = this.popupPanel()?.nativeElement;
+                const btns = Array.from(panel?.querySelectorAll('button[role="gridcell"]') ?? []);
+                const targetIdx = Math.min(nextIdx - buttons.length, btns.length - 1);
+                const target = DatepickerComponent.findEnabled(btns, targetIdx, 1) ??
+                    DatepickerComponent.findEnabled(btns, targetIdx, -1);
+                target?.focus();
+            }, { injector: this.injector });
+            return;
+        }
+        if (!buttons[nextIdx]?.disabled) {
+            buttons[nextIdx].focus();
+        }
+    }
+    static findEnabled(buttons, startIdx, direction) {
+        for (let i = startIdx; i >= 0 && i < buttons.length; i += direction) {
+            if (!buttons[i].disabled)
+                return buttons[i];
+        }
+        return null;
+    }
+    switchToMonths() {
+        this.pickerView.set('months');
+        this.focusBestCalendarTarget();
+    }
+    backToCalendar() {
+        this.pickerView.set('calendar');
+        this.focusBestCalendarTarget();
+    }
+    // ── Selection ─────────────────────────────────────────────────────────
+    selectDate(day) {
+        if (day.isDisabled)
+            return;
+        if (this.isMultipleMode()) {
+            this.toggleMultipleDate(day.date);
+            return;
+        }
+        if (this.mode() === 'range') {
+            const pending = this.pendingRangeStart();
+            if (!pending) {
+                this.pendingRangeStart.set(day.date);
+            }
+            else {
+                const [start, end] = pending.getTime() <= day.date.getTime() ? [pending, day.date] : [day.date, pending];
+                const range = { start, end };
+                this.rangeValue.set(range);
+                this.inputDate = this.formatForDisplay(range);
+                this._onChange(range);
+                this.selected.emit(range);
+                this.closePanel();
+            }
+            return;
+        }
+        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._onChange(newDate);
+            this.selected.emit(newDate);
+            this.closePanel();
+        }
+        else if (this.mode() === 'datetime') {
+            this.inputDate = this.formatForDisplay(newDate);
+            this._onChange(newDate);
+            this.selected.emit(newDate);
+            if (this.hideOnDateTimeSelect()) {
+                this.closePanel();
+            }
+        }
+    }
+    /** Adiciona/remove uma data da seleção múltipla. O painel permanece aberto. */
+    toggleMultipleDate(date) {
+        const normalized = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        const existing = this.multipleValues();
+        const index = existing.findIndex((d) => isSameDay(d, normalized));
+        const next = index >= 0
+            ? existing.filter((_, i) => i !== index)
+            : [...existing, normalized].sort((a, b) => a.getTime() - b.getTime());
+        this.multipleValues.set(next);
+        this.inputDate = this.formatForDisplay(next);
+        const emitValue = next.length ? next : null;
+        this.onValidatorChange();
+        this._onChange(emitValue);
+        this.selected.emit(emitValue);
+    }
+    selectYear(year) {
+        if (this.isYearDisabled(year))
+            return;
+        const newDate = new Date(year, 0, 1);
+        this.value.set(newDate);
+        this.inputDate = this.formatForDisplay(newDate);
+        this._onChange(newDate);
+        this.selected.emit(newDate);
+        this.closePanel();
+    }
+    selectMonth(monthIndex) {
+        if (this.isMonthDisabled(monthIndex))
+            return;
+        const year = this.currentYear();
+        const newViewDate = new Date(year, monthIndex, 1);
+        if (this.mode() === 'month') {
+            this.value.set(newViewDate);
+            this.inputDate = this.formatForDisplay(newViewDate);
+            this._onChange(newViewDate);
+            this.selected.emit(newViewDate);
+            this.closePanel();
+        }
+        else {
+            this.viewDate.set(newViewDate);
+            this.pickerView.set('calendar');
+            this.focusBestCalendarTarget();
+        }
+    }
+    selectToday() {
+        const today = new Date();
+        if (!this.isDateDisabled(today)) {
+            const calDay = {
+                date: today,
+                dayOfMonth: today.getDate(),
+                isCurrentMonth: true,
+                isToday: true,
+                isSelected: false,
+                isDisabled: false,
+                isRangeStart: false,
+                isRangeEnd: false,
+                isInRange: false,
+            };
+            this.selectDate(calDay);
+            this.todayClick.emit(today);
+        }
+    }
+    clearValue(event) {
+        this.value.set(null);
+        this.hours.set(0);
+        this.minutes.set(0);
+        this.seconds.set(0);
+        this.rangeValue.set(null);
+        this.multipleValues.set([]);
+        this.pendingRangeStart.set(null);
+        this.inputDate = '';
+        this._onChange(null);
+        this.clearClick.emit(event);
+        this.closePanel();
+    }
+    confirm() {
+        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._onChange(confirmed);
+        this.selected.emit(confirmed);
+        this.closePanel();
+    }
+    // ── Time picker ───────────────────────────────────────────────────────
+    incrementHours() {
+        this.hours.set((this.hours() + this.stepHour()) % this.maxHours);
+        this.syncTimeToValue();
+    }
+    decrementHours() {
+        this.hours.set((this.hours() - this.stepHour() + this.maxHours) % this.maxHours);
+        this.syncTimeToValue();
+    }
+    incrementMinutes() {
+        this.minutes.set((this.minutes() + this.minuteStep()) % this.maxMinutes);
+        this.syncTimeToValue();
+    }
+    decrementMinutes() {
+        this.minutes.set((this.minutes() - this.minuteStep() + this.maxMinutes) % this.maxMinutes);
+        this.syncTimeToValue();
+    }
+    incrementSeconds() {
+        this.seconds.set((this.seconds() + this.stepSecond()) % 60);
+        this.syncTimeToValue();
+    }
+    decrementSeconds() {
+        this.seconds.set((this.seconds() - this.stepSecond() + 60) % 60);
+        this.syncTimeToValue();
+    }
+    handleHoursKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.incrementHours();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.decrementHours();
+        }
+    }
+    handleMinutesKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.incrementMinutes();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.decrementMinutes();
+        }
+    }
+    handleSecondsKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.incrementSeconds();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.decrementSeconds();
+        }
+    }
+    handleHoursInput(event) {
+        const raw = event.target.value;
+        const parsed = parseInt(raw, 10);
+        if (isNaN(parsed))
+            return;
+        if (this.is12HourFormat()) {
+            const half = DatepickerComponent.HOURS_PER_MERIDIEM;
+            const h12 = Math.min(half, Math.max(1, parsed));
+            const base = h12 % half;
+            this.hours.set(this.amPm() === 'PM' ? base + half : base);
+        }
+        else {
+            this.hours.set(Math.min(this.maxHours - 1, Math.max(0, parsed)));
+        }
+        this.syncTimeToValue();
+    }
+    /** Alterna entre AM e PM somando/subtraindo 12 horas da hora interna. */
+    toggleAmPm() {
+        const half = DatepickerComponent.HOURS_PER_MERIDIEM;
+        this.hours.set(this.hours() < half ? this.hours() + half : this.hours() - half);
+        this.syncTimeToValue();
+    }
+    handleMinutesInput(event) {
+        const raw = event.target.value;
+        const parsed = parseInt(raw, 10);
+        if (!isNaN(parsed)) {
+            this.minutes.set(Math.min(this.maxMinutes - 1, Math.max(0, parsed)));
+            this.syncTimeToValue();
+        }
+    }
+    handleSecondsInput(event) {
+        const raw = event.target.value;
+        const parsed = parseInt(raw, 10);
+        if (!isNaN(parsed)) {
+            this.seconds.set(Math.min(59, Math.max(0, parsed)));
+            this.syncTimeToValue();
+        }
+    }
+    onDayHover(date) {
+        if (this.mode() === 'range') {
+            this.hoverDate.set(date);
+        }
+    }
+    // ── Helpers ───────────────────────────────────────────────────────────
+    isDateDisabled(date) {
+        const min = this.min();
+        const max = this.max();
+        if (min && stripTime(date) < stripTime(min))
+            return true;
+        if (max && stripTime(date) > stripTime(max))
+            return true;
+        const disabledDays = this.disabledDays();
+        if (disabledDays.length && disabledDays.includes(date.getDay()))
+            return true;
+        const disabledDates = this.disabledDates();
+        if (disabledDates.length && disabledDates.some(d => isSameDay(d, date)))
+            return true;
+        return false;
+    }
+    isYearSelected(year) {
+        const selected = this.value();
+        return !!selected && selected.getFullYear() === year;
+    }
+    isYearDisabled(year) {
+        const min = this.min();
+        const max = this.max();
+        if (min && year < min.getFullYear())
+            return true;
+        if (max && year > max.getFullYear())
+            return true;
+        return false;
+    }
+    isCurrentYear(year) {
+        return year === new Date().getFullYear();
+    }
+    isMonthSelected(monthIndex) {
+        const selected = this.value();
+        return !!selected && selected.getMonth() === monthIndex && selected.getFullYear() === this.currentYear();
+    }
+    isMonthDisabled(monthIndex) {
+        const year = this.currentYear();
+        const min = this.min();
+        const max = this.max();
+        if (min && (year < min.getFullYear() || (year === min.getFullYear() && monthIndex < min.getMonth()))) {
+            return true;
+        }
+        if (max && (year > max.getFullYear() || (year === max.getFullYear() && monthIndex > max.getMonth()))) {
+            return true;
+        }
+        return false;
+    }
+    padTime(value) {
+        return String(value).padStart(2, '0');
+    }
+    formatDayAriaLabel(date) {
+        return date.toLocaleDateString(undefined, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    }
+    /** 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());
+    }
+    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);
+        if (this.mode() === 'time') {
+            this._onChange(newDate);
+        }
+    }
+    buildCalendarDay(date, isCurrentMonth, today, selected, range, rangeStartTime, rangeEndTime) {
+        const isRangeStart = range.start ? isSameDay(date, range.start) : false;
+        const isRangeEnd = range.end ? isSameDay(date, range.end) : false;
+        const dateTime = stripTime(date);
+        const isInRange = rangeStartTime !== null && rangeEndTime !== null
+            ? dateTime > rangeStartTime && dateTime < rangeEndTime
+            : false;
+        const isSelected = this.isMultipleMode()
+            ? this.multipleValues().some((d) => isSameDay(d, date))
+            : selected
+                ? isSameDay(date, selected)
+                : false;
+        return {
+            dayOfMonth: date.getDate(),
+            isToday: isSameDay(date, today),
+            isSelected,
+            isDisabled: this.isDateDisabled(date) || (!isCurrentMonth && !this.selectOtherMonths()),
+            date,
+            isCurrentMonth,
+            isRangeStart,
+            isRangeEnd,
+            isInRange,
+        };
+    }
+    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();
+        const max = this.max();
+        if (Array.isArray(value)) {
+            for (const d of value) {
+                if (min && stripTime(d) < stripTime(min))
+                    return { min: { min, actual: d } };
+                if (max && stripTime(d) > stripTime(max))
+                    return { max: { max, actual: d } };
+            }
+            return Validators.nullValidator(control);
+        }
+        if (this.isDateRange(value)) {
+            if (value.start && min && stripTime(value.start) < stripTime(min)) {
+                return { min: { min, actual: value.start } };
+            }
+            if (value.end && max && stripTime(value.end) > stripTime(max)) {
+                return { max: { max, actual: value.end } };
+            }
+            return Validators.nullValidator(control);
+        }
+        const d = value;
+        if (this.mode() === 'year') {
+            if (min && d.getFullYear() < min.getFullYear())
+                return { min: { min, actual: d } };
+            if (max && d.getFullYear() > max.getFullYear())
+                return { max: { max, actual: d } };
+            return Validators.nullValidator(control);
+        }
+        if (min && stripTime(d) < stripTime(min))
+            return { min: { min, actual: d } };
+        if (max && stripTime(d) > stripTime(max))
+            return { max: { max, actual: d } };
+        return Validators.nullValidator(control);
+    }
+    isDateRange(value) {
+        return typeof value === 'object' && value !== null && 'start' in value && 'end' in value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DatepickerComponent, isStandalone: true, selector: "s-datepicker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, multipleSeparator: { classPropertyName: "multipleSeparator", publicName: "multipleSeparator", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showOtherMonths: { classPropertyName: "showOtherMonths", publicName: "showOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, selectOtherMonths: { classPropertyName: "selectOtherMonths", publicName: "selectOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, hideOnDateTimeSelect: { classPropertyName: "hideOnDateTimeSelect", publicName: "hideOnDateTimeSelect", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", blurred: "blurred", focused: "focused", selected: "selected", closed: "closed", todayClick: "todayClick", clearClick: "clearClick", monthChange: "monthChange", yearChange: "yearChange", show: "show", valueInput: "valueInput" }, host: { properties: { "class.no-icon": "!showIcon()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: DatepickerComponent,
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                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 focus:outline-1 focus:outline-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()\"\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-full 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 }] });
+}
+__decorate([
+    numericKeysOnly()
+], DatepickerComponent.prototype, "handleHoursKeydown", null);
+__decorate([
+    numericKeysOnly()
+], DatepickerComponent.prototype, "handleMinutesKeydown", null);
+__decorate([
+    numericKeysOnly()
+], DatepickerComponent.prototype, "handleSecondsKeydown", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-datepicker', standalone: true, imports: [
+                        NgClass,
+                        TranslateModule,
+                        CdkTrapFocus,
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], host: {
+                        '[class.no-icon]': '!showIcon()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: DatepickerComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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 focus:outline-1 focus:outline-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()\"\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-full 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: [] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatepickerComponent };
+//# sourceMappingURL=seniorsistemas-angular-components-datepicker.mjs.map