@oneluiz/dual-datepicker 2.4.0 → 2.6.0

package/fesm2022/oneluiz-dual-datepicker.mjs

@@ -1,9 +1,129 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, computed, effect, forwardRef, HostListener, Output, Input, Component } from '@angular/core';
+import { InjectionToken, Injectable, EventEmitter, inject, signal, computed, effect, forwardRef, HostListener, Output, Input, Component } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
+/**
+ * Abstract class for date adapters.
+ * Allows the component to work with different date libraries (Date, DayJS, date-fns, Luxon, etc.)
+ */
+class DateAdapter {
+}
+/**
+ * Injection token for DateAdapter
+ */
+const DATE_ADAPTER = new InjectionToken('DATE_ADAPTER');
+
+/**
+ * Date adapter implementation for native JavaScript Date objects
+ * This is the default adapter used by the component
+ */
+class NativeDateAdapter extends DateAdapter {
+    parse(value) {
+        if (!value)
+            return null;
+        if (value instanceof Date) {
+            return new Date(value);
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            const date = new Date(value);
+            return this.isValid(date) ? date : null;
+        }
+        return null;
+    }
+    format(date, format = 'YYYY-MM-DD') {
+        if (!this.isValid(date))
+            return '';
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        // Simple format implementation
+        switch (format) {
+            case 'YYYY-MM-DD':
+                return `${year}-${month}-${day}`;
+            case 'MM/DD/YYYY':
+                return `${month}/${day}/${year}`;
+            case 'DD/MM/YYYY':
+                return `${day}/${month}/${year}`;
+            default:
+                return `${year}-${month}-${day}`;
+        }
+    }
+    addDays(date, days) {
+        const result = this.clone(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    }
+    addMonths(date, months) {
+        const result = this.clone(date);
+        result.setMonth(result.getMonth() + months);
+        return result;
+    }
+    getYear(date) {
+        return date.getFullYear();
+    }
+    getMonth(date) {
+        return date.getMonth();
+    }
+    getDate(date) {
+        return date.getDate();
+    }
+    getDay(date) {
+        return date.getDay();
+    }
+    createDate(year, month, date) {
+        return new Date(year, month, date);
+    }
+    today() {
+        return new Date();
+    }
+    isSameDay(a, b) {
+        if (!a || !b)
+            return false;
+        if (!this.isValid(a) || !this.isValid(b))
+            return false;
+        return (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate());
+    }
+    isBefore(a, b) {
+        if (!a || !b)
+            return false;
+        if (!this.isValid(a) || !this.isValid(b))
+            return false;
+        return a.getTime() < b.getTime();
+    }
+    isAfter(a, b) {
+        if (!a || !b)
+            return false;
+        if (!this.isValid(a) || !this.isValid(b))
+            return false;
+        return a.getTime() > b.getTime();
+    }
+    isBetween(date, start, end) {
+        if (!date || !start || !end)
+            return false;
+        if (!this.isValid(date) || !this.isValid(start) || !this.isValid(end))
+            return false;
+        const dateTime = date.getTime();
+        const startTime = start.getTime();
+        const endTime = end.getTime();
+        return dateTime >= startTime && dateTime <= endTime;
+    }
+    clone(date) {
+        return new Date(date.getTime());
+    }
+    isValid(date) {
+        return date instanceof Date && !isNaN(date.getTime());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NativeDateAdapter, decorators: [{
+            type: Injectable
+        }] });
+
 class DualDatepickerComponent {
     elementRef;
     placeholder = 'Select date range';
@@ -28,12 +148,14 @@ class DualDatepickerComponent {
     locale = {};
     dateRangeChange = new EventEmitter();
     dateRangeSelected = new EventEmitter();
+    // Date adapter injection
+    dateAdapter = inject(DATE_ADAPTER);
     // Signals for reactive state
     mostrarDatePicker = signal(false);
     rangoFechas = signal('');
     fechaSeleccionandoInicio = signal(true);
-    mesActual = signal(new Date());
-    mesAnterior = signal(new Date());
+    mesActual = signal(this.dateAdapter.today());
+    mesAnterior = signal(this.dateAdapter.today());
     diasMesActual = signal([]);
     diasMesAnterior = signal([]);
     isDisabled = signal(false);
@@ -84,17 +206,19 @@ class DualDatepickerComponent {
         }
     }
     formatearFecha(fecha) {
-        const year = fecha.getFullYear();
-        const month = String(fecha.getMonth() + 1).padStart(2, '0');
-        const day = String(fecha.getDate()).padStart(2, '0');
+        const year = this.dateAdapter.getYear(fecha);
+        const month = String(this.dateAdapter.getMonth(fecha) + 1).padStart(2, '0');
+        const day = String(this.dateAdapter.getDate(fecha)).padStart(2, '0');
         return `${year}-${month}-${day}`;
     }
     formatearFechaDisplay(fechaStr) {
         if (!fechaStr)
             return '';
-        const fecha = new Date(fechaStr + 'T00:00:00');
+        const fecha = this.dateAdapter.parse(fechaStr);
+        if (!fecha)
+            return '';
         const monthNames = this.locale.monthNamesShort || this.defaultMonthNamesShort;
-        return `${fecha.getDate()} ${monthNames[fecha.getMonth()]}`;
+        return `${this.dateAdapter.getDate(fecha)} ${monthNames[this.dateAdapter.getMonth(fecha)]}`;
     }
     actualizarRangoFechasTexto() {
         if (this.fechaInicio && this.fechaFin) {
@@ -111,7 +235,10 @@ class DualDatepickerComponent {
         if (this.mostrarDatePicker()) {
             this.fechaSeleccionandoInicio.set(true);
             const mesActualValue = this.mesActual();
-            this.mesAnterior.set(new Date(mesActualValue.getFullYear(), mesActualValue.getMonth() - 1, 1));
+            const año = this.dateAdapter.getYear(mesActualValue);
+            const mes = this.dateAdapter.getMonth(mesActualValue);
+            const mesAnteriorDate = this.dateAdapter.createDate(año, mes - 1, 1);
+            this.mesAnterior.set(mesAnteriorDate);
             this.generarCalendarios();
         }
         this.onTouched();
@@ -125,18 +252,18 @@ class DualDatepickerComponent {
         this.diasMesActual.set(this.generarCalendarioMes(this.mesActual()));
     }
     generarCalendarioMes(fecha) {
-        const año = fecha.getFullYear();
-        const mes = fecha.getMonth();
-        const primerDia = new Date(año, mes, 1);
-        const ultimoDia = new Date(año, mes + 1, 0);
-        const diasEnMes = ultimoDia.getDate();
-        const primerDiaSemana = primerDia.getDay();
+        const año = this.dateAdapter.getYear(fecha);
+        const mes = this.dateAdapter.getMonth(fecha);
+        const primerDia = this.dateAdapter.createDate(año, mes, 1);
+        const ultimoDia = this.dateAdapter.createDate(año, mes + 1, 0);
+        const diasEnMes = this.dateAdapter.getDate(ultimoDia);
+        const primerDiaSemana = this.dateAdapter.getDay(primerDia);
         const diasMes = [];
         for (let i = 0; i < primerDiaSemana; i++) {
             diasMes.push({ dia: null, esMesActual: false });
         }
         for (let dia = 1; dia <= diasEnMes; dia++) {
-            const fechaDia = new Date(año, mes, dia);
+            const fechaDia = this.dateAdapter.createDate(año, mes, dia);
             const fechaStr = this.formatearFecha(fechaDia);
             diasMes.push({
                 dia: dia,
@@ -184,24 +311,45 @@ class DualDatepickerComponent {
     }
     cambiarMes(direccion) {
         const mesActualValue = this.mesActual();
-        this.mesActual.set(new Date(mesActualValue.getFullYear(), mesActualValue.getMonth() + direccion, 1));
-        const nuevoMesActual = this.mesActual();
-        this.mesAnterior.set(new Date(nuevoMesActual.getFullYear(), nuevoMesActual.getMonth() - 1, 1));
+        const año = this.dateAdapter.getYear(mesActualValue);
+        const mes = this.dateAdapter.getMonth(mesActualValue);
+        const nuevoMesActual = this.dateAdapter.createDate(año, mes + direccion, 1);
+        this.mesActual.set(nuevoMesActual);
+        const añoNuevo = this.dateAdapter.getYear(nuevoMesActual);
+        const mesNuevo = this.dateAdapter.getMonth(nuevoMesActual);
+        const mesAnteriorNuevo = this.dateAdapter.createDate(añoNuevo, mesNuevo - 1, 1);
+        this.mesAnterior.set(mesAnteriorNuevo);
         this.generarCalendarios();
     }
     getNombreMes(fecha) {
         const monthNames = this.locale.monthNames || this.defaultMonthNames;
-        return `${monthNames[fecha.getMonth()]} ${fecha.getFullYear()}`;
+        return `${monthNames[this.dateAdapter.getMonth(fecha)]} ${this.dateAdapter.getYear(fecha)}`;
     }
     getDayNames() {
         return this.locale.dayNamesShort || this.defaultDayNamesShort;
     }
     seleccionarRangoPredefinido(preset) {
-        const hoy = new Date();
-        const fechaInicio = new Date(hoy);
-        fechaInicio.setDate(hoy.getDate() - preset.daysAgo);
-        this.fechaInicio = this.formatearFecha(fechaInicio);
-        this.fechaFin = this.formatearFecha(hoy);
+        let start;
+        let end;
+        // New flexible pattern with getValue()
+        if (preset.getValue) {
+            const range = preset.getValue();
+            start = range.start;
+            end = range.end;
+        }
+        // Backward compatibility with daysAgo pattern
+        else if (preset.daysAgo !== undefined) {
+            const hoy = this.dateAdapter.today();
+            const fechaInicio = this.dateAdapter.addDays(hoy, -preset.daysAgo);
+            start = this.formatearFecha(fechaInicio);
+            end = this.formatearFecha(hoy);
+        }
+        else {
+            console.error('PresetConfig must have either getValue() or daysAgo');
+            return;
+        }
+        this.fechaInicio = start;
+        this.fechaFin = end;
         this.actualizarRangoFechasTexto();
         this.generarCalendarios();
         if (this.closeOnPresetSelection) {
@@ -270,6 +418,10 @@ class DualDatepickerComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DualDatepickerComponent),
                 multi: true
+            },
+            {
+                provide: DATE_ADAPTER,
+                useClass: NativeDateAdapter
             }
         ], usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-wrapper\" \n  [style.--input-border-hover]=\"inputBorderColorHover\"\n  [style.--input-border-focus]=\"inputBorderColorFocus\">\n  <input \n    type=\"text\" \n    class=\"datepicker-input\" \n    [value]=\"rangoFechas()\" \n    (click)=\"toggleDatePicker()\" \n    [placeholder]=\"placeholder\"\n    [disabled]=\"isDisabled()\"\n    [ngStyle]=\"{\n      'background-color': inputBackgroundColor,\n      'color': inputTextColor,\n      'border-color': inputBorderColor,\n      'padding': inputPadding\n    }\"\n    readonly>\n\n  @if (mostrarDatePicker()) {\n  <div class=\"date-picker-dropdown\">\n    @if (showPresets) {\n    <div class=\"date-picker-presets\">\n      @for (preset of presets; track preset.label) {\n      <button type=\"button\" (click)=\"seleccionarRangoPredefinido(preset)\">{{ preset.label }}</button>\n      }\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"cerrarDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    @if (!showPresets) {\n    <div class=\"date-picker-header-only-close\">\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"cerrarDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    <!-- Calendars -->\n    <div class=\"date-picker-calendars\">\n      <!-- Previous month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" (click)=\"cambiarMes(-1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ nombreMesAnterior() }}</span>\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of diasSemana(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (diaObj of diasMesAnterior(); track diaObj.fecha || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!diaObj.esMesActual\"\n              [class.selected]=\"diaObj.esInicio || diaObj.esFin\"\n              [class.in-range]=\"diaObj.enRango && !diaObj.esInicio && !diaObj.esFin\"\n              (click)=\"seleccionarDia(diaObj)\"\n              [disabled]=\"!diaObj.esMesActual\">\n              {{ diaObj.dia }}\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Current month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ nombreMesActual() }}</span>\n          <button type=\"button\" (click)=\"cambiarMes(1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of diasSemana(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (diaObj of diasMesActual(); track diaObj.fecha || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!diaObj.esMesActual\"\n              [class.selected]=\"diaObj.esInicio || diaObj.esFin\"\n              [class.in-range]=\"diaObj.enRango && !diaObj.esInicio && !diaObj.esFin\"\n              (click)=\"seleccionarDia(diaObj)\"\n              [disabled]=\"!diaObj.esMesActual\">\n              {{ diaObj.dia }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer with clear button -->\n    @if (showClearButton) {\n    <div class=\"date-picker-footer\">\n      <button type=\"button\" class=\"btn-clear\" (click)=\"limpiar()\" title=\"Clear selection\">\n        Clear\n      </button>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".datepicker-wrapper{position:relative;width:100%}.datepicker-wrapper .datepicker-input{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datepicker-wrapper .datepicker-input:hover{border-color:var(--input-border-hover, #ced4da)}.datepicker-wrapper .datepicker-input:focus{border-color:var(--input-border-focus, #80bdff);box-shadow:0 0 0 .2rem #007bff40;outline:0}.datepicker-wrapper .datepicker-input::placeholder{color:#6c757d;opacity:1}.datepicker-wrapper .datepicker-input:disabled,.datepicker-wrapper .datepicker-input[readonly]{background-color:#e9ecef;opacity:1}.date-picker-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #00000014,0 0 1px #00000014;padding:16px;z-index:1060;min-width:680px}@media (max-width: 768px){.date-picker-dropdown{min-width:100%;left:0;right:0}}.date-picker-header-only-close{display:flex;justify-content:flex-end;margin-bottom:12px}.date-picker-header-only-close .btn-close-calendar{background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;font-size:1.5rem;line-height:1}.date-picker-header-only-close .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-header-only-close .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-presets{display:flex;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;align-items:center}@media (max-width: 768px){.date-picker-presets{flex-wrap:wrap}}.date-picker-presets button{font-size:.75rem;padding:6px 14px;border:none;background-color:#f9fafb;color:#374151;border-radius:6px;transition:all .15s ease;font-weight:500;cursor:pointer;border:1px solid #e5e7eb}.date-picker-presets button:hover{background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 4px #0000000f}.date-picker-presets button:active{transform:translateY(0);box-shadow:none}.date-picker-presets .btn-close-calendar{margin-left:auto;background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;font-size:1.5rem;line-height:1}.date-picker-presets .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-presets .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-calendars{display:flex;gap:32px}@media (max-width: 768px){.date-picker-calendars{flex-direction:column;gap:16px}}.date-picker-calendar{flex:1}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.date-picker-header span{font-size:.813rem;font-weight:600;color:#111827}.date-picker-header button{padding:4px;color:#6b7280;text-decoration:none;border-radius:6px;transition:all .15s ease;border:none;background:transparent;cursor:pointer}.date-picker-header button:hover{background-color:#f3f4f6;color:#111827}.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}.date-picker-weekdays span{text-align:center;font-size:.625rem;font-weight:600;color:#6b7280;padding:6px}.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.date-picker-day{aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.75rem;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:400}.date-picker-day:hover:not(:disabled):not(.selected){background-color:#f3f4f6;color:#111827}.date-picker-day.empty{visibility:hidden}.date-picker-day.selected{background-color:#222;color:#fff;font-weight:600}.date-picker-day.in-range{background-color:#f9fafb;border-radius:0}.date-picker-day:disabled{cursor:not-allowed;opacity:.3}.date-picker-footer{padding:12px;border-top:1px solid #e1e4e8;display:flex;justify-content:center;gap:8px}.date-picker-footer .btn-clear{padding:8px 16px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-clear:hover{background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-clear:active{transform:translateY(0);box-shadow:none;background-color:#e9ecef}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
@@ -280,6 +432,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DualDatepickerComponent),
                             multi: true
+                        },
+                        {
+                            provide: DATE_ADAPTER,
+                            useClass: NativeDateAdapter
                         }
                     ], template: "<div class=\"datepicker-wrapper\" \n  [style.--input-border-hover]=\"inputBorderColorHover\"\n  [style.--input-border-focus]=\"inputBorderColorFocus\">\n  <input \n    type=\"text\" \n    class=\"datepicker-input\" \n    [value]=\"rangoFechas()\" \n    (click)=\"toggleDatePicker()\" \n    [placeholder]=\"placeholder\"\n    [disabled]=\"isDisabled()\"\n    [ngStyle]=\"{\n      'background-color': inputBackgroundColor,\n      'color': inputTextColor,\n      'border-color': inputBorderColor,\n      'padding': inputPadding\n    }\"\n    readonly>\n\n  @if (mostrarDatePicker()) {\n  <div class=\"date-picker-dropdown\">\n    @if (showPresets) {\n    <div class=\"date-picker-presets\">\n      @for (preset of presets; track preset.label) {\n      <button type=\"button\" (click)=\"seleccionarRangoPredefinido(preset)\">{{ preset.label }}</button>\n      }\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"cerrarDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    @if (!showPresets) {\n    <div class=\"date-picker-header-only-close\">\n      <button type=\"button\" class=\"btn-close-calendar\" (click)=\"cerrarDatePicker()\" title=\"Close\">\n        \u00D7\n      </button>\n    </div>\n    }\n\n    <!-- Calendars -->\n    <div class=\"date-picker-calendars\">\n      <!-- Previous month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" (click)=\"cambiarMes(-1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ nombreMesAnterior() }}</span>\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of diasSemana(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (diaObj of diasMesAnterior(); track diaObj.fecha || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!diaObj.esMesActual\"\n              [class.selected]=\"diaObj.esInicio || diaObj.esFin\"\n              [class.in-range]=\"diaObj.enRango && !diaObj.esInicio && !diaObj.esFin\"\n              (click)=\"seleccionarDia(diaObj)\"\n              [disabled]=\"!diaObj.esMesActual\">\n              {{ diaObj.dia }}\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Current month calendar -->\n      <div class=\"date-picker-calendar\">\n        <div class=\"date-picker-header\">\n          <button type=\"button\" style=\"visibility: hidden;\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n            </svg>\n          </button>\n          <span>{{ nombreMesActual() }}</span>\n          <button type=\"button\" (click)=\"cambiarMes(1)\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"date-picker-weekdays\">\n          @for (dayName of diasSemana(); track $index) {\n            <span>{{ dayName }}</span>\n          }\n        </div>\n        <div class=\"date-picker-days\">\n          @for (diaObj of diasMesActual(); track diaObj.fecha || $index) {\n            <button \n              type=\"button\"\n              class=\"date-picker-day\" \n              [class.empty]=\"!diaObj.esMesActual\"\n              [class.selected]=\"diaObj.esInicio || diaObj.esFin\"\n              [class.in-range]=\"diaObj.enRango && !diaObj.esInicio && !diaObj.esFin\"\n              (click)=\"seleccionarDia(diaObj)\"\n              [disabled]=\"!diaObj.esMesActual\">\n              {{ diaObj.dia }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer with clear button -->\n    @if (showClearButton) {\n    <div class=\"date-picker-footer\">\n      <button type=\"button\" class=\"btn-clear\" (click)=\"limpiar()\" title=\"Clear selection\">\n        Clear\n      </button>\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".datepicker-wrapper{position:relative;width:100%}.datepicker-wrapper .datepicker-input{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.datepicker-wrapper .datepicker-input:hover{border-color:var(--input-border-hover, #ced4da)}.datepicker-wrapper .datepicker-input:focus{border-color:var(--input-border-focus, #80bdff);box-shadow:0 0 0 .2rem #007bff40;outline:0}.datepicker-wrapper .datepicker-input::placeholder{color:#6c757d;opacity:1}.datepicker-wrapper .datepicker-input:disabled,.datepicker-wrapper .datepicker-input[readonly]{background-color:#e9ecef;opacity:1}.date-picker-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #00000014,0 0 1px #00000014;padding:16px;z-index:1060;min-width:680px}@media (max-width: 768px){.date-picker-dropdown{min-width:100%;left:0;right:0}}.date-picker-header-only-close{display:flex;justify-content:flex-end;margin-bottom:12px}.date-picker-header-only-close .btn-close-calendar{background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;font-size:1.5rem;line-height:1}.date-picker-header-only-close .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-header-only-close .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-presets{display:flex;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;align-items:center}@media (max-width: 768px){.date-picker-presets{flex-wrap:wrap}}.date-picker-presets button{font-size:.75rem;padding:6px 14px;border:none;background-color:#f9fafb;color:#374151;border-radius:6px;transition:all .15s ease;font-weight:500;cursor:pointer;border:1px solid #e5e7eb}.date-picker-presets button:hover{background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 4px #0000000f}.date-picker-presets button:active{transform:translateY(0);box-shadow:none}.date-picker-presets .btn-close-calendar{margin-left:auto;background-color:transparent;border:1px solid transparent;color:#6b7280;padding:6px 10px;font-size:1.5rem;line-height:1}.date-picker-presets .btn-close-calendar:hover{background-color:#fee;border-color:#fcc;color:#dc2626;transform:translateY(-1px);box-shadow:0 2px 4px #dc26261a}.date-picker-presets .btn-close-calendar:active{transform:translateY(0);box-shadow:none}.date-picker-calendars{display:flex;gap:32px}@media (max-width: 768px){.date-picker-calendars{flex-direction:column;gap:16px}}.date-picker-calendar{flex:1}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.date-picker-header span{font-size:.813rem;font-weight:600;color:#111827}.date-picker-header button{padding:4px;color:#6b7280;text-decoration:none;border-radius:6px;transition:all .15s ease;border:none;background:transparent;cursor:pointer}.date-picker-header button:hover{background-color:#f3f4f6;color:#111827}.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}.date-picker-weekdays span{text-align:center;font-size:.625rem;font-weight:600;color:#6b7280;padding:6px}.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.date-picker-day{aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.75rem;cursor:pointer;transition:all .15s ease;color:#374151;font-weight:400}.date-picker-day:hover:not(:disabled):not(.selected){background-color:#f3f4f6;color:#111827}.date-picker-day.empty{visibility:hidden}.date-picker-day.selected{background-color:#222;color:#fff;font-weight:600}.date-picker-day.in-range{background-color:#f9fafb;border-radius:0}.date-picker-day:disabled{cursor:not-allowed;opacity:.3}.date-picker-footer{padding:12px;border-top:1px solid #e1e4e8;display:flex;justify-content:center;gap:8px}.date-picker-footer .btn-clear{padding:8px 16px;background-color:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;font-size:.875rem;font-weight:500;color:#24292f;cursor:pointer;transition:all .15s ease}.date-picker-footer .btn-clear:hover{background-color:#f3f4f6;border-color:#8c959f;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.date-picker-footer .btn-clear:active{transform:translateY(0);box-shadow:none;background-color:#e9ecef}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { placeholder: [{
@@ -323,6 +479,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ * Utility functions for creating common date range presets
+ * Perfect for dashboards, reporting, POS, BI apps, and ERP systems
+ */
+/**
+ * Format a date as YYYY-MM-DD string
+ */
+function formatDate(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+/**
+ * Get the start of today
+ */
+function getToday() {
+    const today = new Date();
+    return {
+        start: formatDate(today),
+        end: formatDate(today)
+    };
+}
+/**
+ * Get yesterday's date range
+ */
+function getYesterday() {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    return {
+        start: formatDate(yesterday),
+        end: formatDate(yesterday)
+    };
+}
+/**
+ * Get last N days (including today)
+ */
+function getLastNDays(days) {
+    const end = new Date();
+    const start = new Date();
+    start.setDate(start.getDate() - days + 1);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get this week (Monday to Sunday)
+ */
+function getThisWeek() {
+    const today = new Date();
+    const dayOfWeek = today.getDay();
+    const start = new Date(today);
+    // Adjust to Monday (1) as first day of week
+    const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    start.setDate(start.getDate() - daysToMonday);
+    const end = new Date(start);
+    end.setDate(end.getDate() + 6);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get last week (Monday to Sunday)
+ */
+function getLastWeek() {
+    const today = new Date();
+    const dayOfWeek = today.getDay();
+    const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    const lastMonday = new Date(today);
+    lastMonday.setDate(lastMonday.getDate() - daysToMonday - 7);
+    const lastSunday = new Date(lastMonday);
+    lastSunday.setDate(lastSunday.getDate() + 6);
+    return {
+        start: formatDate(lastMonday),
+        end: formatDate(lastSunday)
+    };
+}
+/**
+ * Get this month (1st to last day)
+ */
+function getThisMonth() {
+    const today = new Date();
+    const start = new Date(today.getFullYear(), today.getMonth(), 1);
+    const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get last month (1st to last day)
+ */
+function getLastMonth() {
+    const today = new Date();
+    const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+    const end = new Date(today.getFullYear(), today.getMonth(), 0);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get month to date (1st of current month to today)
+ */
+function getMonthToDate() {
+    const today = new Date();
+    const start = new Date(today.getFullYear(), today.getMonth(), 1);
+    return {
+        start: formatDate(start),
+        end: formatDate(today)
+    };
+}
+/**
+ * Get this quarter (Q1, Q2, Q3, or Q4)
+ */
+function getThisQuarter() {
+    const today = new Date();
+    const currentMonth = today.getMonth();
+    const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
+    const start = new Date(today.getFullYear(), quarterStartMonth, 1);
+    const end = new Date(today.getFullYear(), quarterStartMonth + 3, 0);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get last quarter
+ */
+function getLastQuarter() {
+    const today = new Date();
+    const currentMonth = today.getMonth();
+    const lastQuarterStartMonth = Math.floor(currentMonth / 3) * 3 - 3;
+    const start = new Date(today.getFullYear(), lastQuarterStartMonth, 1);
+    const end = new Date(today.getFullYear(), lastQuarterStartMonth + 3, 0);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get quarter to date (start of current quarter to today)
+ */
+function getQuarterToDate() {
+    const today = new Date();
+    const currentMonth = today.getMonth();
+    const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
+    const start = new Date(today.getFullYear(), quarterStartMonth, 1);
+    return {
+        start: formatDate(start),
+        end: formatDate(today)
+    };
+}
+/**
+ * Get this year (January 1 to December 31)
+ */
+function getThisYear() {
+    const today = new Date();
+    const start = new Date(today.getFullYear(), 0, 1);
+    const end = new Date(today.getFullYear(), 11, 31);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get last year
+ */
+function getLastYear() {
+    const today = new Date();
+    const start = new Date(today.getFullYear() - 1, 0, 1);
+    const end = new Date(today.getFullYear() - 1, 11, 31);
+    return {
+        start: formatDate(start),
+        end: formatDate(end)
+    };
+}
+/**
+ * Get year to date (January 1 to today)
+ */
+function getYearToDate() {
+    const today = new Date();
+    const start = new Date(today.getFullYear(), 0, 1);
+    return {
+        start: formatDate(start),
+        end: formatDate(today)
+    };
+}
+/**
+ * Get last N months (including current partial month)
+ */
+function getLastNMonths(months) {
+    const today = new Date();
+    const start = new Date(today);
+    start.setMonth(start.getMonth() - months);
+    return {
+        start: formatDate(start),
+        end: formatDate(today)
+    };
+}
+/**
+ * Get last N years
+ */
+function getLastNYears(years) {
+    const today = new Date();
+    const start = new Date(today);
+    start.setFullYear(start.getFullYear() - years);
+    return {
+        start: formatDate(start),
+        end: formatDate(today)
+    };
+}
+/**
+ * Pre-built preset configurations for common use cases
+ * Import and use these directly in your component
+ */
+const CommonPresets = {
+    /**
+     * Dashboard presets - Perfect for analytics dashboards
+     */
+    dashboard: [
+        { label: 'Today', getValue: getToday },
+        { label: 'Yesterday', getValue: getYesterday },
+        { label: 'Last 7 days', getValue: () => getLastNDays(7) },
+        { label: 'Last 30 days', getValue: () => getLastNDays(30) },
+        { label: 'This month', getValue: getThisMonth },
+        { label: 'Last month', getValue: getLastMonth }
+    ],
+    /**
+     * Reporting presets - Perfect for business reporting
+     */
+    reporting: [
+        { label: 'Today', getValue: getToday },
+        { label: 'This week', getValue: getThisWeek },
+        { label: 'Last week', getValue: getLastWeek },
+        { label: 'This month', getValue: getThisMonth },
+        { label: 'Last month', getValue: getLastMonth },
+        { label: 'This quarter', getValue: getThisQuarter },
+        { label: 'Last quarter', getValue: getLastQuarter }
+    ],
+    /**
+     * Financial presets - Perfect for ERP and accounting systems
+     */
+    financial: [
+        { label: 'Month to date', getValue: getMonthToDate },
+        { label: 'Quarter to date', getValue: getQuarterToDate },
+        { label: 'Year to date', getValue: getYearToDate },
+        { label: 'Last month', getValue: getLastMonth },
+        { label: 'Last quarter', getValue: getLastQuarter },
+        { label: 'Last year', getValue: getLastYear }
+    ],
+    /**
+     * Analytics presets - Perfect for BI and data analysis
+     */
+    analytics: [
+        { label: 'Last 7 days', getValue: () => getLastNDays(7) },
+        { label: 'Last 14 days', getValue: () => getLastNDays(14) },
+        { label: 'Last 30 days', getValue: () => getLastNDays(30) },
+        { label: 'Last 60 days', getValue: () => getLastNDays(60) },
+        { label: 'Last 90 days', getValue: () => getLastNDays(90) },
+        { label: 'Last 180 days', getValue: () => getLastNDays(180) },
+        { label: 'Last 365 days', getValue: () => getLastNDays(365) }
+    ],
+    /**
+     * Simple presets - Basic common ranges
+     */
+    simple: [
+        { label: 'Today', getValue: getToday },
+        { label: 'Last 7 days', getValue: () => getLastNDays(7) },
+        { label: 'Last 30 days', getValue: () => getLastNDays(30) },
+        { label: 'This year', getValue: getThisYear }
+    ]
+};
+
 /**
  * Public API Surface of @oneluiz/dual-datepicker
  */
@@ -331,5 +763,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DualDatepickerComponent };
+export { CommonPresets, DATE_ADAPTER, DateAdapter, DualDatepickerComponent, NativeDateAdapter, getLastMonth, getLastNDays, getLastNMonths, getLastNYears, getLastQuarter, getLastWeek, getLastYear, getMonthToDate, getQuarterToDate, getThisMonth, getThisQuarter, getThisWeek, getThisYear, getToday, getYearToDate, getYesterday };
 //# sourceMappingURL=oneluiz-dual-datepicker.mjs.map