@oneluiz/dual-datepicker 2.5.0 → 2.7.0

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/README.md

@@ -22,6 +22,7 @@ npm install @oneluiz/dual-datepicker
 | **Dependencies** | Zero | Requires @angular/material, @angular/cdk |
 | **Standalone** | ✅ Native | ⚠️ Requires module setup |
 | **Signals Support** | ✅ Built-in | ❌ Not yet |
+| **Multi-Range Support** | ✅ NEW v2.7.0 | ❌ Not available |
 | **Customization** | Full styling control | Theme-constrained |
 | **Learning Curve** | Minimal | Requires Material knowledge |
 | **Change Detection** | OnPush optimized | Default |
@@ -33,6 +34,7 @@ npm install @oneluiz/dual-datepicker
 - 🎯 **Standalone Component** – No NgModule imports needed
 - ⚡ **Angular Signals** – Modern reactive state management
 - 🔄 **Reactive Forms** – Full ControlValueAccessor implementation
+- 🔥 **Multi-Range Support** – Select multiple date ranges (NEW v2.7.0 - Material CAN'T do this!)
 - 🎨 **Fully Customizable** – Every color, padding, border configurable
 - 📦 **Lightweight** – ~60 KB gzipped total bundle
 - 🚀 **Performance** – OnPush change detection + trackBy optimization
@@ -211,6 +213,73 @@ export class SignalsExampleComponent {
 }
 ```
 
+### 5. Multi-Range Support 🔥 NEW v2.7.0!
+
+**Material CAN'T do this!** Select multiple date ranges in a single picker - perfect for booking systems, blackout periods, and complex scheduling.
+
+```typescript
+import { Component } from '@angular/core';
+import { DualDatepickerComponent, MultiDateRange } from '@oneluiz/dual-datepicker';
+
+@Component({
+  selector: 'app-multi-range',
+  standalone: true,
+  imports: [DualDatepickerComponent],
+  template: `
+    <ngx-dual-datepicker
+      [multiRange]="true"
+      [showClearButton]="true"
+      (multiDateRangeChange)="onMultiRangeChange($event)">
+    </ngx-dual-datepicker>
+
+    @if (selectedRanges && selectedRanges.ranges.length > 0) {
+      <div class="selected-ranges">
+        <h3>Selected Ranges ({{ selectedRanges.ranges.length }})</h3>
+        @for (range of selectedRanges.ranges; track $index) {
+          <div class="range-item">
+            <strong>Range {{ $index + 1 }}:</strong> {{ range.rangoTexto }}
+            <br>
+            <span>{{ range.fechaInicio }} → {{ range.fechaFin }}</span>
+          </div>
+        }
+      </div>
+    }
+  `
+})
+export class MultiRangeExample {
+  selectedRanges: MultiDateRange | null = null;
+
+  onMultiRangeChange(ranges: MultiDateRange) {
+    this.selectedRanges = ranges;
+    console.log('Selected ranges:', ranges.ranges);
+    // Output example:
+    // [
+    //   { fechaInicio: '2026-01-01', fechaFin: '2026-01-05', rangoTexto: 'Jan 1 – Jan 5' },
+    //   { fechaInicio: '2026-01-10', fechaFin: '2026-01-15', rangoTexto: 'Jan 10 – Jan 15' },
+    //   { fechaInicio: '2026-02-01', fechaFin: '2026-02-07', rangoTexto: 'Feb 1 – Feb 7' }
+    // ]
+  }
+}
+```
+
+#### Perfect Use Cases
+
+- 🏨 **Hotel Booking Systems** - Block multiple periods for reservations
+- 📅 **Event Blackout Periods** - Mark multiple dates as unavailable
+- 🔧 **Maintenance Windows** - Schedule multiple maintenance periods
+- 📊 **Availability Calendars** - Show multiple available/unavailable periods
+- 👷 **Shift Scheduling** - Select multiple work periods
+- 💼 **Business Meetings** - Block out multiple date ranges
+
+#### Key Features
+
+- ✅ Select unlimited date ranges
+- ✅ Visual feedback - all ranges highlighted in calendar
+- ✅ Easy management - add/remove ranges with one click
+- ✅ Separate events for multi-range (`multiDateRangeChange`, `multiDateRangeSelected`)
+- ✅ Clear all ranges with one button
+- ❌ **Angular Material CANNOT do this!**
+
 ## 🔌 Date Adapter System
 
 The library supports custom date adapters, allowing you to use different date libraries (DayJS, date-fns, Luxon) or custom backend models instead of native JavaScript `Date` objects.
@@ -456,7 +525,11 @@ export class DayJSAdapter extends DateAdapter<Dayjs> {
 </ngx-dual-datepicker>
 ```
 
-### Custom Presets
+### ⚡ Custom Presets (Power Feature)
+
+**This is where our library shines!** Unlike Angular Material, we offer an incredibly flexible preset system perfect for dashboards, reporting, POS, BI apps, and ERP systems.
+
+#### Simple Pattern (Backward Compatible)
 
 ```typescript
 customPresets: PresetConfig[] = [
@@ -467,6 +540,132 @@ customPresets: PresetConfig[] = [
 ];
 ```
 
+#### **NEW v2.6.0** - Flexible Pattern with `getValue()` 🔥
+
+The real power comes with the `getValue()` pattern. Define **any custom logic** you need:
+
+```typescript
+import { PresetConfig } from '@oneluiz/dual-datepicker';
+
+customPresets: PresetConfig[] = [
+  { 
+    label: 'Today', 
+    getValue: () => {
+      const today = new Date();
+      return {
+        start: formatDate(today),
+        end: formatDate(today)
+      };
+    }
+  },
+  { 
+    label: 'This Month', 
+    getValue: () => {
+      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)
+      };
+    }
+  },
+  { 
+    label: 'Last Month', 
+    getValue: () => {
+      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)
+      };
+    }
+  },
+  { 
+    label: 'Quarter to Date', 
+    getValue: () => {
+      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)
+      };
+    }
+  }
+];
+```
+
+#### **Even Better** - Use Pre-built Utilities 🚀
+
+We provide **ready-to-use preset utilities** for common scenarios:
+
+```typescript
+import { CommonPresets } from '@oneluiz/dual-datepicker';
+
+// Dashboard presets
+presets = CommonPresets.dashboard;
+// → Today, Yesterday, Last 7 days, Last 30 days, This month, Last month
+
+// Reporting presets
+presets = CommonPresets.reporting;
+// → Today, This week, Last week, This month, Last month, This quarter, Last quarter
+
+// Financial/ERP presets
+presets = CommonPresets.financial;
+// → Month to date, Quarter to date, Year to date, Last month, Last quarter, Last year
+
+// Analytics/BI presets
+presets = CommonPresets.analytics;
+// → Last 7/14/30/60/90/180/365 days
+
+// Simple presets
+presets = CommonPresets.simple;
+// → Today, Last 7 days, Last 30 days, This year
+```
+
+#### Create Your Own Utilities
+
+Import individual utilities and mix them:
+
+```typescript
+import { 
+  getToday, 
+  getThisMonth, 
+  getLastMonth, 
+  getQuarterToDate,
+  getYearToDate,
+  PresetConfig 
+} from '@oneluiz/dual-datepicker';
+
+customPresets: PresetConfig[] = [
+  { label: 'Today', getValue: getToday },
+  { label: 'This Month', getValue: getThisMonth },
+  { label: 'Last Month', getValue: getLastMonth },
+  { label: 'Quarter to Date', getValue: getQuarterToDate },
+  { label: 'Year to Date', getValue: getYearToDate },
+  { 
+    label: 'Custom Logic', 
+    getValue: () => {
+      // Your custom date calculation
+      return { start: '2026-01-01', end: '2026-12-31' };
+    }
+  }
+];
+```
+
+#### Why This Is Powerful
+
+✅ **Perfect for Dashboards** - "Last 7 days", "Month to date", "Quarter to date"  
+✅ **Perfect for Reporting** - "This week", "Last week", "This quarter"  
+✅ **Perfect for Financial Systems** - "Quarter to date", "Year to date", "Fiscal year"  
+✅ **Perfect for Analytics** - Consistent date ranges for BI tools  
+✅ **Perfect for ERP** - Custom business logic and fiscal calendars  
+
+**Angular Material doesn't offer this level of flexibility!** 🎯
+
 ```html
 <ngx-dual-datepicker
   [(ngModel)]="dateRange"
@@ -534,14 +733,23 @@ export class MyComponent {
 ### Types
 
 ```typescript
-infechaInicio: string;  // ISO date format: 'YYYY-MM-DD'
+interface DateRange {
+  fechaInicio: string;  // ISO date format: 'YYYY-MM-DD'
   fechaFin: string;     // ISO date format: 'YYYY-MM-DD'
   rangoTexto: string;   // Display text: 'DD Mon - DD Mon'
 }
 
+interface PresetRange {
+  start: string;  // ISO date format: 'YYYY-MM-DD'
+  end: string;    // ISO date format: 'YYYY-MM-DD'
+}
+
 interface PresetConfig {
   label: string;
-  daysAgo: number;
+  /** @deprecated Use getValue() instead for more flexibility */
+  daysAgo?: number;
+  /** NEW v2.6.0 - Function that returns date range with custom logic */
+  getValue?: () => PresetRange;
 }
 
 interface LocaleConfig {
@@ -550,7 +758,6 @@ interface LocaleConfig {
   dayNames?: string[];           // Full day names (7 items, starting Sunday)
   dayNamesShort?: string[];      // Short day names (7 items, starting Sunday)
   firstDayOfWeek?: number;       // 0 = Sunday, 1 = Monday, etc. (not yet implemented)
-  daysAgo: number;
 }
 ```
 
@@ -678,17 +885,26 @@ export class ExampleComponent {
 - Angular 19.0.0 or higher
 - Angular 20.0.0 or higher
 
-## �️ Roadmap
+## 🗺️ Roadmap
+
+Recently shipped:
+
+**v2.6.0:**
+- ✅ **Flexible Preset System** - `getValue()` pattern for custom date logic (This month, Last month, Quarter to date, etc.)
+- ✅ **Pre-built Preset Utilities** - CommonPresets for Dashboard, Reporting, Financial, Analytics
+- ✅ **Real Differentiator** - Perfect for ERP, BI, POS, and Reporting systems
+
+**v2.5.0:**
+- ✅ **Date Adapter System** - Support for DayJS, date-fns, Luxon, and custom date libraries
 
 Planned features and improvements:
 
 - ⬜ **Complete keyboard navigation** - Arrow keys, Enter/Space, Tab, Escape
 - ⬜ **Full accessibility audit** - WCAG 2.1 AA compliance
-- ⬜ **Presets improvements** - More flexible preset configurations
 - ⬜ **Multi-range support** - Select multiple date ranges
 - ⬜ **Theming system** - Pre-built theme presets
 
-## �📄 License
+## 📄 License
 
 MIT © Luis Cortes
 

package/angular.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "demo",
+      "sourceRoot": "demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "docs",
+            "index": "demo/src/index.html",
+            "browser": "demo/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "demo/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "demo/src/favicon.svg"
+            ],
+            "styles": [
+              "demo/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "10kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package/dist/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.