@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-datepicker.mjs

@@ -1,28 +1,406 @@
 import * as i0 from '@angular/core';
-import { model, input, signal, viewChild, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, inject, Injector, signal, viewChild, computed, effect, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFieldState, cbFormat } from '@caribeng/ui';
 import { CbIcon } from '@caribeng/ui/icon';
 
+/**
+ * Formato de fechas con la sintaxis de PrimeNG / jQuery UI:
+ *
+ * - `d` / `dd`: día del mes (sin cero / dos dígitos)
+ * - `o` / `oo`: día del año (sin ceros / tres dígitos)
+ * - `D` / `DD`: nombre del día corto / largo
+ * - `m` / `mm`: mes (sin cero / dos dígitos)
+ * - `M` / `MM`: nombre del mes corto / largo
+ * - `y` / `yy`: año (dos / cuatro dígitos)
+ * - `@`: marca de tiempo Unix (ms desde 01/01/1970)
+ * - `!`: ticks de Windows (100 ns desde 01/01/0001)
+ * - `'...'`: texto literal; `''`: comilla simple; cualquier otro carácter, literal.
+ *
+ * Los nombres de días y meses salen de `Intl` en el `locale` indicado.
+ */
+const namesCache = new Map();
+/** Nombres de días y meses del `locale` (sin puntos finales: "ene" y no "ene."). */
+function dateNames(locale) {
+    const key = locale ?? '';
+    const cached = namesCache.get(key);
+    if (cached)
+        return cached;
+    const clean = (s) => s.replace(/\.$/, '');
+    const day = (style) => {
+        const f = new Intl.DateTimeFormat(locale, { weekday: style });
+        // 2023-01-01 fue domingo.
+        return Array.from({ length: 7 }, (_, i) => clean(f.format(new Date(2023, 0, 1 + i))));
+    };
+    const month = (style) => {
+        const f = new Intl.DateTimeFormat(locale, { month: style });
+        return Array.from({ length: 12 }, (_, i) => clean(f.format(new Date(2023, i, 15))));
+    };
+    const names = { dayShort: day('short'), dayLong: day('long'), monthShort: month('short'), monthLong: month('long') };
+    namesCache.set(key, names);
+    return names;
+}
+const TICKS_TO_EPOCH = 621_355_968_000_000_000;
+/** Divide un formato en símbolos y textos literales. */
+function tokenize(format) {
+    const tokens = [];
+    let literal = '';
+    const flush = () => {
+        if (literal)
+            tokens.push({ kind: 'literal', text: literal });
+        literal = '';
+    };
+    for (let i = 0; i < format.length; i++) {
+        const c = format[i];
+        if (c === "'") {
+            if (format[i + 1] === "'") {
+                literal += "'";
+                i++;
+                continue;
+            }
+            // Texto entre comillas; dentro, '' es una comilla.
+            let j = i + 1;
+            for (; j < format.length; j++) {
+                if (format[j] !== "'") {
+                    literal += format[j];
+                }
+                else if (format[j + 1] === "'") {
+                    literal += "'";
+                    j++;
+                }
+                else {
+                    break;
+                }
+            }
+            i = j;
+            continue;
+        }
+        if ('doDmMy'.includes(c)) {
+            flush();
+            const double = format[i + 1] === c;
+            tokens.push({ kind: (double ? c + c : c) });
+            if (double)
+                i++;
+            continue;
+        }
+        if (c === '@' || c === '!') {
+            flush();
+            tokens.push({ kind: c });
+            continue;
+        }
+        literal += c;
+    }
+    flush();
+    return tokens;
+}
+function dayOfYear(d) {
+    const start = Date.UTC(d.getFullYear(), 0, 1);
+    return Math.round((Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) - start) / 86_400_000) + 1;
+}
+const pad = (n, size) => String(n).padStart(size, '0');
+/** Escribe una fecha con el formato indicado. */
+function formatDate(date, format, names) {
+    return tokenize(format)
+        .map((t) => {
+        switch (t.kind) {
+            case 'literal':
+                return t.text;
+            case 'd':
+                return String(date.getDate());
+            case 'dd':
+                return pad(date.getDate(), 2);
+            case 'o':
+                return String(dayOfYear(date));
+            case 'oo':
+                return pad(dayOfYear(date), 3);
+            case 'D':
+                return names.dayShort[date.getDay()];
+            case 'DD':
+                return names.dayLong[date.getDay()];
+            case 'm':
+                return String(date.getMonth() + 1);
+            case 'mm':
+                return pad(date.getMonth() + 1, 2);
+            case 'M':
+                return names.monthShort[date.getMonth()];
+            case 'MM':
+                return names.monthLong[date.getMonth()];
+            case 'y':
+                return pad(date.getFullYear() % 100, 2);
+            case 'yy':
+                return String(date.getFullYear());
+            case '@':
+                return String(date.getTime());
+            case '!':
+                return String(date.getTime() * 10_000 + TICKS_TO_EPOCH);
+        }
+    })
+        .join('');
+}
+/**
+ * Lee una fecha escrita con el formato indicado. Devuelve `null` si el texto no
+ * encaja o la fecha no existe (31 de febrero). Los años de dos dígitos se
+ * interpretan como 19xx o 20xx según `shortYearCutoff` años por delante de hoy.
+ */
+function parseDate(text, format, names, shortYearCutoff = 10) {
+    const value = text.trim();
+    if (!value)
+        return null;
+    let pos = 0;
+    let year = -1;
+    let month = -1;
+    let day = -1;
+    let doy = -1;
+    let literalDate = null;
+    const digits = (min, max) => {
+        const match = new RegExp(`^\\d{${min},${max}}`).exec(value.slice(pos));
+        if (!match)
+            return null;
+        pos += match[0].length;
+        return Number(match[0]);
+    };
+    const name = (list) => {
+        // El nombre más largo primero, para que "mar" no gane a "marzo".
+        const rest = value.slice(pos).toLocaleLowerCase();
+        const ordered = list.map((n, i) => ({ n: n.toLocaleLowerCase(), i })).sort((a, b) => b.n.length - a.n.length);
+        const hit = ordered.find((o) => o.n && rest.startsWith(o.n));
+        if (!hit)
+            return null;
+        pos += hit.n.length;
+        return hit.i;
+    };
+    for (const t of tokenize(format)) {
+        let n;
+        switch (t.kind) {
+            case 'literal':
+                if (value.slice(pos, pos + t.text.length).toLocaleLowerCase() !== t.text.toLocaleLowerCase())
+                    return null;
+                pos += t.text.length;
+                continue;
+            case 'd':
+            case 'dd':
+                n = digits(t.kind === 'dd' ? 2 : 1, 2);
+                if (n === null)
+                    return null;
+                day = n;
+                continue;
+            case 'o':
+            case 'oo':
+                n = digits(t.kind === 'oo' ? 3 : 1, 3);
+                if (n === null)
+                    return null;
+                doy = n;
+                continue;
+            case 'D':
+            case 'DD':
+                if (name(t.kind === 'DD' ? names.dayLong : names.dayShort) === null)
+                    return null;
+                continue;
+            case 'm':
+            case 'mm':
+                n = digits(t.kind === 'mm' ? 2 : 1, 2);
+                if (n === null)
+                    return null;
+                month = n;
+                continue;
+            case 'M':
+            case 'MM':
+                n = name(t.kind === 'MM' ? names.monthLong : names.monthShort);
+                if (n === null)
+                    return null;
+                month = n + 1;
+                continue;
+            case 'y':
+            case 'yy':
+                n = digits(t.kind === 'yy' ? 4 : 2, t.kind === 'yy' ? 4 : 2);
+                if (n === null)
+                    return null;
+                if (t.kind === 'y') {
+                    const now = new Date().getFullYear();
+                    const cutoff = (now % 100) + shortYearCutoff;
+                    n += n <= cutoff ? now - (now % 100) : now - (now % 100) - 100;
+                }
+                year = n;
+                continue;
+            case '@':
+                n = digits(1, 16);
+                if (n === null)
+                    return null;
+                literalDate = new Date(n);
+                continue;
+            case '!':
+                n = digits(1, 20);
+                if (n === null)
+                    return null;
+                literalDate = new Date((n - TICKS_TO_EPOCH) / 10_000);
+                continue;
+        }
+    }
+    if (pos !== value.length)
+        return null;
+    if (literalDate)
+        return Number.isNaN(literalDate.getTime()) ? null : literalDate;
+    if (year === -1)
+        year = new Date().getFullYear();
+    if (doy > -1) {
+        const d = new Date(year, 0, doy);
+        if (d.getFullYear() !== year)
+            return null;
+        return d;
+    }
+    if (month === -1)
+        month = 1;
+    if (day === -1)
+        day = 1;
+    const date = new Date(year, month - 1, day);
+    // Rechaza fechas que JavaScript "corrige" (31/02 → 03/03).
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+        return null;
+    return date;
+}
+/**
+ * Formato numérico del `locale` en la sintaxis de arriba (p. ej. `dd/mm/yy` en
+ * es-CO, `mm/dd/yy` en en-US), para escribir fechas cuando no se indica uno.
+ */
+function localeDateFormat(locale, view) {
+    if (view === 'year')
+        return 'yy';
+    const parts = new Intl.DateTimeFormat(locale, {
+        day: view === 'date' ? '2-digit' : undefined,
+        month: '2-digit',
+        year: 'numeric',
+    }).formatToParts(new Date(2023, 10, 22));
+    return parts
+        .map((p) => {
+        if (p.type === 'day')
+            return 'dd';
+        if (p.type === 'month')
+            return 'mm';
+        if (p.type === 'year')
+            return 'yy';
+        // Letras sueltas en un literal (p. ej. "г." en ruso) se escapan.
+        return /[a-zA-Z@!']/.test(p.value) ? `'${p.value.replace(/'/g, "''")}'` : p.value;
+    })
+        .join('');
+}
+
 let nextUid = 0;
 /**
- * Selector de fecha de CaribeNG. Campo de solo lectura que abre un calendario
- * sobre CDK Overlay, con navegación por teclado y rango min/max. Integrado con
- * Angular Forms vía `ControlValueAccessor`. El modelo es `Date | null`.
+ * Selector de fecha de CaribeNG. Abre un calendario sobre CDK Overlay, con
+ * navegación por teclado (patrón WAI-ARIA *date picker dialog*), rango
+ * min/max, selección de rangos, hora y vistas de mes y año. Integrado con
+ * Angular Forms vía `ControlValueAccessor`.
+ *
+ * - `selectionMode="single"` (por defecto): `[(value)]` es `Date | null`.
+ * - `selectionMode="range"`: `[(range)]` es `[inicio, fin] | null`; muestra dos meses (`numberOfMonths`).
+ * - `view="month"` / `view="year"`: se elige un mes (día 1) o un año (1 de enero).
+ * - `showTime`: añade horas y minutos (`hourFormat` 24 o 12), también en rangos.
+ * - `dateFormat`: formato con la sintaxis de PrimeNG (`dd/mm/yy`, `d 'de' MM`…); `editable` permite escribir la fecha.
  *
  * @example
  * ```html
- * <cb-datepicker formControlName="fecha" locale="es-CO"
- *                [minDate]="hoy" placeholder="Elige una fecha" />
+ * <cb-datepicker formControlName="fecha" locale="es-CO" [minDate]="hoy" />
+ * <cb-datepicker selectionMode="range" [(range)]="viaje" />
+ * <cb-datepicker showTime hourFormat="12" [(value)]="cita" />
+ * <cb-datepicker view="month" dateFormat="mm/yy" [(value)]="vencimiento" />
+ * <cb-datepicker editable dateFormat="dd/mm/yy" [(value)]="nacimiento" />
  * ```
  */
 class CbDatepicker {
+    formatOne(date) {
+        const pattern = this.pattern();
+        let text;
+        if (pattern) {
+            text = formatDate(date, pattern, this.names());
+        }
+        else {
+            const options = this.view() === 'year' ? { year: 'numeric' } : this.view() === 'month' ? { month: 'long', year: 'numeric' } : { dateStyle: 'medium' };
+            text = new Intl.DateTimeFormat(this.locale(), options).format(date);
+        }
+        return this.withTime() ? `${text} ${this.timeText(date)}` : text;
+    }
+    timeText(date) {
+        const h = date.getHours();
+        const m = this.pad(date.getMinutes());
+        return this.hourFormat() === '12' ? `${this.pad(h % 12 || 12)}:${m} ${h < 12 ? 'AM' : 'PM'}` : `${this.pad(h)}:${m}`;
+    }
+    // --- Vista de días -------------------------------------------------------------------
+    monthTitle(date) {
+        const label = new Intl.DateTimeFormat(this.locale(), { month: 'long', year: 'numeric' }).format(date);
+        return label.charAt(0).toUpperCase() + label.slice(1);
+    }
+    /** Inicio y fin del rango (o del rango en curso hasta el puntero), ordenados y en la unidad `unit`. */
+    rangeBounds(unit) {
+        const range = this.activeRange();
+        if (!range)
+            return [null, null, false];
+        const start = startOf(range[0], unit);
+        // Mientras se elige el fin, el rango llega hasta el elemento bajo el puntero.
+        const endSource = range[1] ?? (this.choosingEnd() ? this.hoverDate() : null);
+        const end = endSource ? startOf(endSource, unit) : null;
+        const [from, to] = start && end && end < start ? [end, start] : [start, end];
+        return [from, to, !!range[1]];
+    }
+    presetLabel(key) {
+        const t = this.t();
+        const labels = {
+            today: t.today,
+            yesterday: t.presetYesterday,
+            last7Days: t.presetLast7Days,
+            last30Days: t.presetLast30Days,
+            thisMonth: t.presetThisMonth,
+            lastMonth: t.presetLastMonth,
+            thisYear: t.presetThisYear,
+            lastYear: t.presetLastYear,
+        };
+        return labels[key];
+    }
+    /** Ajusta el atajo al modo (fecha o rango), a la unidad de `view` y, con hora, al día completo. */
+    presetValue(raw) {
+        const unit = this.view();
+        if (!this.isRange())
+            return startOf(Array.isArray(raw) ? raw[0] : raw, unit);
+        const [a, b] = Array.isArray(raw) ? [raw[0], raw[1] ?? raw[0]] : [raw, raw];
+        const start = startOf(a, unit);
+        const end = startOf(b, unit);
+        if (this.withTime())
+            end.setHours(23, 59);
+        return [start, end];
+    }
+    /** Aplica un atajo y cierra (con hora, el panel sigue abierto para ajustarla). */
+    applyPreset(value) {
+        this.commit(Array.isArray(value) ? [value[0], value[1]] : new Date(value));
+        const anchor = Array.isArray(value) ? value[0] : value;
+        this.viewDate.set(startOfMonth(anchor));
+        this.activeDate.set(startOf(anchor, this.view()));
+        this.panelView.set(this.view());
+        if (!this.withTime())
+            this.close();
+    }
+    dateOf(target) {
+        if (target === 'single')
+            return this.single();
+        const range = this.activeRange();
+        return (target === 'start' ? range?.[0] : range?.[1]) ?? null;
+    }
+    /** Hora y minutos de la fecha (o 00:00). */
+    timeOf(target) {
+        const d = this.dateOf(target);
+        return { hours: d?.getHours() ?? 0, minutes: d?.getMinutes() ?? 0 };
+    }
+    displayHour(target) {
+        const h = this.timeOf(target).hours;
+        return this.pad(this.hourFormat() === '12' ? h % 12 || 12 : h);
+    }
     constructor() {
-        /** Fecha seleccionada (two-way opcional fuera de Angular Forms). */
+        /** Fecha seleccionada en modo `single` (two-way opcional fuera de Angular Forms). */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Rango seleccionado en modo `range` (two-way opcional fuera de Angular Forms). */
+        this.range = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
         this.label = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.hint = input('', /* @ts-ignore */
@@ -35,10 +413,11 @@ class CbDatepicker {
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: toBoolean });
-        /** Indicador de obligatoriedad de este campo; si se omite usa el global de `provideCaribeNG()`. */
+        /** Cómo se marca un campo obligatorio u opcional; por defecto el global de `provideCaribeNG`. */
         this.requiredIndicator = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []));
-        /** Estado de validación: inputs manuales + estado de Angular Forms. */
+        this.t = injectCbTranslation();
+        this.injector = inject(Injector);
         this.fieldState = cbFieldState({
             invalid: () => this.invalid(),
             required: () => this.required(),
@@ -50,24 +429,69 @@ class CbDatepicker {
         /** Locale BCP 47 para nombres y formato (por defecto el del navegador). */
         this.locale = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-        /** Primer día de la semana: 0 = domingo (por defecto), 1 = lunes. */
+        /** Primer día de la semana: 0 = domingo, 1 = lunes. */
         this.firstDayOfWeek = input(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
-        /** Fecha mínima seleccionable. */
+        /** Fecha mínima elegible (incluida). */
         this.minDate = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
-        /** Fecha máxima seleccionable. */
+        /** Fecha máxima elegible (incluida). */
         this.maxDate = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        /** `single` (una fecha) o `range` (inicio y fin). */
+        this.selectionMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        /** Qué se elige: un día (`date`), un mes (`month`, día 1) o un año (`year`, 1 de enero). */
+        this.view = input('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** Meses visibles a la vez (vista de días). Por defecto 2 en rangos y 1 en fecha simple. */
+        this.numberOfMonths = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
+        /** Añade horas y minutos (en rangos, del inicio y del fin). Solo con `view="date"`. */
+        this.showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Formato de la hora: 24 h o 12 h (AM/PM). */
+        this.hourFormat = input('24', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+        /** Paso de los minutos (p. ej. 15). */
+        this.stepMinute = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []));
+        /**
+         * Formato de la fecha con la sintaxis de PrimeNG: `d`, `dd`, `o`, `oo`, `D`, `DD`,
+         * `m`, `mm`, `M`, `MM`, `y`, `yy`, `@`, `!` y `'texto'`. Sin él, el campo usa el
+         * formato largo del `locale` (o el numérico si es `editable`).
+         */
+        this.dateFormat = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+        /** Permite escribir la fecha en el campo con `dateFormat` (Enter o al salir del campo la aplica). */
+        this.editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /**
+         * Atajos junto al calendario: claves predefinidas (`'last7Days'`, `'thisMonth'`…)
+         * u objetos `{ label, value }`. En fecha simple, un atajo de rango elige su inicio.
+         */
+        this.presets = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
         this.open = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        /** Primer día del mes mostrado. */
+        /** Día (o mes, o año) bajo el puntero: previsualiza el rango mientras se elige el final. */
+        this.hoverDate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hoverDate" }] : /* istanbul ignore next */ []));
+        /** Primer mes mostrado (vista de días) o fecha de referencia del año / la década. */
         this.viewDate = signal(startOfMonth(new Date()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
-        /** Día con foco dentro del calendario. */
+        /** Día, mes o año con foco dentro del calendario. */
         this.activeDate = signal(stripTime(new Date()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
-        this.triggerRef = viewChild.required('trigger');
+        /** Vista del panel: puede pasar a meses o años para navegar aunque se elija un día. */
+        this.panelView = signal('date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelView" }] : /* istanbul ignore next */ []));
+        /** Texto escrito en el campo (`editable`) que aún no se ha aplicado. */
+        this.draft = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        /** El texto escrito no es una fecha válida (o elegible). */
+        this.typedInvalid = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typedInvalid" }] : /* istanbul ignore next */ []));
+        /** Día del mes que se conserva al navegar por meses y años para volver a los días. */
+        this.navDay = 1;
         this.fieldRef = viewChild.required('field');
         this.panelRef = viewChild('panel', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
@@ -75,12 +499,21 @@ class CbDatepicker {
         ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.isRange = computed(() => this.selectionMode() === 'range', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRange" }] : /* istanbul ignore next */ []));
+        /** La hora solo tiene sentido al elegir días. */
+        this.withTime = computed(() => this.showTime() && this.view() === 'date', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "withTime" }] : /* istanbul ignore next */ []));
+        this.monthCount = computed(() => clamp(this.numberOfMonths() ?? (this.isRange() ? 2 : 1), 1, 4), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthCount" }] : /* istanbul ignore next */ []));
+        this.fieldInvalid = computed(() => this.fieldState.invalid() || this.typedInvalid(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldInvalid" }] : /* istanbul ignore next */ []));
         this.errorId = computed(() => `${this.inputId()}-error`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
         this.hintId = computed(() => `${this.inputId()}-hint`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
         this.describedBy = computed(() => {
-            if (this.fieldState.invalid() && this.error())
+            if (this.typedInvalid() || (this.fieldState.invalid() && this.error()))
                 return this.errorId();
             if (this.hint())
                 return this.hintId();
@@ -90,22 +523,49 @@ class CbDatepicker {
         this.positions = [
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
         ];
-        this.display = computed(() => {
-            const v = this.value();
-            if (!v)
+        /** La fecha (modo simple) o `null`. */
+        this.single = computed(() => (this.isRange() ? null : this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "single" }] : /* istanbul ignore next */ []));
+        /** El rango (modo rango) o `null`. */
+        this.activeRange = computed(() => (this.isRange() ? this.range() : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeRange" }] : /* istanbul ignore next */ []));
+        /** Hay fecha inicial y falta la final. */
+        this.choosingEnd = computed(() => !!this.activeRange() && this.activeRange()[1] === null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "choosingEnd" }] : /* istanbul ignore next */ []));
+        /** Hay algo elegido (para mostrar "Limpiar"). */
+        this.hasValue = computed(() => !!this.single() || !!this.activeRange(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        // --- Formato ------------------------------------------------------------------------
+        this.names = computed(() => dateNames(this.locale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []));
+        /** Formato con el que se escribe y se lee el campo (si hay `dateFormat` o es editable). */
+        this.pattern = computed(() => this.dateFormat() ?? (this.editable() ? localeDateFormat(this.locale(), this.view()) : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+        /** Ayuda del formato para el placeholder y el error (`dd/mm/yyyy`, con la hora si la hay). */
+        this.formatHint = computed(() => {
+            const pattern = this.pattern();
+            if (!pattern)
                 return '';
-            return new Intl.DateTimeFormat(this.locale(), { dateStyle: 'medium' }).format(v);
+            const date = pattern.replace(/yy/g, 'yyyy').replace(/(^|[^y])y(?!y)/g, '$1yy').replace(/'/g, '');
+            return this.withTime() ? `${date} ${this.hourFormat() === '12' ? 'hh:mm AM' : 'HH:mm'}` : date;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.monthYearLabel = computed(() => {
-            const label = new Intl.DateTimeFormat(this.locale(), {
-                month: 'long',
-                year: 'numeric',
-            }).format(this.viewDate());
-            return label.charAt(0).toUpperCase() + label.slice(1);
+        ...(ngDevMode ? [{ debugName: "formatHint" }] : /* istanbul ignore next */ []));
+        this.invalidMessage = computed(() => cbFormat(this.t().invalidDate, this.formatHint()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidMessage" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => {
+            const range = this.activeRange();
+            if (range)
+                return `${this.formatOne(range[0])} – ${range[1] ? this.formatOne(range[1]) : ''}`.trim();
+            const single = this.single();
+            return single ? this.formatOne(single) : '';
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.fieldText = computed(() => this.draft() ?? this.display(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldText" }] : /* istanbul ignore next */ []));
+        this.panelLabel = computed(() => (this.panelView() === 'date' ? this.monthTitle(this.viewDate()) : this.unitTitle()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelLabel" }] : /* istanbul ignore next */ []));
         this.weekdays = computed(() => {
             const fmt = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
             const long = new Intl.DateTimeFormat(this.locale(), { weekday: 'long' });
@@ -120,55 +580,146 @@ class CbDatepicker {
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
-        this.weeks = computed(() => {
-            const view = this.viewDate();
-            const monthStart = startOfMonth(view);
-            const first = this.firstDayOfWeek();
-            const offset = (monthStart.getDay() - first + 7) % 7;
-            const gridStart = new Date(monthStart);
-            gridStart.setDate(monthStart.getDate() - offset);
+        this.months = computed(() => {
+            const count = this.monthCount();
+            const fullDate = new Intl.DateTimeFormat(this.locale(), { dateStyle: 'full' });
             const today = stripTime(new Date());
-            const selected = this.value() ? stripTime(this.value()) : null;
+            const single = this.single() ? stripTime(this.single()) : null;
+            const [from, to, complete] = this.rangeBounds('date');
             const active = this.activeDate();
-            const month = view.getMonth();
-            const weeks = [];
-            const cursor = new Date(gridStart);
-            for (let w = 0; w < 6; w++) {
-                const row = [];
-                for (let d = 0; d < 7; d++) {
-                    const date = new Date(cursor);
-                    row.push({
-                        date,
-                        day: date.getDate(),
-                        otherMonth: date.getMonth() !== month,
-                        today: isSameDay(date, today),
-                        selected: selected != null && isSameDay(date, selected),
-                        disabled: this.isDisabledDate(date),
-                        active: isSameDay(date, active),
-                    });
-                    cursor.setDate(cursor.getDate() + 1);
+            const first = this.firstDayOfWeek();
+            return Array.from({ length: count }, (_, i) => {
+                const monthStart = addMonths(this.viewDate(), i);
+                const offset = (monthStart.getDay() - first + 7) % 7;
+                const cursor = new Date(monthStart);
+                cursor.setDate(monthStart.getDate() - offset);
+                const month = monthStart.getMonth();
+                const weeks = [];
+                for (let w = 0; w < 6; w++) {
+                    const row = [];
+                    for (let d = 0; d < 7; d++) {
+                        const date = new Date(cursor);
+                        const otherMonth = date.getMonth() !== month;
+                        const hidden = count > 1 && otherMonth;
+                        const isStart = !!from && isSameDay(date, from);
+                        const isEnd = !!to && isSameDay(date, to);
+                        row.push({
+                            date,
+                            day: date.getDate(),
+                            label: fullDate.format(date),
+                            otherMonth,
+                            hidden,
+                            today: isSameDay(date, today),
+                            selected: (single != null && isSameDay(date, single)) || isStart || (isEnd && complete),
+                            rangeStart: isStart && !!to,
+                            rangeEnd: isEnd && !!from,
+                            inRange: !!from && !!to && date > from && date < to,
+                            disabled: this.isDisabledIn(date, 'date'),
+                            // Con varios meses, el foco va al día dentro de su mes (no a la copia de otro mes).
+                            active: !hidden && isSameDay(date, active) && (count === 1 || !otherMonth),
+                        });
+                        cursor.setDate(cursor.getDate() + 1);
+                    }
+                    weeks.push(row);
                 }
-                weeks.push(row);
-            }
-            return weeks;
+                return { date: monthStart, title: this.monthTitle(monthStart), weeks };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+        // --- Vistas de meses y años ----------------------------------------------------------------
+        /** Título de la vista de meses (el año) o de años (la década). */
+        this.unitTitle = computed(() => {
+            const year = this.viewDate().getFullYear();
+            if (this.panelView() === 'month')
+                return String(year);
+            const start = year - (year % 10);
+            return `${start} – ${start + 9}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unitTitle" }] : /* istanbul ignore next */ []));
+        this.unitRows = computed(() => {
+            const view = this.panelView();
+            const year = this.viewDate().getFullYear();
+            const active = this.activeDate();
+            const now = new Date();
+            const unit = view === 'month' ? 'month' : 'year';
+            const single = this.single();
+            const [from, to, complete] = this.rangeBounds(unit);
+            const names = this.names();
+            const dates = view === 'month'
+                ? Array.from({ length: 12 }, (_, i) => new Date(year, i, 1))
+                : Array.from({ length: 12 }, (_, i) => new Date(year - (year % 10) - 1 + i, 0, 1));
+            const cells = dates.map((date, i) => {
+                const same = (a) => !!a && sameUnit(a, date, unit);
+                const isStart = same(from);
+                const isEnd = same(to);
+                return {
+                    date,
+                    text: view === 'month' ? names.monthShort[i] : String(date.getFullYear()),
+                    label: view === 'month' ? `${names.monthLong[i]} ${year}` : String(date.getFullYear()),
+                    outside: view === 'year' && (i === 0 || i === 11),
+                    current: same(now),
+                    selected: same(single) || isStart || (isEnd && complete),
+                    rangeStart: isStart && !!to,
+                    rangeEnd: isEnd && !!from,
+                    inRange: !!from && !!to && date > from && date < to,
+                    disabled: this.isDisabledIn(date, unit),
+                    active: sameUnit(active, date, unit),
+                };
+            });
+            return [0, 1, 2, 3].map((r) => cells.slice(r * 3, r * 3 + 3));
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "unitRows" }] : /* istanbul ignore next */ []));
+        // --- Atajos -------------------------------------------------------------------------
+        this.presetItems = computed(() => {
+            const unit = this.view();
+            const current = this.isRange() ? this.activeRange() : this.single();
+            return this.presets().map((preset) => {
+                const label = typeof preset === 'string' ? this.presetLabel(preset) : preset.label;
+                const raw = typeof preset === 'string' ? presetRange(preset) : typeof preset.value === 'function' ? preset.value() : preset.value;
+                const value = this.presetValue(raw);
+                const [start, end] = Array.isArray(value) ? value : [value, value];
+                const selected = Array.isArray(value)
+                    ? Array.isArray(current) && !!current[1] && sameUnit(current[0], value[0], unit) && sameUnit(current[1], value[1], unit)
+                    : current instanceof Date && sameUnit(current, value, unit);
+                const disabled = this.isDisabledIn(start, unit) || (!!end && this.isDisabledIn(end, unit));
+                return { label, value, selected, disabled };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presetItems" }] : /* istanbul ignore next */ []));
+        // --- Hora --------------------------------------------------------------------------
+        this.timeRows = computed(() => {
+            if (!this.withTime())
+                return [];
+            if (!this.isRange())
+                return [{ target: 'single', label: `${this.t().hours} / ${this.t().minutes}`, caption: '', enabled: true }];
+            const range = this.activeRange();
+            return [
+                { target: 'start', label: this.t().startTime, caption: this.t().startTime, enabled: !!range },
+                { target: 'end', label: this.t().endTime, caption: this.t().endTime, enabled: !!range?.[1] },
+            ];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeRows" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
-        // Al abrir, sincroniza vista y día activo con la selección (o hoy) y enfoca.
+        // Al abrir o cambiar de vista, enfoca el elemento activo.
         effect(() => {
-            if (this.open()) {
-                queueMicrotask(() => this.focusActiveDay());
-            }
+            this.panelView();
+            if (this.open())
+                this.focusActive();
         });
     }
     // --- ControlValueAccessor --------------------------------------------------
     writeValue(value) {
-        const d = value instanceof Date && !Number.isNaN(value.getTime()) ? value : null;
-        this.value.set(d);
-        const anchor = d ?? new Date();
+        const v = normalizeValue(value);
+        if (Array.isArray(v))
+            this.range.set(v);
+        else
+            this.value.set(v);
+        this.draft.set(null);
+        this.typedInvalid.set(false);
+        const anchor = (Array.isArray(v) ? v[0] : v) ?? new Date();
         this.viewDate.set(startOfMonth(anchor));
-        this.activeDate.set(stripTime(anchor));
+        this.activeDate.set(startOf(anchor, this.view()));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -185,267 +736,735 @@ class CbDatepicker {
             return;
         this.open() ? this.close() : this.openPanel();
     }
+    onFieldClick() {
+        // Si se puede escribir, el clic coloca el cursor; el calendario se abre con el botón o Alt + ↓.
+        if (!this.editable())
+            this.toggle();
+    }
     openPanel() {
-        const anchor = this.value() ?? new Date();
+        const anchor = this.activeRange()?.[0] ?? this.single() ?? new Date();
+        this.panelView.set(this.view());
         this.viewDate.set(startOfMonth(anchor));
-        this.activeDate.set(stripTime(anchor));
+        this.activeDate.set(startOf(anchor, this.view()));
         this.open.set(true);
     }
     close() {
         if (!this.open())
             return;
         this.open.set(false);
+        this.hoverDate.set(null);
         this.onTouched();
         queueMicrotask(() => this.fieldRef().nativeElement.focus());
     }
     onBlur() {
+        if (this.editable())
+            this.applyDraft();
         if (!this.open())
             this.onTouched();
     }
     // --- Selección -------------------------------------------------------------
-    selectDate(date) {
-        if (this.isDisabledDate(date))
+    /** Elige un valor en la unidad de `view` (día, mes o año), en modo simple o rango. */
+    pick(date) {
+        const unit = this.view();
+        if (this.isDisabledIn(date, unit))
+            return;
+        const picked = startOf(date, unit);
+        this.activeDate.set(picked);
+        if (this.isRange()) {
+            const range = this.activeRange();
+            if (!range || range[1]) {
+                // Primer clic: inicio (con la hora que tuviera); el panel sigue abierto para elegir el fin.
+                if (this.withTime() && range)
+                    picked.setHours(range[0].getHours(), range[0].getMinutes());
+                this.commit([picked, null]);
+                return;
+            }
+            const [start] = range;
+            if (this.withTime()) {
+                const end = range[1];
+                picked.setHours(end?.getHours() ?? 0, end?.getMinutes() ?? 0);
+            }
+            this.commit(picked < startOf(start, unit) ? [picked, start] : [start, picked]);
+            // Con hora el panel sigue abierto para ajustarla.
+            if (!this.withTime())
+                this.close();
             return;
-        const picked = stripTime(date);
-        this.value.set(picked);
-        this.onChange(picked);
+        }
+        if (this.withTime()) {
+            // Con hora, se conserva la hora elegida y el panel sigue abierto.
+            const { hours, minutes } = this.timeOf('single');
+            picked.setHours(hours, minutes);
+            this.commit(picked);
+            return;
+        }
+        this.commit(picked);
         this.close();
     }
+    selectDate(date) {
+        this.pick(date);
+    }
+    /** Clic en un mes o un año: lo elige (si es la unidad de `view`) o baja a la vista siguiente. */
+    selectUnit(date) {
+        const view = this.panelView();
+        if (view === this.view()) {
+            this.pick(date);
+            return;
+        }
+        if (view === 'year') {
+            // Navegación: del año a sus meses.
+            this.viewDate.set(new Date(date.getFullYear(), this.viewDate().getMonth(), 1));
+            this.activeDate.set(new Date(date.getFullYear(), this.activeDate().getMonth(), 1));
+            this.panelView.set('month');
+            return;
+        }
+        // Navegación: del mes a sus días (mismo día del mes, ajustado al último si no existe).
+        const day = this.navDay;
+        const last = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+        this.viewDate.set(startOfMonth(date));
+        this.activeDate.set(new Date(date.getFullYear(), date.getMonth(), Math.min(day, last)));
+        this.panelView.set('date');
+    }
+    /** Del título de un mes a la vista de meses de su año. */
+    showMonths(month) {
+        this.navDay = this.activeDate().getDate();
+        this.viewDate.set(startOfMonth(month));
+        this.activeDate.set(startOfMonth(this.isSameMonthShown(this.activeDate()) ? this.activeDate() : month));
+        this.panelView.set('month');
+    }
+    showYears() {
+        this.activeDate.set(new Date(this.activeDate().getFullYear(), 0, 1));
+        this.panelView.set('year');
+    }
+    isSameMonthShown(date) {
+        const first = this.viewDate();
+        const last = addMonths(first, this.monthCount() - 1);
+        return date >= first && date < addMonths(last, 1);
+    }
     goToday() {
-        const today = stripTime(new Date());
+        const today = startOf(new Date(), this.panelView());
         this.viewDate.set(startOfMonth(today));
         this.activeDate.set(today);
-        this.focusActiveDay();
+        this.focusActive();
     }
     clear() {
-        this.value.set(null);
-        this.onChange(null);
+        this.commit(null);
         this.close();
     }
     shiftMonth(delta) {
         this.viewDate.set(addMonths(this.viewDate(), delta));
     }
+    /** Año anterior / siguiente (vista de meses) o década (vista de años). */
+    shiftPage(delta) {
+        const years = this.panelView() === 'month' ? delta : delta * 10;
+        this.viewDate.set(addMonths(this.viewDate(), years * 12));
+    }
+    // --- Hora ------------------------------------------------------------------
+    setHour(target, raw) {
+        const n = Number.parseInt(raw, 10);
+        if (Number.isNaN(n))
+            return;
+        let hours;
+        if (this.hourFormat() === '12') {
+            const h12 = clamp(n, 1, 12) % 12;
+            hours = this.timeOf(target).hours < 12 ? h12 : h12 + 12;
+        }
+        else {
+            hours = clamp(n, 0, 23);
+        }
+        this.setTime(target, hours, this.timeOf(target).minutes);
+    }
+    setMinute(target, raw) {
+        const n = Number.parseInt(raw, 10);
+        if (!Number.isNaN(n))
+            this.setTime(target, this.timeOf(target).hours, clamp(n, 0, 59));
+    }
+    togglePeriod(target) {
+        const { hours, minutes } = this.timeOf(target);
+        this.setTime(target, (hours + 12) % 24, minutes);
+    }
+    setTime(target, hours, minutes) {
+        if (target === 'single') {
+            const base = new Date(this.single() ?? this.activeDate());
+            base.setHours(hours, minutes, 0, 0);
+            this.commit(base);
+            return;
+        }
+        const range = this.activeRange();
+        if (!range)
+            return;
+        const [start, end] = range;
+        if (target === 'start') {
+            const next = new Date(start);
+            next.setHours(hours, minutes, 0, 0);
+            this.commit([next, end]);
+        }
+        else if (end) {
+            const next = new Date(end);
+            next.setHours(hours, minutes, 0, 0);
+            this.commit([start, next]);
+        }
+    }
+    pad(n) {
+        return String(n).padStart(2, '0');
+    }
+    // --- Campo editable ---------------------------------------------------------
+    /** Aplica lo escrito: fecha válida y elegible → valor; vacío → `null`; si no, marca el error. */
+    applyDraft() {
+        const text = this.draft();
+        if (text === null)
+            return;
+        if (!text.trim()) {
+            this.draft.set(null);
+            this.typedInvalid.set(false);
+            if (this.hasValue())
+                this.commit(null);
+            return;
+        }
+        let parsed = null;
+        if (this.isRange()) {
+            const parts = text.split(/\s+[–-]\s+/);
+            const start = this.parseOne(parts[0] ?? '');
+            const end = parts[1] ? this.parseOne(parts[1]) : null;
+            if (start && (parts.length === 1 || end))
+                parsed = end && end < start ? [end, start] : [start, end];
+        }
+        else {
+            parsed = this.parseOne(text);
+        }
+        if (!parsed) {
+            this.typedInvalid.set(true);
+            return;
+        }
+        this.typedInvalid.set(false);
+        this.draft.set(null);
+        this.commit(parsed);
+        const anchor = Array.isArray(parsed) ? parsed[0] : parsed;
+        this.viewDate.set(startOfMonth(anchor));
+        this.activeDate.set(startOf(anchor, this.view()));
+    }
+    /** Lee una fecha (y la hora, si `showTime`) con el formato del campo. */
+    parseOne(text) {
+        const pattern = this.pattern();
+        if (!pattern)
+            return null;
+        let datePart = text.trim();
+        let hours = 0;
+        let minutes = 0;
+        if (this.withTime()) {
+            const time = /\s+(\d{1,2}):(\d{2})(?:\s*([AaPp])\.?\s?[Mm]\.?)?$/.exec(datePart);
+            if (time) {
+                datePart = datePart.slice(0, time.index);
+                hours = Number(time[1]);
+                minutes = Number(time[2]);
+                if (time[3]) {
+                    if (hours < 1 || hours > 12)
+                        return null;
+                    hours = (hours % 12) + (time[3].toLowerCase() === 'p' ? 12 : 0);
+                }
+                if (hours > 23 || minutes > 59)
+                    return null;
+            }
+        }
+        const date = parseDate(datePart, pattern, this.names());
+        if (!date)
+            return null;
+        const value = startOf(date, this.view());
+        if (this.isDisabledIn(value, this.view()))
+            return null;
+        value.setHours(hours, minutes);
+        return value;
+    }
     // --- Teclado ---------------------------------------------------------------
     onFieldKeydown(event) {
+        if (this.editable()) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.applyDraft();
+            }
+            else if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.applyDraft();
+                this.openPanel();
+            }
+            else if (event.key === 'Escape' && this.draft() !== null) {
+                event.preventDefault();
+                this.draft.set(null);
+                this.typedInvalid.set(false);
+            }
+            return;
+        }
         if (['ArrowDown', 'Enter', ' '].includes(event.key)) {
             event.preventDefault();
             this.openPanel();
         }
     }
     onPanelKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            // En la vista de meses o años abierta para navegar, Escape vuelve a la vista anterior.
+            const view = this.panelView();
+            if (view !== this.view()) {
+                this.panelView.set(view === 'year' && this.view() === 'date' ? 'month' : this.view());
+                return;
+            }
+            this.close();
+            return;
+        }
+        const target = event.target;
+        if (target.classList?.contains('cb-datepicker__unit')) {
+            this.onUnitKeydown(event);
+            return;
+        }
+        // Solo los días se mueven con las flechas (no los campos de hora ni los botones).
+        if (!target.classList?.contains('cb-datepicker__day'))
+            return;
+        const active = this.activeDate();
         let next = null;
         switch (event.key) {
             case 'ArrowLeft':
-                next = addDays(this.activeDate(), -1);
+                next = addDays(active, -1);
                 break;
             case 'ArrowRight':
-                next = addDays(this.activeDate(), 1);
+                next = addDays(active, 1);
                 break;
             case 'ArrowUp':
-                next = addDays(this.activeDate(), -7);
+                next = addDays(active, -7);
                 break;
             case 'ArrowDown':
-                next = addDays(this.activeDate(), 7);
+                next = addDays(active, 7);
                 break;
             case 'Home':
-                next = startOfWeek(this.activeDate(), this.firstDayOfWeek());
+                next = startOfWeek(active, this.firstDayOfWeek());
                 break;
             case 'End':
-                next = addDays(startOfWeek(this.activeDate(), this.firstDayOfWeek()), 6);
+                next = addDays(startOfWeek(active, this.firstDayOfWeek()), 6);
                 break;
+            // Re Pág / Av Pág: mismo día del mes anterior o siguiente; con Mayús, del año.
             case 'PageUp':
-                next = addMonths(this.activeDate(), -1);
+                next = sameDayShifted(active, event.shiftKey ? -12 : -1);
                 break;
             case 'PageDown':
-                next = addMonths(this.activeDate(), 1);
+                next = sameDayShifted(active, event.shiftKey ? 12 : 1);
                 break;
             case 'Enter':
             case ' ':
                 event.preventDefault();
-                this.selectDate(this.activeDate());
-                return;
-            case 'Escape':
-                event.preventDefault();
-                this.close();
+                this.selectDate(active);
                 return;
             default:
                 return;
         }
         event.preventDefault();
         this.activeDate.set(next);
-        if (next.getMonth() !== this.viewDate().getMonth() || next.getFullYear() !== this.viewDate().getFullYear()) {
+        if (this.choosingEnd())
+            this.hoverDate.set(next);
+        // Si el día queda fuera de los meses visibles, se desplaza la vista lo justo.
+        const first = this.viewDate();
+        const last = addMonths(first, this.monthCount() - 1);
+        if (next < first)
             this.viewDate.set(startOfMonth(next));
+        else if (next >= addMonths(last, 1))
+            this.viewDate.set(addMonths(startOfMonth(next), -(this.monthCount() - 1)));
+        this.focusActive();
+    }
+    /** Flechas en la cuadrícula de meses o años (3 columnas). */
+    onUnitKeydown(event) {
+        const view = this.panelView();
+        const active = this.activeDate();
+        const step = (n) => (view === 'month' ? addMonths(active, n) : new Date(active.getFullYear() + n, 0, 1));
+        let next;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = step(-1);
+                break;
+            case 'ArrowRight':
+                next = step(1);
+                break;
+            case 'ArrowUp':
+                next = step(-3);
+                break;
+            case 'ArrowDown':
+                next = step(3);
+                break;
+            case 'PageUp':
+                next = step(view === 'month' ? -12 : -10);
+                break;
+            case 'PageDown':
+                next = step(view === 'month' ? 12 : 10);
+                break;
+            case 'Home':
+                next = view === 'month' ? new Date(active.getFullYear(), 0, 1) : new Date(active.getFullYear() - (active.getFullYear() % 10), 0, 1);
+                break;
+            case 'End':
+                next = view === 'month' ? new Date(active.getFullYear(), 11, 1) : new Date(active.getFullYear() - (active.getFullYear() % 10) + 9, 0, 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectUnit(active);
+                return;
+            default:
+                return;
         }
-        this.focusActiveDay();
+        event.preventDefault();
+        this.activeDate.set(next);
+        if (this.choosingEnd())
+            this.hoverDate.set(next);
+        const shown = this.viewDate().getFullYear();
+        const visible = view === 'month' ? next.getFullYear() === shown : Math.floor(next.getFullYear() / 10) === Math.floor(shown / 10);
+        if (!visible)
+            this.viewDate.set(new Date(next.getFullYear(), view === 'month' ? 0 : this.viewDate().getMonth(), 1));
+        this.focusActive();
     }
-    focusActiveDay() {
-        queueMicrotask(() => {
-            const el = this.panelRef()?.nativeElement.querySelector('.cb-datepicker__day.cb-is-active');
-            el?.focus();
-        });
+    /** Enfoca el elemento activo tras el render: el panel vive en un overlay que se pinta en el ciclo siguiente. */
+    focusActive() {
+        afterNextRender(() => this.panelRef()
+            ?.nativeElement.querySelector('.cb-datepicker__day.cb-is-active, .cb-datepicker__unit.cb-is-active')
+            ?.focus(), { injector: this.injector });
     }
     // --- Helpers ---------------------------------------------------------------
-    isDisabledDate(date) {
+    /** Guarda en el modelo del modo activo y avisa a Angular Forms. */
+    commit(value) {
+        this.draft.set(null);
+        this.typedInvalid.set(false);
+        if (this.isRange())
+            this.range.set(value);
+        else
+            this.value.set(value);
+        this.onChange(value);
+    }
+    /** El día, mes o año queda entero fuera de [minDate, maxDate]. */
+    isDisabledIn(date, unit) {
         const min = this.minDate();
         const max = this.maxDate();
-        const d = stripTime(date);
-        if (min && d < stripTime(min))
+        const start = startOf(date, unit);
+        const end = unit === 'date' ? start : unit === 'month' ? addDays(addMonths(start, 1), -1) : new Date(start.getFullYear(), 11, 31);
+        if (min && end < stripTime(min))
             return true;
-        if (max && d > stripTime(max))
+        if (max && start > stripTime(max))
             return true;
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDatepicker, isStandalone: true, selector: "cb-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredIndicator: { classPropertyName: "requiredIndicator", publicName: "requiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "cb-datepicker-host" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDatepicker, isStandalone: true, selector: "cb-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredIndicator: { classPropertyName: "requiredIndicator", publicName: "requiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange" }, host: { classAttribute: "cb-datepicker-host" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbDatepicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (label()) {
-      <label class="cb-datepicker__label" [attr.for]="inputId()">
-        {{ label() }}
-        @if (fieldState.indicator(); as mark) {
-          <span
-            [class]="'cb-datepicker__required cb-datepicker__required--' + mark.kind"
-            [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'"
-          >{{ mark.text }}</span>
-        }
-      </label>
-    }
-
-    <div
-      #trigger
-      class="cb-datepicker"
-      [class]="'cb-datepicker--' + size()"
-      [class.cb-is-open]="open()"
-      [class.cb-is-invalid]="fieldState.invalid()"
-      [class.cb-is-disabled]="isDisabled()"
-    >
-      <input
-        #field
-        class="cb-datepicker__field"
-        [id]="inputId()"
-        type="text"
-        readonly
-        role="combobox"
-        aria-haspopup="dialog"
-        [attr.aria-expanded]="open()"
-        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy()"
-        [value]="display()"
-        [placeholder]="placeholder()"
-        [disabled]="isDisabled()"
-        [required]="fieldState.required()"
-        (click)="toggle()"
-        (keydown)="onFieldKeydown($event)"
-        (blur)="onBlur()"
-      />
-      <button
-        type="button"
-        class="cb-datepicker__btn"
-        tabindex="-1"
-        aria-label="Abrir calendario"
-        [disabled]="isDisabled()"
-        (click)="toggle()"
-      >
-        <cb-icon name="calendar" [size]="18" aria-hidden="true" />
-      </button>
-    </div>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="open()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayHasBackdrop]="false"
-      (overlayOutsideClick)="close()"
-      (detach)="close()"
-    >
-      <div
-        #panel
-        class="cb-datepicker__panel"
-        role="dialog"
-        aria-modal="false"
-        [attr.aria-label]="monthYearLabel()"
-        tabindex="-1"
-        (keydown)="onPanelKeydown($event)"
-      >
-        <div class="cb-datepicker__header">
-          <button
-            type="button"
-            class="cb-datepicker__nav"
-            aria-label="Mes anterior"
-            (click)="shiftMonth(-1)"
-          >
-            <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
-          </button>
-          <span class="cb-datepicker__title" aria-live="polite">{{ monthYearLabel() }}</span>
-          <button
-            type="button"
-            class="cb-datepicker__nav"
-            aria-label="Mes siguiente"
-            (click)="shiftMonth(1)"
-          >
-            <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
-          </button>
-        </div>
-
-        <table class="cb-datepicker__grid" role="grid">
-          <thead>
-            <tr>
-              @for (wd of weekdays(); track wd.index) {
-                <th class="cb-datepicker__weekday" scope="col" [attr.abbr]="wd.long">{{ wd.short }}</th>
-              }
-            </tr>
-          </thead>
-          <tbody>
-            @for (week of weeks(); track week[0].date.getTime()) {
-              <tr>
-                @for (cell of week; track cell.date.getTime()) {
-                  <td class="cb-datepicker__cell" role="gridcell">
-                    <button
-                      type="button"
-                      class="cb-datepicker__day"
-                      [class.cb-is-other-month]="cell.otherMonth"
-                      [class.cb-is-today]="cell.today"
-                      [class.cb-is-selected]="cell.selected"
-                      [class.cb-is-active]="cell.active"
-                      [disabled]="cell.disabled"
-                      [attr.tabindex]="cell.active ? 0 : -1"
-                      [attr.aria-selected]="cell.selected"
-                      [attr.aria-current]="cell.today ? 'date' : null"
-                      (click)="selectDate(cell.date)"
-                    >
-                      {{ cell.day }}
-                    </button>
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-
-        <div class="cb-datepicker__footer">
-          <button type="button" class="cb-datepicker__today" (click)="goToday()">Hoy</button>
-          @if (value()) {
-            <button type="button" class="cb-datepicker__clear" (click)="clear()">Limpiar</button>
-          }
-        </div>
-      </div>
-    </ng-template>
-
-    @if (fieldState.invalid() && error()) {
-      <p class="cb-datepicker__message cb-datepicker__message--error" [id]="errorId()" role="alert">
-        {{ error() }}
-      </p>
-    } @else if (hint()) {
-      <p class="cb-datepicker__message cb-datepicker__message--hint" [id]="hintId()">
-        {{ hint() }}
-      </p>
-    }
-  `, isInline: true, styles: [":host{display:block}.cb-datepicker__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-datepicker__required{color:var(--cb-color-danger);margin-left:2px}.cb-datepicker{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-datepicker:focus-within,.cb-datepicker.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-datepicker.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-datepicker.cb-is-invalid:focus-within,.cb-datepicker.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-datepicker.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-datepicker__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;cursor:pointer}.cb-datepicker__field::placeholder{color:var(--cb-color-text-muted)}.cb-datepicker__field:focus{outline:none}.cb-datepicker__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-datepicker--sm .cb-datepicker__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-datepicker--md .cb-datepicker__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-datepicker--lg .cb-datepicker__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-datepicker__btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-datepicker__btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-datepicker__btn:disabled{cursor:not-allowed;opacity:.5}.cb-datepicker__btn cb-icon{color:currentColor}.cb-datepicker__panel{padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-datepicker__panel:focus{outline:none}.cb-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--cb-space-2)}.cb-datepicker__title{font-size:var(--cb-text-base);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-datepicker__nav{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--cb-color-text-muted);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__nav:hover{background-color:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-datepicker__nav:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent)}.cb-datepicker__nav cb-icon{color:currentColor}.cb-datepicker__grid{border-collapse:collapse;width:100%}.cb-datepicker__weekday{padding:var(--cb-space-1);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);text-align:center;text-transform:capitalize}.cb-datepicker__cell{padding:1px;text-align:center}.cb-datepicker__day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin:0 auto;font-size:var(--cb-text-sm);color:var(--cb-color-text);background:transparent;border:none;border-radius:var(--cb-radius-full);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker__day:hover:not(:disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-100)}.cb-datepicker__day:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 45%,transparent)}.cb-datepicker__day.cb-is-other-month{color:var(--cb-color-text-muted);opacity:.6}.cb-datepicker__day.cb-is-today:not(.cb-is-selected){font-weight:var(--cb-font-weight-bold);color:var(--cb-color-primary-600)}.cb-datepicker__day.cb-is-selected{color:var(--cb-color-primary-contrast);background-color:var(--cb-color-primary-500);font-weight:var(--cb-font-weight-semibold)}.cb-datepicker__day:disabled{color:var(--cb-color-text-muted);opacity:.35;cursor:not-allowed}.cb-datepicker__footer{display:flex;justify-content:space-between;margin-top:var(--cb-space-2);padding-top:var(--cb-space-2);border-top:1px solid var(--cb-color-border)}.cb-datepicker__today,.cb-datepicker__clear{padding:var(--cb-space-1) var(--cb-space-2);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-primary-600);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__today:hover,.cb-datepicker__clear:hover{background-color:var(--cb-color-surface-100)}.cb-datepicker__clear{color:var(--cb-color-text-muted)}.cb-datepicker__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-datepicker__message--hint{color:var(--cb-color-text-muted)}.cb-datepicker__message--error{color:var(--cb-color-danger)}.cb-datepicker__required--required,.cb-datepicker__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="cb-datepicker__label" [attr.for]="inputId()">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span
+            [class]="'cb-datepicker__required cb-datepicker__required--' + mark.kind"
+            [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'"
+          >{{ mark.text }}</span>
+        }
+      </label>
+    }
+
+    <div
+      #trigger
+      class="cb-datepicker"
+      [class]="'cb-datepicker--' + size()"
+      [class.cb-is-open]="open()"
+      [class.cb-is-invalid]="fieldInvalid()"
+      [class.cb-is-disabled]="isDisabled()"
+    >
+      <input
+        #field
+        class="cb-datepicker__field"
+        [id]="inputId()"
+        type="text"
+        [readOnly]="!editable()"
+        role="combobox"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        [attr.aria-invalid]="fieldInvalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.autocomplete]="editable() ? 'off' : null"
+        [value]="fieldText()"
+        [placeholder]="placeholder() || (editable() ? formatHint() : '')"
+        [disabled]="isDisabled()"
+        [required]="fieldState.required()"
+        (click)="onFieldClick()"
+        (input)="draft.set($any($event.target).value)"
+        (keydown)="onFieldKeydown($event)"
+        (blur)="onBlur()"
+      />
+      <button
+        type="button"
+        class="cb-datepicker__btn"
+        tabindex="-1"
+        [attr.aria-label]="t().openCalendar"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      >
+        <cb-icon name="calendar" [size]="18" aria-hidden="true" />
+      </button>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayHasBackdrop]="false"
+      (overlayOutsideClick)="close()"
+      (detach)="close()"
+    >
+      <div
+        #panel
+        class="cb-datepicker__panel"
+        [class.cb-datepicker__panel--multi]="panelView() === 'date' && monthCount() > 1"
+        [class.cb-datepicker__panel--presets]="presetItems().length > 0"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="panelLabel()"
+        tabindex="-1"
+        (keydown)="onPanelKeydown($event)"
+      >
+        @if (presetItems().length) {
+          <div class="cb-datepicker__presets" role="group" [attr.aria-label]="t().datePresets">
+            @for (item of presetItems(); track $index) {
+              <button
+                type="button"
+                class="cb-datepicker__preset"
+                [class.cb-is-selected]="item.selected"
+                [attr.aria-pressed]="item.selected"
+                [disabled]="item.disabled"
+                (click)="applyPreset(item.value)"
+              >
+                {{ item.label }}
+              </button>
+            }
+          </div>
+        }
+        <div class="cb-datepicker__main">
+        @switch (panelView()) {
+          @case ('date') {
+            <div class="cb-datepicker__months">
+              @for (m of months(); track m.date.getTime(); let first = $first, last = $last) {
+                <div class="cb-datepicker__month">
+                  <div class="cb-datepicker__header">
+                    @if (first) {
+                      <button type="button" class="cb-datepicker__nav" [attr.aria-label]="t().previousMonth" (click)="shiftMonth(-1)">
+                        <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+                      </button>
+                    } @else {
+                      <span class="cb-datepicker__nav-spacer"></span>
+                    }
+                    <button
+                      type="button"
+                      class="cb-datepicker__title"
+                      [attr.aria-label]="m.title + '. ' + t().chooseMonth"
+                      (click)="showMonths(m.date)"
+                    >{{ m.title }}</button>
+                    @if (last) {
+                      <button type="button" class="cb-datepicker__nav" [attr.aria-label]="t().nextMonth" (click)="shiftMonth(1)">
+                        <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+                      </button>
+                    } @else {
+                      <span class="cb-datepicker__nav-spacer"></span>
+                    }
+                  </div>
+
+                  <table
+                    class="cb-datepicker__grid"
+                    role="grid"
+                    [attr.aria-label]="m.title"
+                    [class.cb-datepicker__grid--range]="isRange()"
+                    (mouseleave)="hoverDate.set(null)"
+                  >
+                    <thead>
+                      <tr>
+                        @for (wd of weekdays(); track wd.index) {
+                          <th class="cb-datepicker__weekday" scope="col" [attr.abbr]="wd.long">{{ wd.short }}</th>
+                        }
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (week of m.weeks; track week[0].date.getTime()) {
+                        <tr>
+                          @for (cell of week; track cell.date.getTime()) {
+                            @if (cell.hidden) {
+                              <td class="cb-datepicker__cell" role="gridcell"></td>
+                            } @else {
+                              <td
+                                class="cb-datepicker__cell"
+                                role="gridcell"
+                                [class.cb-is-in-range]="cell.inRange"
+                                [class.cb-is-range-start]="cell.rangeStart"
+                                [class.cb-is-range-end]="cell.rangeEnd"
+                                [attr.aria-selected]="cell.selected || cell.inRange"
+                              >
+                                <!-- aria-disabled (no disabled) para que las flechas puedan pasar por los días no elegibles. -->
+                                <button
+                                  type="button"
+                                  class="cb-datepicker__day"
+                                  [class.cb-is-other-month]="cell.otherMonth"
+                                  [class.cb-is-today]="cell.today"
+                                  [class.cb-is-selected]="cell.selected"
+                                  [class.cb-is-active]="cell.active"
+                                  [class.cb-is-disabled]="cell.disabled"
+                                  [attr.aria-disabled]="cell.disabled || null"
+                                  [attr.aria-label]="cell.label"
+                                  [attr.tabindex]="cell.active ? 0 : -1"
+                                  [attr.aria-current]="cell.today ? 'date' : null"
+                                  (click)="selectDate(cell.date)"
+                                  (mouseenter)="hoverDate.set(cell.date)"
+                                >
+                                  {{ cell.day }}
+                                </button>
+                              </td>
+                            }
+                          }
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </div>
+              }
+            </div>
+          }
+          @default {
+            <div class="cb-datepicker__header">
+              <button
+                type="button"
+                class="cb-datepicker__nav"
+                [attr.aria-label]="panelView() === 'month' ? t().previousYear : t().previousDecade"
+                (click)="shiftPage(-1)"
+              >
+                <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+              </button>
+              @if (panelView() === 'month') {
+                <button type="button" class="cb-datepicker__title" [attr.aria-label]="unitTitle() + '. ' + t().chooseYear" (click)="showYears()">
+                  {{ unitTitle() }}
+                </button>
+              } @else {
+                <span class="cb-datepicker__title cb-datepicker__title--static">{{ unitTitle() }}</span>
+              }
+              <button
+                type="button"
+                class="cb-datepicker__nav"
+                [attr.aria-label]="panelView() === 'month' ? t().nextYear : t().nextDecade"
+                (click)="shiftPage(1)"
+              >
+                <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="cb-datepicker__units" role="grid" [attr.aria-label]="unitTitle()" (mouseleave)="hoverDate.set(null)">
+              @for (row of unitRows(); track $index) {
+                <div class="cb-datepicker__unit-row" role="row">
+                  @for (cell of row; track cell.date.getTime()) {
+                    <div
+                      class="cb-datepicker__cell cb-datepicker__unit-cell"
+                      role="gridcell"
+                      [class.cb-is-in-range]="cell.inRange"
+                      [class.cb-is-range-start]="cell.rangeStart"
+                      [class.cb-is-range-end]="cell.rangeEnd"
+                      [attr.aria-selected]="cell.selected || cell.inRange"
+                    >
+                      <button
+                        type="button"
+                        class="cb-datepicker__unit"
+                        [class.cb-is-other-month]="cell.outside"
+                        [class.cb-is-today]="cell.current"
+                        [class.cb-is-selected]="cell.selected"
+                        [class.cb-is-active]="cell.active"
+                        [class.cb-is-disabled]="cell.disabled"
+                        [attr.aria-disabled]="cell.disabled || null"
+                        [attr.aria-label]="cell.label"
+                        [attr.aria-current]="cell.current ? (panelView() === 'month' ? 'date' : 'true') : null"
+                        [attr.tabindex]="cell.active ? 0 : -1"
+                        (click)="selectUnit(cell.date)"
+                        (mouseenter)="hoverDate.set(cell.date)"
+                      >
+                        {{ cell.text }}
+                      </button>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+
+        @if (isRange()) {
+          <span class="cb-datepicker__sr" aria-live="polite">{{ choosingEnd() ? t().chooseEndDate : '' }}</span>
+        }
+
+        @for (row of timeRows(); track row.target) {
+          <div class="cb-datepicker__time" role="group" [attr.aria-label]="row.label">
+            @if (row.caption) {
+              <span class="cb-datepicker__time-caption" aria-hidden="true">{{ row.caption }}</span>
+            }
+            <label class="cb-datepicker__time-field">
+              <span class="cb-datepicker__sr">{{ t().hours }}</span>
+              <input
+                type="number"
+                class="cb-datepicker__time-input"
+                [min]="hourFormat() === '12' ? 1 : 0"
+                [max]="hourFormat() === '12' ? 12 : 23"
+                [value]="displayHour(row.target)"
+                [disabled]="!row.enabled"
+                (input)="setHour(row.target, $any($event.target).value)"
+              />
+            </label>
+            <span class="cb-datepicker__time-sep" aria-hidden="true">:</span>
+            <label class="cb-datepicker__time-field">
+              <span class="cb-datepicker__sr">{{ t().minutes }}</span>
+              <input
+                type="number"
+                class="cb-datepicker__time-input"
+                min="0"
+                max="59"
+                [step]="stepMinute()"
+                [value]="pad(timeOf(row.target).minutes)"
+                [disabled]="!row.enabled"
+                (input)="setMinute(row.target, $any($event.target).value)"
+              />
+            </label>
+            @if (hourFormat() === '12') {
+              <button
+                type="button"
+                class="cb-datepicker__period"
+                [attr.aria-label]="t().period"
+                [disabled]="!row.enabled"
+                (click)="togglePeriod(row.target)"
+              >
+                {{ timeOf(row.target).hours < 12 ? 'AM' : 'PM' }}
+              </button>
+            }
+          </div>
+        }
+
+        <div class="cb-datepicker__footer">
+          <button type="button" class="cb-datepicker__today" (click)="goToday()">{{ t().today }}</button>
+          @if (hasValue()) {
+            <button type="button" class="cb-datepicker__clear" (click)="clear()">{{ t().clear }}</button>
+          }
+        </div>
+        </div>
+      </div>
+    </ng-template>
+
+    @if (typedInvalid()) {
+      <p class="cb-datepicker__message cb-datepicker__message--error" [id]="errorId()" role="alert">
+        {{ invalidMessage() }}
+      </p>
+    } @else if (fieldState.invalid() && error()) {
+      <p class="cb-datepicker__message cb-datepicker__message--error" [id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    } @else if (hint()) {
+      <p class="cb-datepicker__message cb-datepicker__message--hint" [id]="hintId()">
+        {{ hint() }}
+      </p>
+    }
+  `, isInline: true, styles: [":host{display:block}.cb-datepicker__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-datepicker__required{color:var(--cb-color-danger);margin-left:2px}.cb-datepicker{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-datepicker:focus-within,.cb-datepicker.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-datepicker.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-datepicker.cb-is-invalid:focus-within,.cb-datepicker.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-datepicker.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-datepicker__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;cursor:pointer}.cb-datepicker__field::placeholder{color:var(--cb-color-text-muted)}.cb-datepicker__field:focus{outline:none}.cb-datepicker__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-datepicker--sm .cb-datepicker__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-datepicker--md .cb-datepicker__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-datepicker--lg .cb-datepicker__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-datepicker__btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-datepicker__btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-datepicker__btn:disabled{cursor:not-allowed;opacity:.5}.cb-datepicker__btn cb-icon{color:currentColor}.cb-datepicker__panel{padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-datepicker__panel:focus{outline:none}.cb-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--cb-space-2)}.cb-datepicker__title{padding:.25rem .5rem;font:inherit;font-size:var(--cb-text-base);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__title:hover:not(.cb-datepicker__title--static){background-color:var(--cb-color-surface-hover)}.cb-datepicker__title:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-datepicker__title--static{cursor:default}.cb-datepicker__nav-spacer{width:2rem}.cb-datepicker__panel--presets{display:flex;gap:var(--cb-space-3)}.cb-datepicker__presets{display:flex;flex-direction:column;gap:2px;min-width:9rem;padding-right:var(--cb-space-3);border-right:1px solid var(--cb-color-border)}.cb-datepicker__preset{padding:.4rem .65rem;font:inherit;font-size:var(--cb-text-sm);text-align:left;white-space:nowrap;color:var(--cb-color-text);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__preset:hover:not(:disabled){background-color:var(--cb-color-surface-hover)}.cb-datepicker__preset:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-datepicker__preset.cb-is-selected{font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong);background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent);box-shadow:inset 3px 0 0 var(--cb-color-primary-500)}.cb-datepicker__preset:disabled{opacity:.45;cursor:not-allowed}@media(max-width:40rem){.cb-datepicker__panel--presets{flex-direction:column}.cb-datepicker__presets{flex-direction:row;flex-wrap:wrap;padding:0 0 var(--cb-space-2);border-right:none;border-bottom:1px solid var(--cb-color-border)}}@media(forced-colors:active){.cb-datepicker__preset.cb-is-selected{outline:2px solid Highlight}}.cb-datepicker__months{display:flex;flex-wrap:wrap;gap:var(--cb-space-4)}.cb-datepicker__panel--multi .cb-datepicker__month+.cb-datepicker__month{padding-left:var(--cb-space-4);border-left:1px solid var(--cb-color-border)}@media(max-width:40rem){.cb-datepicker__panel--multi .cb-datepicker__month+.cb-datepicker__month{padding-left:0;border-left:none}}.cb-datepicker__units{display:grid;gap:var(--cb-space-1);min-width:16.5rem}.cb-datepicker__unit-row{display:grid;grid-template-columns:repeat(3,1fr)}.cb-datepicker__unit-cell{padding:2px 0}.cb-datepicker__unit{display:flex;align-items:center;justify-content:center;width:100%;height:2.5rem;font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);text-transform:capitalize;background:transparent;border:none;border-radius:var(--cb-radius-full);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker__unit:hover:not(.cb-is-disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-hover)}.cb-datepicker__unit:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-datepicker__unit.cb-is-other-month{color:var(--cb-color-text-muted)}.cb-datepicker__unit.cb-is-today:not(.cb-is-selected){font-weight:var(--cb-font-weight-semibold);box-shadow:inset 0 0 0 1px var(--cb-color-primary-500)}.cb-datepicker__unit.cb-is-selected{color:var(--cb-color-primary-contrast);background-color:var(--cb-color-primary-500);font-weight:var(--cb-font-weight-semibold)}.cb-datepicker__unit.cb-is-disabled{color:var(--cb-color-text-muted);opacity:.45;cursor:not-allowed}.cb-datepicker__time+.cb-datepicker__time{margin-top:0;padding-top:var(--cb-space-1);border-top:none}.cb-datepicker__time-caption{min-width:6.5rem;margin-right:var(--cb-space-2);font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-datepicker__nav{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--cb-color-text-muted);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__nav:hover{background-color:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-datepicker__nav:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent)}.cb-datepicker__nav cb-icon{color:currentColor}.cb-datepicker__grid{border-collapse:collapse;width:100%}.cb-datepicker__weekday{padding:var(--cb-space-1);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);text-align:center;text-transform:capitalize}.cb-datepicker__cell{padding:1px;text-align:center}.cb-datepicker__day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin:0 auto;font-size:var(--cb-text-sm);color:var(--cb-color-text);background:transparent;border:none;border-radius:var(--cb-radius-full);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker__day:hover:not(.cb-is-disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-hover)}.cb-datepicker__day:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 45%,transparent)}.cb-datepicker__day.cb-is-other-month{color:var(--cb-color-text-muted);opacity:.6}.cb-datepicker__day.cb-is-today:not(.cb-is-selected){font-weight:var(--cb-font-weight-bold);color:var(--cb-color-primary-600)}.cb-datepicker__day.cb-is-selected{color:var(--cb-color-primary-contrast);background-color:var(--cb-color-primary-500);font-weight:var(--cb-font-weight-semibold)}.cb-datepicker__day.cb-is-disabled{color:var(--cb-color-text-muted);opacity:.35;cursor:not-allowed}.cb-datepicker__cell.cb-is-in-range{background-color:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-datepicker__cell.cb-is-range-start{background:linear-gradient(to right,transparent 50%,color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent) 50%)}.cb-datepicker__cell.cb-is-range-end{background:linear-gradient(to left,transparent 50%,color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent) 50%)}.cb-datepicker__cell.cb-is-range-start.cb-is-range-end{background:none}.cb-datepicker__time{display:flex;align-items:center;justify-content:center;gap:var(--cb-space-1);margin-top:var(--cb-space-2);padding-top:var(--cb-space-2);border-top:1px solid var(--cb-color-border)}.cb-datepicker__time-input{box-sizing:border-box;width:3.25rem;padding:var(--cb-space-1);font-family:inherit;font-size:var(--cb-text-base);font-variant-numeric:tabular-nums;text-align:center;color:var(--cb-color-text);background-color:var(--cb-color-bg);border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-datepicker__time-input:focus-visible,.cb-datepicker__period:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent)}.cb-datepicker__time-sep{font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-muted)}.cb-datepicker__period{margin-left:var(--cb-space-1);padding:var(--cb-space-1) var(--cb-space-2);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text);background-color:var(--cb-color-surface-hover);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-datepicker__footer{display:flex;justify-content:space-between;margin-top:var(--cb-space-2);padding-top:var(--cb-space-2);border-top:1px solid var(--cb-color-border)}.cb-datepicker__today,.cb-datepicker__clear{padding:var(--cb-space-1) var(--cb-space-2);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-primary-600);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__today:hover,.cb-datepicker__clear:hover{background-color:var(--cb-color-surface-hover)}.cb-datepicker__clear{color:var(--cb-color-text-muted)}.cb-datepicker__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-datepicker__message--hint{color:var(--cb-color-text-muted)}.cb-datepicker__message--error{color:var(--cb-color-danger)}.cb-datepicker__required--required,.cb-datepicker__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDatepicker, decorators: [{
             type: Component,
@@ -455,160 +1474,374 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => CbDatepicker),
                             multi: true,
                         },
-                    ], template: `
-    @if (label()) {
-      <label class="cb-datepicker__label" [attr.for]="inputId()">
-        {{ label() }}
-        @if (fieldState.indicator(); as mark) {
-          <span
-            [class]="'cb-datepicker__required cb-datepicker__required--' + mark.kind"
-            [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'"
-          >{{ mark.text }}</span>
-        }
-      </label>
+                    ], template: `
+    @if (label()) {
+      <label class="cb-datepicker__label" [attr.for]="inputId()">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span
+            [class]="'cb-datepicker__required cb-datepicker__required--' + mark.kind"
+            [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'"
+          >{{ mark.text }}</span>
+        }
+      </label>
+    }
+
+    <div
+      #trigger
+      class="cb-datepicker"
+      [class]="'cb-datepicker--' + size()"
+      [class.cb-is-open]="open()"
+      [class.cb-is-invalid]="fieldInvalid()"
+      [class.cb-is-disabled]="isDisabled()"
+    >
+      <input
+        #field
+        class="cb-datepicker__field"
+        [id]="inputId()"
+        type="text"
+        [readOnly]="!editable()"
+        role="combobox"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        [attr.aria-invalid]="fieldInvalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.autocomplete]="editable() ? 'off' : null"
+        [value]="fieldText()"
+        [placeholder]="placeholder() || (editable() ? formatHint() : '')"
+        [disabled]="isDisabled()"
+        [required]="fieldState.required()"
+        (click)="onFieldClick()"
+        (input)="draft.set($any($event.target).value)"
+        (keydown)="onFieldKeydown($event)"
+        (blur)="onBlur()"
+      />
+      <button
+        type="button"
+        class="cb-datepicker__btn"
+        tabindex="-1"
+        [attr.aria-label]="t().openCalendar"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      >
+        <cb-icon name="calendar" [size]="18" aria-hidden="true" />
+      </button>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayHasBackdrop]="false"
+      (overlayOutsideClick)="close()"
+      (detach)="close()"
+    >
+      <div
+        #panel
+        class="cb-datepicker__panel"
+        [class.cb-datepicker__panel--multi]="panelView() === 'date' && monthCount() > 1"
+        [class.cb-datepicker__panel--presets]="presetItems().length > 0"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="panelLabel()"
+        tabindex="-1"
+        (keydown)="onPanelKeydown($event)"
+      >
+        @if (presetItems().length) {
+          <div class="cb-datepicker__presets" role="group" [attr.aria-label]="t().datePresets">
+            @for (item of presetItems(); track $index) {
+              <button
+                type="button"
+                class="cb-datepicker__preset"
+                [class.cb-is-selected]="item.selected"
+                [attr.aria-pressed]="item.selected"
+                [disabled]="item.disabled"
+                (click)="applyPreset(item.value)"
+              >
+                {{ item.label }}
+              </button>
+            }
+          </div>
+        }
+        <div class="cb-datepicker__main">
+        @switch (panelView()) {
+          @case ('date') {
+            <div class="cb-datepicker__months">
+              @for (m of months(); track m.date.getTime(); let first = $first, last = $last) {
+                <div class="cb-datepicker__month">
+                  <div class="cb-datepicker__header">
+                    @if (first) {
+                      <button type="button" class="cb-datepicker__nav" [attr.aria-label]="t().previousMonth" (click)="shiftMonth(-1)">
+                        <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+                      </button>
+                    } @else {
+                      <span class="cb-datepicker__nav-spacer"></span>
+                    }
+                    <button
+                      type="button"
+                      class="cb-datepicker__title"
+                      [attr.aria-label]="m.title + '. ' + t().chooseMonth"
+                      (click)="showMonths(m.date)"
+                    >{{ m.title }}</button>
+                    @if (last) {
+                      <button type="button" class="cb-datepicker__nav" [attr.aria-label]="t().nextMonth" (click)="shiftMonth(1)">
+                        <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+                      </button>
+                    } @else {
+                      <span class="cb-datepicker__nav-spacer"></span>
+                    }
+                  </div>
+
+                  <table
+                    class="cb-datepicker__grid"
+                    role="grid"
+                    [attr.aria-label]="m.title"
+                    [class.cb-datepicker__grid--range]="isRange()"
+                    (mouseleave)="hoverDate.set(null)"
+                  >
+                    <thead>
+                      <tr>
+                        @for (wd of weekdays(); track wd.index) {
+                          <th class="cb-datepicker__weekday" scope="col" [attr.abbr]="wd.long">{{ wd.short }}</th>
+                        }
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (week of m.weeks; track week[0].date.getTime()) {
+                        <tr>
+                          @for (cell of week; track cell.date.getTime()) {
+                            @if (cell.hidden) {
+                              <td class="cb-datepicker__cell" role="gridcell"></td>
+                            } @else {
+                              <td
+                                class="cb-datepicker__cell"
+                                role="gridcell"
+                                [class.cb-is-in-range]="cell.inRange"
+                                [class.cb-is-range-start]="cell.rangeStart"
+                                [class.cb-is-range-end]="cell.rangeEnd"
+                                [attr.aria-selected]="cell.selected || cell.inRange"
+                              >
+                                <!-- aria-disabled (no disabled) para que las flechas puedan pasar por los días no elegibles. -->
+                                <button
+                                  type="button"
+                                  class="cb-datepicker__day"
+                                  [class.cb-is-other-month]="cell.otherMonth"
+                                  [class.cb-is-today]="cell.today"
+                                  [class.cb-is-selected]="cell.selected"
+                                  [class.cb-is-active]="cell.active"
+                                  [class.cb-is-disabled]="cell.disabled"
+                                  [attr.aria-disabled]="cell.disabled || null"
+                                  [attr.aria-label]="cell.label"
+                                  [attr.tabindex]="cell.active ? 0 : -1"
+                                  [attr.aria-current]="cell.today ? 'date' : null"
+                                  (click)="selectDate(cell.date)"
+                                  (mouseenter)="hoverDate.set(cell.date)"
+                                >
+                                  {{ cell.day }}
+                                </button>
+                              </td>
+                            }
+                          }
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </div>
+              }
+            </div>
+          }
+          @default {
+            <div class="cb-datepicker__header">
+              <button
+                type="button"
+                class="cb-datepicker__nav"
+                [attr.aria-label]="panelView() === 'month' ? t().previousYear : t().previousDecade"
+                (click)="shiftPage(-1)"
+              >
+                <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
+              </button>
+              @if (panelView() === 'month') {
+                <button type="button" class="cb-datepicker__title" [attr.aria-label]="unitTitle() + '. ' + t().chooseYear" (click)="showYears()">
+                  {{ unitTitle() }}
+                </button>
+              } @else {
+                <span class="cb-datepicker__title cb-datepicker__title--static">{{ unitTitle() }}</span>
+              }
+              <button
+                type="button"
+                class="cb-datepicker__nav"
+                [attr.aria-label]="panelView() === 'month' ? t().nextYear : t().nextDecade"
+                (click)="shiftPage(1)"
+              >
+                <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="cb-datepicker__units" role="grid" [attr.aria-label]="unitTitle()" (mouseleave)="hoverDate.set(null)">
+              @for (row of unitRows(); track $index) {
+                <div class="cb-datepicker__unit-row" role="row">
+                  @for (cell of row; track cell.date.getTime()) {
+                    <div
+                      class="cb-datepicker__cell cb-datepicker__unit-cell"
+                      role="gridcell"
+                      [class.cb-is-in-range]="cell.inRange"
+                      [class.cb-is-range-start]="cell.rangeStart"
+                      [class.cb-is-range-end]="cell.rangeEnd"
+                      [attr.aria-selected]="cell.selected || cell.inRange"
+                    >
+                      <button
+                        type="button"
+                        class="cb-datepicker__unit"
+                        [class.cb-is-other-month]="cell.outside"
+                        [class.cb-is-today]="cell.current"
+                        [class.cb-is-selected]="cell.selected"
+                        [class.cb-is-active]="cell.active"
+                        [class.cb-is-disabled]="cell.disabled"
+                        [attr.aria-disabled]="cell.disabled || null"
+                        [attr.aria-label]="cell.label"
+                        [attr.aria-current]="cell.current ? (panelView() === 'month' ? 'date' : 'true') : null"
+                        [attr.tabindex]="cell.active ? 0 : -1"
+                        (click)="selectUnit(cell.date)"
+                        (mouseenter)="hoverDate.set(cell.date)"
+                      >
+                        {{ cell.text }}
+                      </button>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+
+        @if (isRange()) {
+          <span class="cb-datepicker__sr" aria-live="polite">{{ choosingEnd() ? t().chooseEndDate : '' }}</span>
+        }
+
+        @for (row of timeRows(); track row.target) {
+          <div class="cb-datepicker__time" role="group" [attr.aria-label]="row.label">
+            @if (row.caption) {
+              <span class="cb-datepicker__time-caption" aria-hidden="true">{{ row.caption }}</span>
+            }
+            <label class="cb-datepicker__time-field">
+              <span class="cb-datepicker__sr">{{ t().hours }}</span>
+              <input
+                type="number"
+                class="cb-datepicker__time-input"
+                [min]="hourFormat() === '12' ? 1 : 0"
+                [max]="hourFormat() === '12' ? 12 : 23"
+                [value]="displayHour(row.target)"
+                [disabled]="!row.enabled"
+                (input)="setHour(row.target, $any($event.target).value)"
+              />
+            </label>
+            <span class="cb-datepicker__time-sep" aria-hidden="true">:</span>
+            <label class="cb-datepicker__time-field">
+              <span class="cb-datepicker__sr">{{ t().minutes }}</span>
+              <input
+                type="number"
+                class="cb-datepicker__time-input"
+                min="0"
+                max="59"
+                [step]="stepMinute()"
+                [value]="pad(timeOf(row.target).minutes)"
+                [disabled]="!row.enabled"
+                (input)="setMinute(row.target, $any($event.target).value)"
+              />
+            </label>
+            @if (hourFormat() === '12') {
+              <button
+                type="button"
+                class="cb-datepicker__period"
+                [attr.aria-label]="t().period"
+                [disabled]="!row.enabled"
+                (click)="togglePeriod(row.target)"
+              >
+                {{ timeOf(row.target).hours < 12 ? 'AM' : 'PM' }}
+              </button>
+            }
+          </div>
+        }
+
+        <div class="cb-datepicker__footer">
+          <button type="button" class="cb-datepicker__today" (click)="goToday()">{{ t().today }}</button>
+          @if (hasValue()) {
+            <button type="button" class="cb-datepicker__clear" (click)="clear()">{{ t().clear }}</button>
+          }
+        </div>
+        </div>
+      </div>
+    </ng-template>
+
+    @if (typedInvalid()) {
+      <p class="cb-datepicker__message cb-datepicker__message--error" [id]="errorId()" role="alert">
+        {{ invalidMessage() }}
+      </p>
+    } @else if (fieldState.invalid() && error()) {
+      <p class="cb-datepicker__message cb-datepicker__message--error" [id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    } @else if (hint()) {
+      <p class="cb-datepicker__message cb-datepicker__message--hint" [id]="hintId()">
+        {{ hint() }}
+      </p>
+    }
+  `, styles: [":host{display:block}.cb-datepicker__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-datepicker__required{color:var(--cb-color-danger);margin-left:2px}.cb-datepicker{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-datepicker:focus-within,.cb-datepicker.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-datepicker.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-datepicker.cb-is-invalid:focus-within,.cb-datepicker.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-datepicker.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-datepicker__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;cursor:pointer}.cb-datepicker__field::placeholder{color:var(--cb-color-text-muted)}.cb-datepicker__field:focus{outline:none}.cb-datepicker__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-datepicker--sm .cb-datepicker__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-datepicker--md .cb-datepicker__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-datepicker--lg .cb-datepicker__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-datepicker__btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-datepicker__btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-datepicker__btn:disabled{cursor:not-allowed;opacity:.5}.cb-datepicker__btn cb-icon{color:currentColor}.cb-datepicker__panel{padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-datepicker__panel:focus{outline:none}.cb-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--cb-space-2)}.cb-datepicker__title{padding:.25rem .5rem;font:inherit;font-size:var(--cb-text-base);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__title:hover:not(.cb-datepicker__title--static){background-color:var(--cb-color-surface-hover)}.cb-datepicker__title:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-datepicker__title--static{cursor:default}.cb-datepicker__nav-spacer{width:2rem}.cb-datepicker__panel--presets{display:flex;gap:var(--cb-space-3)}.cb-datepicker__presets{display:flex;flex-direction:column;gap:2px;min-width:9rem;padding-right:var(--cb-space-3);border-right:1px solid var(--cb-color-border)}.cb-datepicker__preset{padding:.4rem .65rem;font:inherit;font-size:var(--cb-text-sm);text-align:left;white-space:nowrap;color:var(--cb-color-text);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__preset:hover:not(:disabled){background-color:var(--cb-color-surface-hover)}.cb-datepicker__preset:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-datepicker__preset.cb-is-selected{font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong);background-color:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent);box-shadow:inset 3px 0 0 var(--cb-color-primary-500)}.cb-datepicker__preset:disabled{opacity:.45;cursor:not-allowed}@media(max-width:40rem){.cb-datepicker__panel--presets{flex-direction:column}.cb-datepicker__presets{flex-direction:row;flex-wrap:wrap;padding:0 0 var(--cb-space-2);border-right:none;border-bottom:1px solid var(--cb-color-border)}}@media(forced-colors:active){.cb-datepicker__preset.cb-is-selected{outline:2px solid Highlight}}.cb-datepicker__months{display:flex;flex-wrap:wrap;gap:var(--cb-space-4)}.cb-datepicker__panel--multi .cb-datepicker__month+.cb-datepicker__month{padding-left:var(--cb-space-4);border-left:1px solid var(--cb-color-border)}@media(max-width:40rem){.cb-datepicker__panel--multi .cb-datepicker__month+.cb-datepicker__month{padding-left:0;border-left:none}}.cb-datepicker__units{display:grid;gap:var(--cb-space-1);min-width:16.5rem}.cb-datepicker__unit-row{display:grid;grid-template-columns:repeat(3,1fr)}.cb-datepicker__unit-cell{padding:2px 0}.cb-datepicker__unit{display:flex;align-items:center;justify-content:center;width:100%;height:2.5rem;font:inherit;font-size:var(--cb-text-sm);color:var(--cb-color-text);text-transform:capitalize;background:transparent;border:none;border-radius:var(--cb-radius-full);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker__unit:hover:not(.cb-is-disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-hover)}.cb-datepicker__unit:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-datepicker__unit.cb-is-other-month{color:var(--cb-color-text-muted)}.cb-datepicker__unit.cb-is-today:not(.cb-is-selected){font-weight:var(--cb-font-weight-semibold);box-shadow:inset 0 0 0 1px var(--cb-color-primary-500)}.cb-datepicker__unit.cb-is-selected{color:var(--cb-color-primary-contrast);background-color:var(--cb-color-primary-500);font-weight:var(--cb-font-weight-semibold)}.cb-datepicker__unit.cb-is-disabled{color:var(--cb-color-text-muted);opacity:.45;cursor:not-allowed}.cb-datepicker__time+.cb-datepicker__time{margin-top:0;padding-top:var(--cb-space-1);border-top:none}.cb-datepicker__time-caption{min-width:6.5rem;margin-right:var(--cb-space-2);font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-datepicker__nav{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--cb-color-text-muted);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__nav:hover{background-color:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-datepicker__nav:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent)}.cb-datepicker__nav cb-icon{color:currentColor}.cb-datepicker__grid{border-collapse:collapse;width:100%}.cb-datepicker__weekday{padding:var(--cb-space-1);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);text-align:center;text-transform:capitalize}.cb-datepicker__cell{padding:1px;text-align:center}.cb-datepicker__day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin:0 auto;font-size:var(--cb-text-sm);color:var(--cb-color-text);background:transparent;border:none;border-radius:var(--cb-radius-full);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker__day:hover:not(.cb-is-disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-hover)}.cb-datepicker__day:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 45%,transparent)}.cb-datepicker__day.cb-is-other-month{color:var(--cb-color-text-muted);opacity:.6}.cb-datepicker__day.cb-is-today:not(.cb-is-selected){font-weight:var(--cb-font-weight-bold);color:var(--cb-color-primary-600)}.cb-datepicker__day.cb-is-selected{color:var(--cb-color-primary-contrast);background-color:var(--cb-color-primary-500);font-weight:var(--cb-font-weight-semibold)}.cb-datepicker__day.cb-is-disabled{color:var(--cb-color-text-muted);opacity:.35;cursor:not-allowed}.cb-datepicker__cell.cb-is-in-range{background-color:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}.cb-datepicker__cell.cb-is-range-start{background:linear-gradient(to right,transparent 50%,color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent) 50%)}.cb-datepicker__cell.cb-is-range-end{background:linear-gradient(to left,transparent 50%,color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent) 50%)}.cb-datepicker__cell.cb-is-range-start.cb-is-range-end{background:none}.cb-datepicker__time{display:flex;align-items:center;justify-content:center;gap:var(--cb-space-1);margin-top:var(--cb-space-2);padding-top:var(--cb-space-2);border-top:1px solid var(--cb-color-border)}.cb-datepicker__time-input{box-sizing:border-box;width:3.25rem;padding:var(--cb-space-1);font-family:inherit;font-size:var(--cb-text-base);font-variant-numeric:tabular-nums;text-align:center;color:var(--cb-color-text);background-color:var(--cb-color-bg);border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm)}.cb-datepicker__time-input:focus-visible,.cb-datepicker__period:focus-visible{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent)}.cb-datepicker__time-sep{font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-muted)}.cb-datepicker__period{margin-left:var(--cb-space-1);padding:var(--cb-space-1) var(--cb-space-2);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text);background-color:var(--cb-color-surface-hover);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cb-datepicker__footer{display:flex;justify-content:space-between;margin-top:var(--cb-space-2);padding-top:var(--cb-space-2);border-top:1px solid var(--cb-color-border)}.cb-datepicker__today,.cb-datepicker__clear{padding:var(--cb-space-1) var(--cb-space-2);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-primary-600);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__today:hover,.cb-datepicker__clear:hover{background-color:var(--cb-color-surface-hover)}.cb-datepicker__clear{color:var(--cb-color-text-muted)}.cb-datepicker__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-datepicker__message--hint{color:var(--cb-color-text-muted)}.cb-datepicker__message--error{color:var(--cb-color-danger)}.cb-datepicker__required--required,.cb-datepicker__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+/** Rango de un atajo predefinido, relativo a hoy. */
+function presetRange(key) {
+    const today = stripTime(new Date());
+    const y = today.getFullYear();
+    const m = today.getMonth();
+    switch (key) {
+        case 'today':
+            return [today, today];
+        case 'yesterday':
+            return [addDays(today, -1), addDays(today, -1)];
+        case 'last7Days':
+            return [addDays(today, -6), today];
+        case 'last30Days':
+            return [addDays(today, -29), today];
+        case 'thisMonth':
+            return [new Date(y, m, 1), new Date(y, m + 1, 0)];
+        case 'lastMonth':
+            return [new Date(y, m - 1, 1), new Date(y, m, 0)];
+        case 'thisYear':
+            return [new Date(y, 0, 1), new Date(y, 11, 31)];
+        case 'lastYear':
+            return [new Date(y - 1, 0, 1), new Date(y - 1, 11, 31)];
     }
-
-    <div
-      #trigger
-      class="cb-datepicker"
-      [class]="'cb-datepicker--' + size()"
-      [class.cb-is-open]="open()"
-      [class.cb-is-invalid]="fieldState.invalid()"
-      [class.cb-is-disabled]="isDisabled()"
-    >
-      <input
-        #field
-        class="cb-datepicker__field"
-        [id]="inputId()"
-        type="text"
-        readonly
-        role="combobox"
-        aria-haspopup="dialog"
-        [attr.aria-expanded]="open()"
-        [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
-        [attr.aria-describedby]="describedBy()"
-        [value]="display()"
-        [placeholder]="placeholder()"
-        [disabled]="isDisabled()"
-        [required]="fieldState.required()"
-        (click)="toggle()"
-        (keydown)="onFieldKeydown($event)"
-        (blur)="onBlur()"
-      />
-      <button
-        type="button"
-        class="cb-datepicker__btn"
-        tabindex="-1"
-        aria-label="Abrir calendario"
-        [disabled]="isDisabled()"
-        (click)="toggle()"
-      >
-        <cb-icon name="calendar" [size]="18" aria-hidden="true" />
-      </button>
-    </div>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="open()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayHasBackdrop]="false"
-      (overlayOutsideClick)="close()"
-      (detach)="close()"
-    >
-      <div
-        #panel
-        class="cb-datepicker__panel"
-        role="dialog"
-        aria-modal="false"
-        [attr.aria-label]="monthYearLabel()"
-        tabindex="-1"
-        (keydown)="onPanelKeydown($event)"
-      >
-        <div class="cb-datepicker__header">
-          <button
-            type="button"
-            class="cb-datepicker__nav"
-            aria-label="Mes anterior"
-            (click)="shiftMonth(-1)"
-          >
-            <cb-icon name="chevron-left" [size]="18" aria-hidden="true" />
-          </button>
-          <span class="cb-datepicker__title" aria-live="polite">{{ monthYearLabel() }}</span>
-          <button
-            type="button"
-            class="cb-datepicker__nav"
-            aria-label="Mes siguiente"
-            (click)="shiftMonth(1)"
-          >
-            <cb-icon name="chevron-right" [size]="18" aria-hidden="true" />
-          </button>
-        </div>
-
-        <table class="cb-datepicker__grid" role="grid">
-          <thead>
-            <tr>
-              @for (wd of weekdays(); track wd.index) {
-                <th class="cb-datepicker__weekday" scope="col" [attr.abbr]="wd.long">{{ wd.short }}</th>
-              }
-            </tr>
-          </thead>
-          <tbody>
-            @for (week of weeks(); track week[0].date.getTime()) {
-              <tr>
-                @for (cell of week; track cell.date.getTime()) {
-                  <td class="cb-datepicker__cell" role="gridcell">
-                    <button
-                      type="button"
-                      class="cb-datepicker__day"
-                      [class.cb-is-other-month]="cell.otherMonth"
-                      [class.cb-is-today]="cell.today"
-                      [class.cb-is-selected]="cell.selected"
-                      [class.cb-is-active]="cell.active"
-                      [disabled]="cell.disabled"
-                      [attr.tabindex]="cell.active ? 0 : -1"
-                      [attr.aria-selected]="cell.selected"
-                      [attr.aria-current]="cell.today ? 'date' : null"
-                      (click)="selectDate(cell.date)"
-                    >
-                      {{ cell.day }}
-                    </button>
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-
-        <div class="cb-datepicker__footer">
-          <button type="button" class="cb-datepicker__today" (click)="goToday()">Hoy</button>
-          @if (value()) {
-            <button type="button" class="cb-datepicker__clear" (click)="clear()">Limpiar</button>
-          }
-        </div>
-      </div>
-    </ng-template>
-
-    @if (fieldState.invalid() && error()) {
-      <p class="cb-datepicker__message cb-datepicker__message--error" [id]="errorId()" role="alert">
-        {{ error() }}
-      </p>
-    } @else if (hint()) {
-      <p class="cb-datepicker__message cb-datepicker__message--hint" [id]="hintId()">
-        {{ hint() }}
-      </p>
-    }
-  `, styles: [":host{display:block}.cb-datepicker__label{display:block;margin-bottom:var(--cb-space-1);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-datepicker__required{color:var(--cb-color-danger);margin-left:2px}.cb-datepicker{position:relative;display:flex;align-items:stretch;box-sizing:border-box;width:100%;background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-datepicker:focus-within,.cb-datepicker.cb-is-open{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-datepicker.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-datepicker.cb-is-invalid:focus-within,.cb-datepicker.cb-is-invalid.cb-is-open{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-datepicker.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-datepicker__field{flex:1 1 auto;min-width:0;box-sizing:border-box;font-family:var(--cb-font-sans);color:var(--cb-color-text);background:transparent;border:none;border-radius:inherit;cursor:pointer}.cb-datepicker__field::placeholder{color:var(--cb-color-text-muted)}.cb-datepicker__field:focus{outline:none}.cb-datepicker__field:disabled{color:var(--cb-color-text-muted);cursor:not-allowed}.cb-datepicker--sm .cb-datepicker__field{min-height:2rem;padding:var(--cb-space-1) var(--cb-space-2);font-size:var(--cb-text-sm)}.cb-datepicker--md .cb-datepicker__field{min-height:2.5rem;padding:var(--cb-space-2) var(--cb-space-3);font-size:var(--cb-text-base)}.cb-datepicker--lg .cb-datepicker__field{min-height:3rem;padding:var(--cb-space-3) var(--cb-space-4);font-size:var(--cb-text-lg)}.cb-datepicker__btn{display:flex;flex:none;align-items:center;justify-content:center;width:2.5rem;padding:0;color:var(--cb-color-text-muted);background:transparent;border:none;border-left:var(--cb-border-width) solid var(--cb-color-border);cursor:pointer}.cb-datepicker__btn:hover:not(:disabled){color:var(--cb-color-text)}.cb-datepicker__btn:disabled{cursor:not-allowed;opacity:.5}.cb-datepicker__btn cb-icon{color:currentColor}.cb-datepicker__panel{padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-datepicker__panel:focus{outline:none}.cb-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--cb-space-2)}.cb-datepicker__title{font-size:var(--cb-text-base);font-weight:var(--cb-font-weight-semibold);color:var(--cb-color-text-strong)}.cb-datepicker__nav{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--cb-color-text-muted);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__nav:hover{background-color:var(--cb-color-surface-100);color:var(--cb-color-text)}.cb-datepicker__nav:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent)}.cb-datepicker__nav cb-icon{color:currentColor}.cb-datepicker__grid{border-collapse:collapse;width:100%}.cb-datepicker__weekday{padding:var(--cb-space-1);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text-muted);text-align:center;text-transform:capitalize}.cb-datepicker__cell{padding:1px;text-align:center}.cb-datepicker__day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin:0 auto;font-size:var(--cb-text-sm);color:var(--cb-color-text);background:transparent;border:none;border-radius:var(--cb-radius-full);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-datepicker__day:hover:not(:disabled):not(.cb-is-selected){background-color:var(--cb-color-surface-100)}.cb-datepicker__day:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 45%,transparent)}.cb-datepicker__day.cb-is-other-month{color:var(--cb-color-text-muted);opacity:.6}.cb-datepicker__day.cb-is-today:not(.cb-is-selected){font-weight:var(--cb-font-weight-bold);color:var(--cb-color-primary-600)}.cb-datepicker__day.cb-is-selected{color:var(--cb-color-primary-contrast);background-color:var(--cb-color-primary-500);font-weight:var(--cb-font-weight-semibold)}.cb-datepicker__day:disabled{color:var(--cb-color-text-muted);opacity:.35;cursor:not-allowed}.cb-datepicker__footer{display:flex;justify-content:space-between;margin-top:var(--cb-space-2);padding-top:var(--cb-space-2);border-top:1px solid var(--cb-color-border)}.cb-datepicker__today,.cb-datepicker__clear{padding:var(--cb-space-1) var(--cb-space-2);font-family:inherit;font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-primary-600);background:transparent;border:none;border-radius:var(--cb-radius-sm);cursor:pointer}.cb-datepicker__today:hover,.cb-datepicker__clear:hover{background-color:var(--cb-color-surface-100)}.cb-datepicker__clear{color:var(--cb-color-text-muted)}.cb-datepicker__message{margin:var(--cb-space-1) 0 0;font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal)}.cb-datepicker__message--hint{color:var(--cb-color-text-muted)}.cb-datepicker__message--error{color:var(--cb-color-danger)}.cb-datepicker__required--required,.cb-datepicker__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+}
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';
 }
+function isValidDate(d) {
+    return d instanceof Date && !Number.isNaN(d.getTime());
+}
+/** Acepta una fecha, un rango `[inicio, fin]` o `null`; descarta fechas inválidas. */
+function normalizeValue(value) {
+    if (Array.isArray(value)) {
+        const [start, end] = value;
+        return isValidDate(start) ? [start, isValidDate(end) ? end : null] : null;
+    }
+    return isValidDate(value) ? value : null;
+}
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
 function stripTime(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate());
 }
 function startOfMonth(d) {
     return new Date(d.getFullYear(), d.getMonth(), 1);
 }
+/** Inicio del día, del mes o del año. */
+function startOf(d, unit) {
+    return unit === 'year' ? new Date(d.getFullYear(), 0, 1) : unit === 'month' ? startOfMonth(d) : stripTime(d);
+}
+function sameUnit(a, b, unit) {
+    return startOf(a, unit).getTime() === startOf(b, unit).getTime();
+}
 function addDays(d, n) {
     const r = new Date(d);
     r.setDate(r.getDate() + n);
@@ -617,14 +1850,18 @@ function addDays(d, n) {
 function addMonths(d, n) {
     return new Date(d.getFullYear(), d.getMonth() + n, 1);
 }
+/** Mismo día `n` meses después, ajustado al último día si el mes es más corto (31 ene → 28 feb). */
+function sameDayShifted(d, n) {
+    const target = addMonths(d, n);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), lastDay));
+}
 function startOfWeek(d, firstDay) {
     const offset = (d.getDay() - firstDay + 7) % 7;
     return addDays(d, -offset);
 }
 function isSameDay(a, b) {
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 
 /*