@oneluiz/dual-datepicker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Luis Cortes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,277 @@
+# @oneluiz/dual-datepicker
+
+A beautiful, customizable dual-calendar date range picker for Angular 17+. Built as a standalone component with full TypeScript support.
+
+![npm version](https://img.shields.io/npm/v/@oneluiz/dual-datepicker)
+![license](https://img.shields.io/npm/l/@ngx-tools/dual-datepicker)
+![Angular](https://img.shields.io/badge/Angular-17%2B-red)
+
+## ✨ Features
+
+- 📅 **Dual Calendar Display** - Side-by-side month view for easy range selection
+- 🎨 **Fully Customizable** - Color scheme, padding, and styling
+- ⚡ **Preset Ranges** - Configurable quick-select options
+- 🎯 **Standalone Component** - No module imports required
+- 📱 **Responsive Design** - Works on desktop and mobile
+- 🌐 **TypeScript** - Full type safety
+- ♿ **Accessible** - Keyboard navigation and ARIA labels
+- 🎭 **Flexible Behavior** - Control when the picker closes
+
+## 📦 Installation
+
+```bash
+npm install @oneluiz/dual-datepicker
+```
+
+## 🚀 Quick Start
+
+### 1. Import the Component
+
+```typescript
+import { Component } from '@angular/core';
+import { DualDatepickerComponent, DateRange } from '@oneluiz/dual-datepicker';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [DualDatepickerComponent],
+  template: `
+    <ngx-dual-datepicker
+      [(ngModel)]="dateRange"
+      placeholder="Select date range">
+    </ngx-dual-datepicker>
+  `
+})
+export class AppComponent {
+  dateRange: DateRange = { start: null, end: null };
+}
+```
+
+### 2. Use with Forms
+
+```typescript
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DualDatepickerComponent } from '@oneluiz/dual-datepicker';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [FormsModule, DualDatepickerComponent],
+  template: `
+    <ngx-dual-datepicker
+      [(ngModel)]="selectedRange"
+      [presets]="customPresets"
+      (ngModelChange)="onDateChange($event)">
+    </ngx-dual-datepicker>
+  `
+})
+export class ExampleComponent {
+  selectedRange = { start: null, end: null };
+  
+  customPresets = [
+    { label: 'Last 7 days', daysAgo: 7 },
+    { label: 'Last 30 days', daysAgo: 30 },
+    { label: 'Last 90 days', daysAgo: 90 }
+  ];
+
+  onDateChange(range: any) {
+    console.log('Date range selected:', range);
+  }
+}
+```
+
+## 🎨 Customization
+
+### Custom Colors (Bootstrap Style)
+
+```typescript
+<ngx-dual-datepicker
+  [(ngModel)]="dateRange"
+  inputBackgroundColor="#ffffff"
+  inputTextColor="#495057"
+  inputBorderColor="#ced4da"
+  inputBorderColorHover="#80bdff"
+  inputBorderColorFocus="#80bdff"
+  inputPadding="0.375rem 0.75rem">
+</ngx-dual-datepicker>
+```
+
+### Custom Colors (GitHub Style)
+
+```typescript
+<ngx-dual-datepicker
+  [(ngModel)]="dateRange"
+  inputBackgroundColor="#f3f4f6"
+  inputTextColor="#24292e"
+  inputBorderColor="transparent"
+  inputBorderColorHover="#d1d5db"
+  inputBorderColorFocus="#80bdff"
+  inputPadding="6px 10px">
+</ngx-dual-datepicker>
+```
+
+### Custom Presets
+
+```typescript
+customPresets: PresetConfig[] = [
+  { label: 'Last 15 days', daysAgo: 15 },
+  { label: 'Last 3 months', daysAgo: 90 },
+  { label: 'Last 6 months', daysAgo: 180 },
+  { label: 'Last year', daysAgo: 365 }
+];
+```
+
+```html
+<ngx-dual-datepicker
+  [(ngModel)]="dateRange"
+  [presets]="customPresets">
+</ngx-dual-datepicker>
+```
+
+## 📖 API Reference
+
+### Inputs
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `ngModel` | `DateRange` | `{ start: null, end: null }` | Two-way binding for selected date range |
+| `placeholder` | `string` | `'Select date range'` | Input placeholder text |
+| `presets` | `PresetConfig[]` | Default presets | Array of preset configurations |
+| `closeOnSelection` | `boolean` | `false` | Close picker when both dates selected |
+| `closeOnPresetSelection` | `boolean` | `false` | Close picker when preset is clicked |
+| `closeOnClickOutside` | `boolean` | `true` | Close picker when clicking outside |
+| `inputBackgroundColor` | `string` | `'#fff'` | Input background color |
+| `inputTextColor` | `string` | `'#495057'` | Input text color |
+| `inputBorderColor` | `string` | `'#ced4da'` | Input border color |
+| `inputBorderColorHover` | `string` | `'#9ca3af'` | Input border color on hover |
+| `inputBorderColorFocus` | `string` | `'#80bdff'` | Input border color on focus |
+| `inputPadding` | `string` | `'0.375rem 0.75rem'` | Input padding |
+
+### Outputs
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `ngModelChange` | `EventEmitter<DateRange>` | Emitted when date range changes |
+
+### Types
+
+```typescript
+interface DateRange {
+  start: Date | null;
+  end: Date | null;
+}
+
+interface PresetConfig {
+  label: string;
+  daysAgo: number;
+}
+```
+
+### Default Presets
+
+```typescript
+[
+  { label: 'Last month', daysAgo: 30 },
+  { label: 'Last 6 months', daysAgo: 180 },
+  { label: 'Last year', daysAgo: 365 }
+]
+```
+
+## 🎯 Examples
+
+### Minimal Usage
+
+```html
+<ngx-dual-datepicker [(ngModel)]="dateRange"></ngx-dual-datepicker>
+```
+
+### With Auto-close
+
+```html
+<ngx-dual-datepicker
+  [(ngModel)]="dateRange"
+  [closeOnSelection]="true"
+  [closeOnPresetSelection]="true">
+</ngx-dual-datepicker>
+```
+
+### Custom Styling
+
+```html
+<ngx-dual-datepicker
+  [(ngModel)]="dateRange"
+  placeholder="Pick your dates"
+  inputBackgroundColor="#fef3c7"
+  inputTextColor="#92400e"
+  inputBorderColor="#fbbf24"
+  inputBorderColorHover="#f59e0b"
+  inputBorderColorFocus="#d97706"
+  inputPadding="8px 12px">
+</ngx-dual-datepicker>
+```
+
+### With Event Handler
+
+```typescript
+@Component({
+  selector: 'app-example',
+  template: `
+    <ngx-dual-datepicker
+      [(ngModel)]="dateRange"
+      (ngModelChange)="onDateRangeChange($event)">
+    </ngx-dual-datepicker>
+    
+    <div *ngIf="dateRange.start && dateRange.end">
+      Selected: {{ formatDateRange() }}
+    </div>
+  `
+})
+export class ExampleComponent {
+  dateRange: DateRange = { start: null, end: null };
+
+  onDateRangeChange(range: DateRange) {
+    console.log('Start:', range.start);
+    console.log('End:', range.end);
+    
+    if (range.start && range.end) {
+      // Both dates selected - do something
+      this.fetchData(range.start, range.end);
+    }
+  }
+
+  formatDateRange(): string {
+    if (!this.dateRange.start || !this.dateRange.end) return '';
+    return `${this.dateRange.start.toLocaleDateString()} - ${this.dateRange.end.toLocaleDateString()}`;
+  }
+
+  fetchData(start: Date, end: Date) {
+    // Your API call here
+  }
+}
+```
+
+## 🛠️ Requirements
+
+- Angular 17.0.0 or higher
+- Angular 18.0.0 or higher
+
+## 📄 License
+
+MIT © Luis Cortes
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🐛 Issues
+
+Found a bug? Please [open an issue](https://github.com/oneluiz/ng-dual-datepicker/issues).
+
+## ⭐ Support
+
+If you find this package useful, please give it a star on [GitHub](https://github.com/oneluiz/ng-dual-datepicker)!
+
+---
+
+Made with ❤️ by [Luis Cortes](https://github.com/oneluiz)

package/dist/dual-datepicker.component.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges, ElementRef } from '@angular/core';
+export interface DateRange {
+    fechaInicio: string;
+    fechaFin: string;
+    rangoTexto: string;
+}
+export interface PresetConfig {
+    label: string;
+    daysAgo: number;
+}
+export declare class DualDatepickerComponent implements OnInit, OnChanges {
+    private elementRef;
+    placeholder: string;
+    fechaInicio: string;
+    fechaFin: string;
+    showPresets: boolean;
+    closeOnSelection: boolean;
+    closeOnPresetSelection: boolean;
+    closeOnClickOutside: boolean;
+    presets: PresetConfig[];
+    inputBackgroundColor: string;
+    inputTextColor: string;
+    inputBorderColor: string;
+    inputBorderColorHover: string;
+    inputBorderColorFocus: string;
+    inputPadding: string;
+    dateRangeChange: EventEmitter<DateRange>;
+    dateRangeSelected: EventEmitter<DateRange>;
+    mostrarDatePicker: boolean;
+    rangoFechas: string;
+    fechaSeleccionandoInicio: boolean;
+    mesActual: Date;
+    mesAnterior: Date;
+    diasMesActual: any[];
+    diasMesAnterior: any[];
+    constructor(elementRef: ElementRef);
+    onClickOutside(event: MouseEvent): void;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    formatearFecha(fecha: Date): string;
+    formatearFechaDisplay(fechaStr: string): string;
+    actualizarRangoFechasTexto(): void;
+    toggleDatePicker(): void;
+    cerrarDatePicker(): void;
+    generarCalendarios(): void;
+    generarCalendarioMes(fecha: Date): any[];
+    estaEnRango(fechaStr: string): boolean;
+    seleccionarDia(diaObj: any): void;
+    cambiarMes(direccion: number): void;
+    getNombreMes(fecha: Date): string;
+    seleccionarRangoPredefinido(preset: PresetConfig): void;
+    limpiar(): void;
+    private emitirCambio;
+    private emitirSeleccion;
+}
+//# sourceMappingURL=dual-datepicker.component.d.ts.map

package/dist/dual-datepicker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dual-datepicker.component.d.ts","sourceRoot":"","sources":["../src/dual-datepicker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAgB,UAAU,EAAE,MAAM,eAAe,CAAC;AAInI,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBAOa,uBAAwB,YAAW,MAAM,EAAE,SAAS;IA+BnD,OAAO,CAAC,UAAU;IA9BrB,WAAW,EAAE,MAAM,CAAuB;IAC1C,WAAW,EAAE,MAAM,CAAM;IACzB,QAAQ,EAAE,MAAM,CAAM;IACtB,WAAW,EAAE,OAAO,CAAQ;IAC5B,gBAAgB,EAAE,OAAO,CAAQ;IACjC,sBAAsB,EAAE,OAAO,CAAQ;IACvC,mBAAmB,EAAE,OAAO,CAAQ;IACpC,OAAO,EAAE,YAAY,EAAE,CAI9B;IACO,oBAAoB,EAAE,MAAM,CAAU;IACtC,cAAc,EAAE,MAAM,CAAa;IACnC,gBAAgB,EAAE,MAAM,CAAa;IACrC,qBAAqB,EAAE,MAAM,CAAa;IAC1C,qBAAqB,EAAE,MAAM,CAAa;IAC1C,YAAY,EAAE,MAAM,CAAsB;IAEzC,eAAe,0BAAiC;IAChD,iBAAiB,0BAAiC;IAE5D,iBAAiB,UAAS;IAC1B,WAAW,SAAM;IACjB,wBAAwB,UAAQ;IAChC,SAAS,OAAc;IACvB,WAAW,OAAc;IACzB,aAAa,EAAE,GAAG,EAAE,CAAM;IAC1B,eAAe,EAAE,GAAG,EAAE,CAAM;gBAER,UAAU,EAAE,UAAU;IAG1C,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IASvC,QAAQ,IAAI,IAAI;IAOhB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAWzC,cAAc,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM;IAOnC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAO/C,0BAA0B,IAAI,IAAI;IAUlC,gBAAgB,IAAI,IAAI;IASxB,gBAAgB,IAAI,IAAI;IAIxB,kBAAkB,IAAI,IAAI;IAK1B,oBAAoB,CAAC,KAAK,EAAE,IAAI,GAAG,GAAG,EAAE;IA8BxC,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAKtC,cAAc,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI;IAyBjC,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAMnC,YAAY,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM;IAKjC,2BAA2B,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI;IAevD,OAAO,IAAI,IAAI;IASf,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;CAOxB"}

package/dist/dual-datepicker.component.html

@@ -0,0 +1,111 @@
+<div class="datepicker-wrapper" 
+  [style.--input-border-hover]="inputBorderColorHover"
+  [style.--input-border-focus]="inputBorderColorFocus">
+  <input 
+    type="text" 
+    class="form-control datepicker-input" 
+    [value]="rangoFechas" 
+    (click)="toggleDatePicker()" 
+    [placeholder]="placeholder"
+    [ngStyle]="{
+      'background-color': inputBackgroundColor,
+      'color': inputTextColor,
+      'border-color': inputBorderColor,
+      'padding': inputPadding
+    }"
+    readonly>
+
+  @if (mostrarDatePicker) {
+  <div class="date-picker-dropdown">
+    @if (showPresets) {
+    <div class="date-picker-presets">
+      @for (preset of presets; track preset.label) {
+      <button type="button" (click)="seleccionarRangoPredefinido(preset)">{{ preset.label }}</button>
+      }
+      <button type="button" class="btn-close-calendar" (click)="cerrarDatePicker()" title="Close">
+        ×
+      </button>
+    </div>
+    }
+
+    @if (!showPresets) {
+    <div class="date-picker-header-only-close">
+      <button type="button" class="btn-close-calendar" (click)="cerrarDatePicker()" title="Close">
+        ×
+      </button>
+    </div>
+    }
+
+    <!-- Calendars -->
+    <div class="date-picker-calendars">
+      <!-- Previous month calendar -->
+      <div class="date-picker-calendar">
+        <div class="date-picker-header">
+          <button type="button" (click)="cambiarMes(-1)">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <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"/>
+            </svg>
+          </button>
+          <span>{{ getNombreMes(mesAnterior) }}</span>
+          <button type="button" style="visibility: hidden;">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <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"/>
+            </svg>
+          </button>
+        </div>
+        <div class="date-picker-weekdays">
+          <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>
+        </div>
+        <div class="date-picker-days">
+          @for (diaObj of diasMesAnterior; track diaObj.fecha || $index) {
+            <button 
+              type="button"
+              class="date-picker-day" 
+              [class.empty]="!diaObj.esMesActual"
+              [class.selected]="diaObj.esInicio || diaObj.esFin"
+              [class.in-range]="diaObj.enRango && !diaObj.esInicio && !diaObj.esFin"
+              (click)="seleccionarDia(diaObj)"
+              [disabled]="!diaObj.esMesActual">
+              {{ diaObj.dia }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <!-- Current month calendar -->
+      <div class="date-picker-calendar">
+        <div class="date-picker-header">
+          <button type="button" style="visibility: hidden;">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <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"/>
+            </svg>
+          </button>
+          <span>{{ getNombreMes(mesActual) }}</span>
+          <button type="button" (click)="cambiarMes(1)">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <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"/>
+            </svg>
+          </button>
+        </div>
+        <div class="date-picker-weekdays">
+          <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>
+        </div>
+        <div class="date-picker-days">
+          @for (diaObj of diasMesActual; track diaObj.fecha || $index) {
+            <button 
+              type="button"
+              class="date-picker-day" 
+              [class.empty]="!diaObj.esMesActual"
+              [class.selected]="diaObj.esInicio || diaObj.esFin"
+              [class.in-range]="diaObj.enRango && !diaObj.esInicio && !diaObj.esFin"
+              (click)="seleccionarDia(diaObj)"
+              [disabled]="!diaObj.esMesActual">
+              {{ diaObj.dia }}
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+  }
+</div>

package/dist/dual-datepicker.component.js

@@ -0,0 +1,292 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DualDatepickerComponent = void 0;
+const core_1 = require("@angular/core");
+const common_1 = require("@angular/common");
+const forms_1 = require("@angular/forms");
+let DualDatepickerComponent = class DualDatepickerComponent {
+    elementRef;
+    placeholder = 'Select date range';
+    fechaInicio = '';
+    fechaFin = '';
+    showPresets = true;
+    closeOnSelection = true;
+    closeOnPresetSelection = true;
+    closeOnClickOutside = true;
+    presets = [
+        { label: 'Last month', daysAgo: 30 },
+        { label: 'Last 6 months', daysAgo: 180 },
+        { label: 'Last year', daysAgo: 365 }
+    ];
+    inputBackgroundColor = '#fff';
+    inputTextColor = '#495057';
+    inputBorderColor = '#ced4da';
+    inputBorderColorHover = '#ced4da';
+    inputBorderColorFocus = '#80bdff';
+    inputPadding = '0.375rem 0.75rem';
+    dateRangeChange = new core_1.EventEmitter();
+    dateRangeSelected = new core_1.EventEmitter();
+    mostrarDatePicker = false;
+    rangoFechas = '';
+    fechaSeleccionandoInicio = true;
+    mesActual = new Date();
+    mesAnterior = new Date();
+    diasMesActual = [];
+    diasMesAnterior = [];
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    onClickOutside(event) {
+        if (this.mostrarDatePicker && this.closeOnClickOutside) {
+            const clickedInside = this.elementRef.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.cerrarDatePicker();
+            }
+        }
+    }
+    ngOnInit() {
+        if (this.fechaInicio && this.fechaFin) {
+            this.actualizarRangoFechasTexto();
+            this.generarCalendarios();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['fechaInicio'] || changes['fechaFin']) {
+            if (this.fechaInicio && this.fechaFin) {
+                this.actualizarRangoFechasTexto();
+                this.generarCalendarios();
+            }
+            else if (!this.fechaInicio && !this.fechaFin) {
+                this.rangoFechas = '';
+            }
+        }
+    }
+    formatearFecha(fecha) {
+        const year = fecha.getFullYear();
+        const month = String(fecha.getMonth() + 1).padStart(2, '0');
+        const day = String(fecha.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    formatearFechaDisplay(fechaStr) {
+        if (!fechaStr)
+            return '';
+        const fecha = new Date(fechaStr + 'T00:00:00');
+        const meses = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return `${fecha.getDate()} ${meses[fecha.getMonth()]}`;
+    }
+    actualizarRangoFechasTexto() {
+        if (this.fechaInicio && this.fechaFin) {
+            const inicio = this.formatearFechaDisplay(this.fechaInicio);
+            const fin = this.formatearFechaDisplay(this.fechaFin);
+            this.rangoFechas = `${inicio} - ${fin}`;
+        }
+        else {
+            this.rangoFechas = '';
+        }
+    }
+    toggleDatePicker() {
+        this.mostrarDatePicker = !this.mostrarDatePicker;
+        if (this.mostrarDatePicker) {
+            this.fechaSeleccionandoInicio = true;
+            this.mesAnterior = new Date(this.mesActual.getFullYear(), this.mesActual.getMonth() - 1, 1);
+            this.generarCalendarios();
+        }
+    }
+    cerrarDatePicker() {
+        this.mostrarDatePicker = false;
+    }
+    generarCalendarios() {
+        this.diasMesAnterior = this.generarCalendarioMes(this.mesAnterior);
+        this.diasMesActual = 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 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 fechaStr = this.formatearFecha(fechaDia);
+            diasMes.push({
+                dia: dia,
+                fecha: fechaStr,
+                esMesActual: true,
+                esInicio: this.fechaInicio === fechaStr,
+                esFin: this.fechaFin === fechaStr,
+                enRango: this.estaEnRango(fechaStr)
+            });
+        }
+        return diasMes;
+    }
+    estaEnRango(fechaStr) {
+        if (!this.fechaInicio || !this.fechaFin)
+            return false;
+        return fechaStr >= this.fechaInicio && fechaStr <= this.fechaFin;
+    }
+    seleccionarDia(diaObj) {
+        if (!diaObj.esMesActual)
+            return;
+        if (this.fechaSeleccionandoInicio) {
+            this.fechaInicio = diaObj.fecha;
+            this.fechaFin = '';
+            this.fechaSeleccionandoInicio = false;
+            this.emitirCambio();
+        }
+        else {
+            if (diaObj.fecha < this.fechaInicio) {
+                this.fechaFin = this.fechaInicio;
+                this.fechaInicio = diaObj.fecha;
+            }
+            else {
+                this.fechaFin = diaObj.fecha;
+            }
+            this.actualizarRangoFechasTexto();
+            if (this.closeOnSelection) {
+                this.mostrarDatePicker = false;
+            }
+            this.fechaSeleccionandoInicio = true;
+            this.emitirSeleccion();
+        }
+        this.generarCalendarios();
+    }
+    cambiarMes(direccion) {
+        this.mesActual = new Date(this.mesActual.getFullYear(), this.mesActual.getMonth() + direccion, 1);
+        this.mesAnterior = new Date(this.mesActual.getFullYear(), this.mesActual.getMonth() - 1, 1);
+        this.generarCalendarios();
+    }
+    getNombreMes(fecha) {
+        const meses = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        return `${meses[fecha.getMonth()]} ${fecha.getFullYear()}`;
+    }
+    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);
+        this.actualizarRangoFechasTexto();
+        this.generarCalendarios();
+        if (this.closeOnPresetSelection) {
+            this.mostrarDatePicker = false;
+        }
+        this.emitirSeleccion();
+    }
+    limpiar() {
+        this.fechaInicio = '';
+        this.fechaFin = '';
+        this.rangoFechas = '';
+        this.mostrarDatePicker = false;
+        this.fechaSeleccionandoInicio = true;
+        this.emitirCambio();
+    }
+    emitirCambio() {
+        this.dateRangeChange.emit({
+            fechaInicio: this.fechaInicio,
+            fechaFin: this.fechaFin,
+            rangoTexto: this.rangoFechas
+        });
+    }
+    emitirSeleccion() {
+        this.dateRangeSelected.emit({
+            fechaInicio: this.fechaInicio,
+            fechaFin: this.fechaFin,
+            rangoTexto: this.rangoFechas
+        });
+    }
+};
+exports.DualDatepickerComponent = DualDatepickerComponent;
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "placeholder", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "fechaInicio", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "fechaFin", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Boolean)
+], DualDatepickerComponent.prototype, "showPresets", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Boolean)
+], DualDatepickerComponent.prototype, "closeOnSelection", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Boolean)
+], DualDatepickerComponent.prototype, "closeOnPresetSelection", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Boolean)
+], DualDatepickerComponent.prototype, "closeOnClickOutside", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Array)
+], DualDatepickerComponent.prototype, "presets", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "inputBackgroundColor", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "inputTextColor", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "inputBorderColor", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "inputBorderColorHover", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "inputBorderColorFocus", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", String)
+], DualDatepickerComponent.prototype, "inputPadding", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], DualDatepickerComponent.prototype, "dateRangeChange", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], DualDatepickerComponent.prototype, "dateRangeSelected", void 0);
+__decorate([
+    (0, core_1.HostListener)('document:click', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], DualDatepickerComponent.prototype, "onClickOutside", null);
+exports.DualDatepickerComponent = DualDatepickerComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'ngx-dual-datepicker',
+        standalone: true,
+        imports: [common_1.CommonModule, forms_1.FormsModule],
+        templateUrl: './dual-datepicker.component.html',
+        styleUrl: './dual-datepicker.component.scss'
+    }),
+    __metadata("design:paramtypes", [core_1.ElementRef])
+], DualDatepickerComponent);

package/dist/dual-datepicker.component.scss

@@ -0,0 +1,233 @@
+// Dual Datepicker Component Styles
+.datepicker-wrapper {
+  position: relative;
+  width: 100%;
+
+  .datepicker-input {
+    cursor: pointer;
+    
+    &:hover {
+      border-color: var(--input-border-hover, #ced4da);
+    }
+    
+    &:focus {
+      border-color: var(--input-border-focus, #80bdff);
+      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+      outline: 0;
+    }
+  }
+}
+
+.date-picker-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: white;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
+  padding: 16px;
+  z-index: 1060;
+  min-width: 680px;
+
+  @media (max-width: 768px) {
+    min-width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
+
+.date-picker-header-only-close {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+
+  .btn-close-calendar {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: #6b7280;
+    padding: 6px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    font-size: 1.5rem;
+    line-height: 1;
+    
+    &:hover {
+      background-color: #fee;
+      border-color: #fcc;
+      color: #dc2626;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
+    }
+
+    &: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) {
+    flex-wrap: wrap;
+  }
+
+  button {
+    font-size: 0.75rem;
+    padding: 6px 14px;
+    border: none;
+    background-color: #f9fafb;
+    color: #374151;
+    border-radius: 6px;
+    transition: all 0.15s ease;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid #e5e7eb;
+
+    &:hover {
+      background-color: #f3f4f6;
+      border-color: #d1d5db;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+  }
+
+  .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;
+    
+    &:hover {
+      background-color: #fee;
+      border-color: #fcc;
+      color: #dc2626;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+  }
+}
+
+.date-picker-calendars {
+  display: flex;
+  gap: 32px;
+
+  @media (max-width: 768px) {
+    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;
+
+  span {
+    font-size: 0.813rem;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  button {
+    padding: 4px;
+    color: #6b7280;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.15s ease;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f3f4f6;
+      color: #111827;
+    }
+  }
+}
+
+.date-picker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 4px;
+
+  span {
+    text-align: center;
+    font-size: 0.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: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: #374151;
+  font-weight: 400;
+
+  &:hover:not(:disabled):not(.selected) {
+    background-color: #f3f4f6;
+    color: #111827;
+  }
+
+  &.empty {
+    visibility: hidden;
+  }
+
+  &.selected {
+    background-color: #222;
+    color: white;
+    font-weight: 600;
+  }
+
+  &.in-range {
+    background-color: #f9fafb;
+    border-radius: 0;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Public API Surface of @oneluiz/dual-datepicker
+ */
+export { DualDatepickerComponent } from './dual-datepicker.component';
+export type { DateRange, PresetConfig } from './dual-datepicker.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,5 @@
+/**
+ * Public API Surface of @ngx-tools/dual-datepicker
+ */
+
+export { DualDatepickerComponent } from './dual-datepicker.component.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Public API Surface of @oneluiz/dual-datepicker
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DualDatepickerComponent = void 0;
+var dual_datepicker_component_1 = require("./dual-datepicker.component");
+Object.defineProperty(exports, "DualDatepickerComponent", { enumerable: true, get: function () { return dual_datepicker_component_1.DualDatepickerComponent; } });

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@oneluiz/dual-datepicker",
+  "version": "1.0.0",
+  "description": "A customizable dual-calendar date range picker component for Angular 17+",
+  "keywords": [
+    "angular",
+    "datepicker",
+    "date-range",
+    "calendar",
+    "dual-calendar",
+    "date-picker",
+    "angular-component",
+    "standalone",
+    "typescript"
+  ],
+  "author": "Luis Cortes",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oneluiz/ng-dual-datepicker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oneluiz/ng-dual-datepicker/issues"
+  },
+  "homepage": "https://github.com/oneluiz/ng-dual-datepicker#readme",
+  "peerDependencies": {
+    "@angular/common": "^17.0.0 || ^18.0.0",
+    "@angular/core": "^17.0.0 || ^18.0.0",
+    "@angular/forms": "^17.0.0 || ^18.0.0"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && node create-esm.js",
+    "prepare": "npm run build"
+  },
+  "devDependencies": {
+    "@angular/common": "^17.3.12",
+    "@angular/core": "^17.3.12",
+    "@angular/forms": "^17.3.12",
+    "rxjs": "^7.8.2",
+    "typescript": "5.2",
+    "zone.js": "^0.14.10"
+  }
+}