@wernfried/daterangepicker 5.4.10 → 5.5.2

package/dist/esm/daterangepicker.js

@@ -39,6 +39,7 @@ class DateRangePicker {
     this.isInvalidTime = null;
     this.isCustomDate = null;
     this.onOutsideClick = "apply";
+    this.stopPropagation = true;
     this.opens = this.element?.classList.contains("pull-right") ? "left" : "right";
     this.drops = this.element?.classList.contains("dropup") ? "up" : "down";
     this.buttonClasses = "btn btn-sm";
@@ -220,7 +221,8 @@ class DateRangePicker {
       "autoApply",
       "autoUpdateInput",
       "showLabel",
-      "showOnClick"
+      "showOnClick",
+      "stopPropagation"
     ]) {
       if (typeof options[key2] === "boolean")
         this[key2] = options[key2];
@@ -2319,33 +2321,50 @@ class DateRangePicker {
    * @private
    */
   addListener(element, eventName, selector, delegate) {
+    const stopPropagation = this.stopPropagation;
     this.container.querySelectorAll(element).forEach((el) => {
       el.addEventListener(eventName, function(event) {
         const target = event.target.closest(selector);
-        if (target && el.contains(target))
+        if (target && el.contains(target)) {
+          if (stopPropagation)
+            event.stopPropagation();
           delegate.call(target, event);
+        }
       });
     });
   }
   /**
-   * 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");
@@ -2398,9 +2417,8 @@ function daterangepicker(element, options, callback) {
     for (const el of Array.from(element)) {
       if (el._daterangepicker && typeof el._daterangepicker.remove === "function")
         el._daterangepicker.remove();
-      const picker = new DateRangePicker(el, options || {}, callback);
-      el._daterangepicker = picker;
-      ret.push(picker);
+      el._daterangepicker = new DateRangePicker(el, options || {}, callback);
+      ret.push(el._daterangepicker);
     }
     return ret;
   } else if (typeof element === "string") {
@@ -2409,9 +2427,8 @@ function daterangepicker(element, options, callback) {
       for (const el of Array.from(document.querySelectorAll(element))) {
         if (el._daterangepicker && typeof el._daterangepicker.remove === "function")
           el._daterangepicker.remove();
-        const picker = new DateRangePicker(el, options || {}, callback);
-        el._daterangepicker = picker;
-        ret.push(picker);
+        el._daterangepicker = new DateRangePicker(el, options || {}, callback);
+        ret.push(el._daterangepicker);
       }
       return ret;
     } else if (document.querySelectorAll(element).length === 1) {