datex-ui 1.2.3 → 1.2.6

package/dist/index.esm.js

@@ -433,7 +433,11 @@ class H {
         line-height: 1em !important;
         width: 278px !important;
         z-index: 999999; /* Removed !important to allow JavaScript override */
-        margin-top:7px;
+        margin-top: 7px;
+      }
+
+      .datex-picker.drop-up {
+        margin-top: 0 !important;
       }
 
       /* Base arrow styles - creates the dropdown arrow */
@@ -1531,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;
@@ -1549,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;
   }
@@ -1574,25 +1587,55 @@ class E {
     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";
+    this.options.appendToBody ? (this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed") : (this.container.style.position = "absolute", this.container.style.top = "auto", this.container.style.left = "auto", this.container.style.right = "auto");
   }
   calculateVerticalPosition(t, e) {
     let a, i = this.options.drops;
+    if (!this.options.appendToBody) {
+      const o = this.element.offsetHeight;
+      switch (i) {
+        case "auto":
+          const n = this.element.getBoundingClientRect();
+          window.innerHeight - n.bottom < e && n.top > e ? (a = -e - 7, i = "up") : a = o;
+          break;
+        case "up":
+          a = -e - 7;
+          break;
+        default:
+          a = o;
+          break;
+      }
+      return { top: a, drops: i };
+    }
     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 };
   }
   calculateHorizontalPosition(t, e) {
     let a;
+    if (!this.options.appendToBody) {
+      switch (this.options.opens) {
+        case "left":
+          a = this.element.offsetWidth - e;
+          break;
+        case "center":
+          a = (this.element.offsetWidth - e) / 2;
+          break;
+        default:
+          a = 0;
+          break;
+      }
+      return a;
+    }
     switch (this.options.opens) {
       case "left":
         a = t.right - e;
@@ -1611,8 +1654,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) => {
@@ -1800,7 +1849,7 @@ class L {
     return !this.options.maxDate || x(B(t), this.options.maxDate);
   }
 }
-class A {
+class F {
   constructor(t = {}) {
     this.validation = t;
   }
@@ -1893,7 +1942,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,
@@ -2113,7 +2162,7 @@ const P = {
     "Diciembre"
   ],
   firstDay: 1
-}, O = {
+}, R = {
   format: "DD/MM/YYYY HH:mm",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -2136,7 +2185,7 @@ const P = {
   ],
   firstDay: 1
 };
-class R {
+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 T(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
@@ -2179,7 +2228,9 @@ class R {
       cancelButtonClasses: t.cancelButtonClasses || "datex-btn-danger",
       theme: t.theme || M,
       validation: t.validation || {},
-      events: t.events || {}
+      events: t.events || {},
+      zIndex: t.zIndex ?? "auto",
+      appendToBody: t.appendToBody ?? !0
     };
     return a.timePicker && a.autoApply && (a.autoApply = !1), a;
   }
@@ -2204,8 +2255,9 @@ class R {
     this.element.tagName === "INPUT" && this.element.classList.add("datex-input");
   }
   createContainer() {
+    var a;
     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();
+    e.innerHTML = t.trim(), this.container = e.firstElementChild, this.options.appendToBody ? document.body.appendChild(this.container) : (a = this.element.parentElement) == null || a.appendChild(this.container), this.initializeContainerServices(), this.setupContainerClasses(), this.setupInitialVisibility();
   }
   buildContainerTemplate() {
     return `
@@ -2250,7 +2302,7 @@ class R {
       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({
@@ -2885,10 +2937,10 @@ class R {
 export {
   z as BOOTSTRAP_THEME,
   M as DEFAULT_THEME,
-  R as Datex,
+  O as Datex,
   Y as MATERIAL_THEME,
   P as SPANISH_LOCALE,
-  O as SPANISH_LOCALE_WITH_TIME,
+  R as SPANISH_LOCALE_WITH_TIME,
   g as addMonths,
   S as endOfDay,
   D as formatDate,

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

@@ -71,6 +71,8 @@ export interface DatexOptions {
     theme?: DatexTheme;
     validation?: DatexValidation;
     events?: DatexEvents;
+    zIndex?: number | "auto";
+    appendToBody?: boolean;
 }
 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.3",
+  "version": "1.2.6",
   "type": "module",
   "description": "A modern, lightweight, and customizable date range picker for TypeScript/JavaScript applications",
   "main": "dist/index.esm.js",