@oneluiz/dual-datepicker 2.6.0 → 3.0.0

package/CHANGELOG.md

@@ -0,0 +1,254 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [3.0.0] - 2026-02-19
+
+### 🚨 BREAKING CHANGES
+
+#### Interface Property Renames (Spanish → English)
+
+All `DateRange` interface properties have been renamed to English for better international adoption:
+
+```typescript
+// v2.x (DEPRECATED)
+interface DateRange {
+  fechaInicio: string;
+  fechaFin: string;
+  rangoTexto: string;
+}
+
+// v3.0.0 (NEW)
+interface DateRange {
+  startDate: string;
+  endDate: string;
+  rangeText: string;
+}
+```
+
+**Migration**: Replace all references:
+- `range.fechaInicio` → `range.startDate`
+- `range.fechaFin` → `range.endDate`
+- `range.rangoTexto` → `range.rangeText`
+
+#### Component @Input Properties Renamed
+
+```typescript
+// v2.x (DEPRECATED)
+<ngx-dual-datepicker
+  [fechaInicio]="startDate"
+  [fechaFin]="endDate">
+</ngx-dual-datepicker>
+
+// v3.0.0 (NEW)
+<ngx-dual-datepicker
+  [startDate]="startDate"
+  [endDate]="endDate">
+</ngx-dual-datepicker>
+```
+
+#### Deprecated `daysAgo` Pattern Removed
+
+The deprecated `daysAgo` property has been completely removed from `PresetConfig`. You must now use the `getValue()` pattern:
+
+```typescript
+// v2.x (NO LONGER WORKS)
+presets = [
+  { label: 'Last 30 days', daysAgo: 30 }
+];
+
+// v3.0.0 (REQUIRED)
+import { getLastNDays, CommonPresets } from '@oneluiz/dual-datepicker';
+
+// Option 1: Use helper function
+presets = [
+  { label: 'Last 30 days', getValue: () => getLastNDays(30) }
+];
+
+// Option 2: Use pre-built collections
+presets = CommonPresets.dashboard;
+```
+
+#### Component Methods Renamed to English
+
+All public methods have been renamed:
+
+| v2.x | v3.0.0 |
+|------|--------|
+| `limpiar()` | `clear()` |
+| `seleccionarDia()` | `selectDay()` |
+| `cambiarMes()` | `changeMonth()` |
+| `cerrarDatePicker()` | `closeDatePicker()` |
+| `actualizarRangoFechasTexto()` | `updateDateRangeText()` |
+| `generarCalendarios()` | `generateCalendars()` |
+| `seleccionarRangoPredefinido()` | `selectPresetRange()` |
+| `eliminarRango()` | `removeRange()` |
+
+**Migration**: Update method calls:
+```typescript
+// v2.x
+this.datepicker.limpiar();
+
+// v3.0.0
+this.datepicker.clear();
+```
+
+#### Signals Renamed to English
+
+All internal signals have been renamed (only affects direct signal access):
+
+- `mostrarDatePicker` → `showDatePicker`
+- `rangoFechas` → `dateRangeText`
+- `fechaSeleccionandoInicio` → `selectingStartDate`
+- `mesActual` → `currentMonth`
+- `mesAnterior` → `previousMonth`
+- `diasMesActual` → `currentMonthDays`
+- `diasMesAnterior` → `previousMonthDays`
+- `nombreMesActual` → `currentMonthName`
+- `nombreMesAnterior` → `previousMonthName`
+- `diasSemana` → `weekDayNames`
+
+### 📖 Migration Guide
+
+See [MIGRATION_V3.md](MIGRATION_V3.md) for complete migration instructions including:
+- Step-by-step migration checklist
+- Find & replace patterns
+- Before/after code examples
+- Rollback instructions
+
+### 🎯 Why These Changes?
+
+1. **International Adoption**: English property names make the library more accessible to the global developer community
+2. **TypeScript Best Practices**: Aligns with Angular and TypeScript naming conventions
+3. **Maintainability**: Consistent English naming reduces cognitive overhead
+4. **Technical Debt Elimination**: Removed deprecated `daysAgo` pattern that was replaced by more flexible `getValue()` in v2.6.0
+
+### ✅ What's NOT Breaking
+
+- All styling properties remain unchanged
+- All output events remain unchanged (`dateRangeSelected`, `dateRangeChange`, `multiDateRangeSelected`)
+- Component selector (`<ngx-dual-datepicker>`) unchanged
+- `LocaleConfig` interface unchanged
+- Multi-range functionality unchanged
+- All visual behavior unchanged
+
+---
+
+## [2.7.0] - 2026-02-15
+
+### Added
+
+- **Multi-Range Support**: Select multiple non-overlapping date ranges in a single picker
+  - New `multiRange` @Input property (boolean, default: false)
+  - New `multiDateRangeSelected` @Output event
+  - New `multiDateRangeChange` @Output event
+  - Visual indicators for multiple ranges
+  - Delete button for each range
+  - Validation to prevent overlapping ranges
+  - Perfect for booking systems, blackout dates, and complex scheduling
+
+### Changed
+
+- Updated GitHub Page Documentation tab with Multi-Range section
+- Updated API Reference with new v2.7.0 properties
+
+---
+
+## [2.6.0] - 2025-12-10
+
+### Added
+
+- **Flexible Preset System**: New `getValue()` pattern for dynamic presets
+  - Allows custom date calculation logic
+  - Helper functions: `getLastNDays()`, `getThisMonth()`, `getLastMonth()`, `getYearToDate()`
+  - Pre-built preset collections: `CommonPresets.simple`, `CommonPresets.dashboard`, `CommonPresets.analytics`
+
+### Deprecated
+
+- `daysAgo` property in `PresetConfig` (use `getValue()` instead)
+
+---
+
+## [2.5.0] - 2025-10-05
+
+### Added
+
+- **Date Adapter System**: Support for third-party date libraries
+  - DayJS adapter
+  - date-fns adapter
+  - Luxon adapter
+  - Custom adapter interface
+
+---
+
+## [2.4.0] - 2025-08-20
+
+### Added
+
+- **Reactive Forms Support**: Implement `ControlValueAccessor` interface
+  - Full Angular Forms integration
+  - Support for `ngModel`, `formControl`, `formControlName`
+  - Validation support
+
+### Changed
+
+- **Default `showClearButton` changed to `false`** (BREAKING CHANGE)
+- Redesigned clear button with minimalist UI
+
+---
+
+## [2.3.0] - 2025-06-15
+
+### Added
+
+- Spanish locale support
+- Custom locale configuration
+- Internationalization (i18n) infrastructure
+
+---
+
+## [2.2.0] - 2025-04-10
+
+### Added
+
+- Preset ranges (`presetRanges` @Input)
+- Auto-close on selection (`closeOnSelection` @Input)
+- Auto-close on preset selection (`closeOnPresetSelection` @Input)
+
+---
+
+## [2.1.0] - 2025-02-01
+
+### Added
+
+- Custom styling properties (16 CSS customization inputs)
+- Theme support
+
+---
+
+## [2.0.0] - 2024-12-15
+
+### Added
+
+- **Angular Signals**: Complete rewrite using Angular Signals for better reactivity and performance
+- Standalone component architecture
+- Zero dependencies
+
+### Changed
+
+- Minimum Angular version: 17.0.0 (BREAKING CHANGE)
+
+---
+
+## [1.0.0] - 2024-10-01
+
+### Added
+
+- Initial release
+- Basic date range picker functionality
+- Dual calendar view
+- Date range selection
+- Custom date range text formatting

package/GITHUB_PAGES.md

@@ -0,0 +1,82 @@
+# GitHub Pages Setup
+
+This project includes a live demo hosted on GitHub Pages.
+
+## 🚀 Viewing the Demo
+
+Visit [https://oneluiz.github.io/ng-dual-datepicker/](https://oneluiz.github.io/ng-dual-datepicker/) to see the component in action.
+
+## 🛠️ Building the Demo Locally
+
+To build and preview the demo locally:
+
+```bash
+# Install dependencies
+npm install
+
+# Serve the demo locally
+npm run demo:serve
+
+# Build the demo for production
+npm run demo:build
+```
+
+The built demo will be placed in the `docs/` directory, which is configured for GitHub Pages deployment.
+
+## 📝 GitHub Pages Configuration
+
+To enable GitHub Pages for this repository:
+
+1. Go to your repository settings on GitHub
+2. Navigate to **Pages** in the left sidebar
+3. Under **Source**, select:
+   - **Branch**: `main` (or your default branch)
+   - **Folder**: `/docs`
+4. Click **Save**
+5. Your site will be published at `https://[username].github.io/ng-dual-datepicker/`
+
+## 🔄 Updating the Demo
+
+After making changes to the demo:
+
+```bash
+# Rebuild the demo
+npm run demo:build
+
+# Move files from browser subfolder to docs root
+cd docs && mv browser/* . && rm -r browser && cd ..
+
+# Commit and push changes
+git add docs/
+git commit -m "Update demo"
+git push
+```
+
+GitHub Pages will automatically deploy the updated demo within a few minutes.
+
+## 📁 Project Structure
+
+```
+ng-dual-datepicker/
+├── src/                    # Source code for the component
+├── demo/                   # Demo application source
+│   └── src/
+│       ├── app/           # Demo app components
+│       ├── index.html     # Demo HTML template
+│       └── styles.scss    # Demo styles
+├── docs/                   # Built demo (GitHub Pages)
+│   ├── .nojekyll          # Tells GitHub not to use Jekyll
+│   ├── index.html
+│   └── *.js, *.css        # Compiled assets
+└── dist/                   # Built library package
+```
+
+## 🎨 Customizing the Demo
+
+The demo source code is in `demo/src/app/`. You can:
+
+- Edit `app.component.html` to change the layout
+- Edit `app.component.ts` to add new examples
+- Edit `app.component.scss` or `styles.scss` for styling
+
+After making changes, rebuild with `npm run demo:build`.

package/MIGRATION_V3.md

@@ -0,0 +1,210 @@
+# Migration Guide: v2.x → v3.0.0
+
+## ⚠️ BREAKING CHANGES
+
+Version 3.0.0 is a major refactoring that removes deprecated features and translates all Spanish property names to English for better international adoption and code maintainability.
+
+## 1. DateRange Interface Changes
+
+**All properties renamed from Spanish to English:**
+
+### Before (v2.x):
+```typescript
+interface DateRange {
+  fechaInicio: string;
+  fechaFin: string;
+  rangoTexto: string;
+}
+```
+
+### After (v3.0.0):
+```typescript
+interface DateRange {
+  startDate: string;
+  endDate: string;
+  rangeText: string;
+}
+```
+
+**Migration:**
+```typescript
+// OLD
+const range: DateRange = {
+  fechaInicio: '2026-01-01',
+  fechaFin: '2026-01-31',
+  rangoTexto: 'Jan 1 - Jan 31'
+};
+console.log(range.fechaInicio); // OLD
+
+// NEW
+const range: DateRange = {
+  startDate: '2026-01-01',
+  endDate: '2026-01-31',
+  rangeText: 'Jan 1 - Jan 31'
+};
+console.log(range.startDate); // NEW
+```
+
+## 2. Component @Input Properties
+
+### Before (v2.x):
+```html
+<ngx-dual-datepicker
+  [fechaInicio]="startValue"
+  [fechaFin]="endValue">
+</ngx-dual-datepicker>
+```
+
+### After (v3.0.0):
+```html
+<ngx-dual-datepicker
+  [startDate]="startValue"
+  [endDate]="endValue">
+</ngx-dual-datepicker>
+```
+
+## 3. PresetConfig - Removed Deprecated `daysAgo`
+
+**The deprecated `daysAgo` pattern has been completely removed.**
+
+### Before (v2.x):
+```typescript
+// This NO LONGER WORKS in v3.0.0
+presets: PresetConfig[] = [
+  { label: 'Last 30 days', daysAgo: 30 }  // ❌ REMOVED
+];
+```
+
+### After (v3.0.0):
+```typescript
+import { getLastNDays } from '@oneluiz/dual-datepicker';
+
+presets: PresetConfig[] = [
+  { label: 'Last 30 days', getValue: () => getLastNDays(30) }  // ✅ REQUIRED
+];
+```
+
+**Or use pre-built CommonPresets:**
+```typescript
+import { CommonPresets } from '@oneluiz/dual-datepicker';
+
+presets = CommonPresets.dashboard; // ✅ Already uses getValue()
+```
+
+## 4. Event Handler Updates
+
+### Before (v2.x):
+```typescript
+onDateRangeChange(range: DateRange) {
+  console.log('Start:', range.fechaInicio);
+  console.log('End:', range.fechaFin);
+  console.log('Text:', range.rangoTexto);
+}
+```
+
+### After (v3.0.0):
+```typescript
+onDateRangeChange(range: DateRange) {
+  console.log('Start:', range.startDate);
+  console.log('End:', range.endDate);
+  console.log('Text:', range.rangeText);
+}
+```
+
+## 5. Multi-Range Interface Updates
+
+### Before (v2.x):
+```typescript
+onMultiRangeChange(data: MultiDateRange) {
+  data.ranges.forEach(range => {
+    console.log(range.fechaInicio, range.fechaFin);  // OLD
+  });
+}
+```
+
+### After (v3.0.0):
+```typescript
+onMultiRangeChange(data: MultiDateRange) {
+  data.ranges.forEach(range => {
+    console.log(range.startDate, range.endDate);  // NEW
+  });
+}
+```
+
+## 6. Reactive Forms / ControlValueAccessor
+
+### Before (v2.x):
+```typescript
+this.form.patchValue({
+  dateRange: {
+    fechaInicio: '2026-01-01',
+    fechaFin: '2026-01-31',
+    rangoTexto: 'Jan 1 - Jan 31'
+  }
+});
+```
+
+### After (v3.0.0):
+```typescript
+this.form.patchValue({
+  dateRange: {
+    startDate: '2026-01-01',
+    endDate: '2026-01-31',
+    rangeText: 'Jan 1 - Jan 31'
+  }
+});
+```
+
+## Quick Migration Checklist
+
+- [ ] Replace `fechaInicio` with `startDate` in all templates
+- [ ] Replace `fechaFin` with `endDate` in all templates
+- [ ] Replace `rangoTexto` with `rangeText` in all templates
+- [ ] Update `@Input()` bindings: `[fechaInicio]` → `[startDate]`, `[fechaFin]` → `[endDate]`
+- [ ] Update all `DateRange` property references in TypeScript
+- [ ] Remove all `daysAgo` usage and replace with `getValue: () => getLastNDays(n)`
+- [ ] Update presets to use `getValue` functions or CommonPresets
+- [ ] Update event handlers accessing `DateRange` properties
+- [ ] Update form control value accessors
+- [ ] Test multi-range functionality if used
+
+## Automated Migration (Find & Replace)
+
+You can use these find & replace patterns in your codebase:
+
+1. **TypeScript files (*.ts):**
+   - `fechaInicio` → `startDate`
+   - `fechaFin` → `endDate`
+   - `rangoTexto` → `rangeText`
+   - `daysAgo:` → Remove and replace with `getValue: () => getLastNDays(...)`
+
+2. **HTML Templates (*.html):**
+   - `[fechaInicio]` → `[startDate]`
+   - `[fechaFin]` → `[endDate]`
+   - `range.fechaInicio` → `range.startDate`
+   - `range.fechaFin` → `range.endDate`
+   - `range.rangoTexto` → `range.rangeText`
+
+## Why This Change?
+
+1. **International Adoption**: English property names make the library more accessible globally
+2. **Code Maintainability**: Consistent naming conventions across the codebase
+3. **Professional Standard**: Aligns with TypeScript/Angular conventions
+4. **Remove Technical Debt**: Eliminates deprecated `daysAgo` pattern
+5. **Cleaner API**: More intuitive and self-documenting code
+
+## Need Help?
+
+- 📖 [Full Documentation](https://oneluiz.github.io/ng-dual-datepicker/)
+- 🐛 [Report Issues](https://github.com/oneluiz/ng-dual-datepicker/issues)
+- 💬 [Discussions](https://github.com/oneluiz/ng-dual-datepicker/discussions)
+
+## Rollback to v2.x
+
+If you need more time to migrate, you can stay on v2.7.0:
+
+```bash
+npm install @oneluiz/dual-datepicker@2.7.0
+```
+
+Version 2.7.0 will continue to work but will not receive new features.