@wernfried/daterangepicker 5.5.1 → 5.6.0

package/dist/esm/daterangepicker.js

@@ -453,10 +453,10 @@ class DateRangePicker {
       this.buttonClasses = options.buttonClasses;
     }
     if (typeof options.onOutsideClick === "string") {
-      if (["cancel", "apply"].includes(options.onOutsideClick))
+      if (["cancel", "apply", "hide"].includes(options.onOutsideClick))
         this.onOutsideClick = options.onOutsideClick;
       else
-        console.error(`Option 'onOutsideClick' must be 'cancel' or 'apply'`);
+        console.error(`Option 'onOutsideClick' must be 'cancel', 'apply' or 'hide'`);
     }
     if (this.locale.firstDay != 1) {
       let iterator = this.locale.firstDay;
@@ -1697,14 +1697,10 @@ class DateRangePicker {
   */
   hide() {
     if (!this.isShowing) return;
-    if (!this.#endDate) {
+    if (!this.#endDate && !this.singleDatePicker) {
       this.#startDate = this.oldStartDate;
       this.#endDate = this.oldEndDate;
     }
-    if (typeof this.callback === "function") {
-      if (this.#startDate && !this.#startDate.equals(this.oldStartDate ?? DateTime) || this.#endDate && !this.singleDatePicker && !this.#endDate.equals(this.oldEndDate ?? DateTime))
-        this.callback(this.startDate, this.endDate, this.chosenLabel);
-    }
     this.updateElement();
     const event = this.triggerEvent(this.#events.onBeforeHide);
     if (event.defaultPrevented)
@@ -1776,8 +1772,12 @@ class DateRangePicker {
     if (this.onOutsideClick === "cancel") {
       this.#startDate = this.oldStartDate;
       this.#endDate = this.oldEndDate;
+      this.hide();
+    } else if (this.onOutsideClick === "apply") {
+      this.clickApply();
+    } else {
+      this.hide();
     }
-    this.hide();
   }
   /**
   * Move calendar to previous month
@@ -2140,6 +2140,11 @@ class DateRangePicker {
   * @private
      */
   clickApply() {
+    this.updateElement();
+    if (typeof this.callback === "function") {
+      if (this.#startDate && (this.#endDate || !this.singleDatePicker))
+        this.callback(this.startDate, this.endDate, this.chosenLabel);
+    }
     this.hide();
     this.triggerEvent(this.#events.onApply);
   }
@@ -2334,24 +2339,37 @@ class DateRangePicker {
     });
   }
   /**
-   * Adds an event listener to the anchor element (e.g., `<input>`) the DateRangePicker is attached to.
-   * This allows external code to subscribe to native DOM events such as 'click', 'focus', 'keyup', etc.
+   * Adding event listener to input element where dateragnepicker is attached to.
+   * Wrapper to give easy access for `addEventListener()` on DateRangePicker instance. 
    * 
-   * @param {string} type - The event name (e.g., 'click', 'focus', 'keyup')
+   * @param {string} type - The event name, either native DOM-Event or [DateRangePicker](API_Doc.md#event) specific event
    * @param {function} listener - The callback function invoked when the event fires
    * @param {boolean|object} [options] - Optional event options:
    *   - `boolean capture`: Whether to listen in the capture phase (default: `false`)
    *   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`)
    * 
    * @example
-   * daterangepicker.addEventListener('click', (e) => {
-   *    console.log('Picker element was clicked', e);
+   * picker.addEventListener('hide', (e) => {
+   *    console.log('Picker element was hidden', e);
    * });
    * 
    */
   addEventListener(type, listener, options) {
     this.element.addEventListener(type, listener, options);
   }
+  /**
+   * Counterpart to `addEventListener()`
+   * Note, `listener` most be a named function to enable remove.
+   * 
+   * @param {string} type - The event name, either native 
+   * @param {function} listener - The callback function invoked when the event fires
+   * @param {boolean|object} [options] - Optional event options:
+   *   - `boolean capture`: Whether to listen in the capture phase (default: `false`)
+   *   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`)
+   */
+  removeEventListener(type, listener, options) {
+    this.element.removeEventListener(type, listener, options);
+  }
 }
 function createElementFromHTML(html) {
   const template = document.createElement("template");