datex-ui 1.2.2 → 1.2.5

package/dist/index.esm.js

@@ -64,10 +64,10 @@ function f(l, t) {
 function w(l) {
   return new Date(l.getFullYear(), l.getMonth(), 1);
 }
-function B(l) {
+function I(l) {
   return new Date(l.getFullYear(), l.getMonth() + 1, 0);
 }
-function I(l, t = 1) {
+function B(l, t = 1) {
   const a = (l.getDay() - t + 7) % 7, i = new Date(l);
   return i.setDate(l.getDate() - a), i;
 }
@@ -432,7 +432,12 @@ class H {
         color: ${t.textColor} !important;
         line-height: 1em !important;
         width: 278px !important;
-        z-index: 999999 !important;
+        z-index: 999999; /* Removed !important to allow JavaScript override */
+        margin-top: 7px;
+      }
+
+      .datex-picker.drop-up {
+        margin-top: 0 !important;
       }
 
       /* Base arrow styles - creates the dropdown arrow */
@@ -854,7 +859,7 @@ class H {
         min-height: 20px !important;
         min-width: 50px !important;
         position: relative !important;
-        z-index: 1000000 !important;
+        z-index: 1000000; /* Removed !important to allow JavaScript override */
         transform: none !important;
         isolation: auto !important;
       }
@@ -946,7 +951,7 @@ class H {
           box-sizing: border-box !important;
           transform: none !important;
           overflow-x: hidden !important;
-          z-index: 999999 !important;
+          z-index: 999999; /* Removed !important to allow JavaScript override */
           /* Fix for overlay issues */
           isolation: isolate !important;
           contain: layout style !important;
@@ -1191,7 +1196,7 @@ class H {
         .datex-picker select,
         .datex-picker.mobile-view select {
           position: relative !important;
-          z-index: 1000 !important;
+          z-index: 1000; /* Removed !important to allow JavaScript override */
           background: ${t.backgroundColor} !important;
           border: 1px solid ${t.borderColor} !important;
           border-radius: 4px !important;
@@ -1530,6 +1535,10 @@ class E {
    */
   updateZIndex() {
     if (!this.container) return;
+    if (this.options.zIndex !== "auto") {
+      this.container.style.zIndex = this.options.zIndex.toString(), this.updateInternalElementsZIndex(this.options.zIndex);
+      return;
+    }
     const t = this.getHighestZIndex(), e = parseInt(this.container.style.zIndex || "0");
     if (t >= e) {
       const a = t + 1;
@@ -1548,15 +1557,20 @@ class 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.minWidth = "100vw", this.container.style.borderRadius = "12px 12px 0 0", this.container.style.zIndex = "999999", this.container.style.margin = "0", this.container.style.padding = "0", this.container.style.boxSizing = "border-box", this.container.style.transform = "none", this.container.style.maxHeight = "85vh", this.container.style.isolation = "isolate", this.container.style.contain = "layout style", this.container.style.pointerEvents = "auto", this.container.style.touchAction = "manipulation", this.container.classList.add("drop-up", "mobile-view"), this.container.classList.remove("opensleft", "opensright", "openscenter"), this.showMobileHeader();
-    const t = this.getHighestZIndex(), e = 999999, a = t >= e ? t + 1 : e;
-    this.container.style.zIndex = a.toString(), this.updateInternalElementsZIndex(a);
+    let t;
+    if (this.options.zIndex !== "auto")
+      t = this.options.zIndex;
+    else {
+      const e = this.getHighestZIndex(), a = 999999;
+      t = e >= a ? e + 1 : a;
+    }
+    this.container.style.zIndex = t.toString(), this.updateInternalElementsZIndex(t);
   }
   getHighestZIndex() {
-    const t = document.querySelectorAll("*");
-    let e = 0;
-    for (let a = 0; a < t.length; a++) {
-      const i = parseInt(window.getComputedStyle(t[a]).zIndex);
-      !isNaN(i) && i > e && (e = i);
+    let t = this.element, e = 0;
+    for (; t && t instanceof HTMLElement && t !== document.body; ) {
+      const a = window.getComputedStyle(t), i = parseInt(a.zIndex);
+      !isNaN(i) && i > e && (e = i), t = t.parentElement;
     }
     return e;
   }
@@ -1579,13 +1593,13 @@ class 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");
+        a = t.bottom, a + e >= window.innerHeight && (a = t.top - e - 7, i = "up");
         break;
       case "up":
-        a = t.top - e - 5;
+        a = t.top - e - 7;
         break;
       default:
-        a = t.bottom + 5;
+        a = t.bottom;
         break;
     }
     return { top: Math.max(9, a), drops: i };
@@ -1610,8 +1624,14 @@ class E {
   }
   applyFinalPosition(t, e) {
     this.container.style.top = `${t}px`, this.container.style.left = `${e}px`, this.container.style.right = "auto";
-    const a = this.getHighestZIndex(), i = 99999, o = a >= i ? a + 1 : i;
-    this.container.style.zIndex = o.toString(), this.updateInternalElementsZIndex(o);
+    let a;
+    if (this.options.zIndex !== "auto")
+      a = this.options.zIndex;
+    else {
+      const i = this.getHighestZIndex(), o = 99999;
+      a = i >= o ? i + 1 : o;
+    }
+    this.container.style.zIndex = a.toString(), this.updateInternalElementsZIndex(a);
   }
   updateInternalElementsZIndex(t) {
     this.container.querySelectorAll("select").forEach((i) => {
@@ -1638,7 +1658,7 @@ class L {
     this.options = t, this.locale = e;
   }
   buildCalendarMatrix(t) {
-    const e = w(t), a = I(e, this.locale.firstDay), i = [];
+    const e = w(t), a = B(e, this.locale.firstDay), i = [];
     let o = [];
     const n = new Date(a);
     for (let r = 0; r < 42; r++) {
@@ -1796,10 +1816,10 @@ class L {
     return !this.options.minDate || y(w(t), this.options.minDate);
   }
   canNavigateNext(t) {
-    return !this.options.maxDate || x(B(t), this.options.maxDate);
+    return !this.options.maxDate || x(I(t), this.options.maxDate);
   }
 }
-class A {
+class F {
   constructor(t = {}) {
     this.validation = t;
   }
@@ -1892,7 +1912,7 @@ class A {
     return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
   }
 }
-class F {
+class A {
   constructor(t, e = {}) {
     this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
       enabled: !1,
@@ -2135,7 +2155,7 @@ const P = {
   ],
   firstDay: 1
 };
-class N {
+class R {
   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();
@@ -2178,7 +2198,8 @@ class N {
       cancelButtonClasses: t.cancelButtonClasses || "datex-btn-danger",
       theme: t.theme || M,
       validation: t.validation || {},
-      events: t.events || {}
+      events: t.events || {},
+      zIndex: t.zIndex ?? "auto"
     };
     return a.timePicker && a.autoApply && (a.autoApply = !1), a;
   }
@@ -2249,7 +2270,7 @@ class N {
       this.element,
       this.container,
       this.options
-    ), this.validationService = new A(this.options.validation), this.keyboardService = new F(this.container, {
+    ), this.validationService = new F(this.options.validation), this.keyboardService = new A(this.container, {
       enabled: !1
       // Deshabilitado por defecto para evitar conflictos
     }), this.keyboardService.setHandlers({
@@ -2884,7 +2905,7 @@ class N {
 export {
   z as BOOTSTRAP_THEME,
   M as DEFAULT_THEME,
-  N as Datex,
+  R as Datex,
   Y as MATERIAL_THEME,
   P as SPANISH_LOCALE,
   O as SPANISH_LOCALE_WITH_TIME,

package/dist/types/datex-types.d.ts

@@ -71,6 +71,7 @@ export interface DatexOptions {
     theme?: DatexTheme;
     validation?: DatexValidation;
     events?: DatexEvents;
+    zIndex?: number | "auto";
 }
 export type DatexCallback = (startDate: Date, endDate: Date, label?: string) => void;
 export interface CalendarState {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "datex-ui",
   "access": "public",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "type": "module",
   "description": "A modern, lightweight, and customizable date range picker for TypeScript/JavaScript applications",
   "main": "dist/index.esm.js",