datex-ui 1.2.0 → 1.2.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-function k(l, t) {
-  const e = l.getFullYear(), a = String(l.getMonth() + 1).padStart(2, "0"), i = String(l.getDate()).padStart(2, "0"), o = String(l.getHours()).padStart(2, "0"), s = 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, o).replace(/mm/g, s).replace(/ss/g, n);
+function D(l, t) {
+  const e = l.getFullYear(), a = String(l.getMonth() + 1).padStart(2, "0"), i = String(l.getDate()).padStart(2, "0"), o = String(l.getHours()).padStart(2, "0"), n = String(l.getMinutes()).padStart(2, "0"), r = String(l.getSeconds()).padStart(2, "0");
+  return t.replace(/YYYY/g, String(e)).replace(/MM/g, a).replace(/DD/g, i).replace(/HH/g, o).replace(/mm/g, n).replace(/ss/g, r);
 }
 function g(l, t) {
   const e = new Date(l);
@@ -17,10 +17,10 @@ function S(l) {
 function y(l, t) {
   return l.getTime() > t.getTime();
 }
-function u(l, t) {
+function x(l, t) {
   return l.getTime() < t.getTime();
 }
-function m(l, t, e = "day") {
+function u(l, t, e = "day") {
   if (!l || !t) return !1;
   switch (e) {
     case "day":
@@ -33,10 +33,10 @@ function m(l, t, e = "day") {
       return !1;
   }
 }
-function D(l) {
+function k(l) {
   return l instanceof Date && !isNaN(l.getTime());
 }
-function x(l, t) {
+function f(l, t) {
   if (t === "YYYY-MM-DD") {
     const e = l.split("-");
     if (e.length === 3) {
@@ -55,8 +55,8 @@ function x(l, t) {
   if (t === "DD/MM/YYYY HH:mm") {
     const [e, a] = l.split(" "), i = e.split("/"), o = a ? a.split(":") : ["0", "0"];
     if (i.length === 3) {
-      const s = parseInt(i[0], 10), n = parseInt(i[1], 10) - 1, r = parseInt(i[2], 10), d = parseInt(o[0], 10) || 0, c = parseInt(o[1], 10) || 0;
-      return new Date(r, n, s, d, c);
+      const n = parseInt(i[0], 10), r = parseInt(i[1], 10) - 1, s = parseInt(i[2], 10), d = parseInt(o[0], 10) || 0, c = parseInt(o[1], 10) || 0;
+      return new Date(s, r, n, d, c);
     }
   }
   return new Date(l);
@@ -64,14 +64,14 @@ function x(l, t) {
 function w(l) {
   return new Date(l.getFullYear(), l.getMonth(), 1);
 }
-function H(l) {
+function B(l) {
   return new Date(l.getFullYear(), l.getMonth() + 1, 0);
 }
-function B(l, t = 1) {
+function H(l, t = 1) {
   const a = (l.getDay() - t + 7) % 7, i = new Date(l);
   return i.setDate(l.getDate() - a), i;
 }
-const E = {
+const M = {
   primaryColor: "#357ebd",
   secondaryColor: "#ccc",
   backgroundColor: "#ffffff",
@@ -116,21 +116,22 @@ const E = {
   disabledColor: "#bdbdbd",
   applyButtonColor: "#4caf50",
   cancelButtonColor: "#f44336",
-  borderRadius: "4px",
+  borderRadius: "8px",
+  // Material Design usa bordes más redondeados
   fontSize: "14px",
   fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif'
 };
-class A {
-  constructor(t, e = E) {
+class T {
+  constructor(t, e = M) {
     this.mode = "light", this.handleMediaChange = () => {
       this.mode === "auto" && this.applyTheme();
-    }, this.container = t, this.theme = { ...E, ...e }, this.setupMediaQueryListener();
+    }, this.container = t, this.theme = { ...M, ...e }, this.setupMediaQueryListener();
   }
   applyTheme() {
     this.removeExistingStyles(), this.createAndApplyStyles(), this.forceReflow();
   }
   setTheme(t) {
-    this.theme = { ...E, ...t }, this.applyTheme();
+    this.theme = { ...M, ...t }, this.applyTheme();
   }
   setMode(t) {
     this.mode = t, this.applyTheme();
@@ -174,6 +175,217 @@ class A {
       // Mantener color original
     } : this.theme;
   }
+  isMaterialTheme() {
+    var t;
+    return this.theme.borderRadius === "8px" && (((t = this.theme.fontFamily) == null ? void 0 : t.includes("Roboto")) ?? !1);
+  }
+  getMaterialDesignStyles(t, e) {
+    return `
+      /* Material Design - Contenedor principal con elevación */
+      .datex-picker.datex-material {
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 
+                    0 2px 4px rgba(0, 0, 0, 0.12) !important;
+        border: none !important;
+        border-radius: 8px !important;
+      }
+
+      /* Material Design - Celdas de calendario con bordes más redondeados */
+      .datex-picker.datex-material .calendar-table th,
+      .datex-picker.datex-material .calendar-table td {
+        border-radius: 50% !important; /* Círculos completos para las fechas */
+      }
+
+      /* Material Design - Fechas seleccionadas con bordes redondeados */
+      .datex-picker.datex-material .calendar-table td.start-date {
+        border-radius: 50% 0 0 50% !important;
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        border-color: transparent !important;
+      }
+
+      .datex-picker.datex-material .calendar-table td.end-date {
+        border-radius: 0 50% 50% 0 !important;
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        border-color: transparent !important;
+      }
+
+      .datex-picker.datex-material .calendar-table td.start-date.end-date {
+        border-radius: 50% !important;
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        border-color: transparent !important;
+      }
+
+      /* Material Design - Fechas activas */
+      .datex-picker.datex-material .calendar-table td.active,
+      .datex-picker.datex-material .calendar-table td.active:hover {
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        border-color: transparent !important;
+      }
+
+      /* Material Design - Asegurar que end-date siempre tenga el color correcto */
+      .datex-picker.datex-material .calendar-table tbody td.end-date,
+      .datex-picker.datex-material .calendar-table tbody td.end-date:hover {
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        border-color: transparent !important;
+      }
+
+      .datex-picker.datex-material .calendar-table tbody td.start-date,
+      .datex-picker.datex-material .calendar-table tbody td.start-date:hover {
+        background-color: ${t.selectedColor} !important;
+        color: #fff !important;
+        border-color: transparent !important;
+      }
+
+      /* Material Design - Rango con bordes suaves */
+      .datex-picker.datex-material td.in-range {
+        border-radius: 0 !important;
+        background-color: ${t.rangeColor} !important;
+      }
+
+      /* Material Design - Botones con elevación y ripple effect */
+      .datex-picker.datex-material .drp-buttons .datex-btn {
+        border-radius: 4px !important;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        text-transform: uppercase !important;
+        font-weight: 500 !important;
+        letter-spacing: 0.5px !important;
+      }
+
+      .datex-picker.datex-material .drp-buttons .datex-btn:hover:not(:disabled) {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+        transform: translateY(-1px) !important;
+      }
+
+      .datex-picker.datex-material .drp-buttons .datex-btn:active:not(:disabled) {
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        transform: translateY(0) !important;
+      }
+
+      /* Material Design - Botones móviles */
+      .datex-picker.datex-material .datex-mobile-header .mobile-cancelBtn,
+      .datex-picker.datex-material .datex-mobile-header .mobile-applyBtn {
+        border-radius: 4px !important;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+        text-transform: uppercase !important;
+        font-weight: 500 !important;
+        letter-spacing: 0.5px !important;
+      }
+
+      /* Material Design - Ranges con bordes pill más pronunciados */
+      .datex-picker.datex-material .ranges li {
+        border-radius: 16px !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      }
+
+      .datex-picker.datex-material .ranges li:hover {
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
+        transform: translateY(-1px) !important;
+      }
+
+      .datex-picker.datex-material .ranges li.active {
+        box-shadow: 0 3px 8px rgba(25, 118, 210, 0.25) !important;
+      }
+
+      /* Material Design - Selectores con bordes redondeados */
+      .datex-picker.datex-material select.monthselect,
+      .datex-picker.datex-material select.yearselect,
+      .datex-picker.datex-material select.hourselect,
+      .datex-picker.datex-material select.minuteselect,
+      .datex-picker.datex-material select.secondselect,
+      .datex-picker.datex-material select.ampmselect {
+        border-radius: 4px !important;
+        border: 1px solid ${t.borderColor} !important;
+        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      }
+
+      .datex-picker.datex-material select:focus {
+        border-color: ${t.primaryColor} !important;
+        outline: none !important;
+        box-shadow: 0 0 0 2px ${t.rangeColor} !important;
+      }
+
+      /* Material Design - Hover states más suaves */
+      .datex-picker.datex-material td.available:hover,
+      .datex-picker.datex-material th.available:hover {
+        background-color: ${e === "dark" ? "#4b5563" : "#f5f5f5"} !important;
+        transform: scale(1.05) !important;
+        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      }
+
+      /* Material Design - Navegación con iconos más suaves */
+      .datex-picker.datex-material .calendar-table .next:hover,
+      .datex-picker.datex-material .calendar-table .prev:hover {
+        background-color: ${e === "dark" ? "#4b5563" : "#f5f5f5"} !important;
+        border-radius: 50% !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      }
+
+      /* Material Design - Flecha del dropdown más suave */
+      .datex-picker.datex-material:before {
+        border-bottom: 8px solid ${t.backgroundColor} !important;
+        filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1)) !important;
+      }
+
+      .datex-picker.datex-material:after {
+        display: none !important;
+      }
+
+      /* Material Design - Mobile header con elevación */
+      @media (max-width: 768px) {
+        .datex-picker.datex-material,
+        .datex-picker.datex-material.mobile-view {
+          border-radius: 16px 16px 0 0 !important;
+          box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
+        }
+
+        .datex-picker.datex-material .datex-mobile-header,
+        .datex-picker.datex-material.mobile-view .datex-mobile-header {
+          border-radius: 16px 16px 0 0 !important;
+        }
+
+        /* Material Design - Celdas móviles circulares */
+        .datex-picker.datex-material .drp-calendar .calendar-table tbody td,
+        .datex-picker.datex-material.mobile-view .drp-calendar .calendar-table tbody td {
+          border-radius: 50% !important;
+        }
+
+        .datex-picker.datex-material .calendar-table tbody td.start-date,
+        .datex-picker.datex-material .calendar-table tbody td.start-date:hover {
+          border-radius: 50% !important;
+          background-color: ${t.selectedColor} !important;
+          color: #fff !important;
+          border-color: transparent !important;
+        }
+
+        .datex-picker.datex-material .calendar-table tbody td.end-date,
+        .datex-picker.datex-material .calendar-table tbody td.end-date:hover {
+          border-radius: 50% !important;
+          background-color: ${t.selectedColor} !important;
+          color: #fff !important;
+          border-color: transparent !important;
+        }
+
+        .datex-picker.datex-material .calendar-table tbody td.in-range {
+          border-radius: 50% !important;
+          opacity: 0.7 !important;
+          background-color: ${t.rangeColor} !important;
+        }
+
+        .datex-picker.datex-material .calendar-table tbody td.active,
+        .datex-picker.datex-material .calendar-table tbody td.active:hover {
+          background-color: ${t.selectedColor} !important;
+          color: #fff !important;
+          border-color: transparent !important;
+        }
+      }
+    `;
+  }
   removeExistingStyles() {
     if (this.styleId) {
       const t = document.getElementById(this.styleId);
@@ -192,8 +404,12 @@ class A {
     this.container.offsetHeight;
   }
   generateThemeCSS() {
-    const t = this.getThemeForMode(), e = this.getCurrentMode();
-    return this.container.classList.remove("datex-light", "datex-dark"), this.container.classList.add(`datex-${e}`), `
+    const t = this.getThemeForMode(), e = this.getCurrentMode(), a = this.isMaterialTheme();
+    return this.container.classList.remove(
+      "datex-light",
+      "datex-dark",
+      "datex-material"
+    ), this.container.classList.add(`datex-${e}`), a && this.container.classList.add("datex-material"), `
       /* Simple dropdown arrow for inputs */
       input.datex-input {
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
@@ -582,7 +798,7 @@ class A {
         color: ${t.textColor} !important;
       }
 
-      .datex-picker .drp-buttons .btn {
+      .datex-picker .drp-buttons .datex-btn {
         margin-left: 4px !important;
         font-size: 12px !important;
         font-weight: bold !important;
@@ -593,25 +809,25 @@ class A {
         transition: all 0.15s ease-in-out !important;
       }
 
-      .datex-picker .drp-buttons .btn.btn-success {
+      .datex-picker .drp-buttons .datex-btn.datex-btn-success {
         background-color: ${t.applyButtonColor} !important;
         border-color: ${t.applyButtonColor} !important;
         color: #fff !important;
       }
 
-      .datex-picker .drp-buttons .btn.btn-success:hover:not(:disabled) {
+      .datex-picker .drp-buttons .datex-btn.datex-btn-success:hover:not(:disabled) {
         background-color: ${t.applyButtonColor} !important;
         border-color: ${t.applyButtonColor} !important;
         opacity: 0.8 !important;
       }
 
-      .datex-picker .drp-buttons .btn.btn-danger {
+      .datex-picker .drp-buttons .datex-btn.datex-btn-danger {
         background-color: ${t.cancelButtonColor} !important;
         border-color: ${t.cancelButtonColor} !important;
         color: #fff !important;
       }
 
-      .datex-picker .drp-buttons .btn.btn-danger:hover:not(:disabled) {
+      .datex-picker .drp-buttons .datex-btn.datex-btn-danger:hover:not(:disabled) {
         background-color: ${t.cancelButtonColor} !important;
         border-color: ${t.cancelButtonColor} !important;
         opacity: 0.8 !important;
@@ -1132,8 +1348,8 @@ class A {
           display: none !important; /* Hide on mobile - buttons are in header */
         }
 
-        .datex-picker .drp-buttons .btn,
-        .datex-picker.mobile-view .drp-buttons .btn {
+        .datex-picker .drp-buttons .datex-btn,
+        .datex-picker.mobile-view .drp-buttons .datex-btn {
           min-width: 70px !important;
           padding: 8px 14px !important;
           margin: 0 4px !important;
@@ -1251,10 +1467,13 @@ class A {
           clear: none !important;
         }
       }
+
+      /* Material Design specific styles */
+      ${a ? this.getMaterialDesignStyles(t, e) : ""}
     `;
   }
 }
-class T {
+class F {
   constructor() {
     this.boundHandlers = /* @__PURE__ */ new Map();
   }
@@ -1289,7 +1508,7 @@ class T {
     t.dispatchEvent(i);
   }
 }
-class L {
+class E {
   constructor(t, e, a) {
     this.element = t, this.container = e, this.options = a, this.setupOrientationHandler();
   }
@@ -1336,11 +1555,11 @@ class L {
     const e = this.container.offsetWidth, a = this.container.offsetHeight, { top: i, drops: o } = this.calculateVerticalPosition(
       t,
       a
-    ), s = this.calculateHorizontalPosition(
+    ), n = this.calculateHorizontalPosition(
       t,
       e
     );
-    this.applyDropUpClass(o), this.applyFinalPosition(i, s);
+    this.applyDropUpClass(o), this.applyFinalPosition(i, n);
   }
   resetContainerPosition() {
     this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed";
@@ -1394,27 +1613,27 @@ class L {
     t && (t.style.display = "none");
   }
 }
-class M {
+class L {
   constructor(t, e) {
     this.options = t, this.locale = e;
   }
   buildCalendarMatrix(t) {
-    const e = w(t), a = B(e, this.locale.firstDay), i = [];
+    const e = w(t), a = H(e, this.locale.firstDay), i = [];
     let o = [];
-    const s = new Date(a);
-    for (let n = 0; n < 42; n++) {
-      n > 0 && n % 7 === 0 && (i.push(o), o = []);
-      const r = new Date(s);
-      r.setDate(s.getDate() + n), o.push(r);
+    const n = new Date(a);
+    for (let r = 0; r < 42; r++) {
+      r > 0 && r % 7 === 0 && (i.push(o), o = []);
+      const s = new Date(n);
+      s.setDate(n.getDate() + r), o.push(s);
     }
     return o.length > 0 && i.push(o), i;
   }
-  renderCalendarHTML(t, e, a, i, o, s) {
-    const n = t.month, r = n.getFullYear(), d = n.getMonth();
+  renderCalendarHTML(t, e, a, i, o, n) {
+    const r = t.month, s = r.getFullYear(), d = r.getMonth();
     let c = '<table class="table-condensed">';
-    return c += this.renderHeader(e, d, r, o, s), c += this.renderDayHeaders(), c += this.renderCalendarBody(
+    return c += this.renderHeader(e, d, s, o, n), c += this.renderDayHeaders(), c += this.renderCalendarBody(
       t.calendar,
-      n,
+      r,
       a,
       i
     ), c += "</table>", this.options.timePicker && (c += this.renderTimeControls(
@@ -1425,30 +1644,30 @@ class M {
     let e = '<div class="calendar-time">';
     e += '<select class="hourselect">';
     const a = this.options.timePicker24Hour, i = a ? 23 : 12, o = a ? 0 : 1;
-    for (let n = o; n <= i; n++) {
-      const r = a ? n : n === 0 ? 12 : n, d = String(r).padStart(2, "0"), c = a ? t.getHours() : t.getHours() % 12 || 12;
-      let b = !1;
+    for (let r = o; r <= i; r++) {
+      const s = a ? r : r === 0 ? 12 : r, d = String(s).padStart(2, "0"), c = a ? t.getHours() : t.getHours() % 12 || 12;
+      let m = !1;
       if (this.options.minDate || this.options.maxDate) {
-        const f = new Date(t), $ = a ? r : t.getHours() >= 12 ? r === 12 ? 12 : r + 12 : r === 12 ? 0 : r;
-        if (f.setHours($), this.options.minDate) {
-          const v = new Date(f);
-          v.setMinutes(59), v < this.options.minDate && (b = !0);
+        const b = new Date(t), $ = a ? s : t.getHours() >= 12 ? s === 12 ? 12 : s + 12 : s === 12 ? 0 : s;
+        if (b.setHours($), this.options.minDate) {
+          const v = new Date(b);
+          v.setMinutes(59), v < this.options.minDate && (m = !0);
         }
         if (this.options.maxDate) {
-          const v = new Date(f);
-          v.setMinutes(0), v > this.options.maxDate && (b = !0);
+          const v = new Date(b);
+          v.setMinutes(0), v > this.options.maxDate && (m = !0);
         }
       }
-      e += `<option value="${r}"${r === c && !b ? ' selected="selected"' : ""}${b ? ' disabled="disabled" class="disabled"' : ""}>${d}</option>`;
+      e += `<option value="${s}"${s === c && !m ? ' selected="selected"' : ""}${m ? ' disabled="disabled" class="disabled"' : ""}>${d}</option>`;
     }
     e += "</select>", e += " : ", e += '<select class="minuteselect">';
-    const s = this.options.timePickerIncrement || 1;
-    for (let n = 0; n < 60; n += s) {
-      const r = String(n).padStart(2, "0");
+    const n = this.options.timePickerIncrement || 1;
+    for (let r = 0; r < 60; r += n) {
+      const s = String(r).padStart(2, "0");
       let d = !1;
       if (this.options.minDate || this.options.maxDate) {
         const h = new Date(t);
-        if (h.setMinutes(n), this.options.minDate) {
+        if (h.setMinutes(r), this.options.minDate) {
           const p = new Date(h);
           p.setSeconds(59), p < this.options.minDate && (d = !0);
         }
@@ -1457,43 +1676,43 @@ class M {
           p.setSeconds(0), p > this.options.maxDate && (d = !0);
         }
       }
-      const c = n === t.getMinutes() && !d ? ' selected="selected"' : "";
-      e += `<option value="${n}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${r}</option>`;
+      const c = r === t.getMinutes() && !d ? ' selected="selected"' : "";
+      e += `<option value="${r}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${s}</option>`;
     }
     if (e += "</select>", this.options.timePickerSeconds) {
       e += " : ", e += '<select class="secondselect">';
-      for (let n = 0; n < 60; n++) {
-        const r = String(n).padStart(2, "0");
+      for (let r = 0; r < 60; r++) {
+        const s = String(r).padStart(2, "0");
         let d = !1;
         if (this.options.minDate || this.options.maxDate) {
           const h = new Date(t);
-          h.setSeconds(n), this.options.minDate && h < this.options.minDate && (d = !0), this.options.maxDate && h > this.options.maxDate && (d = !0);
+          h.setSeconds(r), this.options.minDate && h < this.options.minDate && (d = !0), this.options.maxDate && h > this.options.maxDate && (d = !0);
         }
-        const c = n === t.getSeconds() && !d ? ' selected="selected"' : "";
-        e += `<option value="${n}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${r}</option>`;
+        const c = r === t.getSeconds() && !d ? ' selected="selected"' : "";
+        e += `<option value="${r}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${s}</option>`;
       }
       e += "</select>";
     }
     if (!a) {
       e += " ", e += '<select class="ampmselect">';
-      const n = t.getHours() < 12;
-      let r = !1, d = !1;
+      const r = t.getHours() < 12;
+      let s = !1, d = !1;
       if (this.options.minDate || this.options.maxDate) {
         const h = new Date(t);
         h.setHours(6, 0, 0);
         const p = new Date(t);
-        p.setHours(18, 0, 0), this.options.minDate && h < this.options.minDate && (r = !0), this.options.maxDate && p > this.options.maxDate && (d = !0);
+        p.setHours(18, 0, 0), this.options.minDate && h < this.options.minDate && (s = !0), this.options.maxDate && p > this.options.maxDate && (d = !0);
       }
-      const c = r ? ' disabled="disabled" class="disabled"' : "", b = d ? ' disabled="disabled" class="disabled"' : "";
-      e += `<option value="AM"${n ? ' selected="selected"' : ""}${c}>AM</option>`, e += `<option value="PM"${n ? "" : ' selected="selected"'}${b}>PM</option>`, e += "</select>";
+      const c = s ? ' disabled="disabled" class="disabled"' : "", m = d ? ' disabled="disabled" class="disabled"' : "";
+      e += `<option value="AM"${r ? ' selected="selected"' : ""}${c}>AM</option>`, e += `<option value="PM"${r ? "" : ' selected="selected"'}${m}>PM</option>`, e += "</select>";
     }
     return e += "</div>", e;
   }
   renderHeader(t, e, a, i, o) {
-    let s = "<thead><tr>";
-    i && (!this.options.linkedCalendars || t === "left") ? s += '<th class="prev available"><span></span></th>' : s += "<th></th>";
-    let n = this.locale.monthNames[e] + " " + a;
-    return this.options.showDropdowns && (n = this.renderDropdowns(e, a)), s += `<th colspan="5" class="month">${n}</th>`, o && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? s += '<th class="next available"><span></span></th>' : s += "<th></th>", s += "</tr>", s;
+    let n = "<thead><tr>";
+    i && (!this.options.linkedCalendars || t === "left") ? n += '<th class="prev available"><span></span></th>' : n += "<th></th>";
+    let r = this.locale.monthNames[e] + " " + a;
+    return this.options.showDropdowns && (r = this.renderDropdowns(e, a)), n += `<th colspan="5" class="month">${r}</th>`, o && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? n += '<th class="next available"><span></span></th>' : n += "<th></th>", n += "</tr>", n;
   }
   renderDayHeaders() {
     let t = "<tr>";
@@ -1503,19 +1722,19 @@ class M {
   }
   renderCalendarBody(t, e, a, i) {
     let o = "<tbody>";
-    for (const s of t) {
+    for (const n of t) {
       o += "<tr>";
-      for (const n of s) {
-        const r = this.getDayClasses(
-          n,
+      for (const r of n) {
+        const s = this.getDayClasses(
+          r,
           e,
           a,
           i
-        ), d = r.includes("disabled"), c = r.join(" ") + (d ? "" : " available");
-        o += `<td class="${c}" data-date="${k(
-          n,
+        ), d = s.includes("disabled"), c = s.join(" ") + (d ? "" : " available");
+        o += `<td class="${c}" data-date="${D(
+          r,
           "YYYY-MM-DD"
-        )}">${n.getDate()}</td>`;
+        )}">${r.getDate()}</td>`;
       }
       o += "</tr>";
     }
@@ -1527,21 +1746,21 @@ class M {
       e,
       a,
       i
-    ), s = this.renderYearDropdown(e, a, i);
-    return o + " " + s;
+    ), n = this.renderYearDropdown(e, a, i);
+    return o + " " + n;
   }
   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 };
   }
   renderMonthDropdown(t, e, a, i) {
-    const o = e === a, s = e === i;
-    let n = '<select class="monthselect">';
-    for (let r = 0; r < 12; r++) {
+    const o = e === a, n = e === i;
+    let r = '<select class="monthselect">';
+    for (let s = 0; s < 12; s++) {
       let d = !1;
-      o && this.options.minDate && r < this.options.minDate.getMonth() && (d = !0), s && this.options.maxDate && r > this.options.maxDate.getMonth() && (d = !0), n += `<option value="${r}"${r === t ? ' selected="selected"' : ""}${d ? ' disabled="disabled"' : ""}>${this.locale.monthNames[r]}</option>`;
+      o && this.options.minDate && s < this.options.minDate.getMonth() && (d = !0), n && this.options.maxDate && s > this.options.maxDate.getMonth() && (d = !0), r += `<option value="${s}"${s === t ? ' selected="selected"' : ""}${d ? ' disabled="disabled"' : ""}>${this.locale.monthNames[s]}</option>`;
     }
-    return n += "</select>", n;
+    return r += "</select>", r;
   }
   renderYearDropdown(t, e, a) {
     let i = '<select class="yearselect">';
@@ -1551,16 +1770,16 @@ class M {
   }
   getDayClasses(t, e, a, i) {
     const o = [];
-    return m(t, /* @__PURE__ */ new Date(), "day") && o.push("today"), (t.getDay() === 0 || t.getDay() === 6) && o.push("weekend"), t.getMonth() !== e.getMonth() && o.push("off", "ends"), this.options.minDate && u(t, C(this.options.minDate)) && o.push("off", "disabled"), this.options.maxDate && y(t, S(this.options.maxDate)) && o.push("off", "disabled"), m(t, a, "day") && o.push("active", "start-date"), i && m(t, i, "day") && o.push("active", "end-date"), i && y(t, a) && u(t, i) && o.push("in-range"), o;
+    return u(t, /* @__PURE__ */ new Date(), "day") && o.push("today"), (t.getDay() === 0 || t.getDay() === 6) && o.push("weekend"), t.getMonth() !== e.getMonth() && o.push("off", "ends"), this.options.minDate && x(t, C(this.options.minDate)) && o.push("off", "disabled"), this.options.maxDate && y(t, S(this.options.maxDate)) && o.push("off", "disabled"), u(t, a, "day") && o.push("active", "start-date"), i && u(t, i, "day") && o.push("active", "end-date"), i && y(t, a) && x(t, i) && o.push("in-range"), o;
   }
   canNavigatePrevious(t) {
     return !this.options.minDate || y(w(t), this.options.minDate);
   }
   canNavigateNext(t) {
-    return !this.options.maxDate || u(H(t), this.options.maxDate);
+    return !this.options.maxDate || x(B(t), this.options.maxDate);
   }
 }
-class F {
+class A {
   constructor(t = {}) {
     this.validation = t;
   }
@@ -1653,10 +1872,11 @@ class F {
     return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
   }
 }
-class I {
+class P {
   constructor(t, e = {}) {
     this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
-      enabled: !0,
+      enabled: !1,
+      // Deshabilitado por defecto para evitar conflictos
       shortcuts: {
         today: "t",
         clear: "c",
@@ -1669,82 +1889,78 @@ class I {
     }, 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;
+    this.onDateSelect = t.onDateSelect, this.onClose = t.onClose, this.onApply = t.onApply, this.onToday = t.onToday, this.onClear = t.onClear, this.onMonthChange = t.onMonthChange;
   }
   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 });
+    }, 100), this.handleKeyDownBound && document.addEventListener("keydown", this.handleKeyDownBound);
   }
   deactivate() {
-    this.isActive = !1, this.currentFocusedDate = null, this.removeFocusStyles();
+    this.isActive = !1, this.currentFocusedDate = null, this.removeFocusStyles(), this.handleKeyDownBound && document.removeEventListener("keydown", this.handleKeyDownBound);
   }
   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));
+    this.container.setAttribute("tabindex", "0"), this.handleKeyDownBound = this.handleKeyDown.bind(this), this.handleFocusBound = this.handleFocus.bind(this), this.handleBlurBound = this.handleBlur.bind(this), this.container.addEventListener("keydown", this.handleKeyDownBound), this.container.addEventListener("focus", this.handleFocusBound), this.container.addEventListener("blur", this.handleBlurBound);
   }
   handleKeyDown(t) {
-    var s, n, r, d;
+    var c, m, h, p;
     if (!this.isActive || !this.currentFocusedDate) return;
-    const { key: e, ctrlKey: a, shiftKey: i, altKey: o } = 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;
-    }
-    switch (e) {
-      case "Enter":
-      case " ":
-        if (t.preventDefault(), this.currentFocusedDate && this.onDateSelect) {
-          const c = 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:", c), console.log("Copy day:", c.getDate()), console.log(
-            "Are they equal?",
-            this.currentFocusedDate.getTime() === c.getTime()
-          ), console.log("======================"), this.onDateSelect(c);
-        }
-        break;
-      case "Escape":
-        t.preventDefault(), this.onClose && this.onClose();
-        break;
-    }
-    if (!a && !o)
-      switch (e.toLowerCase()) {
-        case ((n = (s = this.options.shortcuts) == null ? void 0 : s.today) == null ? void 0 : n.toLowerCase()):
-          t.preventDefault(), this.onToday && this.onToday();
+    const { key: e, ctrlKey: a, shiftKey: i, altKey: o } = t, n = t.target, r = this.container.contains(n), s = n.tagName === "INPUT" || n.tagName === "BUTTON";
+    if (n.tagName !== "SELECT" && !(!r && !s)) {
+      switch (e) {
+        case "ArrowLeft":
+          t.preventDefault(), t.stopPropagation(), this.navigateDate(-1);
+          break;
+        case "ArrowRight":
+          t.preventDefault(), t.stopPropagation(), this.navigateDate(1);
+          break;
+        case "ArrowUp":
+          t.preventDefault(), t.stopPropagation(), this.navigateDate(-7);
+          break;
+        case "ArrowDown":
+          t.preventDefault(), t.stopPropagation(), this.navigateDate(7);
+          break;
+        case "Home":
+          t.preventDefault(), t.stopPropagation(), this.navigateToStartOfWeek();
+          break;
+        case "End":
+          t.preventDefault(), t.stopPropagation(), this.navigateToEndOfWeek();
           break;
-        case ((d = (r = this.options.shortcuts) == null ? void 0 : r.clear) == null ? void 0 : d.toLowerCase()):
-          t.preventDefault(), this.onClear && this.onClear();
+        case "PageUp":
+          t.preventDefault(), t.stopPropagation(), this.navigateMonth(i ? -12 : -1);
+          break;
+        case "PageDown":
+          t.preventDefault(), t.stopPropagation(), this.navigateMonth(i ? 12 : 1);
           break;
       }
-    if (a && !o && !i)
-      switch (e.toLowerCase()) {
-        case "enter":
-          t.preventDefault(), this.onApply && this.onApply();
+      switch (e) {
+        case "Enter":
+        case " ":
+          if (t.preventDefault(), t.stopPropagation(), this.currentFocusedDate && this.onDateSelect) {
+            const b = new Date(this.currentFocusedDate.getTime());
+            this.onDateSelect(b);
+          }
+          break;
+        case "Escape":
+          t.preventDefault(), t.stopPropagation(), this.onClose && this.onClose();
           break;
       }
+      if (!a && !o)
+        switch (e.toLowerCase()) {
+          case ((m = (c = this.options.shortcuts) == null ? void 0 : c.today) == null ? void 0 : m.toLowerCase()):
+            t.preventDefault(), t.stopPropagation(), this.onToday && this.onToday();
+            break;
+          case ((p = (h = this.options.shortcuts) == null ? void 0 : h.clear) == null ? void 0 : p.toLowerCase()):
+            t.preventDefault(), t.stopPropagation(), this.onClear && this.onClear();
+            break;
+        }
+      if (a && !o && !i)
+        switch (e.toLowerCase()) {
+          case "enter":
+            t.preventDefault(), t.stopPropagation(), this.onApply && this.onApply();
+            break;
+        }
+    }
   }
   handleFocus() {
     this.isActive || (this.isActive = !0, this.currentFocusedDate = this.currentFocusedDate || /* @__PURE__ */ new Date(), setTimeout(() => {
@@ -1758,13 +1974,13 @@ class I {
   }
   navigateDate(t) {
     if (!this.currentFocusedDate) return;
-    const e = new Date(this.currentFocusedDate.getTime());
-    e.setDate(e.getDate() + t), this.currentFocusedDate = e, this.updateFocusedDate();
+    const e = this.currentFocusedDate.getMonth(), a = this.currentFocusedDate.getFullYear(), i = new Date(this.currentFocusedDate.getTime());
+    i.setDate(i.getDate() + t), this.currentFocusedDate = i, (i.getMonth() !== e || i.getFullYear() !== a) && this.onMonthChange && this.onMonthChange(i), this.updateFocusedDate();
   }
   navigateMonth(t) {
     if (!this.currentFocusedDate) return;
     const e = new Date(this.currentFocusedDate.getTime());
-    e.setMonth(e.getMonth() + t), this.currentFocusedDate = e, this.updateFocusedDate();
+    e.setMonth(e.getMonth() + t), this.currentFocusedDate = e, this.onMonthChange && this.onMonthChange(e), this.updateFocusedDate();
   }
   navigateToStartOfWeek() {
     if (!this.currentFocusedDate) return;
@@ -1779,25 +1995,17 @@ class I {
   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(
+    const t = this.formatDateForSelector(this.currentFocusedDate), e = this.container.querySelector(
       `[data-date="${t}"]`
     );
-    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);
+    if (e && (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"
+      });
+    }
     this.addFocusStyles();
   }
   removeFocusStyles() {
@@ -1809,7 +2017,8 @@ class I {
     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 {
+      /* Keyboard focus - solo para fechas NO seleccionadas */
+      .datex-picker .calendar-table td.keyboard-focused:not(.start-date):not(.end-date):not(.active) {
         outline: 2px solid #10b981 !important;
         outline-offset: -2px !important;
         z-index: 10 !important;
@@ -1817,11 +2026,22 @@ class I {
         box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
       }
       
-      .datex-picker .calendar-table td.keyboard-focused > * {
+      .datex-picker .calendar-table td.keyboard-focused:not(.start-date):not(.end-date):not(.active) > * {
         background: #10b981 !important;
         color: white !important;
         font-weight: 600 !important;
       }
+
+      /* Keyboard focus para fechas seleccionadas - solo un outline sutil */
+      .datex-picker .calendar-table td.keyboard-focused.start-date,
+      .datex-picker .calendar-table td.keyboard-focused.end-date,
+      .datex-picker .calendar-table td.keyboard-focused.active {
+        outline: 2px solid rgba(255, 255, 255, 0.5) !important;
+        outline-offset: -2px !important;
+        z-index: 10 !important;
+        position: relative !important;
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
+      }
       
       /* Prevent layout shifts */
       .datex-picker {
@@ -1834,13 +2054,8 @@ class I {
     `, 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"), o = `${e}-${a}-${i}`;
-    return console.log(
-      "Keyboard: Formatting date for selector:",
-      t.toDateString(),
-      "-> formatted:",
-      o
-    ), o;
+    const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0");
+    return `${e}-${a}-${i}`;
   }
   // Public methods
   getCurrentFocusedDate() {
@@ -1850,15 +2065,12 @@ class I {
     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();
+    this.handleKeyDownBound && (this.container.removeEventListener("keydown", this.handleKeyDownBound), document.removeEventListener("keydown", this.handleKeyDownBound)), this.handleFocusBound && this.container.removeEventListener("focus", this.handleFocusBound), this.handleBlurBound && this.container.removeEventListener("blur", this.handleBlurBound), this.removeFocusStyles();
     const t = document.querySelector(".keyboard-focus-styles");
     t && t.remove();
   }
 }
-const P = {
+const I = {
   format: "DD/MM/YYYY",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -1903,10 +2115,10 @@ const P = {
   ],
   firstDay: 1
 };
-class V {
+class N {
   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 T(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
+    }), this.eventService = new F(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
   }
   resolveElement(t) {
     if (typeof t == "string") {
@@ -1940,11 +2152,11 @@ class V {
       ranges: t.ranges || {},
       opens: t.opens || "center",
       drops: t.drops || "auto",
-      locale: t.locale || P,
-      buttonClasses: t.buttonClasses || "btn btn-sm",
-      applyButtonClasses: t.applyButtonClasses || "btn-success",
-      cancelButtonClasses: t.cancelButtonClasses || "btn-danger",
-      theme: t.theme || E,
+      locale: t.locale || I,
+      buttonClasses: t.buttonClasses || "datex-btn datex-btn-sm",
+      applyButtonClasses: t.applyButtonClasses || "datex-btn-success",
+      cancelButtonClasses: t.cancelButtonClasses || "datex-btn-danger",
+      theme: t.theme || M,
       validation: t.validation || {},
       events: t.events || {}
     };
@@ -1965,7 +2177,7 @@ class V {
     };
   }
   initializeServices() {
-    this.calendarService = new M(this.options, this.locale);
+    this.calendarService = new L(this.options, this.locale);
   }
   addDropdownArrow() {
     this.element.tagName === "INPUT" && this.element.classList.add("datex-input");
@@ -2013,12 +2225,13 @@ class V {
     `;
   }
   initializeContainerServices() {
-    this.themeService = new A(this.container, this.options.theme), this.positionService = new L(
+    this.themeService = new T(this.container, this.options.theme), this.positionService = new E(
       this.element,
       this.container,
       this.options
-    ), this.validationService = new F(this.options.validation), this.keyboardService = new I(this.container, {
-      enabled: !0
+    ), this.validationService = new A(this.options.validation), this.keyboardService = new P(this.container, {
+      enabled: !1
+      // Deshabilitado por defecto para evitar conflictos
     }), this.keyboardService.setHandlers({
       onDateSelect: (t) => {
         this.handleKeyboardDateSelect(t);
@@ -2032,6 +2245,9 @@ class V {
       },
       onClear: () => {
         this.clearSelection();
+      },
+      onMonthChange: (t) => {
+        this.handleKeyboardMonthChange(t);
       }
     });
   }
@@ -2045,9 +2261,7 @@ class V {
   }
   // Public API methods
   show() {
-    this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.updateView(), this.displayContainer(), this.positionContainer(), this.element.tagName === "INPUT" && this.element.classList.add("datex-active"), setTimeout(() => {
-      this.state.isShowing && this.keyboardService.activate(this.state.startDate);
-    }, 200), this.dispatchShowEvent());
+    this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.updateView(), this.displayContainer(), this.positionContainer(), this.element.tagName === "INPUT" && this.element.classList.add("datex-active"), this.dispatchShowEvent());
   }
   hide() {
     this.state.isShowing && (this.revertIfIncomplete(), this.triggerCallbackIfChanged(), this.updateElement(), this.removeDocumentListeners(), this.keyboardService.deactivate(), this.hideContainer(), this.element.tagName === "INPUT" && this.element.classList.remove("datex-active"), this.dispatchHideEvent());
@@ -2104,7 +2318,7 @@ class V {
     this.options = this.mergeWithDefaults(e), t.locale && (this.locale = t.locale), this.reinitializeServices(), this.updateContainerConfiguration(), this.updateView(), this.state.isShowing && this.positionContainer();
   }
   reinitializeServices() {
-    this.calendarService = new M(this.options, this.locale), this.validationService.updateValidation(this.options.validation), this.themeService.setTheme(this.options.theme), this.positionService = new L(
+    this.calendarService = new L(this.options, this.locale), this.validationService.updateValidation(this.options.validation), this.themeService.setTheme(this.options.theme), this.positionService = new E(
       this.element,
       this.container,
       this.options
@@ -2175,11 +2389,11 @@ class V {
     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 = !m(
+    const t = !u(
       this.state.startDate,
       this.state.oldStartDate,
       "day"
-    ), e = this.state.endDate && this.state.oldEndDate && !m(this.state.endDate, this.state.oldEndDate, "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),
@@ -2202,13 +2416,16 @@ class V {
     this.removeDocumentListeners(), this.themeService.cleanup(), this.eventService.cleanup(), this.keyboardService.cleanup(), this.positionService.cleanup(), (t = this.container) != null && t.parentNode && this.container.parentNode.removeChild(this.container), this.element.tagName === "INPUT" && this.element.classList.remove("datex-input", "datex-active");
   }
   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;
     }
-    this.state.hoverDate = null, this.state.endDate || u(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();
+    this.state.hoverDate = null, this.state.endDate || x(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();
+  }
+  handleKeyboardMonthChange(t) {
+    const e = new Date(t.getFullYear(), t.getMonth(), 1);
+    this.state.leftCalendar.month = e, this.options.singleDatePicker || this.options.linkedCalendars && (this.state.rightCalendar.month = g(e, 1)), this.updateCalendars();
   }
   clearSelection() {
     const t = /* @__PURE__ */ new Date();
@@ -2216,7 +2433,7 @@ class V {
   }
   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})`);
+    (a = this.options.events) != null && a.onValidationError && this.options.events.onValidationError(t, e);
   }
   setupEventListeners() {
     this.setupElementEvents(), this.setupContainerEvents();
@@ -2302,11 +2519,11 @@ class V {
     const t = this.element;
     if (!((o = t.value) != null && o.length)) return;
     const e = t.value.split(this.locale.separator), { startDate: a, endDate: i } = this.parseDateParts(e);
-    a && D(a) && i && D(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
+    a && k(a) && i && k(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
   }
   parseDateParts(t) {
     let e = null, a = null;
-    return t.length === 2 ? (e = x(t[0].trim(), this.locale.format), a = x(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = x(t[0].trim(), this.locale.format), a = e), { startDate: e, endDate: a };
+    return t.length === 2 ? (e = f(t[0].trim(), this.locale.format), a = f(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = f(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());
@@ -2320,8 +2537,8 @@ class V {
       else {
         const i = this.options.ranges[a];
         if (i) {
-          const [o, s] = i;
-          this.state.startDate = new Date(o), this.state.endDate = new Date(s), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
+          const [o, n] = i;
+          this.state.startDate = new Date(o), this.state.endDate = new Date(n), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
         }
       }
   }
@@ -2358,38 +2575,38 @@ class V {
     ))), this.updateCalendars());
   }
   handleDateClick(t) {
-    var s, n;
+    var n, r;
     const e = t.target;
     if (!e.classList.contains("available")) return;
     const a = e.dataset.date;
     if (!a) return;
-    const i = x(a, "YYYY-MM-DD");
-    if (!D(i)) return;
+    const i = f(a, "YYYY-MM-DD");
+    if (!k(i)) return;
     const o = this.validationService.validateDate(i);
     if (!o.isValid) {
       this.showValidationError(o.error, o.errorCode);
       return;
     }
-    if (!((s = this.options.events) != null && s.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
-      if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || u(i, this.state.startDate))
+    if (!((n = this.options.events) != null && n.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
+      if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || x(i, this.state.startDate))
         this.state.endDate = null, this.setStartDate(i);
       else {
         if (this.setEndDate(i), this.state.startDate && this.state.endDate) {
-          const r = this.validationService.validateDateRange(
+          const s = this.validationService.validateDateRange(
             this.state.startDate,
             this.state.endDate
           );
-          if (!r.isValid) {
+          if (!s.isValid) {
             this.showValidationError(
-              r.error,
-              r.errorCode
+              s.error,
+              s.errorCode
             ), this.state.endDate = null, this.updateDateClasses();
             return;
           }
         }
         this.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick());
       }
-      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();
+      this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), (r = this.options.events) != null && r.onDateSelect && this.options.events.onDateSelect(i), this.updateDateClasses();
     }
   }
   handleDateHover(t) {
@@ -2397,46 +2614,46 @@ class V {
     if (!e.classList.contains("available")) return;
     const a = e.dataset.date;
     if (!a) return;
-    const i = x(a, "YYYY-MM-DD");
-    D(i) && !this.state.endDate && !u(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
+    const i = f(a, "YYYY-MM-DD");
+    k(i) && !this.state.endDate && !x(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
   }
   handleMonthYearChange(t) {
     const a = t.target.closest(".drp-calendar");
     if (!a) return;
     const i = a.classList.contains("left"), o = a.querySelector(
       ".monthselect"
-    ), s = a.querySelector(
+    ), n = a.querySelector(
       ".yearselect"
     );
-    if (!o || !s) return;
-    const n = parseInt(o.value, 10), r = parseInt(s.value, 10), d = new Date(r, n, 1);
+    if (!o || !n) return;
+    const r = parseInt(o.value, 10), s = parseInt(n.value, 10), d = new Date(s, r, 1);
     i ? (this.state.leftCalendar.month = d, this.options.linkedCalendars && (this.state.rightCalendar.month = g(d, 1))) : (this.state.rightCalendar.month = d, this.options.linkedCalendars && (this.state.leftCalendar.month = g(d, -1))), this.updateCalendars();
   }
   handleTimeChange(t) {
     const a = t.target.closest(".drp-calendar");
     if (!a) return;
-    const i = a.classList.contains("left"), o = i ? this.state.startDate : this.state.endDate || this.state.startDate, s = a.querySelector(
+    const i = a.classList.contains("left"), o = i ? this.state.startDate : this.state.endDate || this.state.startDate, n = a.querySelector(
       ".hourselect"
-    ), n = a.querySelector(
-      ".minuteselect"
     ), r = a.querySelector(
+      ".minuteselect"
+    ), s = a.querySelector(
       ".secondselect"
     ), d = a.querySelector(
       ".ampmselect"
     );
-    if (!s || !n) return;
-    let c = parseInt(s.value, 10);
-    const b = parseInt(n.value, 10) || 0, h = r ? parseInt(r.value, 10) : 0;
+    if (!n || !r) return;
+    let c = parseInt(n.value, 10);
+    const m = parseInt(r.value, 10) || 0, h = s ? parseInt(s.value, 10) : 0;
     if (!this.options.timePicker24Hour && d) {
-      const f = d.value;
-      f === "PM" && c < 12 && (c += 12), f === "AM" && c === 12 && (c = 0);
+      const b = d.value;
+      b === "PM" && c < 12 && (c += 12), b === "AM" && c === 12 && (c = 0);
     }
     const p = new Date(o);
-    if (p.setHours(c), p.setMinutes(b), p.setSeconds(h), this.options.timePickerIncrement && this.roundToIncrement(p), !(this.options.minDate && p < this.options.minDate) && !(this.options.maxDate && p > this.options.maxDate)) {
+    if (p.setHours(c), p.setMinutes(m), p.setSeconds(h), this.options.timePickerIncrement && this.roundToIncrement(p), !(this.options.minDate && p < this.options.minDate) && !(this.options.maxDate && p > this.options.maxDate)) {
       if (this.validationService) {
-        const f = this.validationService.validateDate(p);
-        if (!f.isValid) {
-          this.showValidationError(f.error, f.errorCode);
+        const b = this.validationService.validateDate(p);
+        if (!b.isValid) {
+          this.showValidationError(b.error, b.errorCode);
           return;
         }
       }
@@ -2476,7 +2693,7 @@ class V {
     e.calendar = this.calendarService.buildCalendarMatrix(
       e.month
     );
-    const i = this.calendarService.canNavigatePrevious(e.month), o = this.calendarService.canNavigateNext(e.month), s = this.calendarService.renderCalendarHTML(
+    const i = this.calendarService.canNavigatePrevious(e.month), o = this.calendarService.canNavigateNext(e.month), n = this.calendarService.renderCalendarHTML(
       e,
       t,
       this.state.startDate,
@@ -2484,18 +2701,18 @@ class V {
       i,
       o
     );
-    a.innerHTML = s;
+    a.innerHTML = n;
   }
   updateFormInputs() {
     const t = this.container.querySelector(
       ".applyBtn"
-    ), e = this.options.singleDatePicker || this.state.endDate && (u(this.state.startDate, this.state.endDate) || m(this.state.startDate, this.state.endDate, "day"));
+    ), e = this.options.singleDatePicker || this.state.endDate && (x(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
     t.disabled = !e, this.updateMobileHeaderButtons();
   }
   updateSelectedDisplay() {
     const t = this.container.querySelector(".drp-selected");
-    let e = k(this.state.startDate, this.locale.format);
-    !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + k(this.state.endDate, this.locale.format)), t.textContent = e, this.updateMobileHeader(e);
+    let e = D(this.state.startDate, this.locale.format);
+    !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + D(this.state.endDate, this.locale.format)), t.textContent = e, this.updateMobileHeader(e);
   }
   updateMobileHeader(t) {
     const e = this.container.querySelector(
@@ -2512,15 +2729,15 @@ class V {
       ".mobile-applyBtn"
     );
     if (t) {
-      const e = this.options.singleDatePicker || this.state.endDate && (u(this.state.startDate, this.state.endDate) || m(this.state.startDate, this.state.endDate, "day"));
+      const e = this.options.singleDatePicker || this.state.endDate && (x(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
       t.disabled = !e;
     }
   }
   updateElement() {
     if (this.element.tagName === "INPUT" && this.options.autoUpdateInput) {
       const t = this.element;
-      let e = k(this.state.startDate, this.locale.format);
-      !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + k(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
+      let e = D(this.state.startDate, this.locale.format);
+      !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + D(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
     }
   }
   renderRanges() {
@@ -2547,13 +2764,13 @@ class V {
     this.container.querySelectorAll("td[data-date]").forEach((e) => {
       const a = e.dataset.date;
       if (!a) return;
-      const i = x(a, "YYYY-MM-DD");
-      if (!D(i)) return;
+      const i = f(a, "YYYY-MM-DD");
+      if (!k(i)) return;
       e.classList.remove("in-range", "end-date", "start-date", "active");
-      const o = this.state.startDate, s = this.state.endDate, n = this.state.hoverDate;
-      if (o && m(i, o, "day") && e.classList.add("active", "start-date"), s && m(i, s, "day") && e.classList.add("active", "end-date"), o && s && y(i, o) && u(i, s) && e.classList.add("in-range"), o && n && !s) {
-        const r = u(n, o) ? n : o, d = u(n, o) ? o : n;
-        m(i, n, "day") ? e.classList.add("end-date") : y(i, r) && u(i, d) && e.classList.add("in-range");
+      const o = this.state.startDate, n = this.state.endDate, r = this.state.hoverDate;
+      if (o && u(i, o, "day") && e.classList.add("active", "start-date"), n && u(i, n, "day") && e.classList.add("active", "end-date"), o && n && y(i, o) && x(i, n) && e.classList.add("in-range"), o && r && !n) {
+        const s = x(r, o) ? r : o, d = x(r, o) ? o : r;
+        u(i, r, "day") ? e.classList.add("end-date") : y(i, s) && x(i, d) && e.classList.add("in-range");
       }
     });
   }
@@ -2565,24 +2782,24 @@ class V {
       ".hourselect"
     ), o = a.querySelector(
       ".minuteselect"
-    ), s = a.querySelector(
-      ".secondselect"
     ), n = a.querySelector(
+      ".secondselect"
+    ), r = a.querySelector(
       ".ampmselect"
     );
     if (i) {
-      let r = parseInt(i.value, 10);
-      if (!this.options.timePicker24Hour && n) {
-        const d = n.value;
-        d === "PM" && r < 12 && (r += 12), d === "AM" && r === 12 && (r = 0);
+      let s = parseInt(i.value, 10);
+      if (!this.options.timePicker24Hour && r) {
+        const d = r.value;
+        d === "PM" && s < 12 && (s += 12), d === "AM" && s === 12 && (s = 0);
       }
-      t.setHours(r);
+      t.setHours(s);
     }
     if (o) {
-      const r = parseInt(o.value, 10) || 0;
-      t.setMinutes(r);
+      const s = parseInt(o.value, 10) || 0;
+      t.setMinutes(s);
     }
-    this.options.timePickerSeconds && s && t.setSeconds(parseInt(s.value, 10));
+    this.options.timePickerSeconds && n && t.setSeconds(parseInt(n.value, 10));
   }
   createRangeService() {
     return {
@@ -2594,13 +2811,13 @@ class V {
       },
       calculateChosenLabel: (t, e) => {
         let a = null;
-        for (const [i, [o, s]] of Object.entries(
+        for (const [i, [o, n]] of Object.entries(
           this.options.ranges
         )) {
-          const n = m(t, o, "day");
-          let r = !1;
-          if (e ? r = m(e, s, "day") : r = m(t, s, "day"), n && r) {
-            const d = Math.abs(s.getTime() - o.getTime()) / 864e5 + 1;
+          const r = u(t, o, "day");
+          let s = !1;
+          if (e ? s = u(e, n, "day") : s = u(t, n, "day"), r && s) {
+            const d = Math.abs(n.getTime() - o.getTime()) / 864e5 + 1;
             (!a || d > a.days) && (a = { label: i, days: d });
           }
         }
@@ -2619,19 +2836,19 @@ class V {
 }
 export {
   Y as BOOTSTRAP_THEME,
-  E as DEFAULT_THEME,
-  V as Datex,
+  M as DEFAULT_THEME,
+  N as Datex,
   z as MATERIAL_THEME,
-  P as SPANISH_LOCALE,
+  I as SPANISH_LOCALE,
   R as SPANISH_LOCALE_WITH_TIME,
   g as addMonths,
   S as endOfDay,
-  k as formatDate,
+  D as formatDate,
   w as getStartOfMonth,
   y as isAfterDate,
-  u as isBeforeDate,
-  m as isSameDate,
-  D as isValidDate,
-  x as parseDate,
+  x as isBeforeDate,
+  u as isSameDate,
+  k as isValidDate,
+  f as parseDate,
   C as startOfDay
 };