datex-ui 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,1316 @@
+function v(c, t) {
+  const e = c.getFullYear(), i = String(c.getMonth() + 1).padStart(2, "0"), a = String(c.getDate()).padStart(2, "0"), n = String(c.getHours()).padStart(2, "0"), o = String(c.getMinutes()).padStart(2, "0"), r = String(c.getSeconds()).padStart(2, "0");
+  return t.replace(/YYYY/g, String(e)).replace(/MM/g, i).replace(/DD/g, a).replace(/HH/g, n).replace(/mm/g, o).replace(/ss/g, r);
+}
+function $(c, t) {
+  const e = new Date(c);
+  return e.setDate(e.getDate() + t), e;
+}
+function y(c, t) {
+  const e = new Date(c);
+  return e.setMonth(e.getMonth() + t), e;
+}
+function M(c) {
+  const t = new Date(c);
+  return t.setHours(0, 0, 0, 0), t;
+}
+function E(c) {
+  const t = new Date(c);
+  return t.setHours(23, 59, 59, 999), t;
+}
+function b(c, t) {
+  return c.getTime() > t.getTime();
+}
+function g(c, t) {
+  return c.getTime() < t.getTime();
+}
+function C(c, t) {
+  if (t === "YYYY-MM-DD")
+    return new Date(c);
+  if (t === "DD/MM/YYYY") {
+    const e = c.split("/");
+    if (e.length === 3) {
+      const i = parseInt(e[0], 10), a = parseInt(e[1], 10) - 1, n = parseInt(e[2], 10);
+      return new Date(n, a, i);
+    }
+  }
+  if (t === "DD/MM/YYYY HH:mm") {
+    const [e, i] = c.split(" "), a = e.split("/"), n = i ? i.split(":") : ["0", "0"];
+    if (a.length === 3) {
+      const o = parseInt(a[0], 10), r = parseInt(a[1], 10) - 1, f = parseInt(a[2], 10), h = parseInt(n[0], 10) || 0, d = parseInt(n[1], 10) || 0;
+      return new Date(f, r, o, h, d);
+    }
+  }
+  return new Date(c);
+}
+function x(c, t, e = "day") {
+  if (!c || !t) return !1;
+  switch (e) {
+    case "day":
+      return c.getFullYear() === t.getFullYear() && c.getMonth() === t.getMonth() && c.getDate() === t.getDate();
+    case "month":
+      return c.getFullYear() === t.getFullYear() && c.getMonth() === t.getMonth();
+    case "year":
+      return c.getFullYear() === t.getFullYear();
+    default:
+      return !1;
+  }
+}
+function S(c) {
+  return c instanceof Date && !isNaN(c.getTime());
+}
+const L = {
+  primaryColor: "#357ebd",
+  secondaryColor: "#ccc",
+  backgroundColor: "#ffffff",
+  borderColor: "#ddd",
+  textColor: "#000000",
+  hoverColor: "#eee",
+  selectedColor: "#357ebd",
+  rangeColor: "#ebf4f8",
+  todayColor: "#357ebd",
+  disabledColor: "#999",
+  applyButtonColor: "#357ebd",
+  cancelButtonColor: "#999",
+  borderRadius: "4px",
+  fontSize: "15px",
+  fontFamily: "arial"
+}, I = {
+  primaryColor: "#0d6efd",
+  secondaryColor: "#6c757d",
+  backgroundColor: "#ffffff",
+  borderColor: "#dee2e6",
+  textColor: "#212529",
+  hoverColor: "#e9ecef",
+  selectedColor: "#0d6efd",
+  rangeColor: "#cfe2ff",
+  todayColor: "#0d6efd",
+  disabledColor: "#adb5bd",
+  applyButtonColor: "#198754",
+  cancelButtonColor: "#dc3545",
+  borderRadius: "6px",
+  fontSize: "14px",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+}, T = {
+  primaryColor: "#1976d2",
+  secondaryColor: "#757575",
+  backgroundColor: "#ffffff",
+  borderColor: "#e0e0e0",
+  textColor: "#212121",
+  hoverColor: "#f5f5f5",
+  selectedColor: "#1976d2",
+  rangeColor: "#e3f2fd",
+  todayColor: "#1976d2",
+  disabledColor: "#bdbdbd",
+  applyButtonColor: "#4caf50",
+  cancelButtonColor: "#f44336",
+  borderRadius: "4px",
+  fontSize: "14px",
+  fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif'
+}, Y = {
+  format: "DD/MM/YYYY",
+  separator: " - ",
+  applyLabel: "Aplicar",
+  cancelLabel: "Cancelar",
+  customRangeLabel: "Rango Personalizado",
+  daysOfWeek: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
+  monthNames: [
+    "Enero",
+    "Febrero",
+    "Marzo",
+    "Abril",
+    "Mayo",
+    "Junio",
+    "Julio",
+    "Agosto",
+    "Septiembre",
+    "Octubre",
+    "Noviembre",
+    "Diciembre"
+  ],
+  firstDay: 1
+  // Monday
+}, A = {
+  format: "DD/MM/YYYY HH:mm",
+  separator: " - ",
+  applyLabel: "Aplicar",
+  cancelLabel: "Cancelar",
+  customRangeLabel: "Rango Personalizado",
+  daysOfWeek: ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
+  monthNames: [
+    "Enero",
+    "Febrero",
+    "Marzo",
+    "Abril",
+    "Mayo",
+    "Junio",
+    "Julio",
+    "Agosto",
+    "Septiembre",
+    "Octubre",
+    "Noviembre",
+    "Diciembre"
+  ],
+  firstDay: 1
+  // Monday
+};
+class q {
+  constructor(t, e = {}, i) {
+    if (this.boundHandlers = /* @__PURE__ */ new Map(), this.element = typeof t == "string" ? (t.startsWith("#") ? document.getElementById(t.slice(1)) : document.querySelector(t)) || document.getElementById(t) : t, !this.element)
+      throw new Error("Datex: Element not found");
+    this.options = this.mergeOptions(e), this.locale = this.options.locale, this.theme = { ...this.options.theme }, this.callback = i || (() => {
+    });
+    const a = /* @__PURE__ */ new Date();
+    this.state = {
+      startDate: this.options.timePicker ? this.options.startDate : M(this.options.startDate),
+      endDate: this.options.timePicker ? this.options.endDate : E(this.options.endDate),
+      oldStartDate: this.options.timePicker ? this.options.startDate : M(this.options.startDate),
+      oldEndDate: this.options.timePicker ? this.options.endDate : E(this.options.endDate),
+      isShowing: !1,
+      leftCalendar: { month: a, calendar: [] },
+      rightCalendar: { month: y(a, 1), calendar: [] },
+      chosenLabel: null,
+      hoverDate: null
+    }, this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel(), this.applyTheme();
+  }
+  applyTheme() {
+    if (!this.container)
+      return;
+    const t = this.container.dataset.themeStyleId;
+    if (t) {
+      const a = document.getElementById(t);
+      a && a.remove();
+    }
+    const e = "daterangepicker-theme-" + Math.random().toString(36).slice(2, 9), i = document.createElement("style");
+    i.id = e, i.textContent = this.generateThemeCSS(), document.head.appendChild(i), this.container.dataset.themeStyleId = e, this.container.offsetHeight;
+  }
+  generateThemeCSS() {
+    const t = this.theme;
+    return `
+      .datex-picker {
+        background-color: ${t.backgroundColor} !important;
+        border: 1px solid ${t.borderColor} !important;
+        border-radius: ${t.borderRadius} !important;
+        font-family: ${t.fontFamily} !important;
+        font-size: ${t.fontSize} !important;
+        color: ${t.textColor} !important;
+        line-height: 1em !important;
+        width: 278px !important;
+        z-index: 3001 !important;
+      }
+
+      /* IMPORTANTE: Permitir interacción con selectores */
+      .datex-picker select,
+      .datex-picker select * {
+        user-select: auto !important;
+        pointer-events: auto !important;
+        -webkit-user-select: auto !important;
+        -moz-user-select: auto !important;
+        -ms-user-select: auto !important;
+      }
+
+      .datex-picker:before {
+        border-bottom: 7px solid #ccc !important;
+      }
+
+      .datex-picker:after {
+        border-bottom-color: ${t.backgroundColor} !important;
+      }
+
+      .datex-picker.drop-up:before {
+        border-top: 7px solid #ccc !important;
+      }
+
+      .datex-picker.drop-up:after {
+        border-top-color: ${t.backgroundColor} !important;
+      }
+
+      .datex-picker .calendar-table {
+        background-color: ${t.backgroundColor} !important;
+        border: 1px solid ${t.backgroundColor} !important;
+        border-radius: ${t.borderRadius} !important;
+      }
+
+      .datex-picker .calendar-table th,
+      .datex-picker .calendar-table td {
+        min-width: 28px !important;
+        width: 28px !important;
+        height: 22px !important;
+        line-height: 20px !important;
+        font-size: 11px !important;
+        border-radius: 3px !important;
+        border: 1px solid transparent !important;
+        white-space: nowrap !important;
+        cursor: pointer !important;
+        text-align: center !important;
+        vertical-align: middle !important;
+      }
+
+      .datex-picker .calendar-table th {
+        color: ${t.textColor} !important;
+      }
+
+      .datex-picker .calendar-table th.month {
+        color: ${t.textColor} !important;
+        width: auto !important;
+      }
+
+      .datex-picker .calendar-table .next span,
+      .datex-picker .calendar-table .prev span {
+        color: #fff !important;
+        border: solid black !important;
+        border-width: 0 2px 2px 0 !important;
+        border-radius: 0 !important;
+        display: inline-block !important;
+        padding: 3px !important;
+      }
+
+      .datex-picker .calendar-table .next span {
+        transform: rotate(-45deg) !important;
+        -webkit-transform: rotate(-45deg) !important;
+      }
+
+      .datex-picker .calendar-table .prev span {
+        transform: rotate(135deg) !important;
+        -webkit-transform: rotate(135deg) !important;
+      }
+
+      .datex-picker .calendar-table .next,
+      .datex-picker .calendar-table .prev {
+        cursor: pointer !important;
+        user-select: none !important;
+        width: 32px !important;
+        height: 28px !important;
+      }
+
+      .datex-picker .calendar-table .next:hover,
+      .datex-picker .calendar-table .prev:hover {
+        background-color: #f0f0f0 !important;
+      }
+
+      .datex-picker td.available:hover,
+      .datex-picker th.available:hover {
+        background-color: #eee !important;
+        border-color: transparent !important;
+        color: ${t.textColor} !important;
+      }
+
+      .datex-picker td.week,
+      .datex-picker th.week {
+        font-size: 80% !important;
+        color: #ccc !important;
+      }
+
+      .datex-picker td.off,
+      .datex-picker td.off.in-range,
+      .datex-picker td.off.start-date,
+      .datex-picker td.off.end-date {
+        background-color: ${t.backgroundColor} !important;
+        border-color: transparent !important;
+        color: #999 !important;
+      }
+
+      .datex-picker td.in-range {
+        background-color: #ebf4f8 !important;
+        border-color: transparent !important;
+        color: #000 !important;
+        border-radius: 0 !important;
+      }
+
+      .datex-picker td.start-date {
+        border-radius: 3px 0 0 3px !important;
+        background-color: #357ebd !important;
+        color: #fff !important;
+      }
+
+      .datex-picker td.end-date {
+        border-radius: 0 3px 3px 0 !important;
+        background-color: #357ebd !important;
+        color: #fff !important;
+      }
+
+      .datex-picker td.start-date.end-date {
+        border-radius: 3px !important;
+      }
+
+      .datex-picker td.active,
+      .datex-picker td.active:hover {
+        background-color: #357ebd !important;
+        border-color: transparent !important;
+        color: #fff !important;
+      }
+
+      .datex-picker td.disabled,
+      .datex-picker option.disabled {
+        color: ${t.disabledColor} !important;
+        cursor: not-allowed !important;
+        text-decoration: line-through !important;
+      }
+
+      .datex-picker .drp-calendar.left {
+        padding: 8px 0 8px 8px !important;
+      }
+
+      .datex-picker .drp-calendar.right {
+        padding: 8px !important;
+      }
+
+      .datex-picker .ranges {
+        float: none !important;
+        text-align: left !important;
+        margin: 0 !important;
+      }
+
+      .datex-picker .ranges ul {
+        list-style: none !important;
+        margin: 0 auto !important;
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      .datex-picker .ranges li {
+        font-size: 12px !important;
+        padding: 8px 12px !important;
+        cursor: pointer !important;
+        color: ${t.textColor} !important;
+        border-radius: ${t.borderRadius} !important;
+        margin: 2px 0 !important;
+      }
+
+      .datex-picker .ranges li:hover {
+        background-color: ${t.rangeColor} !important;
+        color: ${t.textColor} !important;
+      }
+
+      .datex-picker .ranges li.active {
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+      }
+
+      .datex-picker .ranges li.active:hover {
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        opacity: 0.9 !important;
+      }
+
+      .datex-picker.show-calendar .drp-buttons {
+        display: block !important;
+      }
+
+      .datex-picker.auto-apply .drp-buttons {
+        display: none !important;
+      }
+
+      .datex-picker .drp-buttons {
+        clear: both !important;
+        text-align: right !important;
+        padding: 2px !important;
+        border-top: 1px solid ${t.borderColor} !important;
+        display: none !important;
+        line-height: 10px !important;
+        vertical-align: middle !important;
+        margin: 0px;
+      }
+
+      .datex-picker .drp-selected {
+        display: inline-block !important;
+        font-size: 12px !important;
+        padding-right: 8px !important;
+        color: ${t.textColor} !important;
+      }
+
+      .datex-picker .drp-buttons .btn {
+        margin-left: 4px !important;
+        font-size: 12px !important;
+        font-weight: bold !important;
+        padding: 7px 8px !important;
+        border-radius: 3px !important;
+        border: 1px solid transparent !important;
+        cursor: pointer !important;
+        transition: all 0.15s ease-in-out !important;
+      }
+
+      .datex-picker .drp-buttons .btn.btn-success {
+        background-color: ${t.applyButtonColor} !important;
+        border-color: ${t.applyButtonColor} !important;
+        color: #fff !important;
+      }
+
+      .datex-picker .drp-buttons .btn.btn-success:hover:not(:disabled) {
+        background-color: ${t.applyButtonColor} !important;
+        border-color: ${t.applyButtonColor} !important;
+        opacity: 0.8 !important;
+      }
+
+      .datex-picker .drp-buttons .btn.btn-danger {
+        background-color: ${t.cancelButtonColor} !important;
+        border-color: ${t.cancelButtonColor} !important;
+        color: #fff !important;
+      }
+
+      .datex-picker .drp-buttons .btn.btn-danger:hover:not(:disabled) {
+        background-color: ${t.cancelButtonColor} !important;
+        border-color: ${t.cancelButtonColor} !important;
+        opacity: 0.8 !important;
+      }
+
+      /* Asegurar que el contenedor no bloquee eventos */
+      .datex-picker .calendar-table th.month {
+        pointer-events: auto !important;
+      }
+
+      .datex-picker .calendar-table th.month * {
+        pointer-events: auto !important;
+      }
+
+      .datex-picker select.monthselect,
+      .datex-picker select.yearselect {
+        font-size: 12px !important;
+        padding: 1px 2px !important;
+        height: auto !important;
+        margin: 0 !important;
+        cursor: pointer !important;
+        background-color: ${t.backgroundColor} !important;
+        border: 1px solid ${t.borderColor} !important;
+        color: ${t.textColor} !important;
+        outline: none !important;
+        /* Asegurar que los dropdowns funcionen nativamente */
+        appearance: auto !important;
+        -webkit-appearance: menulist !important;
+        -moz-appearance: menulist !important;
+        /* Permitir interacción */
+        pointer-events: auto !important;
+        user-select: auto !important;
+        -webkit-user-select: auto !important;
+        -moz-user-select: auto !important;
+        /* Tamaño mínimo para ser clickeable */
+        min-height: 20px !important;
+        min-width: 50px !important;
+        /* Asegurar que estén por encima de otros elementos */
+        position: relative !important;
+        z-index: 1000000 !important;
+        /* Remover cualquier transformación que pueda interferir */
+        transform: none !important;
+        /* Asegurar que no estén bloqueados por overlay */
+        isolation: auto !important;
+      }
+
+      .datex-picker select.monthselect {
+        margin-right: 2% !important;
+        width: 56% !important;
+      }
+
+      .datex-picker select.yearselect {
+        width: 40% !important;
+      }
+
+      .datex-picker select.hourselect,
+      .datex-picker select.minuteselect,
+      .datex-picker select.secondselect,
+      .datex-picker select.ampmselect {
+        width: 50px !important;
+        margin: 0 auto !important;
+        background: ${t.backgroundColor} !important;
+        border: 1px solid ${t.borderColor} !important;
+        color: ${t.textColor} !important;
+        padding: 2px !important;
+        outline: 0 !important;
+        font-size: 12px !important;
+        pointer-events: auto !important;
+        user-select: auto !important;
+        -webkit-user-select: auto !important;
+        -moz-user-select: auto !important;
+        appearance: auto !important;
+        -webkit-appearance: menulist !important;
+        -moz-appearance: menulist !important;
+        border-radius: ${t.borderRadius} !important;
+        opacity: 1 !important;
+      }
+
+      .datex-picker .calendar-time {
+        text-align: center !important;
+        margin: 4px auto 0 auto !important;
+        line-height: 30px !important;
+        position: relative !important;
+        display: block !important;
+        background: ${t.backgroundColor} !important;
+        padding: 8px !important;
+        border-top: 1px solid ${t.borderColor} !important;
+      }
+
+      .datex-picker .calendar-time select.disabled {
+        color: ${t.secondaryColor} !important;
+        cursor: not-allowed !important;
+        background: ${t.hoverColor} !important;
+        opacity: 0.6 !important;
+      }
+
+      .datex-picker select option {
+        background: ${t.backgroundColor} !important;
+        color: ${t.textColor} !important;
+      }
+
+      .datex-picker select option:disabled {
+        background: ${t.hoverColor} !important;
+        color: ${t.disabledColor} !important;
+      }
+
+      .datex-picker select option:hover {
+        background: ${t.selectedColor} !important;
+        color: #fff !important;
+      }
+
+      /* Media queries para responsive - exactamente como el CSS original */
+      @media (min-width: 564px) {
+        .datex-picker {
+          width: auto !important;
+        }
+
+        .datex-picker .ranges ul {
+          width: 140px !important;
+        }
+
+        .datex-picker.single .ranges ul {
+          width: 100% !important;
+        }
+
+        .datex-picker .drp-calendar.left {
+          clear: left !important;
+          margin-right: 0 !important;
+        }
+
+        .datex-picker .drp-calendar.left .calendar-table {
+          border-right: none !important;
+          border-top-right-radius: 0 !important;
+          border-bottom-right-radius: 0 !important;
+          padding-right: 8px !important;
+        }
+
+        .datex-picker .drp-calendar.right {
+          margin-left: 0 !important;
+        }
+
+        .datex-picker .drp-calendar.right .calendar-table {
+          border-left: none !important;
+          border-top-left-radius: 0 !important;
+          border-bottom-left-radius: 0 !important;
+        }
+
+        .datex-picker .ranges,
+        .datex-picker .drp-calendar {
+          float: left !important;
+        }
+      }
+
+      @media (min-width: 730px) {
+        .datex-picker .ranges {
+          width: auto !important;
+          float: left !important;
+        }
+
+        .datex-picker .drp-calendar.left {
+          clear: none !important;
+        }
+      }
+    `;
+  }
+  // Public method to change theme dynamically
+  setTheme(t) {
+    this.theme = { ...L, ...t }, this.applyTheme();
+  }
+  // Public method to force theme reapplication
+  refreshTheme() {
+    this.applyTheme();
+  }
+  // Debug method to check current theme
+  getCurrentTheme() {
+    return this.theme;
+  }
+  // Debug method to test dropdowns
+  testDropdowns() {
+    this.container.querySelectorAll("select").forEach((e, i) => {
+      e.addEventListener("click", () => {
+      }), e.click();
+    });
+  }
+  mergeOptions(t) {
+    const e = /* @__PURE__ */ new Date(), i = {
+      startDate: t.startDate || e,
+      endDate: t.endDate || e,
+      minDate: t.minDate ?? null,
+      maxDate: t.maxDate ?? null,
+      minYear: t.minYear ?? e.getFullYear() - 100,
+      maxYear: t.maxYear ?? e.getFullYear() + 100,
+      maxSpan: t.maxSpan ?? null,
+      autoApply: t.autoApply ?? !1,
+      singleDatePicker: t.singleDatePicker ?? !1,
+      showDropdowns: t.showDropdowns ?? !0,
+      linkedCalendars: t.linkedCalendars ?? !0,
+      autoUpdateInput: t.autoUpdateInput ?? !0,
+      alwaysShowCalendars: t.alwaysShowCalendars ?? !1,
+      showCustomRangeLabel: t.showCustomRangeLabel ?? !0,
+      timePicker: t.timePicker ?? !1,
+      timePicker24Hour: t.timePicker24Hour ?? !0,
+      timePickerIncrement: t.timePickerIncrement ?? 1,
+      timePickerSeconds: t.timePickerSeconds ?? !1,
+      ranges: t.ranges || {},
+      opens: t.opens || "center",
+      drops: t.drops || "auto",
+      locale: t.locale || Y,
+      buttonClasses: t.buttonClasses || "btn btn-sm",
+      applyButtonClasses: t.applyButtonClasses || "btn-success",
+      cancelButtonClasses: t.cancelButtonClasses || "btn-danger",
+      theme: t.theme || L
+    };
+    return i.timePicker && i.autoApply && (i.autoApply = !1), i;
+  }
+  createContainer() {
+    const t = `
+      <div class="datex-picker">
+        <div class="ranges"></div>
+        <div class="drp-calendar left">
+          <div class="calendar-table"></div>
+          <div class="calendar-time"></div>
+        </div>
+        <div class="drp-calendar right">
+          <div class="calendar-table"></div>
+          <div class="calendar-time"></div>
+        </div>
+        <div class="drp-buttons">
+          <span class="drp-selected"></span>
+          <button class="cancelBtn ${this.options.buttonClasses} ${this.options.cancelButtonClasses}" type="button">
+            ${this.locale.cancelLabel}
+          </button>
+          <button class="applyBtn ${this.options.buttonClasses} ${this.options.applyButtonClasses}" type="button">
+            ${this.locale.applyLabel}
+          </button>
+        </div>
+      </div>
+    `, e = document.createElement("div");
+    e.innerHTML = t.trim(), this.container = e.firstElementChild, document.body.appendChild(this.container), this.container.classList.add(`opens${this.options.opens}`), this.options.singleDatePicker && this.container.classList.add("single"), this.options.autoApply && this.container.classList.add("auto-apply"), Object.keys(this.options.ranges).length > 0 && (this.container.classList.add("show-ranges"), this.renderRanges()), (this.options.alwaysShowCalendars || Object.keys(this.options.ranges).length === 0) && this.container.classList.add("show-calendar"), this.options.autoApply || this.container.classList.add("show-calendar"), this.options.timePicker || this.container.querySelectorAll(".calendar-time").forEach((a) => {
+      a.style.display = "none";
+    }), this.container.style.display = "none";
+  }
+  renderRanges() {
+    const t = this.container.querySelector(".ranges");
+    let e = "<ul>";
+    for (const [i] of Object.entries(this.options.ranges))
+      e += `<li data-range-key="${i}">${i}</li>`;
+    this.options.showCustomRangeLabel && (e += `<li data-range-key="${this.locale.customRangeLabel}">${this.locale.customRangeLabel}</li>`), e += "</ul>", t.innerHTML = e;
+  }
+  setupEventListeners() {
+    this.element.tagName === "INPUT" || this.element.tagName === "BUTTON" ? (this.addEventHandler(this.element, "click", this.show.bind(this)), this.addEventHandler(this.element, "focus", this.show.bind(this)), this.addEventHandler(
+      this.element,
+      "keyup",
+      this.elementChanged.bind(this)
+    ), this.addEventHandler(
+      this.element,
+      "keydown",
+      this.keydown.bind(this)
+    )) : this.addEventHandler(this.element, "click", this.toggle.bind(this)), this.addEventHandler(
+      this.container,
+      "click",
+      this.containerClick.bind(this)
+    ), this.addEventHandler(
+      this.container,
+      "mouseover",
+      this.containerMouseOver.bind(this)
+    ), this.addEventHandler(
+      this.container,
+      "mouseleave",
+      this.containerMouseLeave.bind(this)
+    ), this.addEventHandler(
+      this.container,
+      "change",
+      this.containerChange.bind(this)
+    ), setTimeout(() => {
+      this.container.querySelectorAll(
+        "select.monthselect, select.yearselect"
+      ).forEach((e) => {
+        this.addEventHandler(
+          e,
+          "change",
+          this.monthOrYearChanged.bind(this)
+        );
+      });
+    }, 100);
+  }
+  addEventHandler(t, e, i) {
+    const a = `${e}_${Math.random()}`;
+    this.boundHandlers.set(a, i), t.addEventListener(e, i);
+  }
+  containerChange(t) {
+    if (t.target.matches("select.monthselect, select.yearselect")) {
+      this.monthOrYearChanged(t);
+      return;
+    }
+  }
+  containerMouseOver(t) {
+    if (t.target.matches("td.available")) {
+      this.hoverDate(t);
+      return;
+    }
+  }
+  containerMouseLeave() {
+    this.state.hoverDate && (this.state.hoverDate = null, this.updateDateClasses());
+  }
+  containerClick(t) {
+    const e = t.target;
+    if (!(e.tagName === "SELECT" || e.closest("select"))) {
+      if (e.matches(".ranges li")) {
+        this.clickRange(t);
+        return;
+      }
+      if (e.matches(".applyBtn")) {
+        this.clickApply(t);
+        return;
+      }
+      if (e.matches(".cancelBtn")) {
+        this.clickCancel(t);
+        return;
+      }
+      if (e.matches(".prev")) {
+        this.clickPrev(t);
+        return;
+      }
+      if (e.matches(".next")) {
+        this.clickNext(t);
+        return;
+      }
+      if (e.matches("td.available")) {
+        this.clickDate(t);
+        return;
+      }
+    }
+  }
+  preventBlur(t) {
+    const e = t.target;
+    e.tagName === "SELECT" || e.closest("select") || t.preventDefault();
+  }
+  show() {
+    this.state.isShowing || (this.state.oldStartDate = new Date(this.state.startDate), this.state.oldEndDate = this.state.endDate ? new Date(this.state.endDate) : null, this.applyTheme(), this.documentClickHandler = this.outsideClick.bind(this), this.documentFocusHandler = this.outsideFocus.bind(this), document.addEventListener("mousedown", this.documentClickHandler, !0), document.addEventListener("focusin", this.documentFocusHandler, !0), this.resizeHandler = this.move.bind(this), this.scrollHandler = this.move.bind(this), window.addEventListener("resize", this.resizeHandler), window.addEventListener("scroll", this.scrollHandler, !0), this.updateView(), this.container.style.display = "block", setTimeout(() => {
+      this.move();
+    }, 0), this.dispatchEvent("show.daterangepicker"), this.state.isShowing = !0);
+  }
+  hide() {
+    this.state.isShowing && (this.state.endDate || (this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null), (!x(this.state.startDate, this.state.oldStartDate, "day") || this.state.endDate && this.state.oldEndDate && !x(this.state.endDate, this.state.oldEndDate, "day")) && this.callback(
+      new Date(this.state.startDate),
+      this.state.endDate ? new Date(this.state.endDate) : new Date(this.state.startDate),
+      this.state.chosenLabel || void 0
+    ), this.updateElement(), this.removeDocumentListeners(), this.container.style.display = "none", this.dispatchEvent("hide.daterangepicker"), this.state.isShowing = !1);
+  }
+  removeDocumentListeners() {
+    this.documentClickHandler && (document.removeEventListener(
+      "mousedown",
+      this.documentClickHandler,
+      !0
+    ), this.documentClickHandler = void 0), this.documentFocusHandler && (document.removeEventListener("focusin", this.documentFocusHandler, !0), this.documentFocusHandler = void 0), this.resizeHandler && (window.removeEventListener("resize", this.resizeHandler), this.resizeHandler = void 0), this.scrollHandler && (window.removeEventListener("scroll", this.scrollHandler, !0), this.scrollHandler = void 0);
+  }
+  outsideClick(t) {
+    const e = t.target;
+    this.element.contains(e) || this.container.contains(e) || e.closest(".datex-picker") || e.tagName === "SELECT" || e.closest("select") || (this.hide(), this.dispatchEvent("outsideClick.daterangepicker"));
+  }
+  outsideFocus(t) {
+    const e = t.target;
+    this.element.contains(e) || this.container.contains(e) || e.closest(".datex-picker") || setTimeout(() => {
+      const i = document.activeElement;
+      i && !this.element.contains(i) && !this.container.contains(i) && !i.closest(".datex-picker") && this.hide();
+    }, 50);
+  }
+  toggle() {
+    this.state.isShowing ? this.hide() : this.show();
+  }
+  updateView() {
+    if (this.options.timePicker) {
+      this.renderTimePicker("left"), this.renderTimePicker("right");
+      const t = this.container.querySelectorAll(
+        ".right .calendar-time select"
+      );
+      this.state.endDate ? t.forEach((e) => {
+        e.disabled = !1, e.classList.remove("disabled");
+      }) : t.forEach((e) => {
+        e.disabled = !0, e.classList.add("disabled");
+      });
+    }
+    this.updateMonthsInView(), this.updateCalendars(), this.updateFormInputs(), this.updateSelectedDisplay(), this.calculateChosenLabel();
+  }
+  updateMonthsInView() {
+    this.state.endDate ? (this.state.leftCalendar.month = this.getStartOfMonth(
+      this.state.startDate
+    ), !this.options.linkedCalendars && (this.state.endDate.getMonth() !== this.state.startDate.getMonth() || this.state.endDate.getFullYear() !== this.state.startDate.getFullYear()) ? this.state.rightCalendar.month = this.getStartOfMonth(
+      this.state.endDate
+    ) : this.state.rightCalendar.month = y(
+      this.state.leftCalendar.month,
+      1
+    )) : (this.state.leftCalendar.month = this.getStartOfMonth(
+      this.state.startDate
+    ), this.state.rightCalendar.month = y(
+      this.state.leftCalendar.month,
+      1
+    ));
+  }
+  getStartOfMonth(t) {
+    return new Date(t.getFullYear(), t.getMonth(), 1);
+  }
+  getEndOfMonth(t) {
+    return new Date(t.getFullYear(), t.getMonth() + 1, 0);
+  }
+  getStartOfWeek(t, e = 1) {
+    const a = (t.getDay() - e + 7) % 7, n = new Date(t);
+    return n.setDate(t.getDate() - a), n;
+  }
+  updateCalendars() {
+    this.renderCalendar("left"), this.options.singleDatePicker || this.renderCalendar("right"), setTimeout(() => {
+      this.container.querySelectorAll(
+        "select.monthselect, select.yearselect"
+      ).forEach((e) => {
+        e.removeEventListener(
+          "change",
+          this.monthOrYearChanged.bind(this)
+        ), e.addEventListener("change", this.monthOrYearChanged.bind(this));
+      });
+    }, 10);
+  }
+  renderCalendar(t) {
+    const e = t === "left" ? this.state.leftCalendar : this.state.rightCalendar, i = this.container.querySelector(
+      `.drp-calendar.${t} .calendar-table`
+    ), a = e.month, n = a.getFullYear(), o = a.getMonth(), r = this.getStartOfMonth(a), f = this.getStartOfWeek(r, this.locale.firstDay), h = [];
+    let d = [];
+    const p = new Date(f);
+    for (let D = 0; D < 42; D++) {
+      D > 0 && D % 7 === 0 && (h.push(d), d = []);
+      const k = new Date(p);
+      k.setDate(p.getDate() + D), d.push(k);
+    }
+    d.length > 0 && h.push(d), e.calendar = h;
+    let s = '<table class="table-condensed">';
+    s += "<thead>", s += "<tr>";
+    const l = !this.options.minDate || b(this.getStartOfMonth(a), this.options.minDate), m = !this.options.maxDate || g(this.getEndOfMonth(a), this.options.maxDate);
+    l && (!this.options.linkedCalendars || t === "left") ? s += '<th class="prev available"><span></span></th>' : s += "<th></th>";
+    let u = this.locale.monthNames[o] + " " + n;
+    this.options.showDropdowns && (u = this.renderDropdowns(o, n, t)), s += `<th colspan="5" class="month">${u}</th>`, m && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? s += '<th class="next available"><span></span></th>' : s += "<th></th>", s += "</tr>", s += "<tr>";
+    for (const D of this.locale.daysOfWeek)
+      s += `<th>${D}</th>`;
+    s += "</tr>", s += "</thead>", s += "<tbody>";
+    for (const D of h) {
+      s += "<tr>";
+      for (const k of D) {
+        const w = this.getDayClasses(k, a), H = w.includes("disabled"), P = w.join(" ") + (H ? "" : " available");
+        s += `<td class="${P}" data-date="${v(
+          k,
+          "YYYY-MM-DD"
+        )}">${k.getDate()}</td>`;
+      }
+      s += "</tr>";
+    }
+    s += "</tbody>", s += "</table>", i.innerHTML = s, this.options.timePicker && this.renderTimePicker(t);
+  }
+  renderDropdowns(t, e, i) {
+    let a = this.options.minYear, n = this.options.maxYear;
+    this.options.minDate && (a = Math.max(a, this.options.minDate.getFullYear())), this.options.maxDate && (n = Math.min(n, this.options.maxDate.getFullYear()));
+    const o = e, r = o === a, f = o === n;
+    let h = '<select class="monthselect">';
+    for (let p = 0; p < 12; p++) {
+      let s = !1;
+      r && this.options.minDate && p < this.options.minDate.getMonth() && (s = !0), f && this.options.maxDate && p > this.options.maxDate.getMonth() && (s = !0), h += `<option value="${p}"${p === t ? ' selected="selected"' : ""}${s ? ' disabled="disabled"' : ""}>${this.locale.monthNames[p]}</option>`;
+    }
+    h += "</select>";
+    let d = '<select class="yearselect">';
+    for (let p = a; p <= n; p++)
+      d += `<option value="${p}"${p === e ? ' selected="selected"' : ""}>${p}</option>`;
+    return d += "</select>", h + " " + d;
+  }
+  getDayClasses(t, e) {
+    const i = [];
+    return x(t, /* @__PURE__ */ new Date(), "day") && i.push("today"), (t.getDay() === 0 || t.getDay() === 6) && i.push("weekend"), t.getMonth() !== e.getMonth() && i.push("off", "ends"), this.options.minDate && g(t, M(this.options.minDate)) && i.push("off", "disabled"), this.options.maxDate && b(t, E(this.options.maxDate)) && i.push("off", "disabled"), x(t, this.state.startDate, "day") && i.push("active", "start-date"), this.state.endDate && x(t, this.state.endDate, "day") && i.push("active", "end-date"), this.state.endDate && b(t, this.state.startDate) && g(t, this.state.endDate) && i.push("in-range"), i;
+  }
+  updateFormInputs() {
+    const t = this.container.querySelector(
+      ".applyBtn"
+    ), e = this.options.singleDatePicker || this.state.endDate && (g(this.state.startDate, this.state.endDate) || x(this.state.startDate, this.state.endDate, "day"));
+    t.disabled = !e;
+  }
+  updateSelectedDisplay() {
+    const t = this.container.querySelector(".drp-selected");
+    let e = v(this.state.startDate, this.locale.format);
+    !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + v(this.state.endDate, this.locale.format)), t.textContent = e;
+  }
+  renderTimePicker(t) {
+    if (t === "right" && !this.state.endDate) return;
+    const e = this.container.querySelector(
+      `.drp-calendar.${t}`
+    );
+    if (!e.querySelector(".calendar-time")) {
+      const s = document.createElement("div");
+      s.className = "calendar-time", e.appendChild(s);
+    }
+    let a, n = null, o = this.options.maxDate;
+    if (this.options.maxSpan && (!this.options.maxDate || b(
+      $(this.state.startDate, this.options.maxSpan.days || 0),
+      this.options.maxDate
+    )) && (o = $(this.state.startDate, this.options.maxSpan.days || 0)), t === "left")
+      a = new Date(this.state.startDate), n = this.options.minDate;
+    else {
+      a = this.state.endDate ? new Date(this.state.endDate) : new Date(this.state.startDate), n = this.state.startDate;
+      const s = this.container.querySelector(
+        ".drp-calendar.right .calendar-time"
+      );
+      if (s && s.innerHTML !== "") {
+        const l = s.querySelector(
+          ".hourselect"
+        ), m = s.querySelector(
+          ".minuteselect"
+        ), u = s.querySelector(
+          ".secondselect"
+        ), D = s.querySelector(
+          ".ampmselect"
+        );
+        if (l && l.value) {
+          let k = parseInt(l.value, 10);
+          if (!this.options.timePicker24Hour && D) {
+            const w = D.value;
+            w === "PM" && k < 12 && (k += 12), w === "AM" && k === 12 && (k = 0);
+          }
+          a.setHours(k);
+        }
+        m && m.value && a.setMinutes(parseInt(m.value, 10)), u && u.value && a.setSeconds(parseInt(u.value, 10));
+      }
+      g(a, this.state.startDate) && (a = new Date(this.state.startDate)), o && b(a, o) && (a = new Date(o));
+    }
+    let r = '<select class="hourselect">';
+    const f = this.options.timePicker24Hour ? 0 : 1, h = this.options.timePicker24Hour ? 23 : 12;
+    for (let s = f; s <= h; s++) {
+      let l = s;
+      this.options.timePicker24Hour || (l = a.getHours() >= 12 ? s === 12 ? 12 : s + 12 : s === 12 ? 0 : s);
+      const m = new Date(a);
+      m.setHours(l), m.setMinutes(59);
+      let u = !1;
+      n && g(m, n) && (u = !0), m.setMinutes(0), o && b(m, o) && (u = !0), l === a.getHours() && !u ? r += `<option value="${s}" selected="selected">${s}</option>` : u ? r += `<option value="${s}" disabled="disabled" class="disabled">${s}</option>` : r += `<option value="${s}">${s}</option>`;
+    }
+    r += "</select> ", r += ': <select class="minuteselect">';
+    for (let s = 0; s < 60; s += this.options.timePickerIncrement) {
+      const l = s < 10 ? "0" + s : s.toString(), m = new Date(a);
+      m.setMinutes(s), m.setSeconds(59);
+      let u = !1;
+      n && g(m, n) && (u = !0), m.setSeconds(0), o && b(m, o) && (u = !0), a.getMinutes() === s && !u ? r += `<option value="${s}" selected="selected">${l}</option>` : u ? r += `<option value="${s}" disabled="disabled" class="disabled">${l}</option>` : r += `<option value="${s}">${l}</option>`;
+    }
+    if (r += "</select> ", this.options.timePickerSeconds) {
+      r += ': <select class="secondselect">';
+      for (let s = 0; s < 60; s++) {
+        const l = s < 10 ? "0" + s : s.toString(), m = new Date(a);
+        m.setSeconds(s);
+        let u = !1;
+        n && g(m, n) && (u = !0), o && b(m, o) && (u = !0), a.getSeconds() === s && !u ? r += `<option value="${s}" selected="selected">${l}</option>` : u ? r += `<option value="${s}" disabled="disabled" class="disabled">${l}</option>` : r += `<option value="${s}">${l}</option>`;
+      }
+      r += "</select> ";
+    }
+    if (!this.options.timePicker24Hour) {
+      r += '<select class="ampmselect">';
+      const s = new Date(a);
+      s.setHours(12, 0, 0);
+      const l = new Date(a);
+      l.setHours(0, 0, 0);
+      let m = "", u = "";
+      n && g(s, n) && (m = ' disabled="disabled" class="disabled"'), o && b(l, o) && (u = ' disabled="disabled" class="disabled"'), a.getHours() >= 12 ? r += `<option value="AM"${m}>AM</option><option value="PM" selected="selected"${u}>PM</option>` : r += `<option value="AM" selected="selected"${m}>AM</option><option value="PM"${u}>PM</option>`, r += "</select>";
+    }
+    const d = e.querySelector(".calendar-time");
+    d.innerHTML = r, d.querySelectorAll("select").forEach((s) => {
+      s.addEventListener("change", this.timeChanged.bind(this));
+    });
+  }
+  timeChanged(t) {
+    const i = t.target.closest(".drp-calendar");
+    if (!i) return;
+    const a = i.classList.contains("left"), n = i, o = n.querySelector(".hourselect"), r = n.querySelector(
+      ".minuteselect"
+    ), f = n.querySelector(
+      ".secondselect"
+    ), h = n.querySelector(".ampmselect");
+    let d = parseInt(o.value, 10), p = parseInt(r.value, 10);
+    if (isNaN(p)) {
+      const l = r.options[r.options.length - 1];
+      p = parseInt(l.value, 10);
+    }
+    const s = this.options.timePickerSeconds && f ? parseInt(f.value, 10) : 0;
+    if (!this.options.timePicker24Hour && h) {
+      const l = h.value;
+      l === "PM" && d < 12 && (d += 12), l === "AM" && d === 12 && (d = 0);
+    }
+    if (a) {
+      const l = new Date(this.state.startDate);
+      l.setHours(d, p, s), this.setStartDate(l), this.options.singleDatePicker ? this.state.endDate = new Date(l) : this.state.endDate && v(this.state.endDate, "YYYY-MM-DD") === v(l, "YYYY-MM-DD") && g(this.state.endDate, l) && this.setEndDate(new Date(l));
+    } else if (this.state.endDate) {
+      const l = new Date(this.state.endDate);
+      l.setHours(d, p, s), this.setEndDate(l);
+    }
+    this.updateCalendars(), this.updateFormInputs(), this.renderTimePicker("left"), this.renderTimePicker("right");
+  }
+  updateElement() {
+    if (this.element.tagName === "INPUT" && this.options.autoUpdateInput) {
+      const t = this.element;
+      let e = v(this.state.startDate, this.locale.format);
+      !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + v(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.dispatchEvent("change"));
+    }
+  }
+  move() {
+    if (!this.state.isShowing || !this.container) return;
+    const t = this.element.getBoundingClientRect();
+    let e, i = this.options.drops;
+    this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed";
+    const a = this.container.offsetWidth, n = this.container.offsetHeight;
+    switch (i) {
+      case "auto":
+        e = t.bottom + 5, e + n >= window.innerHeight && (e = t.top - n - 5, i = "up");
+        break;
+      case "up":
+        e = t.top - n - 5;
+        break;
+      default:
+        e = t.bottom + 5;
+        break;
+    }
+    i === "up" ? this.container.classList.add("drop-up") : this.container.classList.remove("drop-up");
+    let o;
+    this.options.opens === "left" ? (o = t.right - a, o < 9 && (o = 9)) : this.options.opens === "center" ? (o = t.left + t.width / 2 - a / 2, o < 9 ? o = 9 : o + a > window.innerWidth - 9 && (o = window.innerWidth - a - 9)) : (o = t.left, o + a > window.innerWidth - 9 && (o = window.innerWidth - a - 9)), o < 9 && (o = 9), e < 9 && (e = 9), this.container.style.top = `${e}px`, this.container.style.left = `${o}px`, this.container.style.right = "auto", this.container.style.zIndex = "99999";
+  }
+  // Event handlers
+  clickRange(t) {
+    const e = t.target, i = e.dataset.rangeKey;
+    if (!i) return;
+    if (this.container.querySelectorAll(".ranges li").forEach((n) => n.classList.remove("active")), e.classList.add("active"), this.state.chosenLabel = i, i === this.locale.customRangeLabel)
+      this.showCalendars();
+    else {
+      const n = this.options.ranges[i];
+      if (n) {
+        const [o, r] = n;
+        this.state.startDate = new Date(o), this.state.endDate = new Date(r), !this.options.alwaysShowCalendars && Object.keys(this.options.ranges).length === 0 ? this.hideCalendars() : this.showCalendars(), this.updateView(), this.options.autoApply && this.clickApply(t);
+      }
+    }
+  }
+  clickPrev(t) {
+    const i = t.target.closest(".drp-calendar");
+    i && (i.classList.contains("left") ? (this.state.leftCalendar.month = y(
+      this.state.leftCalendar.month,
+      -1
+    ), this.options.linkedCalendars && (this.state.rightCalendar.month = y(
+      this.state.rightCalendar.month,
+      -1
+    ))) : this.state.rightCalendar.month = y(
+      this.state.rightCalendar.month,
+      -1
+    ), this.updateCalendars());
+  }
+  clickNext(t) {
+    const i = t.target.closest(".drp-calendar");
+    i && (i.classList.contains("left") ? this.state.leftCalendar.month = y(
+      this.state.leftCalendar.month,
+      1
+    ) : (this.state.rightCalendar.month = y(
+      this.state.rightCalendar.month,
+      1
+    ), this.options.linkedCalendars && (this.state.leftCalendar.month = y(
+      this.state.leftCalendar.month,
+      1
+    ))), this.updateCalendars());
+  }
+  clickDate(t) {
+    const e = t.target;
+    if (!e.classList.contains("available")) return;
+    const i = e.dataset.date;
+    if (!i) return;
+    const a = C(i, "YYYY-MM-DD");
+    if (S(a)) {
+      if (this.options.timePicker) {
+        const n = e.closest(".drp-calendar");
+        if (n) {
+          const o = n.querySelector(
+            ".hourselect"
+          ), r = n.querySelector(
+            ".minuteselect"
+          ), f = n.querySelector(
+            ".secondselect"
+          ), h = n.querySelector(
+            ".ampmselect"
+          );
+          if (o) {
+            let d = parseInt(o.value, 10);
+            if (!this.options.timePicker24Hour && h) {
+              const p = h.value;
+              p === "PM" && d < 12 && (d += 12), p === "AM" && d === 12 && (d = 0);
+            }
+            a.setHours(d);
+          }
+          if (r) {
+            let d = parseInt(r.value, 10);
+            if (isNaN(d)) {
+              const p = r.options[r.options.length - 1];
+              d = parseInt(p.value, 10);
+            }
+            a.setMinutes(d);
+          }
+          this.options.timePickerSeconds && f && a.setSeconds(parseInt(f.value, 10));
+        }
+      }
+      this.state.hoverDate = null, this.state.endDate || g(a, this.state.startDate) ? (this.state.endDate = null, this.setStartDate(a)) : (this.setEndDate(a), this.options.autoApply && (this.calculateChosenLabel(), this.clickApply(t))), this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.clickApply(t)), this.updateDateClasses();
+    }
+  }
+  hoverDate(t) {
+    const e = t.target;
+    if (!e.classList.contains("available")) return;
+    const i = e.dataset.date;
+    if (!i) return;
+    const a = C(i, "YYYY-MM-DD");
+    S(a) && !this.state.endDate && !g(a, this.state.startDate) && (this.state.hoverDate = a, this.updateDateClasses());
+  }
+  updateDateClasses() {
+    this.container.querySelectorAll("td[data-date]").forEach((e) => {
+      const i = e.dataset.date;
+      if (!i) return;
+      const a = C(i, "YYYY-MM-DD");
+      if (!S(a)) return;
+      e.classList.remove("in-range", "end-date", "start-date", "active");
+      const n = this.state.startDate, o = this.state.endDate, r = this.state.hoverDate;
+      if (n && x(a, n, "day") && e.classList.add("active", "start-date"), o && x(a, o, "day") && e.classList.add("active", "end-date"), n && o && b(a, n) && g(a, o) && e.classList.add("in-range"), n && r && !o) {
+        const f = g(r, n) ? r : n, h = g(r, n) ? n : r;
+        x(a, r, "day") ? e.classList.add("end-date") : b(a, f) && g(a, h) && e.classList.add("in-range");
+      }
+    });
+  }
+  clickApply(t) {
+    this.hide(), this.dispatchEvent("apply.daterangepicker");
+  }
+  clickCancel(t) {
+    this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null, this.hide(), this.dispatchEvent("cancel.daterangepicker");
+  }
+  monthOrYearChanged(t) {
+    const i = t.target.closest(".drp-calendar");
+    if (!i)
+      return;
+    const a = i.classList.contains("left"), n = i.querySelector(
+      ".monthselect"
+    ), o = i.querySelector(
+      ".yearselect"
+    );
+    if (!n || !o)
+      return;
+    const r = parseInt(n.value, 10), f = parseInt(o.value, 10), h = new Date(f, r, 1);
+    a ? (this.state.leftCalendar.month = h, this.options.linkedCalendars && (this.state.rightCalendar.month = y(h, 1))) : (this.state.rightCalendar.month = h, this.options.linkedCalendars && (this.state.leftCalendar.month = y(h, -1))), this.updateCalendars();
+  }
+  elementChanged() {
+    if (this.element.tagName !== "INPUT") return;
+    const t = this.element;
+    if (!t.value || !t.value.length) return;
+    const e = t.value.split(this.locale.separator);
+    let i = null, a = null;
+    e.length === 2 ? (i = C(e[0].trim(), this.locale.format), a = C(e[1].trim(), this.locale.format)) : (this.options.singleDatePicker || e.length === 1) && (i = C(e[0].trim(), this.locale.format), a = i), i && S(i) && a && S(a) && (this.setStartDate(i), this.setEndDate(a), this.updateView());
+  }
+  keydown(t) {
+    (t.key === "Tab" || t.key === "Enter") && this.hide(), t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.hide());
+  }
+  showCalendars() {
+    this.container.classList.add("show-calendar"), this.move(), this.dispatchEvent("showCalendar.daterangepicker");
+  }
+  hideCalendars() {
+    this.container.classList.remove("show-calendar"), this.dispatchEvent("hideCalendar.daterangepicker");
+  }
+  calculateChosenLabel() {
+    let t = !0, e = null;
+    for (const [a, [n, o]] of Object.entries(
+      this.options.ranges
+    )) {
+      const r = x(this.state.startDate, n, "day");
+      let f = !1;
+      if (this.state.endDate ? f = x(this.state.endDate, o, "day") : f = x(this.state.startDate, o, "day"), r && f) {
+        const h = Math.abs(o.getTime() - n.getTime()) / 864e5 + 1;
+        (!e || h > e.days) && (e = { label: a, days: h });
+      }
+    }
+    if (this.container.querySelectorAll(".ranges li").forEach((a) => a.classList.remove("active")), e) {
+      t = !1, this.state.chosenLabel = e.label;
+      const a = this.container.querySelector(
+        `[data-range-key="${e.label}"]`
+      );
+      a && a.classList.add("active");
+    }
+    if (t)
+      if (this.options.showCustomRangeLabel) {
+        this.state.chosenLabel = this.locale.customRangeLabel;
+        const a = this.container.querySelector(
+          `[data-range-key="${this.locale.customRangeLabel}"]`
+        );
+        a && a.classList.add("active");
+      } else
+        this.state.chosenLabel = null;
+    Object.keys(this.options.ranges).length > 0 && this.showCalendars();
+  }
+  // Public API
+  setStartDate(t) {
+    if (!this.options.timePicker)
+      this.state.startDate = M(t);
+    else if (this.state.startDate = new Date(t), this.options.timePickerIncrement) {
+      const e = Math.round(
+        this.state.startDate.getMinutes() / this.options.timePickerIncrement
+      ) * this.options.timePickerIncrement;
+      this.state.startDate.setMinutes(e);
+    }
+    this.updateView();
+  }
+  setEndDate(t) {
+    if (!this.options.timePicker)
+      this.state.endDate = E(t);
+    else if (this.state.endDate = new Date(t), this.options.timePickerIncrement) {
+      const e = Math.round(
+        this.state.endDate.getMinutes() / this.options.timePickerIncrement
+      ) * this.options.timePickerIncrement;
+      this.state.endDate.setMinutes(e);
+    }
+    this.updateView();
+  }
+  getStartDate() {
+    return new Date(this.state.startDate);
+  }
+  getEndDate() {
+    return this.state.endDate ? new Date(this.state.endDate) : null;
+  }
+  remove() {
+    if (this.removeDocumentListeners(), this.container && this.container.dataset.themeStyleId) {
+      const t = document.getElementById(
+        this.container.dataset.themeStyleId
+      );
+      t && t.remove();
+    }
+    this.boundHandlers.forEach((t, e) => {
+    }), this.boundHandlers.clear(), this.container && this.container.parentNode && this.container.parentNode.removeChild(this.container);
+  }
+  updateRanges(t) {
+    if (typeof t == "object") {
+      this.options.ranges = {};
+      for (const [e, i] of Object.entries(t)) {
+        let a, n;
+        typeof i[0] == "string" ? a = C(i[0], this.locale.format) : a = new Date(i[0]), typeof i[1] == "string" ? n = C(i[1], this.locale.format) : n = new Date(i[1]), this.options.minDate && g(a, this.options.minDate) && (a = new Date(this.options.minDate));
+        let o = this.options.maxDate;
+        if (this.options.maxSpan && o) {
+          const r = $(a, this.options.maxSpan.days || 0);
+          b(r, o) && (o = r);
+        }
+        o && b(n, o) && (n = new Date(o)), !(this.options.minDate && g(n, this.options.minDate) || o && b(a, o)) && (this.options.ranges[e] = [a, n]);
+      }
+      this.renderRanges();
+    }
+  }
+  dispatchEvent(t) {
+    const e = new CustomEvent(t, {
+      bubbles: !0,
+      detail: this
+    });
+    this.element.dispatchEvent(e);
+  }
+}
+export {
+  I as BOOTSTRAP_THEME,
+  L as DEFAULT_THEME,
+  q as Datex,
+  T as MATERIAL_THEME,
+  Y as SPANISH_LOCALE,
+  A as SPANISH_LOCALE_WITH_TIME
+};