datex-ui 1.2.5 → 1.2.6

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 I(l) {
+function B(l) {
   return new Date(l.getFullYear(), l.getMonth() + 1, 0);
 }
-function B(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;
 }
@@ -1587,10 +1587,26 @@ 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, a + e >= window.innerHeight && (a = t.top - e - 7, i = "up");
@@ -1606,6 +1622,20 @@ class E {
   }
   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;
@@ -1658,7 +1688,7 @@ class L {
     this.options = t, this.locale = e;
   }
   buildCalendarMatrix(t) {
-    const e = w(t), a = B(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++) {
@@ -1816,7 +1846,7 @@ class L {
     return !this.options.minDate || y(w(t), this.options.minDate);
   }
   canNavigateNext(t) {
-    return !this.options.maxDate || x(I(t), this.options.maxDate);
+    return !this.options.maxDate || x(B(t), this.options.maxDate);
   }
 }
 class F {
@@ -2132,7 +2162,7 @@ const P = {
     "Diciembre"
   ],
   firstDay: 1
-}, O = {
+}, R = {
   format: "DD/MM/YYYY HH:mm",
   separator: " - ",
   applyLabel: "Aplicar",
@@ -2155,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();
@@ -2199,7 +2229,8 @@ class R {
       theme: t.theme || M,
       validation: t.validation || {},
       events: t.events || {},
-      zIndex: t.zIndex ?? "auto"
+      zIndex: t.zIndex ?? "auto",
+      appendToBody: t.appendToBody ?? !0
     };
     return a.timePicker && a.autoApply && (a.autoApply = !1), a;
   }
@@ -2224,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 `
@@ -2905,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

@@ -72,6 +72,7 @@ export interface DatexOptions {
     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.5",
+  "version": "1.2.6",
   "type": "module",
   "description": "A modern, lightweight, and customizable date range picker for TypeScript/JavaScript applications",
   "main": "dist/index.esm.js",