datex-ui 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
function
|
|
2
|
-
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"),
|
|
3
|
-
return t.replace(/YYYY/g, String(e)).replace(/MM/g, a).replace(/DD/g, i).replace(/HH/g, o).replace(/mm/g,
|
|
1
|
+
function D(l, t) {
|
|
2
|
+
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");
|
|
3
|
+
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);
|
|
4
4
|
}
|
|
5
5
|
function g(l, t) {
|
|
6
6
|
const e = new Date(l);
|
|
@@ -17,10 +17,10 @@ function S(l) {
|
|
|
17
17
|
function y(l, t) {
|
|
18
18
|
return l.getTime() > t.getTime();
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function x(l, t) {
|
|
21
21
|
return l.getTime() < t.getTime();
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function u(l, t, e = "day") {
|
|
24
24
|
if (!l || !t) return !1;
|
|
25
25
|
switch (e) {
|
|
26
26
|
case "day":
|
|
@@ -33,10 +33,10 @@ function m(l, t, e = "day") {
|
|
|
33
33
|
return !1;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function k(l) {
|
|
37
37
|
return l instanceof Date && !isNaN(l.getTime());
|
|
38
38
|
}
|
|
39
|
-
function
|
|
39
|
+
function f(l, t) {
|
|
40
40
|
if (t === "YYYY-MM-DD") {
|
|
41
41
|
const e = l.split("-");
|
|
42
42
|
if (e.length === 3) {
|
|
@@ -55,8 +55,8 @@ function x(l, t) {
|
|
|
55
55
|
if (t === "DD/MM/YYYY HH:mm") {
|
|
56
56
|
const [e, a] = l.split(" "), i = e.split("/"), o = a ? a.split(":") : ["0", "0"];
|
|
57
57
|
if (i.length === 3) {
|
|
58
|
-
const
|
|
59
|
-
return new Date(r, n,
|
|
58
|
+
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;
|
|
59
|
+
return new Date(s, r, n, d, c);
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
return new Date(l);
|
|
@@ -64,14 +64,14 @@ function x(l, t) {
|
|
|
64
64
|
function w(l) {
|
|
65
65
|
return new Date(l.getFullYear(), l.getMonth(), 1);
|
|
66
66
|
}
|
|
67
|
-
function
|
|
67
|
+
function B(l) {
|
|
68
68
|
return new Date(l.getFullYear(), l.getMonth() + 1, 0);
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function I(l, t = 1) {
|
|
71
71
|
const a = (l.getDay() - t + 7) % 7, i = new Date(l);
|
|
72
72
|
return i.setDate(l.getDate() - a), i;
|
|
73
73
|
}
|
|
74
|
-
const
|
|
74
|
+
const M = {
|
|
75
75
|
primaryColor: "#357ebd",
|
|
76
76
|
secondaryColor: "#ccc",
|
|
77
77
|
backgroundColor: "#ffffff",
|
|
@@ -87,7 +87,7 @@ const E = {
|
|
|
87
87
|
borderRadius: "4px",
|
|
88
88
|
fontSize: "15px",
|
|
89
89
|
fontFamily: "arial"
|
|
90
|
-
},
|
|
90
|
+
}, z = {
|
|
91
91
|
primaryColor: "#0d6efd",
|
|
92
92
|
secondaryColor: "#6c757d",
|
|
93
93
|
backgroundColor: "#ffffff",
|
|
@@ -103,7 +103,7 @@ const E = {
|
|
|
103
103
|
borderRadius: "6px",
|
|
104
104
|
fontSize: "14px",
|
|
105
105
|
fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
|
|
106
|
-
},
|
|
106
|
+
}, Y = {
|
|
107
107
|
primaryColor: "#1976d2",
|
|
108
108
|
secondaryColor: "#757575",
|
|
109
109
|
backgroundColor: "#ffffff",
|
|
@@ -116,21 +116,22 @@ const E = {
|
|
|
116
116
|
disabledColor: "#bdbdbd",
|
|
117
117
|
applyButtonColor: "#4caf50",
|
|
118
118
|
cancelButtonColor: "#f44336",
|
|
119
|
-
borderRadius: "
|
|
119
|
+
borderRadius: "8px",
|
|
120
|
+
// Material Design usa bordes más redondeados
|
|
120
121
|
fontSize: "14px",
|
|
121
122
|
fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif'
|
|
122
123
|
};
|
|
123
|
-
class
|
|
124
|
-
constructor(t, e =
|
|
124
|
+
class H {
|
|
125
|
+
constructor(t, e = M) {
|
|
125
126
|
this.mode = "light", this.handleMediaChange = () => {
|
|
126
127
|
this.mode === "auto" && this.applyTheme();
|
|
127
|
-
}, this.container = t, this.theme = { ...
|
|
128
|
+
}, this.container = t, this.theme = { ...M, ...e }, this.setupMediaQueryListener();
|
|
128
129
|
}
|
|
129
130
|
applyTheme() {
|
|
130
131
|
this.removeExistingStyles(), this.createAndApplyStyles(), this.forceReflow();
|
|
131
132
|
}
|
|
132
133
|
setTheme(t) {
|
|
133
|
-
this.theme = { ...
|
|
134
|
+
this.theme = { ...M, ...t }, this.applyTheme();
|
|
134
135
|
}
|
|
135
136
|
setMode(t) {
|
|
136
137
|
this.mode = t, this.applyTheme();
|
|
@@ -174,6 +175,217 @@ class A {
|
|
|
174
175
|
// Mantener color original
|
|
175
176
|
} : this.theme;
|
|
176
177
|
}
|
|
178
|
+
isMaterialTheme() {
|
|
179
|
+
var t;
|
|
180
|
+
return this.theme.borderRadius === "8px" && (((t = this.theme.fontFamily) == null ? void 0 : t.includes("Roboto")) ?? !1);
|
|
181
|
+
}
|
|
182
|
+
getMaterialDesignStyles(t, e) {
|
|
183
|
+
return `
|
|
184
|
+
/* Material Design - Contenedor principal con elevación */
|
|
185
|
+
.datex-picker.datex-material {
|
|
186
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15),
|
|
187
|
+
0 2px 4px rgba(0, 0, 0, 0.12) !important;
|
|
188
|
+
border: none !important;
|
|
189
|
+
border-radius: 8px !important;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Material Design - Celdas de calendario con bordes más redondeados */
|
|
193
|
+
.datex-picker.datex-material .calendar-table th,
|
|
194
|
+
.datex-picker.datex-material .calendar-table td {
|
|
195
|
+
border-radius: 50% !important; /* Círculos completos para las fechas */
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Material Design - Fechas seleccionadas con bordes redondeados */
|
|
199
|
+
.datex-picker.datex-material .calendar-table td.start-date {
|
|
200
|
+
border-radius: 50% 0 0 50% !important;
|
|
201
|
+
background-color: ${t.selectedColor} !important;
|
|
202
|
+
color: #fff !important;
|
|
203
|
+
border-color: transparent !important;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.datex-picker.datex-material .calendar-table td.end-date {
|
|
207
|
+
border-radius: 0 50% 50% 0 !important;
|
|
208
|
+
background-color: ${t.selectedColor} !important;
|
|
209
|
+
color: #fff !important;
|
|
210
|
+
border-color: transparent !important;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.datex-picker.datex-material .calendar-table td.start-date.end-date {
|
|
214
|
+
border-radius: 50% !important;
|
|
215
|
+
background-color: ${t.selectedColor} !important;
|
|
216
|
+
color: #fff !important;
|
|
217
|
+
border-color: transparent !important;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* Material Design - Fechas activas */
|
|
221
|
+
.datex-picker.datex-material .calendar-table td.active,
|
|
222
|
+
.datex-picker.datex-material .calendar-table td.active:hover {
|
|
223
|
+
background-color: ${t.selectedColor} !important;
|
|
224
|
+
color: #fff !important;
|
|
225
|
+
border-color: transparent !important;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* Material Design - Asegurar que end-date siempre tenga el color correcto */
|
|
229
|
+
.datex-picker.datex-material .calendar-table tbody td.end-date,
|
|
230
|
+
.datex-picker.datex-material .calendar-table tbody td.end-date:hover {
|
|
231
|
+
background-color: ${t.selectedColor} !important;
|
|
232
|
+
color: #fff !important;
|
|
233
|
+
border-color: transparent !important;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.datex-picker.datex-material .calendar-table tbody td.start-date,
|
|
237
|
+
.datex-picker.datex-material .calendar-table tbody td.start-date:hover {
|
|
238
|
+
background-color: ${t.selectedColor} !important;
|
|
239
|
+
color: #fff !important;
|
|
240
|
+
border-color: transparent !important;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Material Design - Rango con bordes suaves */
|
|
244
|
+
.datex-picker.datex-material td.in-range {
|
|
245
|
+
border-radius: 0 !important;
|
|
246
|
+
background-color: ${t.rangeColor} !important;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* Material Design - Botones con elevación y ripple effect */
|
|
250
|
+
.datex-picker.datex-material .drp-buttons .datex-btn {
|
|
251
|
+
border-radius: 4px !important;
|
|
252
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
|
253
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
254
|
+
text-transform: uppercase !important;
|
|
255
|
+
font-weight: 500 !important;
|
|
256
|
+
letter-spacing: 0.5px !important;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.datex-picker.datex-material .drp-buttons .datex-btn:hover:not(:disabled) {
|
|
260
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
|
|
261
|
+
transform: translateY(-1px) !important;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.datex-picker.datex-material .drp-buttons .datex-btn:active:not(:disabled) {
|
|
265
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
|
266
|
+
transform: translateY(0) !important;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/* Material Design - Botones móviles */
|
|
270
|
+
.datex-picker.datex-material .datex-mobile-header .mobile-cancelBtn,
|
|
271
|
+
.datex-picker.datex-material .datex-mobile-header .mobile-applyBtn {
|
|
272
|
+
border-radius: 4px !important;
|
|
273
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
|
274
|
+
text-transform: uppercase !important;
|
|
275
|
+
font-weight: 500 !important;
|
|
276
|
+
letter-spacing: 0.5px !important;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Material Design - Ranges con bordes pill más pronunciados */
|
|
280
|
+
.datex-picker.datex-material .ranges li {
|
|
281
|
+
border-radius: 16px !important;
|
|
282
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
|
|
283
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.datex-picker.datex-material .ranges li:hover {
|
|
287
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
|
|
288
|
+
transform: translateY(-1px) !important;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.datex-picker.datex-material .ranges li.active {
|
|
292
|
+
box-shadow: 0 3px 8px rgba(25, 118, 210, 0.25) !important;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* Material Design - Selectores con bordes redondeados */
|
|
296
|
+
.datex-picker.datex-material select.monthselect,
|
|
297
|
+
.datex-picker.datex-material select.yearselect,
|
|
298
|
+
.datex-picker.datex-material select.hourselect,
|
|
299
|
+
.datex-picker.datex-material select.minuteselect,
|
|
300
|
+
.datex-picker.datex-material select.secondselect,
|
|
301
|
+
.datex-picker.datex-material select.ampmselect {
|
|
302
|
+
border-radius: 4px !important;
|
|
303
|
+
border: 1px solid ${t.borderColor} !important;
|
|
304
|
+
transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.datex-picker.datex-material select:focus {
|
|
308
|
+
border-color: ${t.primaryColor} !important;
|
|
309
|
+
outline: none !important;
|
|
310
|
+
box-shadow: 0 0 0 2px ${t.rangeColor} !important;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/* Material Design - Hover states más suaves */
|
|
314
|
+
.datex-picker.datex-material td.available:hover,
|
|
315
|
+
.datex-picker.datex-material th.available:hover {
|
|
316
|
+
background-color: ${e === "dark" ? "#4b5563" : "#f5f5f5"} !important;
|
|
317
|
+
transform: scale(1.05) !important;
|
|
318
|
+
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* Material Design - Navegación con iconos más suaves */
|
|
322
|
+
.datex-picker.datex-material .calendar-table .next:hover,
|
|
323
|
+
.datex-picker.datex-material .calendar-table .prev:hover {
|
|
324
|
+
background-color: ${e === "dark" ? "#4b5563" : "#f5f5f5"} !important;
|
|
325
|
+
border-radius: 50% !important;
|
|
326
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/* Material Design - Flecha del dropdown más suave */
|
|
330
|
+
.datex-picker.datex-material:before {
|
|
331
|
+
border-bottom: 8px solid ${t.backgroundColor} !important;
|
|
332
|
+
filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1)) !important;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.datex-picker.datex-material:after {
|
|
336
|
+
display: none !important;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* Material Design - Mobile header con elevación */
|
|
340
|
+
@media (max-width: 768px) {
|
|
341
|
+
.datex-picker.datex-material,
|
|
342
|
+
.datex-picker.datex-material.mobile-view {
|
|
343
|
+
border-radius: 16px 16px 0 0 !important;
|
|
344
|
+
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.datex-picker.datex-material .datex-mobile-header,
|
|
348
|
+
.datex-picker.datex-material.mobile-view .datex-mobile-header {
|
|
349
|
+
border-radius: 16px 16px 0 0 !important;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Material Design - Celdas móviles circulares */
|
|
353
|
+
.datex-picker.datex-material .drp-calendar .calendar-table tbody td,
|
|
354
|
+
.datex-picker.datex-material.mobile-view .drp-calendar .calendar-table tbody td {
|
|
355
|
+
border-radius: 50% !important;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.datex-picker.datex-material .calendar-table tbody td.start-date,
|
|
359
|
+
.datex-picker.datex-material .calendar-table tbody td.start-date:hover {
|
|
360
|
+
border-radius: 50% !important;
|
|
361
|
+
background-color: ${t.selectedColor} !important;
|
|
362
|
+
color: #fff !important;
|
|
363
|
+
border-color: transparent !important;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.datex-picker.datex-material .calendar-table tbody td.end-date,
|
|
367
|
+
.datex-picker.datex-material .calendar-table tbody td.end-date:hover {
|
|
368
|
+
border-radius: 50% !important;
|
|
369
|
+
background-color: ${t.selectedColor} !important;
|
|
370
|
+
color: #fff !important;
|
|
371
|
+
border-color: transparent !important;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.datex-picker.datex-material .calendar-table tbody td.in-range {
|
|
375
|
+
border-radius: 50% !important;
|
|
376
|
+
opacity: 0.7 !important;
|
|
377
|
+
background-color: ${t.rangeColor} !important;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.datex-picker.datex-material .calendar-table tbody td.active,
|
|
381
|
+
.datex-picker.datex-material .calendar-table tbody td.active:hover {
|
|
382
|
+
background-color: ${t.selectedColor} !important;
|
|
383
|
+
color: #fff !important;
|
|
384
|
+
border-color: transparent !important;
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
`;
|
|
388
|
+
}
|
|
177
389
|
removeExistingStyles() {
|
|
178
390
|
if (this.styleId) {
|
|
179
391
|
const t = document.getElementById(this.styleId);
|
|
@@ -192,8 +404,12 @@ class A {
|
|
|
192
404
|
this.container.offsetHeight;
|
|
193
405
|
}
|
|
194
406
|
generateThemeCSS() {
|
|
195
|
-
const t = this.getThemeForMode(), e = this.getCurrentMode();
|
|
196
|
-
return this.container.classList.remove(
|
|
407
|
+
const t = this.getThemeForMode(), e = this.getCurrentMode(), a = this.isMaterialTheme();
|
|
408
|
+
return this.container.classList.remove(
|
|
409
|
+
"datex-light",
|
|
410
|
+
"datex-dark",
|
|
411
|
+
"datex-material"
|
|
412
|
+
), this.container.classList.add(`datex-${e}`), a && this.container.classList.add("datex-material"), `
|
|
197
413
|
/* Simple dropdown arrow for inputs */
|
|
198
414
|
input.datex-input {
|
|
199
415
|
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 {
|
|
|
582
798
|
color: ${t.textColor} !important;
|
|
583
799
|
}
|
|
584
800
|
|
|
585
|
-
.datex-picker .drp-buttons .btn {
|
|
801
|
+
.datex-picker .drp-buttons .datex-btn {
|
|
586
802
|
margin-left: 4px !important;
|
|
587
803
|
font-size: 12px !important;
|
|
588
804
|
font-weight: bold !important;
|
|
@@ -593,25 +809,25 @@ class A {
|
|
|
593
809
|
transition: all 0.15s ease-in-out !important;
|
|
594
810
|
}
|
|
595
811
|
|
|
596
|
-
.datex-picker .drp-buttons .btn.btn-success {
|
|
812
|
+
.datex-picker .drp-buttons .datex-btn.datex-btn-success {
|
|
597
813
|
background-color: ${t.applyButtonColor} !important;
|
|
598
814
|
border-color: ${t.applyButtonColor} !important;
|
|
599
815
|
color: #fff !important;
|
|
600
816
|
}
|
|
601
817
|
|
|
602
|
-
.datex-picker .drp-buttons .btn.btn-success:hover:not(:disabled) {
|
|
818
|
+
.datex-picker .drp-buttons .datex-btn.datex-btn-success:hover:not(:disabled) {
|
|
603
819
|
background-color: ${t.applyButtonColor} !important;
|
|
604
820
|
border-color: ${t.applyButtonColor} !important;
|
|
605
821
|
opacity: 0.8 !important;
|
|
606
822
|
}
|
|
607
823
|
|
|
608
|
-
.datex-picker .drp-buttons .btn.btn-danger {
|
|
824
|
+
.datex-picker .drp-buttons .datex-btn.datex-btn-danger {
|
|
609
825
|
background-color: ${t.cancelButtonColor} !important;
|
|
610
826
|
border-color: ${t.cancelButtonColor} !important;
|
|
611
827
|
color: #fff !important;
|
|
612
828
|
}
|
|
613
829
|
|
|
614
|
-
.datex-picker .drp-buttons .btn.btn-danger:hover:not(:disabled) {
|
|
830
|
+
.datex-picker .drp-buttons .datex-btn.datex-btn-danger:hover:not(:disabled) {
|
|
615
831
|
background-color: ${t.cancelButtonColor} !important;
|
|
616
832
|
border-color: ${t.cancelButtonColor} !important;
|
|
617
833
|
opacity: 0.8 !important;
|
|
@@ -1132,8 +1348,8 @@ class A {
|
|
|
1132
1348
|
display: none !important; /* Hide on mobile - buttons are in header */
|
|
1133
1349
|
}
|
|
1134
1350
|
|
|
1135
|
-
.datex-picker .drp-buttons .btn,
|
|
1136
|
-
.datex-picker.mobile-view .drp-buttons .btn {
|
|
1351
|
+
.datex-picker .drp-buttons .datex-btn,
|
|
1352
|
+
.datex-picker.mobile-view .drp-buttons .datex-btn {
|
|
1137
1353
|
min-width: 70px !important;
|
|
1138
1354
|
padding: 8px 14px !important;
|
|
1139
1355
|
margin: 0 4px !important;
|
|
@@ -1251,6 +1467,9 @@ class A {
|
|
|
1251
1467
|
clear: none !important;
|
|
1252
1468
|
}
|
|
1253
1469
|
}
|
|
1470
|
+
|
|
1471
|
+
/* Material Design specific styles */
|
|
1472
|
+
${a ? this.getMaterialDesignStyles(t, e) : ""}
|
|
1254
1473
|
`;
|
|
1255
1474
|
}
|
|
1256
1475
|
}
|
|
@@ -1289,7 +1508,7 @@ class T {
|
|
|
1289
1508
|
t.dispatchEvent(i);
|
|
1290
1509
|
}
|
|
1291
1510
|
}
|
|
1292
|
-
class
|
|
1511
|
+
class E {
|
|
1293
1512
|
constructor(t, e, a) {
|
|
1294
1513
|
this.element = t, this.container = e, this.options = a, this.setupOrientationHandler();
|
|
1295
1514
|
}
|
|
@@ -1306,6 +1525,17 @@ class L {
|
|
|
1306
1525
|
this.orientationChangeHandler
|
|
1307
1526
|
), window.removeEventListener("resize", this.orientationChangeHandler));
|
|
1308
1527
|
}
|
|
1528
|
+
/**
|
|
1529
|
+
* Recalculates and updates z-index when DOM changes (e.g., new modals opened)
|
|
1530
|
+
*/
|
|
1531
|
+
updateZIndex() {
|
|
1532
|
+
if (!this.container) return;
|
|
1533
|
+
const t = this.getHighestZIndex(), e = parseInt(this.container.style.zIndex || "0");
|
|
1534
|
+
if (t >= e) {
|
|
1535
|
+
const a = t + 1;
|
|
1536
|
+
this.container.style.zIndex = a.toString(), this.updateInternalElementsZIndex(a);
|
|
1537
|
+
}
|
|
1538
|
+
}
|
|
1309
1539
|
calculatePosition() {
|
|
1310
1540
|
if (!this.container) return;
|
|
1311
1541
|
this.isMobileDevice() ? this.positionForMobile() : this.positionForDesktop();
|
|
@@ -1318,8 +1548,8 @@ class L {
|
|
|
1318
1548
|
}
|
|
1319
1549
|
positionForMobile() {
|
|
1320
1550
|
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();
|
|
1321
|
-
const t = this.getHighestZIndex();
|
|
1322
|
-
|
|
1551
|
+
const t = this.getHighestZIndex(), e = 999999, a = t >= e ? t + 1 : e;
|
|
1552
|
+
this.container.style.zIndex = a.toString(), this.updateInternalElementsZIndex(a);
|
|
1323
1553
|
}
|
|
1324
1554
|
getHighestZIndex() {
|
|
1325
1555
|
const t = document.querySelectorAll("*");
|
|
@@ -1336,11 +1566,11 @@ class L {
|
|
|
1336
1566
|
const e = this.container.offsetWidth, a = this.container.offsetHeight, { top: i, drops: o } = this.calculateVerticalPosition(
|
|
1337
1567
|
t,
|
|
1338
1568
|
a
|
|
1339
|
-
),
|
|
1569
|
+
), n = this.calculateHorizontalPosition(
|
|
1340
1570
|
t,
|
|
1341
1571
|
e
|
|
1342
1572
|
);
|
|
1343
|
-
this.applyDropUpClass(o), this.applyFinalPosition(i,
|
|
1573
|
+
this.applyDropUpClass(o), this.applyFinalPosition(i, n);
|
|
1344
1574
|
}
|
|
1345
1575
|
resetContainerPosition() {
|
|
1346
1576
|
this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed";
|
|
@@ -1379,7 +1609,16 @@ class L {
|
|
|
1379
1609
|
t === "up" ? this.container.classList.add("drop-up") : this.container.classList.remove("drop-up");
|
|
1380
1610
|
}
|
|
1381
1611
|
applyFinalPosition(t, e) {
|
|
1382
|
-
this.container.style.top = `${t}px`, this.container.style.left = `${e}px`, this.container.style.right = "auto"
|
|
1612
|
+
this.container.style.top = `${t}px`, this.container.style.left = `${e}px`, this.container.style.right = "auto";
|
|
1613
|
+
const a = this.getHighestZIndex(), i = 99999, o = a >= i ? a + 1 : i;
|
|
1614
|
+
this.container.style.zIndex = o.toString(), this.updateInternalElementsZIndex(o);
|
|
1615
|
+
}
|
|
1616
|
+
updateInternalElementsZIndex(t) {
|
|
1617
|
+
this.container.querySelectorAll("select").forEach((i) => {
|
|
1618
|
+
i.style.zIndex = (t + 1).toString();
|
|
1619
|
+
}), this.container.querySelectorAll(".keyboard-focused").forEach((i) => {
|
|
1620
|
+
i.style.zIndex = (t + 2).toString();
|
|
1621
|
+
});
|
|
1383
1622
|
}
|
|
1384
1623
|
showMobileHeader() {
|
|
1385
1624
|
const t = this.container.querySelector(
|
|
@@ -1394,27 +1633,27 @@ class L {
|
|
|
1394
1633
|
t && (t.style.display = "none");
|
|
1395
1634
|
}
|
|
1396
1635
|
}
|
|
1397
|
-
class
|
|
1636
|
+
class L {
|
|
1398
1637
|
constructor(t, e) {
|
|
1399
1638
|
this.options = t, this.locale = e;
|
|
1400
1639
|
}
|
|
1401
1640
|
buildCalendarMatrix(t) {
|
|
1402
|
-
const e = w(t), a =
|
|
1641
|
+
const e = w(t), a = I(e, this.locale.firstDay), i = [];
|
|
1403
1642
|
let o = [];
|
|
1404
|
-
const
|
|
1405
|
-
for (let
|
|
1406
|
-
|
|
1407
|
-
const
|
|
1408
|
-
|
|
1643
|
+
const n = new Date(a);
|
|
1644
|
+
for (let r = 0; r < 42; r++) {
|
|
1645
|
+
r > 0 && r % 7 === 0 && (i.push(o), o = []);
|
|
1646
|
+
const s = new Date(n);
|
|
1647
|
+
s.setDate(n.getDate() + r), o.push(s);
|
|
1409
1648
|
}
|
|
1410
1649
|
return o.length > 0 && i.push(o), i;
|
|
1411
1650
|
}
|
|
1412
|
-
renderCalendarHTML(t, e, a, i, o,
|
|
1413
|
-
const
|
|
1651
|
+
renderCalendarHTML(t, e, a, i, o, n) {
|
|
1652
|
+
const r = t.month, s = r.getFullYear(), d = r.getMonth();
|
|
1414
1653
|
let c = '<table class="table-condensed">';
|
|
1415
|
-
return c += this.renderHeader(e, d,
|
|
1654
|
+
return c += this.renderHeader(e, d, s, o, n), c += this.renderDayHeaders(), c += this.renderCalendarBody(
|
|
1416
1655
|
t.calendar,
|
|
1417
|
-
|
|
1656
|
+
r,
|
|
1418
1657
|
a,
|
|
1419
1658
|
i
|
|
1420
1659
|
), c += "</table>", this.options.timePicker && (c += this.renderTimeControls(
|
|
@@ -1425,30 +1664,30 @@ class M {
|
|
|
1425
1664
|
let e = '<div class="calendar-time">';
|
|
1426
1665
|
e += '<select class="hourselect">';
|
|
1427
1666
|
const a = this.options.timePicker24Hour, i = a ? 23 : 12, o = a ? 0 : 1;
|
|
1428
|
-
for (let
|
|
1429
|
-
const
|
|
1430
|
-
let
|
|
1667
|
+
for (let r = o; r <= i; r++) {
|
|
1668
|
+
const s = a ? r : r === 0 ? 12 : r, d = String(s).padStart(2, "0"), c = a ? t.getHours() : t.getHours() % 12 || 12;
|
|
1669
|
+
let m = !1;
|
|
1431
1670
|
if (this.options.minDate || this.options.maxDate) {
|
|
1432
|
-
const
|
|
1433
|
-
if (
|
|
1434
|
-
const v = new Date(
|
|
1435
|
-
v.setMinutes(59), v < this.options.minDate && (
|
|
1671
|
+
const b = new Date(t), $ = a ? s : t.getHours() >= 12 ? s === 12 ? 12 : s + 12 : s === 12 ? 0 : s;
|
|
1672
|
+
if (b.setHours($), this.options.minDate) {
|
|
1673
|
+
const v = new Date(b);
|
|
1674
|
+
v.setMinutes(59), v < this.options.minDate && (m = !0);
|
|
1436
1675
|
}
|
|
1437
1676
|
if (this.options.maxDate) {
|
|
1438
|
-
const v = new Date(
|
|
1439
|
-
v.setMinutes(0), v > this.options.maxDate && (
|
|
1677
|
+
const v = new Date(b);
|
|
1678
|
+
v.setMinutes(0), v > this.options.maxDate && (m = !0);
|
|
1440
1679
|
}
|
|
1441
1680
|
}
|
|
1442
|
-
e += `<option value="${
|
|
1681
|
+
e += `<option value="${s}"${s === c && !m ? ' selected="selected"' : ""}${m ? ' disabled="disabled" class="disabled"' : ""}>${d}</option>`;
|
|
1443
1682
|
}
|
|
1444
1683
|
e += "</select>", e += " : ", e += '<select class="minuteselect">';
|
|
1445
|
-
const
|
|
1446
|
-
for (let
|
|
1447
|
-
const
|
|
1684
|
+
const n = this.options.timePickerIncrement || 1;
|
|
1685
|
+
for (let r = 0; r < 60; r += n) {
|
|
1686
|
+
const s = String(r).padStart(2, "0");
|
|
1448
1687
|
let d = !1;
|
|
1449
1688
|
if (this.options.minDate || this.options.maxDate) {
|
|
1450
1689
|
const h = new Date(t);
|
|
1451
|
-
if (h.setMinutes(
|
|
1690
|
+
if (h.setMinutes(r), this.options.minDate) {
|
|
1452
1691
|
const p = new Date(h);
|
|
1453
1692
|
p.setSeconds(59), p < this.options.minDate && (d = !0);
|
|
1454
1693
|
}
|
|
@@ -1457,43 +1696,43 @@ class M {
|
|
|
1457
1696
|
p.setSeconds(0), p > this.options.maxDate && (d = !0);
|
|
1458
1697
|
}
|
|
1459
1698
|
}
|
|
1460
|
-
const c =
|
|
1461
|
-
e += `<option value="${
|
|
1699
|
+
const c = r === t.getMinutes() && !d ? ' selected="selected"' : "";
|
|
1700
|
+
e += `<option value="${r}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${s}</option>`;
|
|
1462
1701
|
}
|
|
1463
1702
|
if (e += "</select>", this.options.timePickerSeconds) {
|
|
1464
1703
|
e += " : ", e += '<select class="secondselect">';
|
|
1465
|
-
for (let
|
|
1466
|
-
const
|
|
1704
|
+
for (let r = 0; r < 60; r++) {
|
|
1705
|
+
const s = String(r).padStart(2, "0");
|
|
1467
1706
|
let d = !1;
|
|
1468
1707
|
if (this.options.minDate || this.options.maxDate) {
|
|
1469
1708
|
const h = new Date(t);
|
|
1470
|
-
h.setSeconds(
|
|
1709
|
+
h.setSeconds(r), this.options.minDate && h < this.options.minDate && (d = !0), this.options.maxDate && h > this.options.maxDate && (d = !0);
|
|
1471
1710
|
}
|
|
1472
|
-
const c =
|
|
1473
|
-
e += `<option value="${
|
|
1711
|
+
const c = r === t.getSeconds() && !d ? ' selected="selected"' : "";
|
|
1712
|
+
e += `<option value="${r}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${s}</option>`;
|
|
1474
1713
|
}
|
|
1475
1714
|
e += "</select>";
|
|
1476
1715
|
}
|
|
1477
1716
|
if (!a) {
|
|
1478
1717
|
e += " ", e += '<select class="ampmselect">';
|
|
1479
|
-
const
|
|
1480
|
-
let
|
|
1718
|
+
const r = t.getHours() < 12;
|
|
1719
|
+
let s = !1, d = !1;
|
|
1481
1720
|
if (this.options.minDate || this.options.maxDate) {
|
|
1482
1721
|
const h = new Date(t);
|
|
1483
1722
|
h.setHours(6, 0, 0);
|
|
1484
1723
|
const p = new Date(t);
|
|
1485
|
-
p.setHours(18, 0, 0), this.options.minDate && h < this.options.minDate && (
|
|
1724
|
+
p.setHours(18, 0, 0), this.options.minDate && h < this.options.minDate && (s = !0), this.options.maxDate && p > this.options.maxDate && (d = !0);
|
|
1486
1725
|
}
|
|
1487
|
-
const c =
|
|
1488
|
-
e += `<option value="AM"${
|
|
1726
|
+
const c = s ? ' disabled="disabled" class="disabled"' : "", m = d ? ' disabled="disabled" class="disabled"' : "";
|
|
1727
|
+
e += `<option value="AM"${r ? ' selected="selected"' : ""}${c}>AM</option>`, e += `<option value="PM"${r ? "" : ' selected="selected"'}${m}>PM</option>`, e += "</select>";
|
|
1489
1728
|
}
|
|
1490
1729
|
return e += "</div>", e;
|
|
1491
1730
|
}
|
|
1492
1731
|
renderHeader(t, e, a, i, o) {
|
|
1493
|
-
let
|
|
1494
|
-
i && (!this.options.linkedCalendars || t === "left") ?
|
|
1495
|
-
let
|
|
1496
|
-
return this.options.showDropdowns && (
|
|
1732
|
+
let n = "<thead><tr>";
|
|
1733
|
+
i && (!this.options.linkedCalendars || t === "left") ? n += '<th class="prev available"><span></span></th>' : n += "<th></th>";
|
|
1734
|
+
let r = this.locale.monthNames[e] + " " + a;
|
|
1735
|
+
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;
|
|
1497
1736
|
}
|
|
1498
1737
|
renderDayHeaders() {
|
|
1499
1738
|
let t = "<tr>";
|
|
@@ -1503,19 +1742,19 @@ class M {
|
|
|
1503
1742
|
}
|
|
1504
1743
|
renderCalendarBody(t, e, a, i) {
|
|
1505
1744
|
let o = "<tbody>";
|
|
1506
|
-
for (const
|
|
1745
|
+
for (const n of t) {
|
|
1507
1746
|
o += "<tr>";
|
|
1508
|
-
for (const
|
|
1509
|
-
const
|
|
1510
|
-
|
|
1747
|
+
for (const r of n) {
|
|
1748
|
+
const s = this.getDayClasses(
|
|
1749
|
+
r,
|
|
1511
1750
|
e,
|
|
1512
1751
|
a,
|
|
1513
1752
|
i
|
|
1514
|
-
), d =
|
|
1515
|
-
o += `<td class="${c}" data-date="${
|
|
1516
|
-
|
|
1753
|
+
), d = s.includes("disabled"), c = s.join(" ") + (d ? "" : " available");
|
|
1754
|
+
o += `<td class="${c}" data-date="${D(
|
|
1755
|
+
r,
|
|
1517
1756
|
"YYYY-MM-DD"
|
|
1518
|
-
)}">${
|
|
1757
|
+
)}">${r.getDate()}</td>`;
|
|
1519
1758
|
}
|
|
1520
1759
|
o += "</tr>";
|
|
1521
1760
|
}
|
|
@@ -1527,21 +1766,21 @@ class M {
|
|
|
1527
1766
|
e,
|
|
1528
1767
|
a,
|
|
1529
1768
|
i
|
|
1530
|
-
),
|
|
1531
|
-
return o + " " +
|
|
1769
|
+
), n = this.renderYearDropdown(e, a, i);
|
|
1770
|
+
return o + " " + n;
|
|
1532
1771
|
}
|
|
1533
1772
|
calculateYearRange(t) {
|
|
1534
1773
|
let e = this.options.minYear, a = this.options.maxYear;
|
|
1535
1774
|
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 };
|
|
1536
1775
|
}
|
|
1537
1776
|
renderMonthDropdown(t, e, a, i) {
|
|
1538
|
-
const o = e === a,
|
|
1539
|
-
let
|
|
1540
|
-
for (let
|
|
1777
|
+
const o = e === a, n = e === i;
|
|
1778
|
+
let r = '<select class="monthselect">';
|
|
1779
|
+
for (let s = 0; s < 12; s++) {
|
|
1541
1780
|
let d = !1;
|
|
1542
|
-
o && this.options.minDate &&
|
|
1781
|
+
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>`;
|
|
1543
1782
|
}
|
|
1544
|
-
return
|
|
1783
|
+
return r += "</select>", r;
|
|
1545
1784
|
}
|
|
1546
1785
|
renderYearDropdown(t, e, a) {
|
|
1547
1786
|
let i = '<select class="yearselect">';
|
|
@@ -1551,16 +1790,16 @@ class M {
|
|
|
1551
1790
|
}
|
|
1552
1791
|
getDayClasses(t, e, a, i) {
|
|
1553
1792
|
const o = [];
|
|
1554
|
-
return
|
|
1793
|
+
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;
|
|
1555
1794
|
}
|
|
1556
1795
|
canNavigatePrevious(t) {
|
|
1557
1796
|
return !this.options.minDate || y(w(t), this.options.minDate);
|
|
1558
1797
|
}
|
|
1559
1798
|
canNavigateNext(t) {
|
|
1560
|
-
return !this.options.maxDate ||
|
|
1799
|
+
return !this.options.maxDate || x(B(t), this.options.maxDate);
|
|
1561
1800
|
}
|
|
1562
1801
|
}
|
|
1563
|
-
class
|
|
1802
|
+
class A {
|
|
1564
1803
|
constructor(t = {}) {
|
|
1565
1804
|
this.validation = t;
|
|
1566
1805
|
}
|
|
@@ -1653,10 +1892,11 @@ class F {
|
|
|
1653
1892
|
return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
|
|
1654
1893
|
}
|
|
1655
1894
|
}
|
|
1656
|
-
class
|
|
1895
|
+
class F {
|
|
1657
1896
|
constructor(t, e = {}) {
|
|
1658
1897
|
this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
|
|
1659
|
-
enabled: !
|
|
1898
|
+
enabled: !1,
|
|
1899
|
+
// Deshabilitado por defecto para evitar conflictos
|
|
1660
1900
|
shortcuts: {
|
|
1661
1901
|
today: "t",
|
|
1662
1902
|
clear: "c",
|
|
@@ -1669,82 +1909,78 @@ class I {
|
|
|
1669
1909
|
}, this.options.enabled && this.setupKeyboardEvents();
|
|
1670
1910
|
}
|
|
1671
1911
|
setHandlers(t) {
|
|
1672
|
-
this.onDateSelect = t.onDateSelect, this.onClose = t.onClose, this.onApply = t.onApply, this.onToday = t.onToday, this.onClear = t.onClear;
|
|
1912
|
+
this.onDateSelect = t.onDateSelect, this.onClose = t.onClose, this.onApply = t.onApply, this.onToday = t.onToday, this.onClear = t.onClear, this.onMonthChange = t.onMonthChange;
|
|
1673
1913
|
}
|
|
1674
1914
|
activate(t) {
|
|
1675
1915
|
this.isActive = !0, this.currentFocusedDate = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date(), setTimeout(() => {
|
|
1676
1916
|
this.isActive && this.updateFocusedDate();
|
|
1677
|
-
}, 100), this.
|
|
1917
|
+
}, 100), this.handleKeyDownBound && document.addEventListener("keydown", this.handleKeyDownBound);
|
|
1678
1918
|
}
|
|
1679
1919
|
deactivate() {
|
|
1680
|
-
this.isActive = !1, this.currentFocusedDate = null, this.removeFocusStyles();
|
|
1920
|
+
this.isActive = !1, this.currentFocusedDate = null, this.removeFocusStyles(), this.handleKeyDownBound && document.removeEventListener("keydown", this.handleKeyDownBound);
|
|
1681
1921
|
}
|
|
1682
1922
|
setupKeyboardEvents() {
|
|
1683
|
-
this.container.setAttribute("tabindex", "0"), this.
|
|
1923
|
+
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);
|
|
1684
1924
|
}
|
|
1685
1925
|
handleKeyDown(t) {
|
|
1686
|
-
var
|
|
1926
|
+
var c, m, h, p;
|
|
1687
1927
|
if (!this.isActive || !this.currentFocusedDate) return;
|
|
1688
|
-
const { key: e, ctrlKey: a, shiftKey: i, altKey: o } = t;
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
case "ArrowRight":
|
|
1694
|
-
t.preventDefault(), this.navigateDate(1);
|
|
1695
|
-
break;
|
|
1696
|
-
case "ArrowUp":
|
|
1697
|
-
t.preventDefault(), this.navigateDate(-7);
|
|
1698
|
-
break;
|
|
1699
|
-
case "ArrowDown":
|
|
1700
|
-
t.preventDefault(), this.navigateDate(7);
|
|
1701
|
-
break;
|
|
1702
|
-
case "Home":
|
|
1703
|
-
t.preventDefault(), this.navigateToStartOfWeek();
|
|
1704
|
-
break;
|
|
1705
|
-
case "End":
|
|
1706
|
-
t.preventDefault(), this.navigateToEndOfWeek();
|
|
1707
|
-
break;
|
|
1708
|
-
case "PageUp":
|
|
1709
|
-
t.preventDefault(), this.navigateMonth(i ? -12 : -1);
|
|
1710
|
-
break;
|
|
1711
|
-
case "PageDown":
|
|
1712
|
-
t.preventDefault(), this.navigateMonth(i ? 12 : 1);
|
|
1713
|
-
break;
|
|
1714
|
-
}
|
|
1715
|
-
switch (e) {
|
|
1716
|
-
case "Enter":
|
|
1717
|
-
case " ":
|
|
1718
|
-
if (t.preventDefault(), this.currentFocusedDate && this.onDateSelect) {
|
|
1719
|
-
const c = new Date(this.currentFocusedDate.getTime());
|
|
1720
|
-
console.log("=== KEYBOARD DEBUG ==="), console.log("Original focused date:", this.currentFocusedDate), console.log(
|
|
1721
|
-
"Original focused day:",
|
|
1722
|
-
this.currentFocusedDate.getDate()
|
|
1723
|
-
), console.log("Copy to select:", c), console.log("Copy day:", c.getDate()), console.log(
|
|
1724
|
-
"Are they equal?",
|
|
1725
|
-
this.currentFocusedDate.getTime() === c.getTime()
|
|
1726
|
-
), console.log("======================"), this.onDateSelect(c);
|
|
1727
|
-
}
|
|
1728
|
-
break;
|
|
1729
|
-
case "Escape":
|
|
1730
|
-
t.preventDefault(), this.onClose && this.onClose();
|
|
1731
|
-
break;
|
|
1732
|
-
}
|
|
1733
|
-
if (!a && !o)
|
|
1734
|
-
switch (e.toLowerCase()) {
|
|
1735
|
-
case ((n = (s = this.options.shortcuts) == null ? void 0 : s.today) == null ? void 0 : n.toLowerCase()):
|
|
1736
|
-
t.preventDefault(), this.onToday && this.onToday();
|
|
1928
|
+
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";
|
|
1929
|
+
if (n.tagName !== "SELECT" && !(!r && !s)) {
|
|
1930
|
+
switch (e) {
|
|
1931
|
+
case "ArrowLeft":
|
|
1932
|
+
t.preventDefault(), t.stopPropagation(), this.navigateDate(-1);
|
|
1737
1933
|
break;
|
|
1738
|
-
case
|
|
1739
|
-
t.preventDefault(),
|
|
1934
|
+
case "ArrowRight":
|
|
1935
|
+
t.preventDefault(), t.stopPropagation(), this.navigateDate(1);
|
|
1936
|
+
break;
|
|
1937
|
+
case "ArrowUp":
|
|
1938
|
+
t.preventDefault(), t.stopPropagation(), this.navigateDate(-7);
|
|
1939
|
+
break;
|
|
1940
|
+
case "ArrowDown":
|
|
1941
|
+
t.preventDefault(), t.stopPropagation(), this.navigateDate(7);
|
|
1942
|
+
break;
|
|
1943
|
+
case "Home":
|
|
1944
|
+
t.preventDefault(), t.stopPropagation(), this.navigateToStartOfWeek();
|
|
1945
|
+
break;
|
|
1946
|
+
case "End":
|
|
1947
|
+
t.preventDefault(), t.stopPropagation(), this.navigateToEndOfWeek();
|
|
1948
|
+
break;
|
|
1949
|
+
case "PageUp":
|
|
1950
|
+
t.preventDefault(), t.stopPropagation(), this.navigateMonth(i ? -12 : -1);
|
|
1951
|
+
break;
|
|
1952
|
+
case "PageDown":
|
|
1953
|
+
t.preventDefault(), t.stopPropagation(), this.navigateMonth(i ? 12 : 1);
|
|
1740
1954
|
break;
|
|
1741
1955
|
}
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
case "
|
|
1745
|
-
t.preventDefault(), this.
|
|
1956
|
+
switch (e) {
|
|
1957
|
+
case "Enter":
|
|
1958
|
+
case " ":
|
|
1959
|
+
if (t.preventDefault(), t.stopPropagation(), this.currentFocusedDate && this.onDateSelect) {
|
|
1960
|
+
const b = new Date(this.currentFocusedDate.getTime());
|
|
1961
|
+
this.onDateSelect(b);
|
|
1962
|
+
}
|
|
1963
|
+
break;
|
|
1964
|
+
case "Escape":
|
|
1965
|
+
t.preventDefault(), t.stopPropagation(), this.onClose && this.onClose();
|
|
1746
1966
|
break;
|
|
1747
1967
|
}
|
|
1968
|
+
if (!a && !o)
|
|
1969
|
+
switch (e.toLowerCase()) {
|
|
1970
|
+
case ((m = (c = this.options.shortcuts) == null ? void 0 : c.today) == null ? void 0 : m.toLowerCase()):
|
|
1971
|
+
t.preventDefault(), t.stopPropagation(), this.onToday && this.onToday();
|
|
1972
|
+
break;
|
|
1973
|
+
case ((p = (h = this.options.shortcuts) == null ? void 0 : h.clear) == null ? void 0 : p.toLowerCase()):
|
|
1974
|
+
t.preventDefault(), t.stopPropagation(), this.onClear && this.onClear();
|
|
1975
|
+
break;
|
|
1976
|
+
}
|
|
1977
|
+
if (a && !o && !i)
|
|
1978
|
+
switch (e.toLowerCase()) {
|
|
1979
|
+
case "enter":
|
|
1980
|
+
t.preventDefault(), t.stopPropagation(), this.onApply && this.onApply();
|
|
1981
|
+
break;
|
|
1982
|
+
}
|
|
1983
|
+
}
|
|
1748
1984
|
}
|
|
1749
1985
|
handleFocus() {
|
|
1750
1986
|
this.isActive || (this.isActive = !0, this.currentFocusedDate = this.currentFocusedDate || /* @__PURE__ */ new Date(), setTimeout(() => {
|
|
@@ -1758,13 +1994,13 @@ class I {
|
|
|
1758
1994
|
}
|
|
1759
1995
|
navigateDate(t) {
|
|
1760
1996
|
if (!this.currentFocusedDate) return;
|
|
1761
|
-
const e = new Date(this.currentFocusedDate.getTime());
|
|
1762
|
-
|
|
1997
|
+
const e = this.currentFocusedDate.getMonth(), a = this.currentFocusedDate.getFullYear(), i = new Date(this.currentFocusedDate.getTime());
|
|
1998
|
+
i.setDate(i.getDate() + t), this.currentFocusedDate = i, (i.getMonth() !== e || i.getFullYear() !== a) && this.onMonthChange && this.onMonthChange(i), this.updateFocusedDate();
|
|
1763
1999
|
}
|
|
1764
2000
|
navigateMonth(t) {
|
|
1765
2001
|
if (!this.currentFocusedDate) return;
|
|
1766
2002
|
const e = new Date(this.currentFocusedDate.getTime());
|
|
1767
|
-
e.setMonth(e.getMonth() + t), this.currentFocusedDate = e, this.updateFocusedDate();
|
|
2003
|
+
e.setMonth(e.getMonth() + t), this.currentFocusedDate = e, this.onMonthChange && this.onMonthChange(e), this.updateFocusedDate();
|
|
1768
2004
|
}
|
|
1769
2005
|
navigateToStartOfWeek() {
|
|
1770
2006
|
if (!this.currentFocusedDate) return;
|
|
@@ -1779,25 +2015,17 @@ class I {
|
|
|
1779
2015
|
updateFocusedDate() {
|
|
1780
2016
|
if (!this.currentFocusedDate) return;
|
|
1781
2017
|
this.removeFocusStyles();
|
|
1782
|
-
const t = this.formatDateForSelector(this.currentFocusedDate)
|
|
1783
|
-
console.log("Keyboard: Looking for cell with data-date:", t), console.log(
|
|
1784
|
-
"Keyboard: Current focused date:",
|
|
1785
|
-
this.currentFocusedDate.toDateString()
|
|
1786
|
-
);
|
|
1787
|
-
const e = this.container.querySelector(
|
|
2018
|
+
const t = this.formatDateForSelector(this.currentFocusedDate), e = this.container.querySelector(
|
|
1788
2019
|
`[data-date="${t}"]`
|
|
1789
2020
|
);
|
|
1790
|
-
if (e) {
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
}
|
|
1799
|
-
} else
|
|
1800
|
-
console.log("Keyboard: Cell not found for date:", t);
|
|
2021
|
+
if (e && (e.classList.add("keyboard-focused"), e.setAttribute("aria-selected", "true"), this.isActive && this.container.offsetParent !== null)) {
|
|
2022
|
+
const a = this.container.getBoundingClientRect(), i = e.getBoundingClientRect();
|
|
2023
|
+
(i.top < a.top || i.bottom > a.bottom || i.left < a.left || i.right > a.right) && e.scrollIntoView({
|
|
2024
|
+
block: "nearest",
|
|
2025
|
+
inline: "nearest",
|
|
2026
|
+
behavior: "smooth"
|
|
2027
|
+
});
|
|
2028
|
+
}
|
|
1801
2029
|
this.addFocusStyles();
|
|
1802
2030
|
}
|
|
1803
2031
|
removeFocusStyles() {
|
|
@@ -1809,7 +2037,8 @@ class I {
|
|
|
1809
2037
|
if (this.container.querySelector(".keyboard-focus-styles")) return;
|
|
1810
2038
|
const t = document.createElement("style");
|
|
1811
2039
|
t.className = "keyboard-focus-styles", t.textContent = `
|
|
1812
|
-
|
|
2040
|
+
/* Keyboard focus - solo para fechas NO seleccionadas */
|
|
2041
|
+
.datex-picker .calendar-table td.keyboard-focused:not(.start-date):not(.end-date):not(.active) {
|
|
1813
2042
|
outline: 2px solid #10b981 !important;
|
|
1814
2043
|
outline-offset: -2px !important;
|
|
1815
2044
|
z-index: 10 !important;
|
|
@@ -1817,11 +2046,22 @@ class I {
|
|
|
1817
2046
|
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
|
|
1818
2047
|
}
|
|
1819
2048
|
|
|
1820
|
-
.datex-picker .calendar-table td.keyboard-focused > * {
|
|
2049
|
+
.datex-picker .calendar-table td.keyboard-focused:not(.start-date):not(.end-date):not(.active) > * {
|
|
1821
2050
|
background: #10b981 !important;
|
|
1822
2051
|
color: white !important;
|
|
1823
2052
|
font-weight: 600 !important;
|
|
1824
2053
|
}
|
|
2054
|
+
|
|
2055
|
+
/* Keyboard focus para fechas seleccionadas - solo un outline sutil */
|
|
2056
|
+
.datex-picker .calendar-table td.keyboard-focused.start-date,
|
|
2057
|
+
.datex-picker .calendar-table td.keyboard-focused.end-date,
|
|
2058
|
+
.datex-picker .calendar-table td.keyboard-focused.active {
|
|
2059
|
+
outline: 2px solid rgba(255, 255, 255, 0.5) !important;
|
|
2060
|
+
outline-offset: -2px !important;
|
|
2061
|
+
z-index: 10 !important;
|
|
2062
|
+
position: relative !important;
|
|
2063
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
|
|
2064
|
+
}
|
|
1825
2065
|
|
|
1826
2066
|
/* Prevent layout shifts */
|
|
1827
2067
|
.datex-picker {
|
|
@@ -1834,13 +2074,8 @@ class I {
|
|
|
1834
2074
|
`, document.head.appendChild(t);
|
|
1835
2075
|
}
|
|
1836
2076
|
formatDateForSelector(t) {
|
|
1837
|
-
const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0")
|
|
1838
|
-
return
|
|
1839
|
-
"Keyboard: Formatting date for selector:",
|
|
1840
|
-
t.toDateString(),
|
|
1841
|
-
"-> formatted:",
|
|
1842
|
-
o
|
|
1843
|
-
), o;
|
|
2077
|
+
const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0");
|
|
2078
|
+
return `${e}-${a}-${i}`;
|
|
1844
2079
|
}
|
|
1845
2080
|
// Public methods
|
|
1846
2081
|
getCurrentFocusedDate() {
|
|
@@ -1850,10 +2085,7 @@ class I {
|
|
|
1850
2085
|
this.currentFocusedDate = new Date(t.getTime()), this.updateFocusedDate();
|
|
1851
2086
|
}
|
|
1852
2087
|
cleanup() {
|
|
1853
|
-
this.container.removeEventListener(
|
|
1854
|
-
"keydown",
|
|
1855
|
-
this.handleKeyDown.bind(this)
|
|
1856
|
-
), this.container.removeEventListener("focus", this.handleFocus.bind(this)), this.container.removeEventListener("blur", this.handleBlur.bind(this)), this.removeFocusStyles();
|
|
2088
|
+
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();
|
|
1857
2089
|
const t = document.querySelector(".keyboard-focus-styles");
|
|
1858
2090
|
t && t.remove();
|
|
1859
2091
|
}
|
|
@@ -1880,7 +2112,7 @@ const P = {
|
|
|
1880
2112
|
"Diciembre"
|
|
1881
2113
|
],
|
|
1882
2114
|
firstDay: 1
|
|
1883
|
-
},
|
|
2115
|
+
}, O = {
|
|
1884
2116
|
format: "DD/MM/YYYY HH:mm",
|
|
1885
2117
|
separator: " - ",
|
|
1886
2118
|
applyLabel: "Aplicar",
|
|
@@ -1903,7 +2135,7 @@ const P = {
|
|
|
1903
2135
|
],
|
|
1904
2136
|
firstDay: 1
|
|
1905
2137
|
};
|
|
1906
|
-
class
|
|
2138
|
+
class N {
|
|
1907
2139
|
constructor(t, e = {}, a) {
|
|
1908
2140
|
this.element = this.resolveElement(t), this.options = this.mergeWithDefaults(e), this.locale = this.options.locale, this.callback = a || (() => {
|
|
1909
2141
|
}), this.eventService = new T(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
|
|
@@ -1941,10 +2173,10 @@ class V {
|
|
|
1941
2173
|
opens: t.opens || "center",
|
|
1942
2174
|
drops: t.drops || "auto",
|
|
1943
2175
|
locale: t.locale || P,
|
|
1944
|
-
buttonClasses: t.buttonClasses || "btn btn-sm",
|
|
1945
|
-
applyButtonClasses: t.applyButtonClasses || "btn-success",
|
|
1946
|
-
cancelButtonClasses: t.cancelButtonClasses || "btn-danger",
|
|
1947
|
-
theme: t.theme ||
|
|
2176
|
+
buttonClasses: t.buttonClasses || "datex-btn datex-btn-sm",
|
|
2177
|
+
applyButtonClasses: t.applyButtonClasses || "datex-btn-success",
|
|
2178
|
+
cancelButtonClasses: t.cancelButtonClasses || "datex-btn-danger",
|
|
2179
|
+
theme: t.theme || M,
|
|
1948
2180
|
validation: t.validation || {},
|
|
1949
2181
|
events: t.events || {}
|
|
1950
2182
|
};
|
|
@@ -1965,7 +2197,7 @@ class V {
|
|
|
1965
2197
|
};
|
|
1966
2198
|
}
|
|
1967
2199
|
initializeServices() {
|
|
1968
|
-
this.calendarService = new
|
|
2200
|
+
this.calendarService = new L(this.options, this.locale);
|
|
1969
2201
|
}
|
|
1970
2202
|
addDropdownArrow() {
|
|
1971
2203
|
this.element.tagName === "INPUT" && this.element.classList.add("datex-input");
|
|
@@ -2013,12 +2245,13 @@ class V {
|
|
|
2013
2245
|
`;
|
|
2014
2246
|
}
|
|
2015
2247
|
initializeContainerServices() {
|
|
2016
|
-
this.themeService = new
|
|
2248
|
+
this.themeService = new H(this.container, this.options.theme), this.positionService = new E(
|
|
2017
2249
|
this.element,
|
|
2018
2250
|
this.container,
|
|
2019
2251
|
this.options
|
|
2020
|
-
), this.validationService = new
|
|
2021
|
-
enabled: !
|
|
2252
|
+
), this.validationService = new A(this.options.validation), this.keyboardService = new F(this.container, {
|
|
2253
|
+
enabled: !1
|
|
2254
|
+
// Deshabilitado por defecto para evitar conflictos
|
|
2022
2255
|
}), this.keyboardService.setHandlers({
|
|
2023
2256
|
onDateSelect: (t) => {
|
|
2024
2257
|
this.handleKeyboardDateSelect(t);
|
|
@@ -2032,6 +2265,9 @@ class V {
|
|
|
2032
2265
|
},
|
|
2033
2266
|
onClear: () => {
|
|
2034
2267
|
this.clearSelection();
|
|
2268
|
+
},
|
|
2269
|
+
onMonthChange: (t) => {
|
|
2270
|
+
this.handleKeyboardMonthChange(t);
|
|
2035
2271
|
}
|
|
2036
2272
|
});
|
|
2037
2273
|
}
|
|
@@ -2045,12 +2281,10 @@ class V {
|
|
|
2045
2281
|
}
|
|
2046
2282
|
// Public API methods
|
|
2047
2283
|
show() {
|
|
2048
|
-
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"),
|
|
2049
|
-
this.state.isShowing && this.keyboardService.activate(this.state.startDate);
|
|
2050
|
-
}, 200), this.dispatchShowEvent());
|
|
2284
|
+
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());
|
|
2051
2285
|
}
|
|
2052
2286
|
hide() {
|
|
2053
|
-
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());
|
|
2287
|
+
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());
|
|
2054
2288
|
}
|
|
2055
2289
|
toggle() {
|
|
2056
2290
|
this.state.isShowing ? this.hide() : this.show();
|
|
@@ -2104,7 +2338,7 @@ class V {
|
|
|
2104
2338
|
this.options = this.mergeWithDefaults(e), t.locale && (this.locale = t.locale), this.reinitializeServices(), this.updateContainerConfiguration(), this.updateView(), this.state.isShowing && this.positionContainer();
|
|
2105
2339
|
}
|
|
2106
2340
|
reinitializeServices() {
|
|
2107
|
-
this.calendarService = new
|
|
2341
|
+
this.calendarService = new L(this.options, this.locale), this.validationService.updateValidation(this.options.validation), this.themeService.setTheme(this.options.theme), this.positionService = new E(
|
|
2108
2342
|
this.element,
|
|
2109
2343
|
this.container,
|
|
2110
2344
|
this.options
|
|
@@ -2175,11 +2409,11 @@ class V {
|
|
|
2175
2409
|
this.state.endDate || (this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null);
|
|
2176
2410
|
}
|
|
2177
2411
|
triggerCallbackIfChanged() {
|
|
2178
|
-
const t = !
|
|
2412
|
+
const t = !u(
|
|
2179
2413
|
this.state.startDate,
|
|
2180
2414
|
this.state.oldStartDate,
|
|
2181
2415
|
"day"
|
|
2182
|
-
), e = this.state.endDate && this.state.oldEndDate && !
|
|
2416
|
+
), e = this.state.endDate && this.state.oldEndDate && !u(this.state.endDate, this.state.oldEndDate, "day");
|
|
2183
2417
|
(t || e) && this.callback(
|
|
2184
2418
|
new Date(this.state.startDate),
|
|
2185
2419
|
this.state.endDate ? new Date(this.state.endDate) : new Date(this.state.startDate),
|
|
@@ -2197,18 +2431,48 @@ class V {
|
|
|
2197
2431
|
dispatchHideEvent() {
|
|
2198
2432
|
this.eventService.dispatchEvent(this.element, "hide.daterangepicker", this);
|
|
2199
2433
|
}
|
|
2434
|
+
setupDOMObserver() {
|
|
2435
|
+
this.domObserver = new MutationObserver((t) => {
|
|
2436
|
+
let e = !1;
|
|
2437
|
+
t.forEach((a) => {
|
|
2438
|
+
a.type === "childList" && a.addedNodes.forEach((i) => {
|
|
2439
|
+
if (i.nodeType === Node.ELEMENT_NODE) {
|
|
2440
|
+
const o = i;
|
|
2441
|
+
this.hasHighZIndex(o) && (e = !0);
|
|
2442
|
+
}
|
|
2443
|
+
});
|
|
2444
|
+
}), e && setTimeout(() => {
|
|
2445
|
+
this.state.isShowing && this.positionService && this.positionService.updateZIndex();
|
|
2446
|
+
}, 10);
|
|
2447
|
+
}), this.domObserver.observe(document.body, {
|
|
2448
|
+
childList: !0,
|
|
2449
|
+
subtree: !0
|
|
2450
|
+
});
|
|
2451
|
+
}
|
|
2452
|
+
removeDOMObserver() {
|
|
2453
|
+
this.domObserver && (this.domObserver.disconnect(), this.domObserver = void 0);
|
|
2454
|
+
}
|
|
2455
|
+
hasHighZIndex(t) {
|
|
2456
|
+
const e = window.getComputedStyle(t), a = parseInt(e.zIndex);
|
|
2457
|
+
return !isNaN(a) && a > 1e3 ? !0 : ["modal", "dialog", "popup", "overlay", "dropdown"].some(
|
|
2458
|
+
(o) => t.classList.contains(o) || t.className.toLowerCase().includes(o)
|
|
2459
|
+
);
|
|
2460
|
+
}
|
|
2200
2461
|
cleanup() {
|
|
2201
2462
|
var t;
|
|
2202
|
-
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");
|
|
2463
|
+
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");
|
|
2203
2464
|
}
|
|
2204
2465
|
handleKeyboardDateSelect(t) {
|
|
2205
|
-
console.log("DateX: Received date from keyboard:", t.toDateString()), console.log("DateX: Received date day:", t.getDate());
|
|
2206
2466
|
const e = this.validationService.validateDate(t);
|
|
2207
2467
|
if (!e.isValid) {
|
|
2208
2468
|
this.showValidationError(e.error, e.errorCode);
|
|
2209
2469
|
return;
|
|
2210
2470
|
}
|
|
2211
|
-
this.state.hoverDate = null, this.state.endDate ||
|
|
2471
|
+
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();
|
|
2472
|
+
}
|
|
2473
|
+
handleKeyboardMonthChange(t) {
|
|
2474
|
+
const e = new Date(t.getFullYear(), t.getMonth(), 1);
|
|
2475
|
+
this.state.leftCalendar.month = e, this.options.singleDatePicker || this.options.linkedCalendars && (this.state.rightCalendar.month = g(e, 1)), this.updateCalendars();
|
|
2212
2476
|
}
|
|
2213
2477
|
clearSelection() {
|
|
2214
2478
|
const t = /* @__PURE__ */ new Date();
|
|
@@ -2216,7 +2480,7 @@ class V {
|
|
|
2216
2480
|
}
|
|
2217
2481
|
showValidationError(t, e) {
|
|
2218
2482
|
var a;
|
|
2219
|
-
(a = this.options.events) != null && a.onValidationError && this.options.events.onValidationError(t, e)
|
|
2483
|
+
(a = this.options.events) != null && a.onValidationError && this.options.events.onValidationError(t, e);
|
|
2220
2484
|
}
|
|
2221
2485
|
setupEventListeners() {
|
|
2222
2486
|
this.setupElementEvents(), this.setupContainerEvents();
|
|
@@ -2302,11 +2566,11 @@ class V {
|
|
|
2302
2566
|
const t = this.element;
|
|
2303
2567
|
if (!((o = t.value) != null && o.length)) return;
|
|
2304
2568
|
const e = t.value.split(this.locale.separator), { startDate: a, endDate: i } = this.parseDateParts(e);
|
|
2305
|
-
a &&
|
|
2569
|
+
a && k(a) && i && k(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
|
|
2306
2570
|
}
|
|
2307
2571
|
parseDateParts(t) {
|
|
2308
2572
|
let e = null, a = null;
|
|
2309
|
-
return t.length === 2 ? (e =
|
|
2573
|
+
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 };
|
|
2310
2574
|
}
|
|
2311
2575
|
handleKeydown(t) {
|
|
2312
2576
|
t.key === "Tab" || t.key === "Enter" ? this.hide() : t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.hide());
|
|
@@ -2320,8 +2584,8 @@ class V {
|
|
|
2320
2584
|
else {
|
|
2321
2585
|
const i = this.options.ranges[a];
|
|
2322
2586
|
if (i) {
|
|
2323
|
-
const [o,
|
|
2324
|
-
this.state.startDate = new Date(o), this.state.endDate = new Date(
|
|
2587
|
+
const [o, n] = i;
|
|
2588
|
+
this.state.startDate = new Date(o), this.state.endDate = new Date(n), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
|
|
2325
2589
|
}
|
|
2326
2590
|
}
|
|
2327
2591
|
}
|
|
@@ -2358,38 +2622,38 @@ class V {
|
|
|
2358
2622
|
))), this.updateCalendars());
|
|
2359
2623
|
}
|
|
2360
2624
|
handleDateClick(t) {
|
|
2361
|
-
var
|
|
2625
|
+
var n, r;
|
|
2362
2626
|
const e = t.target;
|
|
2363
2627
|
if (!e.classList.contains("available")) return;
|
|
2364
2628
|
const a = e.dataset.date;
|
|
2365
2629
|
if (!a) return;
|
|
2366
|
-
const i =
|
|
2367
|
-
if (!
|
|
2630
|
+
const i = f(a, "YYYY-MM-DD");
|
|
2631
|
+
if (!k(i)) return;
|
|
2368
2632
|
const o = this.validationService.validateDate(i);
|
|
2369
2633
|
if (!o.isValid) {
|
|
2370
2634
|
this.showValidationError(o.error, o.errorCode);
|
|
2371
2635
|
return;
|
|
2372
2636
|
}
|
|
2373
|
-
if (!((
|
|
2374
|
-
if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate ||
|
|
2637
|
+
if (!((n = this.options.events) != null && n.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
|
|
2638
|
+
if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || x(i, this.state.startDate))
|
|
2375
2639
|
this.state.endDate = null, this.setStartDate(i);
|
|
2376
2640
|
else {
|
|
2377
2641
|
if (this.setEndDate(i), this.state.startDate && this.state.endDate) {
|
|
2378
|
-
const
|
|
2642
|
+
const s = this.validationService.validateDateRange(
|
|
2379
2643
|
this.state.startDate,
|
|
2380
2644
|
this.state.endDate
|
|
2381
2645
|
);
|
|
2382
|
-
if (!
|
|
2646
|
+
if (!s.isValid) {
|
|
2383
2647
|
this.showValidationError(
|
|
2384
|
-
|
|
2385
|
-
|
|
2648
|
+
s.error,
|
|
2649
|
+
s.errorCode
|
|
2386
2650
|
), this.state.endDate = null, this.updateDateClasses();
|
|
2387
2651
|
return;
|
|
2388
2652
|
}
|
|
2389
2653
|
}
|
|
2390
2654
|
this.options.autoApply && (this.calculateChosenLabel(), this.handleApplyClick());
|
|
2391
2655
|
}
|
|
2392
|
-
this.options.singleDatePicker && (this.setEndDate(this.state.startDate), this.options.autoApply && this.handleApplyClick()), (
|
|
2656
|
+
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();
|
|
2393
2657
|
}
|
|
2394
2658
|
}
|
|
2395
2659
|
handleDateHover(t) {
|
|
@@ -2397,46 +2661,46 @@ class V {
|
|
|
2397
2661
|
if (!e.classList.contains("available")) return;
|
|
2398
2662
|
const a = e.dataset.date;
|
|
2399
2663
|
if (!a) return;
|
|
2400
|
-
const i =
|
|
2401
|
-
|
|
2664
|
+
const i = f(a, "YYYY-MM-DD");
|
|
2665
|
+
k(i) && !this.state.endDate && !x(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
|
|
2402
2666
|
}
|
|
2403
2667
|
handleMonthYearChange(t) {
|
|
2404
2668
|
const a = t.target.closest(".drp-calendar");
|
|
2405
2669
|
if (!a) return;
|
|
2406
2670
|
const i = a.classList.contains("left"), o = a.querySelector(
|
|
2407
2671
|
".monthselect"
|
|
2408
|
-
),
|
|
2672
|
+
), n = a.querySelector(
|
|
2409
2673
|
".yearselect"
|
|
2410
2674
|
);
|
|
2411
|
-
if (!o || !
|
|
2412
|
-
const
|
|
2675
|
+
if (!o || !n) return;
|
|
2676
|
+
const r = parseInt(o.value, 10), s = parseInt(n.value, 10), d = new Date(s, r, 1);
|
|
2413
2677
|
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();
|
|
2414
2678
|
}
|
|
2415
2679
|
handleTimeChange(t) {
|
|
2416
2680
|
const a = t.target.closest(".drp-calendar");
|
|
2417
2681
|
if (!a) return;
|
|
2418
|
-
const i = a.classList.contains("left"), o = i ? this.state.startDate : this.state.endDate || this.state.startDate,
|
|
2682
|
+
const i = a.classList.contains("left"), o = i ? this.state.startDate : this.state.endDate || this.state.startDate, n = a.querySelector(
|
|
2419
2683
|
".hourselect"
|
|
2420
|
-
), n = a.querySelector(
|
|
2421
|
-
".minuteselect"
|
|
2422
2684
|
), r = a.querySelector(
|
|
2685
|
+
".minuteselect"
|
|
2686
|
+
), s = a.querySelector(
|
|
2423
2687
|
".secondselect"
|
|
2424
2688
|
), d = a.querySelector(
|
|
2425
2689
|
".ampmselect"
|
|
2426
2690
|
);
|
|
2427
|
-
if (!
|
|
2428
|
-
let c = parseInt(
|
|
2429
|
-
const
|
|
2691
|
+
if (!n || !r) return;
|
|
2692
|
+
let c = parseInt(n.value, 10);
|
|
2693
|
+
const m = parseInt(r.value, 10) || 0, h = s ? parseInt(s.value, 10) : 0;
|
|
2430
2694
|
if (!this.options.timePicker24Hour && d) {
|
|
2431
|
-
const
|
|
2432
|
-
|
|
2695
|
+
const b = d.value;
|
|
2696
|
+
b === "PM" && c < 12 && (c += 12), b === "AM" && c === 12 && (c = 0);
|
|
2433
2697
|
}
|
|
2434
2698
|
const p = new Date(o);
|
|
2435
|
-
if (p.setHours(c), p.setMinutes(
|
|
2699
|
+
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)) {
|
|
2436
2700
|
if (this.validationService) {
|
|
2437
|
-
const
|
|
2438
|
-
if (!
|
|
2439
|
-
this.showValidationError(
|
|
2701
|
+
const b = this.validationService.validateDate(p);
|
|
2702
|
+
if (!b.isValid) {
|
|
2703
|
+
this.showValidationError(b.error, b.errorCode);
|
|
2440
2704
|
return;
|
|
2441
2705
|
}
|
|
2442
2706
|
}
|
|
@@ -2476,7 +2740,7 @@ class V {
|
|
|
2476
2740
|
e.calendar = this.calendarService.buildCalendarMatrix(
|
|
2477
2741
|
e.month
|
|
2478
2742
|
);
|
|
2479
|
-
const i = this.calendarService.canNavigatePrevious(e.month), o = this.calendarService.canNavigateNext(e.month),
|
|
2743
|
+
const i = this.calendarService.canNavigatePrevious(e.month), o = this.calendarService.canNavigateNext(e.month), n = this.calendarService.renderCalendarHTML(
|
|
2480
2744
|
e,
|
|
2481
2745
|
t,
|
|
2482
2746
|
this.state.startDate,
|
|
@@ -2484,18 +2748,18 @@ class V {
|
|
|
2484
2748
|
i,
|
|
2485
2749
|
o
|
|
2486
2750
|
);
|
|
2487
|
-
a.innerHTML =
|
|
2751
|
+
a.innerHTML = n;
|
|
2488
2752
|
}
|
|
2489
2753
|
updateFormInputs() {
|
|
2490
2754
|
const t = this.container.querySelector(
|
|
2491
2755
|
".applyBtn"
|
|
2492
|
-
), e = this.options.singleDatePicker || this.state.endDate && (
|
|
2756
|
+
), e = this.options.singleDatePicker || this.state.endDate && (x(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
|
|
2493
2757
|
t.disabled = !e, this.updateMobileHeaderButtons();
|
|
2494
2758
|
}
|
|
2495
2759
|
updateSelectedDisplay() {
|
|
2496
2760
|
const t = this.container.querySelector(".drp-selected");
|
|
2497
|
-
let e =
|
|
2498
|
-
!this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator +
|
|
2761
|
+
let e = D(this.state.startDate, this.locale.format);
|
|
2762
|
+
!this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + D(this.state.endDate, this.locale.format)), t.textContent = e, this.updateMobileHeader(e);
|
|
2499
2763
|
}
|
|
2500
2764
|
updateMobileHeader(t) {
|
|
2501
2765
|
const e = this.container.querySelector(
|
|
@@ -2512,15 +2776,15 @@ class V {
|
|
|
2512
2776
|
".mobile-applyBtn"
|
|
2513
2777
|
);
|
|
2514
2778
|
if (t) {
|
|
2515
|
-
const e = this.options.singleDatePicker || this.state.endDate && (
|
|
2779
|
+
const e = this.options.singleDatePicker || this.state.endDate && (x(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
|
|
2516
2780
|
t.disabled = !e;
|
|
2517
2781
|
}
|
|
2518
2782
|
}
|
|
2519
2783
|
updateElement() {
|
|
2520
2784
|
if (this.element.tagName === "INPUT" && this.options.autoUpdateInput) {
|
|
2521
2785
|
const t = this.element;
|
|
2522
|
-
let e =
|
|
2523
|
-
!this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator +
|
|
2786
|
+
let e = D(this.state.startDate, this.locale.format);
|
|
2787
|
+
!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"));
|
|
2524
2788
|
}
|
|
2525
2789
|
}
|
|
2526
2790
|
renderRanges() {
|
|
@@ -2547,13 +2811,13 @@ class V {
|
|
|
2547
2811
|
this.container.querySelectorAll("td[data-date]").forEach((e) => {
|
|
2548
2812
|
const a = e.dataset.date;
|
|
2549
2813
|
if (!a) return;
|
|
2550
|
-
const i =
|
|
2551
|
-
if (!
|
|
2814
|
+
const i = f(a, "YYYY-MM-DD");
|
|
2815
|
+
if (!k(i)) return;
|
|
2552
2816
|
e.classList.remove("in-range", "end-date", "start-date", "active");
|
|
2553
|
-
const o = this.state.startDate,
|
|
2554
|
-
if (o &&
|
|
2555
|
-
const
|
|
2556
|
-
|
|
2817
|
+
const o = this.state.startDate, n = this.state.endDate, r = this.state.hoverDate;
|
|
2818
|
+
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) {
|
|
2819
|
+
const s = x(r, o) ? r : o, d = x(r, o) ? o : r;
|
|
2820
|
+
u(i, r, "day") ? e.classList.add("end-date") : y(i, s) && x(i, d) && e.classList.add("in-range");
|
|
2557
2821
|
}
|
|
2558
2822
|
});
|
|
2559
2823
|
}
|
|
@@ -2565,24 +2829,24 @@ class V {
|
|
|
2565
2829
|
".hourselect"
|
|
2566
2830
|
), o = a.querySelector(
|
|
2567
2831
|
".minuteselect"
|
|
2568
|
-
), s = a.querySelector(
|
|
2569
|
-
".secondselect"
|
|
2570
2832
|
), n = a.querySelector(
|
|
2833
|
+
".secondselect"
|
|
2834
|
+
), r = a.querySelector(
|
|
2571
2835
|
".ampmselect"
|
|
2572
2836
|
);
|
|
2573
2837
|
if (i) {
|
|
2574
|
-
let
|
|
2575
|
-
if (!this.options.timePicker24Hour &&
|
|
2576
|
-
const d =
|
|
2577
|
-
d === "PM" &&
|
|
2838
|
+
let s = parseInt(i.value, 10);
|
|
2839
|
+
if (!this.options.timePicker24Hour && r) {
|
|
2840
|
+
const d = r.value;
|
|
2841
|
+
d === "PM" && s < 12 && (s += 12), d === "AM" && s === 12 && (s = 0);
|
|
2578
2842
|
}
|
|
2579
|
-
t.setHours(
|
|
2843
|
+
t.setHours(s);
|
|
2580
2844
|
}
|
|
2581
2845
|
if (o) {
|
|
2582
|
-
const
|
|
2583
|
-
t.setMinutes(
|
|
2846
|
+
const s = parseInt(o.value, 10) || 0;
|
|
2847
|
+
t.setMinutes(s);
|
|
2584
2848
|
}
|
|
2585
|
-
this.options.timePickerSeconds &&
|
|
2849
|
+
this.options.timePickerSeconds && n && t.setSeconds(parseInt(n.value, 10));
|
|
2586
2850
|
}
|
|
2587
2851
|
createRangeService() {
|
|
2588
2852
|
return {
|
|
@@ -2594,13 +2858,13 @@ class V {
|
|
|
2594
2858
|
},
|
|
2595
2859
|
calculateChosenLabel: (t, e) => {
|
|
2596
2860
|
let a = null;
|
|
2597
|
-
for (const [i, [o,
|
|
2861
|
+
for (const [i, [o, n]] of Object.entries(
|
|
2598
2862
|
this.options.ranges
|
|
2599
2863
|
)) {
|
|
2600
|
-
const
|
|
2601
|
-
let
|
|
2602
|
-
if (e ?
|
|
2603
|
-
const d = Math.abs(
|
|
2864
|
+
const r = u(t, o, "day");
|
|
2865
|
+
let s = !1;
|
|
2866
|
+
if (e ? s = u(e, n, "day") : s = u(t, n, "day"), r && s) {
|
|
2867
|
+
const d = Math.abs(n.getTime() - o.getTime()) / 864e5 + 1;
|
|
2604
2868
|
(!a || d > a.days) && (a = { label: i, days: d });
|
|
2605
2869
|
}
|
|
2606
2870
|
}
|
|
@@ -2618,20 +2882,20 @@ class V {
|
|
|
2618
2882
|
}
|
|
2619
2883
|
}
|
|
2620
2884
|
export {
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2885
|
+
z as BOOTSTRAP_THEME,
|
|
2886
|
+
M as DEFAULT_THEME,
|
|
2887
|
+
N as Datex,
|
|
2888
|
+
Y as MATERIAL_THEME,
|
|
2625
2889
|
P as SPANISH_LOCALE,
|
|
2626
|
-
|
|
2890
|
+
O as SPANISH_LOCALE_WITH_TIME,
|
|
2627
2891
|
g as addMonths,
|
|
2628
2892
|
S as endOfDay,
|
|
2629
|
-
|
|
2893
|
+
D as formatDate,
|
|
2630
2894
|
w as getStartOfMonth,
|
|
2631
2895
|
y as isAfterDate,
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2896
|
+
x as isBeforeDate,
|
|
2897
|
+
u as isSameDate,
|
|
2898
|
+
k as isValidDate,
|
|
2899
|
+
f as parseDate,
|
|
2636
2900
|
C as startOfDay
|
|
2637
2901
|
};
|