From 7ddca43a014041574b80693d56bdf3cc7e9a2fee Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Fri, 2 May 2025 00:13:40 +0200
Subject: [PATCH] Add range change event

---
 package.json      |  2 +-
 tp-date-picker.js | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 40a4f31..59432c5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-date-picker",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "",
   "main": "tp-date-picker.js",
   "scripts": {
diff --git a/tp-date-picker.js b/tp-date-picker.js
index 03a82b7..45427b8 100644
--- a/tp-date-picker.js
+++ b/tp-date-picker.js
@@ -303,6 +303,7 @@ class TpDatePicker extends FormElement(LitElement) {
 
     this.month = prevMonth;
     this.year = prevYear;
+    this.dispatchRangeChangeEvent();
   }
 
   nextMonth() {
@@ -316,14 +317,17 @@ class TpDatePicker extends FormElement(LitElement) {
 
     this.month = nextMonth;
     this.year = nextYear;
+    this.dispatchRangeChangeEvent();
   }
 
   previousYear() {
     this.year -= 1;
+    this.dispatchRangeChangeEvent();
   }
 
   nextYear() {
     this.year += 1;
+    this.dispatchRangeChangeEvent();
   }
 
   getMonthDates(month = null, year = null) {
@@ -386,6 +390,7 @@ class TpDatePicker extends FormElement(LitElement) {
       if (el.value) {
         this.year = el.value;
         this.showYearSelector = false;
+        this.dispatchRangeChangeEvent();
         break;
       }
     }
@@ -395,6 +400,24 @@ class TpDatePicker extends FormElement(LitElement) {
     if (!Array.isArray(this.events)) return 0;
     return this.events.filter(event => this.equalDate(event, date)).length;
   }
+
+  dispatchRangeChangeEvent() {
+    const currentMonthDates = this.getMonthDates(this.month, this.year);
+    const rangeStart = currentMonthDates[0];
+    const rangeEnd = currentMonthDates[currentMonthDates.length - 1];
+    
+    this.dispatchEvent(new CustomEvent('range-changed', {
+      detail: {
+        month: this.month,
+        year: this.year,
+        rangeStart,
+        rangeEnd,
+        visibleDates: currentMonthDates
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
 }
 
 window.customElements.define('tp-date-picker', TpDatePicker);