datex-ui 1.2.1 → 1.2.3

package/dist/datex.d.ts

@@ -14,6 +14,7 @@ export declare class Datex {
     private locale;
     private callback;
     private state;
+    private domObserver?;
     private themeService;
     private eventService;
     private positionService;
@@ -66,6 +67,9 @@ export declare class Datex {
     private roundToIncrement;
     private dispatchShowEvent;
     private dispatchHideEvent;
+    private setupDOMObserver;
+    private removeDOMObserver;
+    private hasHighZIndex;
     private cleanup;
     private handleKeyboardDateSelect;
     private handleKeyboardMonthChange;

package/dist/index.esm.js

@@ -67,7 +67,7 @@ function w(l) {
 function B(l) {
   return new Date(l.getFullYear(), l.getMonth() + 1, 0);
 }
-function H(l, t = 1) {
+function I(l, t = 1) {
   const a = (l.getDay() - t + 7) % 7, i = new Date(l);
   return i.setDate(l.getDate() - a), i;
 }
@@ -87,7 +87,7 @@ const M = {
   borderRadius: "4px",
   fontSize: "15px",
   fontFamily: "arial"
-}, Y = {
+}, z = {
   primaryColor: "#0d6efd",
   secondaryColor: "#6c757d",
   backgroundColor: "#ffffff",
@@ -103,7 +103,7 @@ const M = {
   borderRadius: "6px",
   fontSize: "14px",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-}, z = {
+}, Y = {
   primaryColor: "#1976d2",
   secondaryColor: "#757575",
   backgroundColor: "#ffffff",
@@ -121,7 +121,7 @@ const M = {
   fontSize: "14px",
   fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif'
 };
-class T {
+class H {
   constructor(t, e = M) {
     this.mode = "light", this.handleMediaChange = () => {
       this.mode === "auto" && this.applyTheme();
@@ -432,7 +432,8 @@ class T {
         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;
       }
 
       /* Base arrow styles - creates the dropdown arrow */
@@ -854,7 +855,7 @@ class T {
         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 +947,7 @@ class T {
           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 +1192,7 @@ class T {
         .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;
@@ -1473,7 +1474,7 @@ class T {
     `;
   }
 }
-class F {
+class T {
   constructor() {
     this.boundHandlers = /* @__PURE__ */ new Map();
   }
@@ -1525,6 +1526,17 @@ class E {
       this.orientationChangeHandler
     ), window.removeEventListener("resize", this.orientationChangeHandler));
   }
+  /**
+   * Recalculates and updates z-index when DOM changes (e.g., new modals opened)
+   */
+  updateZIndex() {
+    if (!this.container) return;
+    const t = this.getHighestZIndex(), e = parseInt(this.container.style.zIndex || "0");
+    if (t >= e) {
+      const a = t + 1;
+      this.container.style.zIndex = a.toString(), this.updateInternalElementsZIndex(a);
+    }
+  }
   calculatePosition() {
     if (!this.container) return;
     this.isMobileDevice() ? this.positionForMobile() : this.positionForDesktop();
@@ -1537,8 +1549,8 @@ 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();
-    t >= 999999 && (this.container.style.zIndex = (t + 1).toString());
+    const t = this.getHighestZIndex(), e = 999999, a = t >= e ? t + 1 : e;
+    this.container.style.zIndex = a.toString(), this.updateInternalElementsZIndex(a);
   }
   getHighestZIndex() {
     const t = document.querySelectorAll("*");
@@ -1598,7 +1610,16 @@ class E {
     t === "up" ? this.container.classList.add("drop-up") : this.container.classList.remove("drop-up");
   }
   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";
+    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);
+  }
+  updateInternalElementsZIndex(t) {
+    this.container.querySelectorAll("select").forEach((i) => {
+      i.style.zIndex = (t + 1).toString();
+    }), this.container.querySelectorAll(".keyboard-focused").forEach((i) => {
+      i.style.zIndex = (t + 2).toString();
+    });
   }
   showMobileHeader() {
     const t = this.container.querySelector(
@@ -1618,7 +1639,7 @@ class L {
     this.options = t, this.locale = e;
   }
   buildCalendarMatrix(t) {
-    const e = w(t), a = H(e, this.locale.firstDay), i = [];
+    const e = w(t), a = I(e, this.locale.firstDay), i = [];
     let o = [];
     const n = new Date(a);
     for (let r = 0; r < 42; r++) {
@@ -1872,7 +1893,7 @@ class A {
     return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
   }
 }
-class P {
+class F {
   constructor(t, e = {}) {
     this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
       enabled: !1,
@@ -2070,7 +2091,7 @@ class P {
     t && t.remove();
   }
 }
-const I = {
+const P = {
   format: "DD/MM/YYYY",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -2092,7 +2113,7 @@ const I = {
     "Diciembre"
   ],
   firstDay: 1
-}, R = {
+}, O = {
   format: "DD/MM/YYYY HH:mm",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -2115,10 +2136,10 @@ const I = {
   ],
   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 F(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
+    }), this.eventService = new T(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
   }
   resolveElement(t) {
     if (typeof t == "string") {
@@ -2152,7 +2173,7 @@ class N {
       ranges: t.ranges || {},
       opens: t.opens || "center",
       drops: t.drops || "auto",
-      locale: t.locale || I,
+      locale: t.locale || P,
       buttonClasses: t.buttonClasses || "datex-btn datex-btn-sm",
       applyButtonClasses: t.applyButtonClasses || "datex-btn-success",
       cancelButtonClasses: t.cancelButtonClasses || "datex-btn-danger",
@@ -2225,11 +2246,11 @@ class N {
     `;
   }
   initializeContainerServices() {
-    this.themeService = new T(this.container, this.options.theme), this.positionService = new E(
+    this.themeService = new H(this.container, this.options.theme), this.positionService = new E(
       this.element,
       this.container,
       this.options
-    ), this.validationService = new A(this.options.validation), this.keyboardService = new P(this.container, {
+    ), this.validationService = new A(this.options.validation), this.keyboardService = new F(this.container, {
       enabled: !1
       // Deshabilitado por defecto para evitar conflictos
     }), this.keyboardService.setHandlers({
@@ -2261,10 +2282,10 @@ class N {
   }
   // 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"), this.dispatchShowEvent());
+    this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.setupDOMObserver(), 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());
+    this.state.isShowing && (this.revertIfIncomplete(), this.triggerCallbackIfChanged(), this.updateElement(), this.removeDocumentListeners(), this.removeDOMObserver(), this.keyboardService.deactivate(), this.hideContainer(), this.element.tagName === "INPUT" && this.element.classList.remove("datex-active"), this.dispatchHideEvent());
   }
   toggle() {
     this.state.isShowing ? this.hide() : this.show();
@@ -2411,9 +2432,36 @@ class N {
   dispatchHideEvent() {
     this.eventService.dispatchEvent(this.element, "hide.daterangepicker", this);
   }
+  setupDOMObserver() {
+    this.domObserver = new MutationObserver((t) => {
+      let e = !1;
+      t.forEach((a) => {
+        a.type === "childList" && a.addedNodes.forEach((i) => {
+          if (i.nodeType === Node.ELEMENT_NODE) {
+            const o = i;
+            this.hasHighZIndex(o) && (e = !0);
+          }
+        });
+      }), e && setTimeout(() => {
+        this.state.isShowing && this.positionService && this.positionService.updateZIndex();
+      }, 10);
+    }), this.domObserver.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  removeDOMObserver() {
+    this.domObserver && (this.domObserver.disconnect(), this.domObserver = void 0);
+  }
+  hasHighZIndex(t) {
+    const e = window.getComputedStyle(t), a = parseInt(e.zIndex);
+    return !isNaN(a) && a > 1e3 ? !0 : ["modal", "dialog", "popup", "overlay", "dropdown"].some(
+      (o) => t.classList.contains(o) || t.className.toLowerCase().includes(o)
+    );
+  }
   cleanup() {
     var t;
-    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");
+    this.removeDocumentListeners(), this.removeDOMObserver(), 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) {
     const e = this.validationService.validateDate(t);
@@ -2835,12 +2883,12 @@ class N {
   }
 }
 export {
-  Y as BOOTSTRAP_THEME,
+  z as BOOTSTRAP_THEME,
   M as DEFAULT_THEME,
-  N as Datex,
-  z as MATERIAL_THEME,
-  I as SPANISH_LOCALE,
-  R as SPANISH_LOCALE_WITH_TIME,
+  R as Datex,
+  Y as MATERIAL_THEME,
+  P as SPANISH_LOCALE,
+  O as SPANISH_LOCALE_WITH_TIME,
   g as addMonths,
   S as endOfDay,
   D as formatDate,

package/dist/services/position-service.d.ts

@@ -10,6 +10,10 @@ export declare class PositionService {
     constructor(element: HTMLElement, container: HTMLElement, options: Required<DatexOptions>);
     private setupOrientationHandler;
     cleanup(): void;
+    /**
+     * Recalculates and updates z-index when DOM changes (e.g., new modals opened)
+     */
+    updateZIndex(): void;
     calculatePosition(): void;
     private isMobileDevice;
     private positionForMobile;
@@ -20,6 +24,7 @@ export declare class PositionService {
     private calculateHorizontalPosition;
     private applyDropUpClass;
     private applyFinalPosition;
+    private updateInternalElementsZIndex;
     private showMobileHeader;
     private hideMobileHeader;
 }

package/package.json

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