datex-ui 1.0.7 → 1.1.9

package/dist/index.esm.js

@@ -1,65 +1,77 @@
-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(l, t) {
+  const e = l.getFullYear(), a = String(l.getMonth() + 1).padStart(2, "0"), i = String(l.getDate()).padStart(2, "0"), s = String(l.getHours()).padStart(2, "0"), r = String(l.getMinutes()).padStart(2, "0"), n = String(l.getSeconds()).padStart(2, "0");
+  return t.replace(/YYYY/g, String(e)).replace(/MM/g, a).replace(/DD/g, i).replace(/HH/g, s).replace(/mm/g, r).replace(/ss/g, n);
 }
-function $(c, t) {
-  const e = new Date(c);
-  return e.setDate(e.getDate() + t), e;
-}
-function y(c, t) {
-  const e = new Date(c);
+function f(l, t) {
+  const e = new Date(l);
   return e.setMonth(e.getMonth() + t), e;
 }
-function M(c) {
-  const t = new Date(c);
+function w(l) {
+  const t = new Date(l);
   return t.setHours(0, 0, 0, 0), t;
 }
-function E(c) {
-  const t = new Date(c);
+function S(l) {
+  const t = new Date(l);
   return t.setHours(23, 59, 59, 999), t;
 }
-function b(c, t) {
-  return c.getTime() > t.getTime();
+function k(l, t) {
+  return l.getTime() > t.getTime();
+}
+function g(l, t) {
+  return l.getTime() < t.getTime();
+}
+function u(l, t, e = "day") {
+  if (!l || !t) return !1;
+  switch (e) {
+    case "day":
+      return l.getFullYear() === t.getFullYear() && l.getMonth() === t.getMonth() && l.getDate() === t.getDate();
+    case "month":
+      return l.getFullYear() === t.getFullYear() && l.getMonth() === t.getMonth();
+    case "year":
+      return l.getFullYear() === t.getFullYear();
+    default:
+      return !1;
+  }
 }
-function g(c, t) {
-  return c.getTime() < t.getTime();
+function y(l) {
+  return l instanceof Date && !isNaN(l.getTime());
 }
-function C(c, t) {
-  if (t === "YYYY-MM-DD")
-    return new Date(c);
+function b(l, t) {
+  if (t === "YYYY-MM-DD") {
+    const e = l.split("-");
+    if (e.length === 3) {
+      const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, s = parseInt(e[2], 10);
+      return new Date(a, i, s);
+    }
+    return new Date(l);
+  }
   if (t === "DD/MM/YYYY") {
-    const e = c.split("/");
+    const e = l.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);
+      const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, s = parseInt(e[2], 10);
+      return new Date(s, i, a);
     }
   }
   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);
+    const [e, a] = l.split(" "), i = e.split("/"), s = a ? a.split(":") : ["0", "0"];
+    if (i.length === 3) {
+      const r = parseInt(i[0], 10), n = parseInt(i[1], 10) - 1, o = parseInt(i[2], 10), c = parseInt(s[0], 10) || 0, d = parseInt(s[1], 10) || 0;
+      return new Date(o, n, r, c, d);
     }
   }
-  return new Date(c);
+  return new Date(l);
 }
-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 x(l) {
+  return new Date(l.getFullYear(), l.getMonth(), 1);
 }
-function S(c) {
-  return c instanceof Date && !isNaN(c.getTime());
+function L(l) {
+  return new Date(l.getFullYear(), l.getMonth() + 1, 0);
 }
-const L = {
+function $(l, t = 1) {
+  const a = (l.getDay() - t + 7) % 7, i = new Date(l);
+  return i.setDate(l.getDate() - a), i;
+}
+const E = {
   primaryColor: "#357ebd",
   secondaryColor: "#ccc",
   backgroundColor: "#ffffff",
@@ -75,7 +87,7 @@ const L = {
   borderRadius: "4px",
   fontSize: "15px",
   fontFamily: "arial"
-}, I = {
+}, B = {
   primaryColor: "#0d6efd",
   secondaryColor: "#6c757d",
   backgroundColor: "#ffffff",
@@ -91,7 +103,7 @@ const L = {
   borderRadius: "6px",
   fontSize: "14px",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-}, T = {
+}, R = {
   primaryColor: "#1976d2",
   secondaryColor: "#757575",
   backgroundColor: "#ffffff",
@@ -107,86 +119,81 @@ const L = {
   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();
+class T {
+  constructor(t, e = E) {
+    this.mode = "light", this.handleMediaChange = () => {
+      this.mode === "auto" && this.applyTheme();
+    }, this.container = t, this.theme = { ...E, ...e }, this.setupMediaQueryListener();
   }
   applyTheme() {
-    if (!this.container)
-      return;
-    const t = this.container.dataset.themeStyleId;
-    if (t) {
-      const a = document.getElementById(t);
-      a && a.remove();
+    this.removeExistingStyles(), this.createAndApplyStyles(), this.forceReflow();
+  }
+  setTheme(t) {
+    this.theme = { ...E, ...t }, this.applyTheme();
+  }
+  setMode(t) {
+    this.mode = t, this.applyTheme();
+  }
+  getMode() {
+    return this.mode;
+  }
+  getCurrentMode() {
+    var t;
+    return this.mode === "auto" ? (t = this.mediaQuery) != null && t.matches ? "dark" : "light" : this.mode === "dark" ? "dark" : "light";
+  }
+  cleanup() {
+    this.removeExistingStyles(), this.mediaQuery && this.mediaQuery.removeEventListener("change", this.handleMediaChange);
+  }
+  setupMediaQueryListener() {
+    this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"), this.mediaQuery.addEventListener("change", this.handleMediaChange);
+  }
+  getThemeForMode() {
+    return this.getCurrentMode() === "dark" ? {
+      ...this.theme,
+      backgroundColor: "#1f2937",
+      // Fondo oscuro
+      borderColor: "#4b5563",
+      // Bordes grises oscuros
+      textColor: "#f9fafb",
+      // Texto blanco/claro
+      hoverColor: "#4b5563",
+      // Hover gris más claro para mejor contraste
+      // Mantener colores originales del tema para selected, range, etc.
+      selectedColor: this.theme.selectedColor,
+      // Mantener color original
+      rangeColor: this.theme.rangeColor,
+      // Mantener color original
+      todayColor: this.theme.todayColor,
+      // Mantener color original
+      disabledColor: "#6b7280",
+      // Gris para deshabilitado
+      applyButtonColor: this.theme.applyButtonColor,
+      // Mantener color original
+      cancelButtonColor: this.theme.cancelButtonColor
+      // Mantener color original
+    } : this.theme;
+  }
+  removeExistingStyles() {
+    if (this.styleId) {
+      const t = document.getElementById(this.styleId);
+      t == null || t.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;
+  }
+  createAndApplyStyles() {
+    this.styleId = this.generateStyleId();
+    const t = document.createElement("style");
+    t.id = this.styleId, t.textContent = this.generateThemeCSS(), document.head.appendChild(t), this.container.dataset.themeStyleId = this.styleId;
+  }
+  generateStyleId() {
+    return "daterangepicker-theme-" + Math.random().toString(36).slice(2, 9);
+  }
+  forceReflow() {
+    this.container.offsetHeight;
   }
   generateThemeCSS() {
-    const t = this.theme;
-    return `
+    const t = this.getThemeForMode(), e = this.getCurrentMode();
+    return this.container.classList.remove("datex-light", "datex-dark"), this.container.classList.add(`datex-${e}`), `
       .datex-picker {
         background-color: ${t.backgroundColor} !important;
         border: 1px solid ${t.borderColor} !important;
@@ -199,7 +206,26 @@ class q {
         z-index: 3001 !important;
       }
 
-      /* IMPORTANTE: Permitir interacción con selectores */
+      .datex-picker.single {
+        width: 230px !important;
+      }
+
+      .datex-picker.single .drp-calendar.right {
+        display: none !important;
+      }
+
+      .datex-picker.single .drp-calendar.left {
+        float: none !important;
+        clear: none !important;
+      }
+
+      .datex-picker.single .drp-calendar.left .calendar-table {
+        border-right: 1px solid ${t.borderColor} !important;
+        border-top-right-radius: ${t.borderRadius} !important;
+        border-bottom-right-radius: ${t.borderRadius} !important;
+        padding-right: 8px !important;
+      }
+
       .datex-picker select,
       .datex-picker select * {
         user-select: auto !important;
@@ -253,12 +279,13 @@ class q {
       .datex-picker .calendar-table th.month {
         color: ${t.textColor} !important;
         width: auto !important;
+        pointer-events: auto !important;
       }
 
       .datex-picker .calendar-table .next span,
       .datex-picker .calendar-table .prev span {
         color: #fff !important;
-        border: solid black !important;
+        border: solid ${e === "dark" ? t.textColor : "black"} !important;
         border-width: 0 2px 2px 0 !important;
         border-radius: 0 !important;
         display: inline-block !important;
@@ -285,13 +312,18 @@ class q {
 
       .datex-picker .calendar-table .next:hover,
       .datex-picker .calendar-table .prev:hover {
-        background-color: #f0f0f0 !important;
+        background-color: ${e === "dark" ? t.hoverColor : "#f0f0f0"} !important;
       }
 
       .datex-picker td.available:hover,
       .datex-picker th.available:hover {
-        background-color: #eee !important;
+        background-color: ${e === "dark" ? "#4b5563" : "#eee"} !important;
         border-color: transparent !important;
+        color: ${e === "dark" ? "#ffffff" : "#000000"} !important;
+      }
+
+      .datex-picker td.available,
+      .datex-picker th.available {
         color: ${t.textColor} !important;
       }
 
@@ -311,21 +343,21 @@ class q {
       }
 
       .datex-picker td.in-range {
-        background-color: #ebf4f8 !important;
+        background-color: ${t.rangeColor} !important;
         border-color: transparent !important;
-        color: #000 !important;
+        color: #000000 !important;
         border-radius: 0 !important;
       }
 
       .datex-picker td.start-date {
         border-radius: 3px 0 0 3px !important;
-        background-color: #357ebd !important;
+        background-color: ${t.selectedColor} !important;
         color: #fff !important;
       }
 
       .datex-picker td.end-date {
         border-radius: 0 3px 3px 0 !important;
-        background-color: #357ebd !important;
+        background-color: ${t.selectedColor} !important;
         color: #fff !important;
       }
 
@@ -335,7 +367,7 @@ class q {
 
       .datex-picker td.active,
       .datex-picker td.active:hover {
-        background-color: #357ebd !important;
+        background-color: ${t.selectedColor} !important;
         border-color: transparent !important;
         color: #fff !important;
       }
@@ -404,7 +436,7 @@ class q {
       .datex-picker .drp-buttons {
         clear: both !important;
         text-align: right !important;
-        padding: 2px !important;
+        padding: 8px !important;
         border-top: 1px solid ${t.borderColor} !important;
         display: none !important;
         line-height: 10px !important;
@@ -454,15 +486,6 @@ class q {
         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;
@@ -474,24 +497,18 @@ class q {
         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;
       }
 
@@ -529,13 +546,12 @@ class q {
 
       .datex-picker .calendar-time {
         text-align: center !important;
-        margin: 4px auto 0 auto !important;
-        line-height: 30px !important;
+        margin: 0 auto !important;
+        line-height: 24px !important;
         position: relative !important;
         display: block !important;
         background: ${t.backgroundColor} !important;
-        padding: 8px !important;
-        border-top: 1px solid ${t.borderColor} !important;
+        padding: 4px 8px !important;
       }
 
       .datex-picker .calendar-time select.disabled {
@@ -560,7 +576,6 @@ class q {
         color: #fff !important;
       }
 
-      /* Media queries para responsive - exactamente como el CSS original */
       @media (min-width: 564px) {
         .datex-picker {
           width: auto !important;
@@ -614,703 +629,1263 @@ class q {
       }
     `;
   }
-  // Public method to change theme dynamically
-  setTheme(t) {
-    this.theme = { ...L, ...t }, this.applyTheme();
+}
+class A {
+  constructor() {
+    this.boundHandlers = /* @__PURE__ */ new Map();
+  }
+  addEventHandler(t, e, a) {
+    const i = `${e}_${Math.random()}`;
+    this.boundHandlers.set(i, a), t.addEventListener(e, a);
+  }
+  setDocumentListeners(t, e) {
+    this.documentClickHandler = t, this.documentFocusHandler = e, document.addEventListener("mousedown", this.documentClickHandler, !0), document.addEventListener("focusin", this.documentFocusHandler, !0);
+  }
+  setWindowListeners(t, e) {
+    this.resizeHandler = t, this.scrollHandler = e, window.addEventListener("resize", this.resizeHandler), window.addEventListener("scroll", this.scrollHandler, !0);
+  }
+  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);
   }
-  // Public method to force theme reapplication
-  refreshTheme() {
-    this.applyTheme();
+  removeWindowListeners() {
+    this.resizeHandler && (window.removeEventListener("resize", this.resizeHandler), this.resizeHandler = void 0), this.scrollHandler && (window.removeEventListener("scroll", this.scrollHandler, !0), this.scrollHandler = void 0);
   }
-  // Debug method to check current theme
-  getCurrentTheme() {
-    return this.theme;
+  cleanup() {
+    this.removeDocumentListeners(), this.removeWindowListeners(), this.boundHandlers.clear();
   }
-  // Debug method to test dropdowns
-  testDropdowns() {
-    this.container.querySelectorAll("select").forEach((e, i) => {
-      e.addEventListener("click", () => {
-      }), e.click();
+  dispatchEvent(t, e, a) {
+    const i = new CustomEvent(e, {
+      bubbles: !0,
+      detail: a
     });
+    t.dispatchEvent(i);
   }
-  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;
+}
+class F {
+  constructor(t, e, a) {
+    this.element = t, this.container = e, this.options = a;
   }
-  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";
+  calculatePosition() {
+    if (!this.container) return;
+    (window.innerWidth <= 768 || "ontouchstart" in window) && this.container.classList.contains("touch-enabled") ? this.positionForMobile() : this.positionForDesktop();
   }
-  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;
+  positionForMobile() {
+    this.container.style.position = "fixed", this.container.style.bottom = "0", this.container.style.left = "0", this.container.style.right = "0", this.container.style.top = "auto", this.container.style.width = "100%", this.container.style.maxWidth = "100vw", this.container.style.borderRadius = "16px 16px 0 0", this.container.style.zIndex = "99999", this.container.classList.add("drop-up");
   }
-  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);
+  positionForDesktop() {
+    const t = this.element.getBoundingClientRect();
+    this.resetContainerPosition();
+    const e = this.container.offsetWidth, a = this.container.offsetHeight, { top: i, drops: s } = this.calculateVerticalPosition(
+      t,
+      a
+    ), r = this.calculateHorizontalPosition(
+      t,
+      e
+    );
+    this.applyDropUpClass(s), this.applyFinalPosition(i, r);
   }
-  addEventHandler(t, e, i) {
-    const a = `${e}_${Math.random()}`;
-    this.boundHandlers.set(a, i), t.addEventListener(e, i);
+  resetContainerPosition() {
+    this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed";
   }
-  containerChange(t) {
-    if (t.target.matches("select.monthselect, select.yearselect")) {
-      this.monthOrYearChanged(t);
-      return;
+  calculateVerticalPosition(t, e) {
+    let a, i = this.options.drops;
+    switch (i) {
+      case "auto":
+        a = t.bottom + 5, a + e >= window.innerHeight && (a = t.top - e - 5, i = "up");
+        break;
+      case "up":
+        a = t.top - e - 5;
+        break;
+      default:
+        a = t.bottom + 5;
+        break;
     }
+    return { top: Math.max(9, a), drops: i };
   }
-  containerMouseOver(t) {
-    if (t.target.matches("td.available")) {
-      this.hoverDate(t);
-      return;
+  calculateHorizontalPosition(t, e) {
+    let a;
+    switch (this.options.opens) {
+      case "left":
+        a = t.right - e;
+        break;
+      case "center":
+        a = t.left + t.width / 2 - e / 2;
+        break;
+      default:
+        a = t.left;
+        break;
     }
+    return a < 9 ? a = 9 : a + e > window.innerWidth - 9 && (a = window.innerWidth - e - 9), a;
   }
-  containerMouseLeave() {
-    this.state.hoverDate && (this.state.hoverDate = null, this.updateDateClasses());
+  applyDropUpClass(t) {
+    t === "up" ? this.container.classList.add("drop-up") : this.container.classList.remove("drop-up");
   }
-  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;
+  applyFinalPosition(t, e) {
+    this.container.style.top = `${t}px`, this.container.style.left = `${e}px`, this.container.style.right = "auto", this.container.style.zIndex = "99999";
+  }
+}
+class H {
+  constructor(t, e) {
+    this.options = t, this.locale = e;
+  }
+  buildCalendarMatrix(t) {
+    const e = x(t), a = $(e, this.locale.firstDay), i = [];
+    let s = [];
+    const r = new Date(a);
+    for (let n = 0; n < 42; n++) {
+      n > 0 && n % 7 === 0 && (i.push(s), s = []);
+      const o = new Date(r);
+      o.setDate(r.getDate() + n), s.push(o);
+    }
+    return s.length > 0 && i.push(s), i;
+  }
+  renderCalendarHTML(t, e, a, i, s, r) {
+    const n = t.month, o = n.getFullYear(), c = n.getMonth();
+    let d = '<table class="table-condensed">';
+    return d += this.renderHeader(e, c, o, s, r), d += this.renderDayHeaders(), d += this.renderCalendarBody(
+      t.calendar,
+      n,
+      a,
+      i
+    ), d += "</table>", this.options.timePicker && (d += this.renderTimeControls(
+      e === "left" ? a : i || a
+    )), d;
+  }
+  renderTimeControls(t) {
+    let e = '<div class="calendar-time">';
+    e += '<select class="hourselect">';
+    const a = this.options.timePicker24Hour, i = a ? 23 : 12, s = a ? 0 : 1;
+    for (let n = s; n <= i; n++) {
+      const o = a ? n : n === 0 ? 12 : n, c = String(o).padStart(2, "0"), d = a ? t.getHours() : t.getHours() % 12 || 12;
+      let m = !1;
+      if (this.options.minDate || this.options.maxDate) {
+        const D = new Date(t), M = a ? o : t.getHours() >= 12 ? o === 12 ? 12 : o + 12 : o === 12 ? 0 : o;
+        if (D.setHours(M), this.options.minDate) {
+          const v = new Date(D);
+          v.setMinutes(59), v < this.options.minDate && (m = !0);
+        }
+        if (this.options.maxDate) {
+          const v = new Date(D);
+          v.setMinutes(0), v > this.options.maxDate && (m = !0);
+        }
       }
-      if (e.matches(".prev")) {
-        this.clickPrev(t);
-        return;
+      e += `<option value="${o}"${o === d && !m ? ' selected="selected"' : ""}${m ? ' disabled="disabled" class="disabled"' : ""}>${c}</option>`;
+    }
+    e += "</select>", e += " : ", e += '<select class="minuteselect">';
+    const r = this.options.timePickerIncrement || 1;
+    for (let n = 0; n < 60; n += r) {
+      const o = String(n).padStart(2, "0");
+      let c = !1;
+      if (this.options.minDate || this.options.maxDate) {
+        const p = new Date(t);
+        if (p.setMinutes(n), this.options.minDate) {
+          const h = new Date(p);
+          h.setSeconds(59), h < this.options.minDate && (c = !0);
+        }
+        if (this.options.maxDate) {
+          const h = new Date(p);
+          h.setSeconds(0), h > this.options.maxDate && (c = !0);
+        }
       }
-      if (e.matches(".next")) {
-        this.clickNext(t);
-        return;
+      const d = n === t.getMinutes() && !c ? ' selected="selected"' : "";
+      e += `<option value="${n}"${d}${c ? ' disabled="disabled" class="disabled"' : ""}>${o}</option>`;
+    }
+    if (e += "</select>", this.options.timePickerSeconds) {
+      e += " : ", e += '<select class="secondselect">';
+      for (let n = 0; n < 60; n++) {
+        const o = String(n).padStart(2, "0");
+        let c = !1;
+        if (this.options.minDate || this.options.maxDate) {
+          const p = new Date(t);
+          p.setSeconds(n), this.options.minDate && p < this.options.minDate && (c = !0), this.options.maxDate && p > this.options.maxDate && (c = !0);
+        }
+        const d = n === t.getSeconds() && !c ? ' selected="selected"' : "";
+        e += `<option value="${n}"${d}${c ? ' disabled="disabled" class="disabled"' : ""}>${o}</option>`;
       }
-      if (e.matches("td.available")) {
-        this.clickDate(t);
-        return;
+      e += "</select>";
+    }
+    if (!a) {
+      e += " ", e += '<select class="ampmselect">';
+      const n = t.getHours() < 12;
+      let o = !1, c = !1;
+      if (this.options.minDate || this.options.maxDate) {
+        const p = new Date(t);
+        p.setHours(6, 0, 0);
+        const h = new Date(t);
+        h.setHours(18, 0, 0), this.options.minDate && p < this.options.minDate && (o = !0), this.options.maxDate && h > this.options.maxDate && (c = !0);
+      }
+      const d = o ? ' disabled="disabled" class="disabled"' : "", m = c ? ' disabled="disabled" class="disabled"' : "";
+      e += `<option value="AM"${n ? ' selected="selected"' : ""}${d}>AM</option>`, e += `<option value="PM"${n ? "" : ' selected="selected"'}${m}>PM</option>`, e += "</select>";
+    }
+    return e += "</div>", e;
+  }
+  renderHeader(t, e, a, i, s) {
+    let r = "<thead><tr>";
+    i && (!this.options.linkedCalendars || t === "left") ? r += '<th class="prev available"><span></span></th>' : r += "<th></th>";
+    let n = this.locale.monthNames[e] + " " + a;
+    return this.options.showDropdowns && (n = this.renderDropdowns(e, a)), r += `<th colspan="5" class="month">${n}</th>`, s && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? r += '<th class="next available"><span></span></th>' : r += "<th></th>", r += "</tr>", r;
+  }
+  renderDayHeaders() {
+    let t = "<tr>";
+    for (const e of this.locale.daysOfWeek)
+      t += `<th>${e}</th>`;
+    return t += "</tr></thead>", t;
+  }
+  renderCalendarBody(t, e, a, i) {
+    let s = "<tbody>";
+    for (const r of t) {
+      s += "<tr>";
+      for (const n of r) {
+        const o = this.getDayClasses(
+          n,
+          e,
+          a,
+          i
+        ), c = o.includes("disabled"), d = o.join(" ") + (c ? "" : " available");
+        s += `<td class="${d}" data-date="${C(
+          n,
+          "YYYY-MM-DD"
+        )}">${n.getDate()}</td>`;
       }
+      s += "</tr>";
     }
+    return s += "</tbody>", s;
   }
-  preventBlur(t) {
-    const e = t.target;
-    e.tagName === "SELECT" || e.closest("select") || t.preventDefault();
+  renderDropdowns(t, e) {
+    const { minYear: a, maxYear: i } = this.calculateYearRange(e), s = this.renderMonthDropdown(
+      t,
+      e,
+      a,
+      i
+    ), r = this.renderYearDropdown(e, a, i);
+    return s + " " + r;
   }
-  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);
+  calculateYearRange(t) {
+    let e = this.options.minYear, a = this.options.maxYear;
+    return this.options.minDate && (e = Math.max(e, this.options.minDate.getFullYear())), this.options.maxDate && (a = Math.min(a, this.options.maxDate.getFullYear())), { minYear: e, maxYear: a };
   }
-  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);
+  renderMonthDropdown(t, e, a, i) {
+    const s = e === a, r = e === i;
+    let n = '<select class="monthselect">';
+    for (let o = 0; o < 12; o++) {
+      let c = !1;
+      s && this.options.minDate && o < this.options.minDate.getMonth() && (c = !0), r && this.options.maxDate && o > this.options.maxDate.getMonth() && (c = !0), n += `<option value="${o}"${o === t ? ' selected="selected"' : ""}${c ? ' disabled="disabled"' : ""}>${this.locale.monthNames[o]}</option>`;
+    }
+    return n += "</select>", n;
   }
-  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);
+  renderYearDropdown(t, e, a) {
+    let i = '<select class="yearselect">';
+    for (let s = e; s <= a; s++)
+      i += `<option value="${s}"${s === t ? ' selected="selected"' : ""}>${s}</option>`;
+    return i += "</select>", i;
   }
-  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"));
+  getDayClasses(t, e, a, i) {
+    const s = [];
+    return u(t, /* @__PURE__ */ new Date(), "day") && s.push("today"), (t.getDay() === 0 || t.getDay() === 6) && s.push("weekend"), t.getMonth() !== e.getMonth() && s.push("off", "ends"), this.options.minDate && g(t, w(this.options.minDate)) && s.push("off", "disabled"), this.options.maxDate && k(t, S(this.options.maxDate)) && s.push("off", "disabled"), u(t, a, "day") && s.push("active", "start-date"), i && u(t, i, "day") && s.push("active", "end-date"), i && k(t, a) && g(t, i) && s.push("in-range"), s;
   }
-  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);
+  canNavigatePrevious(t) {
+    return !this.options.minDate || k(x(t), this.options.minDate);
   }
-  toggle() {
-    this.state.isShowing ? this.hide() : this.show();
+  canNavigateNext(t) {
+    return !this.options.maxDate || g(L(t), this.options.maxDate);
   }
-  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();
+}
+class I {
+  constructor(t = {}) {
+    this.validation = t;
   }
-  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
-    ));
+  updateValidation(t) {
+    this.validation = { ...this.validation, ...t };
   }
-  getStartOfMonth(t) {
-    return new Date(t.getFullYear(), t.getMonth(), 1);
+  validateDate(t) {
+    var e, a, i;
+    return (e = this.validation.disabledDates) != null && e.some((s) => this.isSameDate(s, t)) ? {
+      isValid: !1,
+      error: "Esta fecha está deshabilitada",
+      errorCode: "DISABLED_DATE"
+    } : (a = this.validation.disabledDaysOfWeek) != null && a.includes(t.getDay()) ? {
+      isValid: !1,
+      error: `Los ${[
+        "Domingo",
+        "Lunes",
+        "Martes",
+        "Miércoles",
+        "Jueves",
+        "Viernes",
+        "Sábado"
+      ][t.getDay()]}s están deshabilitados`,
+      errorCode: "DISABLED_DAY_OF_WEEK"
+    } : this.validation.businessDaysOnly && this.isWeekend(t) ? {
+      isValid: !1,
+      error: "Solo se permiten días laborables",
+      errorCode: "BUSINESS_DAYS_ONLY"
+    } : (i = this.validation.holidays) != null && i.some((s) => this.isSameDate(s, t)) ? {
+      isValid: !1,
+      error: "Los días festivos están deshabilitados",
+      errorCode: "HOLIDAY_DISABLED"
+    } : this.validation.enabledDateRanges && !this.isDateInEnabledRanges(t) ? {
+      isValid: !1,
+      error: "Esta fecha está fuera de los rangos permitidos",
+      errorCode: "OUTSIDE_ENABLED_RANGE"
+    } : this.validation.customValidator && !this.validation.customValidator(t) ? {
+      isValid: !1,
+      error: "Esta fecha no cumple con los criterios personalizados",
+      errorCode: "CUSTOM_VALIDATION_FAILED"
+    } : { isValid: !0 };
   }
-  getEndOfMonth(t) {
-    return new Date(t.getFullYear(), t.getMonth() + 1, 0);
+  validateDateRange(t, e) {
+    const a = this.validateDate(t);
+    if (!a.isValid)
+      return a;
+    const i = this.validateDate(e);
+    return i.isValid ? this.validation.minDaysBetween && this.getDaysBetween(t, e) < this.validation.minDaysBetween ? {
+      isValid: !1,
+      error: `Debe haber al menos ${this.validation.minDaysBetween} días entre las fechas`,
+      errorCode: "MIN_DAYS_BETWEEN"
+    } : this.validation.maxDaysBetween && this.getDaysBetween(t, e) > this.validation.maxDaysBetween ? {
+      isValid: !1,
+      error: `No puede haber más de ${this.validation.maxDaysBetween} días entre las fechas`,
+      errorCode: "MAX_DAYS_BETWEEN"
+    } : { isValid: !0 } : i;
   }
-  getStartOfWeek(t, e = 1) {
-    const a = (t.getDay() - e + 7) % 7, n = new Date(t);
-    return n.setDate(t.getDate() - a), n;
+  // Utility methods
+  isSameDate(t, e) {
+    return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
   }
-  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);
+  isWeekend(t) {
+    const e = t.getDay();
+    return e === 0 || e === 6;
   }
-  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>";
+  getDaysBetween(t, e) {
+    const a = e.getTime() - t.getTime();
+    return Math.ceil(a / (1e3 * 3600 * 24));
+  }
+  isDateInEnabledRanges(t) {
+    return this.validation.enabledDateRanges ? this.validation.enabledDateRanges.some(([e, a]) => t >= e && t <= a) : !0;
+  }
+  // Public utility methods
+  getBusinessDays(t, e) {
+    let a = 0;
+    const i = new Date(t);
+    for (; i <= e; )
+      this.isWeekend(i) || a++, i.setDate(i.getDate() + 1);
+    return a;
+  }
+  addBusinessDays(t, e) {
+    const a = new Date(t);
+    let i = 0;
+    for (; i < e; )
+      a.setDate(a.getDate() + 1), this.isWeekend(a) || i++;
+    return a;
+  }
+  isHoliday(t) {
+    var e;
+    return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
+  }
+}
+class P {
+  constructor(t, e = {}) {
+    this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
+      enabled: !0,
+      shortcuts: {
+        today: "t",
+        clear: "c",
+        close: "Escape",
+        apply: "Enter",
+        cancel: "Escape",
+        ...e.shortcuts
+      },
+      ...e
+    }, this.options.enabled && this.setupKeyboardEvents();
+  }
+  setHandlers(t) {
+    this.onDateSelect = t.onDateSelect, this.onClose = t.onClose, this.onApply = t.onApply, this.onToday = t.onToday, this.onClear = t.onClear;
+  }
+  activate(t) {
+    this.isActive = !0, this.currentFocusedDate = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date(), setTimeout(() => {
+      this.isActive && this.updateFocusedDate();
+    }, 100), this.container.focus({ preventScroll: !0 });
+  }
+  deactivate() {
+    this.isActive = !1, this.currentFocusedDate = null, this.removeFocusStyles();
+  }
+  setupKeyboardEvents() {
+    this.container.setAttribute("tabindex", "0"), this.container.addEventListener("keydown", this.handleKeyDown.bind(this)), this.container.addEventListener("focus", this.handleFocus.bind(this)), this.container.addEventListener("blur", this.handleBlur.bind(this));
+  }
+  handleKeyDown(t) {
+    var r, n, o, c;
+    if (!this.isActive || !this.currentFocusedDate) return;
+    const { key: e, ctrlKey: a, shiftKey: i, altKey: s } = t;
+    switch (e) {
+      case "ArrowLeft":
+        t.preventDefault(), this.navigateDate(-1);
+        break;
+      case "ArrowRight":
+        t.preventDefault(), this.navigateDate(1);
+        break;
+      case "ArrowUp":
+        t.preventDefault(), this.navigateDate(-7);
+        break;
+      case "ArrowDown":
+        t.preventDefault(), this.navigateDate(7);
+        break;
+      case "Home":
+        t.preventDefault(), this.navigateToStartOfWeek();
+        break;
+      case "End":
+        t.preventDefault(), this.navigateToEndOfWeek();
+        break;
+      case "PageUp":
+        t.preventDefault(), this.navigateMonth(i ? -12 : -1);
+        break;
+      case "PageDown":
+        t.preventDefault(), this.navigateMonth(i ? 12 : 1);
+        break;
     }
-    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>`;
+    switch (e) {
+      case "Enter":
+      case " ":
+        if (t.preventDefault(), this.currentFocusedDate && this.onDateSelect) {
+          const d = new Date(this.currentFocusedDate.getTime());
+          console.log("=== KEYBOARD DEBUG ==="), console.log("Original focused date:", this.currentFocusedDate), console.log(
+            "Original focused day:",
+            this.currentFocusedDate.getDate()
+          ), console.log("Copy to select:", d), console.log("Copy day:", d.getDate()), console.log(
+            "Are they equal?",
+            this.currentFocusedDate.getTime() === d.getTime()
+          ), console.log("======================"), this.onDateSelect(d);
+        }
+        break;
+      case "Escape":
+        t.preventDefault(), this.onClose && this.onClose();
+        break;
     }
-    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;
+    if (!a && !s)
+      switch (e.toLowerCase()) {
+        case ((n = (r = this.options.shortcuts) == null ? void 0 : r.today) == null ? void 0 : n.toLowerCase()):
+          t.preventDefault(), this.onToday && this.onToday();
+          break;
+        case ((c = (o = this.options.shortcuts) == null ? void 0 : o.clear) == null ? void 0 : c.toLowerCase()):
+          t.preventDefault(), this.onClear && this.onClear();
+          break;
+      }
+    if (a && !s && !i)
+      switch (e.toLowerCase()) {
+        case "enter":
+          t.preventDefault(), this.onApply && this.onApply();
+          break;
+      }
   }
-  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;
+  handleFocus() {
+    this.isActive || (this.isActive = !0, this.currentFocusedDate = this.currentFocusedDate || /* @__PURE__ */ new Date(), setTimeout(() => {
+      this.isActive && this.updateFocusedDate();
+    }, 150));
   }
-  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;
+  handleBlur() {
+    setTimeout(() => {
+      this.container.contains(document.activeElement) || this.deactivate();
+    }, 100);
   }
-  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;
+  navigateDate(t) {
+    if (!this.currentFocusedDate) return;
+    const e = new Date(this.currentFocusedDate.getTime());
+    e.setDate(e.getDate() + t), this.currentFocusedDate = e, this.updateFocusedDate();
   }
-  renderTimePicker(t) {
-    if (t === "right" && !this.state.endDate) return;
+  navigateMonth(t) {
+    if (!this.currentFocusedDate) return;
+    const e = new Date(this.currentFocusedDate.getTime());
+    e.setMonth(e.getMonth() + t), this.currentFocusedDate = e, this.updateFocusedDate();
+  }
+  navigateToStartOfWeek() {
+    if (!this.currentFocusedDate) return;
+    const t = new Date(this.currentFocusedDate.getTime()), e = t.getDay();
+    t.setDate(t.getDate() - e), this.currentFocusedDate = t, this.updateFocusedDate();
+  }
+  navigateToEndOfWeek() {
+    if (!this.currentFocusedDate) return;
+    const t = new Date(this.currentFocusedDate.getTime()), e = t.getDay();
+    t.setDate(t.getDate() + (6 - e)), this.currentFocusedDate = t, this.updateFocusedDate();
+  }
+  updateFocusedDate() {
+    if (!this.currentFocusedDate) return;
+    this.removeFocusStyles();
+    const t = this.formatDateForSelector(this.currentFocusedDate);
+    console.log("Keyboard: Looking for cell with data-date:", t), console.log(
+      "Keyboard: Current focused date:",
+      this.currentFocusedDate.toDateString()
+    );
     const e = this.container.querySelector(
-      `.drp-calendar.${t}`
+      `[data-date="${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));
+    if (e) {
+      if (console.log("Keyboard: Found cell, text content:", e.textContent), e.classList.add("keyboard-focused"), e.setAttribute("aria-selected", "true"), this.isActive && this.container.offsetParent !== null) {
+        const a = this.container.getBoundingClientRect(), i = e.getBoundingClientRect();
+        (i.top < a.top || i.bottom > a.bottom || i.left < a.left || i.right > a.right) && e.scrollIntoView({
+          block: "nearest",
+          inline: "nearest",
+          behavior: "smooth"
+        });
+      }
+    } else
+      console.log("Keyboard: Cell not found for date:", t);
+    this.addFocusStyles();
+  }
+  removeFocusStyles() {
+    this.container.querySelectorAll(".keyboard-focused").forEach((e) => {
+      e.classList.remove("keyboard-focused"), e.removeAttribute("aria-selected");
+    });
+  }
+  addFocusStyles() {
+    if (this.container.querySelector(".keyboard-focus-styles")) return;
+    const t = document.createElement("style");
+    t.className = "keyboard-focus-styles", t.textContent = `
+      .datex-picker .calendar-table td.keyboard-focused {
+        outline: 2px solid #10b981 !important;
+        outline-offset: -2px !important;
+        z-index: 10 !important;
+        position: relative !important;
+        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
       }
-      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>";
+      
+      .datex-picker .calendar-table td.keyboard-focused > * {
+        background: #10b981 !important;
+        color: white !important;
+        font-weight: 600 !important;
+      }
+      
+      /* Prevent layout shifts */
+      .datex-picker {
+        contain: layout style !important;
+      }
+      
+      .datex-picker .calendar-table {
+        contain: layout !important;
+      }
+    `, document.head.appendChild(t);
+  }
+  formatDateForSelector(t) {
+    const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0"), s = `${e}-${a}-${i}`;
+    return console.log(
+      "Keyboard: Formatting date for selector:",
+      t.toDateString(),
+      "-> formatted:",
+      s
+    ), s;
+  }
+  // Public methods
+  getCurrentFocusedDate() {
+    return this.currentFocusedDate ? new Date(this.currentFocusedDate.getTime()) : null;
+  }
+  setFocusedDate(t) {
+    this.currentFocusedDate = new Date(t.getTime()), this.updateFocusedDate();
+  }
+  cleanup() {
+    this.container.removeEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this)
+    ), this.container.removeEventListener("focus", this.handleFocus.bind(this)), this.container.removeEventListener("blur", this.handleBlur.bind(this)), this.removeFocusStyles();
+    const t = document.querySelector(".keyboard-focus-styles");
+    t && t.remove();
+  }
+}
+const 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
+}, V = {
+  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
+};
+class O {
+  constructor(t, e = {}, a) {
+    this.element = this.resolveElement(t), this.options = this.mergeWithDefaults(e), this.locale = this.options.locale, this.callback = a || (() => {
+    }), this.eventService = new A(), this.initializeState(), this.initializeServices(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
+  }
+  resolveElement(t) {
+    if (typeof t == "string") {
+      const e = t.startsWith("#") ? document.getElementById(t.slice(1)) : document.querySelector(t) || document.getElementById(t);
+      if (!e || !(e instanceof HTMLElement))
+        throw new Error("Datex: Element not found");
+      return e;
     }
-    const d = e.querySelector(".calendar-time");
-    d.innerHTML = r, d.querySelectorAll("select").forEach((s) => {
-      s.addEventListener("change", this.timeChanged.bind(this));
+    return t;
+  }
+  mergeWithDefaults(t) {
+    const e = /* @__PURE__ */ new Date(), a = {
+      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 || E,
+      validation: t.validation || {},
+      events: t.events || {}
+    };
+    return a.timePicker && a.autoApply && (a.autoApply = !1), a;
+  }
+  initializeState() {
+    const t = /* @__PURE__ */ new Date();
+    this.state = {
+      startDate: this.options.timePicker ? this.options.startDate : w(this.options.startDate),
+      endDate: this.options.timePicker ? this.options.endDate : S(this.options.endDate),
+      oldStartDate: this.options.timePicker ? this.options.startDate : w(this.options.startDate),
+      oldEndDate: this.options.timePicker ? this.options.endDate : S(this.options.endDate),
+      isShowing: !1,
+      leftCalendar: { month: t, calendar: [] },
+      rightCalendar: { month: f(t, 1), calendar: [] },
+      chosenLabel: null,
+      hoverDate: null
+    };
+  }
+  initializeServices() {
+    this.calendarService = new H(this.options, this.locale);
+  }
+  createContainer() {
+    const t = this.buildContainerTemplate(), e = document.createElement("div");
+    e.innerHTML = t.trim(), this.container = e.firstElementChild, document.body.appendChild(this.container), this.initializeContainerServices(), this.setupContainerClasses(), this.setupInitialVisibility();
+  }
+  buildContainerTemplate() {
+    return `
+      <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>
+    `;
+  }
+  initializeContainerServices() {
+    this.themeService = new T(this.container, this.options.theme), this.positionService = new F(
+      this.element,
+      this.container,
+      this.options
+    ), this.validationService = new I(this.options.validation), this.keyboardService = new P(this.container, {
+      enabled: !0
+    }), this.keyboardService.setHandlers({
+      onDateSelect: (t) => {
+        this.handleKeyboardDateSelect(t);
+      },
+      onClose: () => {
+        this.hide();
+      },
+      onToday: () => {
+        const t = /* @__PURE__ */ new Date();
+        this.setStartDate(t), this.setEndDate(t), this.updateView();
+      },
+      onClear: () => {
+        this.clearSelection();
+      }
     });
   }
-  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");
+  setupContainerClasses() {
+    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");
   }
-  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"));
-    }
+  setupInitialVisibility() {
+    this.options.timePicker || this.container.querySelectorAll(".calendar-time").forEach((e) => {
+      e.style.display = "none";
+    }), this.container.style.display = "none";
   }
-  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;
+  // Public API methods
+  show() {
+    this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.updateView(), this.displayContainer(), this.positionContainer(), setTimeout(() => {
+      this.state.isShowing && this.keyboardService.activate(this.state.startDate);
+    }, 200), this.dispatchShowEvent());
+  }
+  hide() {
+    this.state.isShowing && (this.revertIfIncomplete(), this.triggerCallbackIfChanged(), this.updateElement(), this.removeDocumentListeners(), this.keyboardService.deactivate(), this.hideContainer(), this.dispatchHideEvent());
+  }
+  toggle() {
+    this.state.isShowing ? this.hide() : this.show();
+  }
+  setStartDate(t) {
+    this.state.startDate = this.options.timePicker ? new Date(t) : w(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.startDate), this.updateView();
+  }
+  setEndDate(t) {
+    this.state.endDate = this.options.timePicker ? new Date(t) : S(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.endDate), this.updateView();
+  }
+  getStartDate() {
+    return new Date(this.state.startDate);
+  }
+  getEndDate() {
+    return this.state.endDate ? new Date(this.state.endDate) : null;
+  }
+  setTheme(t) {
+    this.themeService.setTheme(t);
+  }
+  setThemeMode(t) {
+    this.themeService.setMode(t);
+  }
+  getThemeMode() {
+    return this.themeService.getMode();
+  }
+  getCurrentThemeMode() {
+    return this.themeService.getCurrentMode();
+  }
+  // Validation methods
+  updateValidation(t) {
+    this.validationService.updateValidation(t);
+  }
+  validateDate(t) {
+    return this.validationService.validateDate(t);
+  }
+  validateDateRange(t, e) {
+    return this.validationService.validateDateRange(t, e);
+  }
+  // Keyboard navigation methods
+  enableKeyboardNavigation() {
+    this.state.isShowing && this.keyboardService.activate(this.state.startDate);
+  }
+  disableKeyboardNavigation() {
+    this.keyboardService.deactivate();
+  }
+  setKeyboardFocusedDate(t) {
+    this.keyboardService.setFocusedDate(t);
+  }
+  remove() {
+    this.cleanup();
+  }
+  // Private helper methods
+  storeOldValues() {
+    this.state.oldStartDate = new Date(this.state.startDate), this.state.oldEndDate = this.state.endDate ? new Date(this.state.endDate) : null;
+  }
+  setupDocumentListeners() {
+    this.eventService.setDocumentListeners(
+      this.handleOutsideClick.bind(this),
+      this.handleOutsideFocus.bind(this)
+    ), this.eventService.setWindowListeners(
+      this.positionContainer.bind(this),
+      this.positionContainer.bind(this)
+    );
+  }
+  removeDocumentListeners() {
+    this.eventService.removeDocumentListeners(), this.eventService.removeWindowListeners();
+  }
+  displayContainer() {
+    this.container.style.display = "block", this.state.isShowing = !0;
+  }
+  hideContainer() {
+    this.container.style.display = "none", this.state.isShowing = !1;
+  }
+  positionContainer() {
+    setTimeout(() => this.positionService.calculatePosition(), 0);
+  }
+  revertIfIncomplete() {
+    this.state.endDate || (this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null);
+  }
+  triggerCallbackIfChanged() {
+    const t = !u(
+      this.state.startDate,
+      this.state.oldStartDate,
+      "day"
+    ), e = this.state.endDate && this.state.oldEndDate && !u(this.state.endDate, this.state.oldEndDate, "day");
+    (t || e) && 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
+    );
+  }
+  roundToIncrement(t) {
+    if (!this.options.timePickerIncrement) return;
+    const e = Math.round(t.getMinutes() / this.options.timePickerIncrement) * this.options.timePickerIncrement;
+    t.setMinutes(e);
+  }
+  dispatchShowEvent() {
+    this.eventService.dispatchEvent(this.element, "show.daterangepicker", this);
+  }
+  dispatchHideEvent() {
+    this.eventService.dispatchEvent(this.element, "hide.daterangepicker", this);
+  }
+  cleanup() {
+    var t;
+    this.removeDocumentListeners(), this.themeService.cleanup(), this.eventService.cleanup(), this.keyboardService.cleanup(), (t = this.container) != null && t.parentNode && this.container.parentNode.removeChild(this.container);
+  }
+  handleKeyboardDateSelect(t) {
+    console.log("DateX: Received date from keyboard:", t.toDateString()), console.log("DateX: Received date day:", t.getDate());
+    const e = this.validationService.validateDate(t);
+    if (!e.isValid) {
+      this.showValidationError(e.error, e.errorCode);
+      return;
     }
-    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);
+    this.state.hoverDate = null, this.state.endDate || g(t, this.state.startDate) ? (this.state.endDate = null, this.setStartDate(t)) : (this.setEndDate(t), this.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick())), this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), this.updateDateClasses();
+  }
+  clearSelection() {
+    const t = /* @__PURE__ */ new Date();
+    this.state.startDate = t, this.state.endDate = null, this.state.chosenLabel = null, this.updateView();
+  }
+  showValidationError(t, e) {
+    var a;
+    (a = this.options.events) != null && a.onValidationError && this.options.events.onValidationError(t, e), console.warn(`DateX Validation Error: ${t} (${e})`);
+  }
+  setupEventListeners() {
+    this.setupElementEvents(), this.setupContainerEvents();
+  }
+  setupElementEvents() {
+    this.isInputOrButton() ? (this.eventService.addEventHandler(
+      this.element,
+      "click",
+      this.show.bind(this)
+    ), this.eventService.addEventHandler(
+      this.element,
+      "focus",
+      this.show.bind(this)
+    ), this.eventService.addEventHandler(
+      this.element,
+      "keyup",
+      this.handleElementChange.bind(this)
+    ), this.eventService.addEventHandler(
+      this.element,
+      "keydown",
+      this.handleKeydown.bind(this)
+    )) : this.eventService.addEventHandler(
+      this.element,
+      "click",
+      this.toggle.bind(this)
+    );
+  }
+  setupContainerEvents() {
+    this.eventService.addEventHandler(
+      this.container,
+      "click",
+      this.handleContainerClick.bind(this)
+    ), this.eventService.addEventHandler(
+      this.container,
+      "mouseover",
+      this.handleContainerMouseOver.bind(this)
+    ), this.eventService.addEventHandler(
+      this.container,
+      "mouseleave",
+      this.handleContainerMouseLeave.bind(this)
+    ), this.eventService.addEventHandler(
+      this.container,
+      "change",
+      this.handleContainerChange.bind(this)
+    );
+  }
+  isInputOrButton() {
+    return this.element.tagName === "INPUT" || this.element.tagName === "BUTTON";
+  }
+  handleContainerClick(t) {
+    const e = t.target;
+    e.tagName === "SELECT" || e.closest("select") || (e.matches(".ranges li") ? this.handleRangeClick(t) : e.matches(".applyBtn") ? this.handleApplyClick() : e.matches(".cancelBtn") ? this.handleCancelClick() : e.matches(".prev") ? this.handlePrevClick(t) : e.matches(".next") ? this.handleNextClick(t) : e.matches("td.available") && this.handleDateClick(t));
+  }
+  handleContainerMouseOver(t) {
+    t.target.matches("td.available") && this.handleDateHover(t);
+  }
+  handleContainerMouseLeave() {
+    this.state.hoverDate && (this.state.hoverDate = null, this.updateDateClasses());
+  }
+  handleContainerChange(t) {
+    const e = t.target;
+    e.matches("select.monthselect, select.yearselect") ? this.handleMonthYearChange(t) : e.matches(
+      "select.hourselect, select.minuteselect, select.secondselect, select.ampmselect"
+    ) && this.handleTimeChange(t);
+  }
+  handleOutsideClick(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.eventService.dispatchEvent(
+      this.element,
+      "outsideClick.daterangepicker"
+    ));
+  }
+  handleOutsideFocus(t) {
+    const e = t.target;
+    this.element.contains(e) || this.container.contains(e) || e.closest(".datex-picker") || setTimeout(() => {
+      const a = document.activeElement;
+      a && !this.element.contains(a) && !this.container.contains(a) && !a.closest(".datex-picker") && this.hide();
+    }, 50);
+  }
+  handleElementChange() {
+    var s;
+    if (!this.isInputOrButton()) return;
+    const t = this.element;
+    if (!((s = t.value) != null && s.length)) return;
+    const e = t.value.split(this.locale.separator), { startDate: a, endDate: i } = this.parseDateParts(e);
+    a && y(a) && i && y(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
+  }
+  parseDateParts(t) {
+    let e = null, a = null;
+    return t.length === 2 ? (e = b(t[0].trim(), this.locale.format), a = b(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = b(t[0].trim(), this.locale.format), a = e), { startDate: e, endDate: a };
+  }
+  handleKeydown(t) {
+    t.key === "Tab" || t.key === "Enter" ? this.hide() : t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.hide());
+  }
+  // Event handler implementations
+  handleRangeClick(t) {
+    const a = t.target.dataset.rangeKey;
+    if (a)
+      if (this.state.chosenLabel = a, this.updateActiveRange(a), a === this.locale.customRangeLabel)
+        this.showCalendars();
+      else {
+        const i = this.options.ranges[a];
+        if (i) {
+          const [s, r] = i;
+          this.state.startDate = new Date(s), this.state.endDate = new Date(r), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
+        }
       }
-    }
   }
-  clickPrev(t) {
-    const i = t.target.closest(".drp-calendar");
-    i && (i.classList.contains("left") ? (this.state.leftCalendar.month = y(
+  handleApplyClick() {
+    this.hide(), this.eventService.dispatchEvent(this.element, "apply.daterangepicker");
+  }
+  handleCancelClick() {
+    this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null, this.hide(), this.eventService.dispatchEvent(this.element, "cancel.daterangepicker");
+  }
+  handlePrevClick(t) {
+    const a = t.target.closest(".drp-calendar");
+    a && (a.classList.contains("left") ? (this.state.leftCalendar.month = f(
       this.state.leftCalendar.month,
       -1
-    ), this.options.linkedCalendars && (this.state.rightCalendar.month = y(
+    ), this.options.linkedCalendars && (this.state.rightCalendar.month = f(
       this.state.rightCalendar.month,
       -1
-    ))) : this.state.rightCalendar.month = y(
+    ))) : this.state.rightCalendar.month = f(
       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(
+  handleNextClick(t) {
+    const a = t.target.closest(".drp-calendar");
+    a && (a.classList.contains("left") ? this.state.leftCalendar.month = f(
       this.state.leftCalendar.month,
       1
-    ) : (this.state.rightCalendar.month = y(
+    ) : (this.state.rightCalendar.month = f(
       this.state.rightCalendar.month,
       1
-    ), this.options.linkedCalendars && (this.state.leftCalendar.month = y(
+    ), this.options.linkedCalendars && (this.state.leftCalendar.month = f(
       this.state.leftCalendar.month,
       1
     ))), this.updateCalendars());
   }
-  clickDate(t) {
+  handleDateClick(t) {
+    var r, n;
     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"
+    const a = e.dataset.date;
+    if (!a) return;
+    const i = b(a, "YYYY-MM-DD");
+    if (!y(i)) return;
+    const s = this.validationService.validateDate(i);
+    if (!s.isValid) {
+      this.showValidationError(s.error, s.errorCode);
+      return;
+    }
+    if (!((r = this.options.events) != null && r.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
+      if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || g(i, this.state.startDate))
+        this.state.endDate = null, this.setStartDate(i);
+      else {
+        if (this.setEndDate(i), this.state.startDate && this.state.endDate) {
+          const o = this.validationService.validateDateRange(
+            this.state.startDate,
+            this.state.endDate
           );
-          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 (!o.isValid) {
+            this.showValidationError(
+              o.error,
+              o.errorCode
+            ), this.state.endDate = null, this.updateDateClasses();
+            return;
           }
-          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.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick());
       }
-      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();
+      this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), (n = this.options.events) != null && n.onDateSelect && this.options.events.onDateSelect(i), this.updateDateClasses();
     }
   }
-  hoverDate(t) {
+  handleDateHover(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());
+    const a = e.dataset.date;
+    if (!a) return;
+    const i = b(a, "YYYY-MM-DD");
+    y(i) && !this.state.endDate && !g(i, this.state.startDate) && (this.state.hoverDate = i, 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");
+  handleMonthYearChange(t) {
+    const a = t.target.closest(".drp-calendar");
+    if (!a) return;
+    const i = a.classList.contains("left"), s = a.querySelector(
+      ".monthselect"
+    ), r = a.querySelector(
+      ".yearselect"
+    );
+    if (!s || !r) return;
+    const n = parseInt(s.value, 10), o = parseInt(r.value, 10), c = new Date(o, n, 1);
+    i ? (this.state.leftCalendar.month = c, this.options.linkedCalendars && (this.state.rightCalendar.month = f(c, 1))) : (this.state.rightCalendar.month = c, this.options.linkedCalendars && (this.state.leftCalendar.month = f(c, -1))), this.updateCalendars();
+  }
+  handleTimeChange(t) {
+    const a = t.target.closest(".drp-calendar");
+    if (!a) return;
+    const i = a.classList.contains("left"), s = i ? this.state.startDate : this.state.endDate || this.state.startDate, r = a.querySelector(
+      ".hourselect"
+    ), n = a.querySelector(
+      ".minuteselect"
+    ), o = a.querySelector(
+      ".secondselect"
+    ), c = a.querySelector(
+      ".ampmselect"
+    );
+    if (!r || !n) return;
+    let d = parseInt(r.value, 10);
+    const m = parseInt(n.value, 10) || 0, p = o ? parseInt(o.value, 10) : 0;
+    if (!this.options.timePicker24Hour && c) {
+      const D = c.value;
+      D === "PM" && d < 12 && (d += 12), D === "AM" && d === 12 && (d = 0);
+    }
+    const h = new Date(s);
+    if (h.setHours(d), h.setMinutes(m), h.setSeconds(p), this.options.timePickerIncrement && this.roundToIncrement(h), !(this.options.minDate && h < this.options.minDate) && !(this.options.maxDate && h > this.options.maxDate)) {
+      if (this.validationService) {
+        const D = this.validationService.validateDate(h);
+        if (!D.isValid) {
+          this.showValidationError(D.error, D.errorCode);
+          return;
+        }
       }
+      i ? (this.state.startDate = h, this.options.singleDatePicker ? this.state.endDate = h : this.state.endDate && this.state.endDate.toDateString() === h.toDateString() && this.state.endDate < h && (this.state.endDate = new Date(h))) : this.state.endDate && (this.state.endDate = h), this.updateSelectedDisplay(), this.updateCalendars(), this.updateFormInputs();
+    }
+  }
+  // View update methods
+  updateView() {
+    this.updateMonthsInView(), this.updateCalendars(), this.updateFormInputs(), this.updateSelectedDisplay(), this.calculateChosenLabel(), this.options.timePicker && this.updateTimePickerControls();
+  }
+  updateTimePickerControls() {
+    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");
     });
   }
-  clickApply(t) {
-    this.hide(), this.dispatchEvent("apply.daterangepicker");
+  updateMonthsInView() {
+    this.state.endDate ? (this.state.leftCalendar.month = x(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 = x(this.state.endDate) : this.state.rightCalendar.month = f(
+      this.state.leftCalendar.month,
+      1
+    )) : (this.state.leftCalendar.month = x(this.state.startDate), this.state.rightCalendar.month = f(
+      this.state.leftCalendar.month,
+      1
+    ));
   }
-  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");
+  updateCalendars() {
+    this.renderCalendar("left"), this.options.singleDatePicker || this.renderCalendar("right");
   }
-  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"
+  renderCalendar(t) {
+    const e = t === "left" ? this.state.leftCalendar : this.state.rightCalendar, a = this.container.querySelector(
+      `.drp-calendar.${t} .calendar-table`
     );
-    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();
+    e.calendar = this.calendarService.buildCalendarMatrix(
+      e.month
+    );
+    const i = this.calendarService.canNavigatePrevious(e.month), s = this.calendarService.canNavigateNext(e.month), r = this.calendarService.renderCalendarHTML(
+      e,
+      t,
+      this.state.startDate,
+      this.state.endDate,
+      i,
+      s
+    );
+    a.innerHTML = r;
   }
-  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());
+  updateFormInputs() {
+    const t = this.container.querySelector(
+      ".applyBtn"
+    ), e = this.options.singleDatePicker || this.state.endDate && (g(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
+    t.disabled = !e;
   }
-  keydown(t) {
-    (t.key === "Tab" || t.key === "Enter") && this.hide(), t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.hide());
+  updateSelectedDisplay() {
+    const t = this.container.querySelector(".drp-selected");
+    let e = C(this.state.startDate, this.locale.format);
+    !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + C(this.state.endDate, this.locale.format)), t.textContent = e;
   }
-  showCalendars() {
-    this.container.classList.add("show-calendar"), this.move(), this.dispatchEvent("showCalendar.daterangepicker");
+  updateElement() {
+    if (this.element.tagName === "INPUT" && this.options.autoUpdateInput) {
+      const t = this.element;
+      let e = C(this.state.startDate, this.locale.format);
+      !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + C(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
+    }
   }
-  hideCalendars() {
-    this.container.classList.remove("show-calendar"), this.dispatchEvent("hideCalendar.daterangepicker");
+  renderRanges() {
+    const t = this.container.querySelector(".ranges");
+    t.innerHTML = this.createRangeService().renderRanges();
   }
   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();
+    const t = this.createRangeService();
+    this.state.chosenLabel = t.calculateChosenLabel(
+      this.state.startDate,
+      this.state.endDate
+    ), t.updateActiveRange(this.container, this.state.chosenLabel), Object.keys(this.options.ranges).length > 0 && this.showCalendars();
   }
-  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();
+  updateActiveRange(t) {
+    this.createRangeService().updateActiveRange(this.container, t);
   }
-  getStartDate() {
-    return new Date(this.state.startDate);
+  showCalendars() {
+    this.container.classList.add("show-calendar"), this.positionContainer(), this.eventService.dispatchEvent(
+      this.element,
+      "showCalendar.daterangepicker"
+    );
   }
-  getEndDate() {
-    return this.state.endDate ? new Date(this.state.endDate) : null;
+  updateDateClasses() {
+    this.container.querySelectorAll("td[data-date]").forEach((e) => {
+      const a = e.dataset.date;
+      if (!a) return;
+      const i = b(a, "YYYY-MM-DD");
+      if (!y(i)) return;
+      e.classList.remove("in-range", "end-date", "start-date", "active");
+      const s = this.state.startDate, r = this.state.endDate, n = this.state.hoverDate;
+      if (s && u(i, s, "day") && e.classList.add("active", "start-date"), r && u(i, r, "day") && e.classList.add("active", "end-date"), s && r && k(i, s) && g(i, r) && e.classList.add("in-range"), s && n && !r) {
+        const o = g(n, s) ? n : s, c = g(n, s) ? s : n;
+        u(i, n, "day") ? e.classList.add("end-date") : k(i, o) && g(i, c) && e.classList.add("in-range");
+      }
+    });
   }
-  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]);
+  applyTimeToDate(t, e) {
+    if (!this.options.timePicker) return;
+    const a = e.closest(".drp-calendar");
+    if (!a) return;
+    const i = a.querySelector(
+      ".hourselect"
+    ), s = a.querySelector(
+      ".minuteselect"
+    ), r = a.querySelector(
+      ".secondselect"
+    ), n = a.querySelector(
+      ".ampmselect"
+    );
+    if (i) {
+      let o = parseInt(i.value, 10);
+      if (!this.options.timePicker24Hour && n) {
+        const c = n.value;
+        c === "PM" && o < 12 && (o += 12), c === "AM" && o === 12 && (o = 0);
       }
-      this.renderRanges();
+      t.setHours(o);
+    }
+    if (s) {
+      const o = parseInt(s.value, 10) || 0;
+      t.setMinutes(o);
     }
+    this.options.timePickerSeconds && r && t.setSeconds(parseInt(r.value, 10));
   }
-  dispatchEvent(t) {
-    const e = new CustomEvent(t, {
-      bubbles: !0,
-      detail: this
-    });
-    this.element.dispatchEvent(e);
+  createRangeService() {
+    return {
+      renderRanges: () => {
+        let t = "<ul>";
+        for (const [e] of Object.entries(this.options.ranges))
+          t += `<li data-range-key="${e}">${e}</li>`;
+        return this.options.showCustomRangeLabel && (t += `<li data-range-key="${this.locale.customRangeLabel}">${this.locale.customRangeLabel}</li>`), t += "</ul>", t;
+      },
+      calculateChosenLabel: (t, e) => {
+        let a = null;
+        for (const [i, [s, r]] of Object.entries(
+          this.options.ranges
+        )) {
+          const n = u(t, s, "day");
+          let o = !1;
+          if (e ? o = u(e, r, "day") : o = u(t, r, "day"), n && o) {
+            const c = Math.abs(r.getTime() - s.getTime()) / 864e5 + 1;
+            (!a || c > a.days) && (a = { label: i, days: c });
+          }
+        }
+        return a ? a.label : this.options.showCustomRangeLabel ? this.locale.customRangeLabel : null;
+      },
+      updateActiveRange: (t, e) => {
+        if (t.querySelectorAll(".ranges li").forEach((i) => i.classList.remove("active")), e) {
+          const i = t.querySelector(
+            `[data-range-key="${e}"]`
+          );
+          i == null || i.classList.add("active");
+        }
+      }
+    };
   }
 }
 export {
-  I as BOOTSTRAP_THEME,
-  L as DEFAULT_THEME,
-  q as Datex,
-  T as MATERIAL_THEME,
+  B as BOOTSTRAP_THEME,
+  E as DEFAULT_THEME,
+  O as Datex,
+  R as MATERIAL_THEME,
   Y as SPANISH_LOCALE,
-  A as SPANISH_LOCALE_WITH_TIME
+  V as SPANISH_LOCALE_WITH_TIME,
+  f as addMonths,
+  S as endOfDay,
+  C as formatDate,
+  x as getStartOfMonth,
+  k as isAfterDate,
+  g as isBeforeDate,
+  u as isSameDate,
+  y as isValidDate,
+  b as parseDate,
+  w as startOfDay
 };