@oneluiz/dual-datepicker 2.6.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.

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.