datex-ui 1.1.10 → 1.1.11

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.
Files changed (4) hide show
  1. package/dist/datex.d.ts +4 -0
  2. package/dist/index.esm.js +968 -252
  3. package/dist/services/position-service.d.ts +7 -0
  4. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,12 +1,12 @@
1
- function C(l, t) {
2
- const e = l.getFullYear(), a = String(l.getMonth() + 1).padStart(2, "0"), i = String(l.getDate()).padStart(2, "0"), s = String(l.getHours()).padStart(2, "0"), r = String(l.getMinutes()).padStart(2, "0"), n = 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, s).replace(/mm/g, r).replace(/ss/g, n);
1
+ function k(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"), s = String(l.getMinutes()).padStart(2, "0"), n = 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, s).replace(/ss/g, n);
4
4
  }
5
- function f(l, t) {
5
+ function g(l, t) {
6
6
  const e = new Date(l);
7
7
  return e.setMonth(e.getMonth() + t), e;
8
8
  }
9
- function w(l) {
9
+ function C(l) {
10
10
  const t = new Date(l);
11
11
  return t.setHours(0, 0, 0, 0), t;
12
12
  }
@@ -14,13 +14,13 @@ function S(l) {
14
14
  const t = new Date(l);
15
15
  return t.setHours(23, 59, 59, 999), t;
16
16
  }
17
- function k(l, t) {
17
+ function y(l, t) {
18
18
  return l.getTime() > t.getTime();
19
19
  }
20
- function g(l, t) {
20
+ function u(l, t) {
21
21
  return l.getTime() < t.getTime();
22
22
  }
23
- function u(l, t, e = "day") {
23
+ function m(l, t, e = "day") {
24
24
  if (!l || !t) return !1;
25
25
  switch (e) {
26
26
  case "day":
@@ -33,35 +33,35 @@ function u(l, t, e = "day") {
33
33
  return !1;
34
34
  }
35
35
  }
36
- function y(l) {
36
+ function D(l) {
37
37
  return l instanceof Date && !isNaN(l.getTime());
38
38
  }
39
- function b(l, t) {
39
+ function x(l, t) {
40
40
  if (t === "YYYY-MM-DD") {
41
41
  const e = l.split("-");
42
42
  if (e.length === 3) {
43
- const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, s = parseInt(e[2], 10);
44
- return new Date(a, i, s);
43
+ const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, o = parseInt(e[2], 10);
44
+ return new Date(a, i, o);
45
45
  }
46
46
  return new Date(l);
47
47
  }
48
48
  if (t === "DD/MM/YYYY") {
49
49
  const e = l.split("/");
50
50
  if (e.length === 3) {
51
- const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, s = parseInt(e[2], 10);
52
- return new Date(s, i, a);
51
+ const a = parseInt(e[0], 10), i = parseInt(e[1], 10) - 1, o = parseInt(e[2], 10);
52
+ return new Date(o, i, a);
53
53
  }
54
54
  }
55
55
  if (t === "DD/MM/YYYY HH:mm") {
56
- const [e, a] = l.split(" "), i = e.split("/"), s = a ? a.split(":") : ["0", "0"];
56
+ const [e, a] = l.split(" "), i = e.split("/"), o = a ? a.split(":") : ["0", "0"];
57
57
  if (i.length === 3) {
58
- const r = parseInt(i[0], 10), n = parseInt(i[1], 10) - 1, o = parseInt(i[2], 10), c = parseInt(s[0], 10) || 0, d = parseInt(s[1], 10) || 0;
59
- return new Date(o, n, r, c, d);
58
+ const s = parseInt(i[0], 10), n = parseInt(i[1], 10) - 1, r = parseInt(i[2], 10), d = parseInt(o[0], 10) || 0, c = parseInt(o[1], 10) || 0;
59
+ return new Date(r, n, s, d, c);
60
60
  }
61
61
  }
62
62
  return new Date(l);
63
63
  }
64
- function x(l) {
64
+ function w(l) {
65
65
  return new Date(l.getFullYear(), l.getMonth(), 1);
66
66
  }
67
67
  function L(l) {
@@ -87,7 +87,7 @@ const E = {
87
87
  borderRadius: "4px",
88
88
  fontSize: "15px",
89
89
  fontFamily: "arial"
90
- }, B = {
90
+ }, Y = {
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
- }, R = {
106
+ }, z = {
107
107
  primaryColor: "#1976d2",
108
108
  secondaryColor: "#757575",
109
109
  backgroundColor: "#ffffff",
@@ -120,7 +120,7 @@ const E = {
120
120
  fontSize: "14px",
121
121
  fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif'
122
122
  };
123
- class T {
123
+ class H {
124
124
  constructor(t, e = E) {
125
125
  this.mode = "light", this.handleMediaChange = () => {
126
126
  this.mode === "auto" && this.applyTheme();
@@ -194,6 +194,19 @@ class T {
194
194
  generateThemeCSS() {
195
195
  const t = this.getThemeForMode(), e = this.getCurrentMode();
196
196
  return this.container.classList.remove("datex-light", "datex-dark"), this.container.classList.add(`datex-${e}`), `
197
+ /* Simple dropdown arrow for inputs */
198
+ input.datex-input {
199
+ 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;
200
+ background-repeat: no-repeat !important;
201
+ background-position: right 10px center !important;
202
+ background-size: 16px !important;
203
+ padding-right: 35px !important;
204
+ }
205
+
206
+ input.datex-input.datex-active {
207
+ 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='18,15 12,9 6,15'%3e%3c/polyline%3e%3c/svg%3e") !important;
208
+ }
209
+
197
210
  .datex-picker {
198
211
  background-color: ${t.backgroundColor} !important;
199
212
  border: 1px solid ${t.borderColor} !important;
@@ -206,6 +219,116 @@ class T {
206
219
  z-index: 3001 !important;
207
220
  }
208
221
 
222
+ /* Base arrow styles - creates the dropdown arrow */
223
+ .datex-picker:before,
224
+ .datex-picker:after {
225
+ position: absolute !important;
226
+ display: inline-block !important;
227
+ content: "" !important;
228
+ border-left: 7px solid transparent !important;
229
+ border-right: 7px solid transparent !important;
230
+ }
231
+
232
+ .datex-picker:before {
233
+ border-bottom: 7px solid ${t.borderColor} !important;
234
+ top: -7px !important;
235
+ left: 50% !important;
236
+ transform: translateX(-50%) !important;
237
+ }
238
+
239
+ .datex-picker:after {
240
+ border-bottom: 6px solid ${t.backgroundColor} !important;
241
+ top: -6px !important;
242
+ left: 50% !important;
243
+ transform: translateX(-50%) !important;
244
+ border-left-width: 6px !important;
245
+ border-right-width: 6px !important;
246
+ }
247
+
248
+ /* Center positioning (default) */
249
+ .datex-picker.openscenter:before {
250
+ left: 50% !important;
251
+ transform: translateX(-50%) !important;
252
+ }
253
+
254
+ .datex-picker.openscenter:after {
255
+ left: 50% !important;
256
+ transform: translateX(-50%) !important;
257
+ }
258
+
259
+ /* Opens left */
260
+ .datex-picker.opensleft:before {
261
+ left: 20px !important;
262
+ transform: none !important;
263
+ }
264
+
265
+ .datex-picker.opensleft:after {
266
+ left: 21px !important;
267
+ transform: none !important;
268
+ }
269
+
270
+ /* Opens right */
271
+ .datex-picker.opensright:before {
272
+ left: auto !important;
273
+ right: 20px !important;
274
+ transform: none !important;
275
+ }
276
+
277
+ .datex-picker.opensright:after {
278
+ left: auto !important;
279
+ right: 21px !important;
280
+ transform: none !important;
281
+ }
282
+
283
+ /* Drop up positioning - arrow points down */
284
+ .datex-picker.drop-up:before {
285
+ top: auto !important;
286
+ bottom: -7px !important;
287
+ border-bottom: none !important;
288
+ border-top: 7px solid ${t.borderColor} !important;
289
+ }
290
+
291
+ .datex-picker.drop-up:after {
292
+ top: auto !important;
293
+ bottom: -6px !important;
294
+ border-bottom: none !important;
295
+ border-top: 6px solid ${t.backgroundColor} !important;
296
+ border-left-width: 6px !important;
297
+ border-right-width: 6px !important;
298
+ }
299
+
300
+ .datex-picker.drop-up.openscenter:before {
301
+ left: 50% !important;
302
+ transform: translateX(-50%) !important;
303
+ }
304
+
305
+ .datex-picker.drop-up.openscenter:after {
306
+ left: 50% !important;
307
+ transform: translateX(-50%) !important;
308
+ }
309
+
310
+ .datex-picker.drop-up.opensleft:before {
311
+ left: 20px !important;
312
+ transform: none !important;
313
+ }
314
+
315
+ .datex-picker.drop-up.opensleft:after {
316
+ left: 21px !important;
317
+ transform: none !important;
318
+ }
319
+
320
+ .datex-picker.drop-up.opensright:before {
321
+ left: auto !important;
322
+ right: 20px !important;
323
+ transform: none !important;
324
+ }
325
+
326
+ .datex-picker.drop-up.opensright:after {
327
+ left: auto !important;
328
+ right: 21px !important;
329
+ transform: none !important;
330
+ }
331
+
209
332
  .datex-picker.single {
210
333
  width: 230px !important;
211
334
  }
@@ -235,41 +358,49 @@ class T {
235
358
  -ms-user-select: auto !important;
236
359
  }
237
360
 
238
- .datex-picker:before {
239
- border-bottom: 7px solid #ccc !important;
240
- }
241
-
242
- .datex-picker:after {
243
- border-bottom-color: ${t.backgroundColor} !important;
361
+ .datex-picker .calendar-table {
362
+ background-color: ${t.backgroundColor} !important;
363
+ border: 1px solid ${t.backgroundColor} !important;
364
+ border-radius: ${t.borderRadius} !important;
365
+ width: 100% !important;
366
+ table-layout: fixed !important;
367
+ border-collapse: collapse !important;
368
+ border-spacing: 0 !important;
244
369
  }
245
370
 
246
- .datex-picker.drop-up:before {
247
- border-top: 7px solid #ccc !important;
371
+ .datex-picker .calendar-table table {
372
+ width: 100% !important;
373
+ margin: 0 !important;
374
+ border-spacing: 0 !important;
375
+ border-collapse: collapse !important;
248
376
  }
249
377
 
250
- .datex-picker.drop-up:after {
251
- border-top-color: ${t.backgroundColor} !important;
378
+ /* Desktop: Keep original compact design */
379
+ .datex-picker .calendar-table tbody td {
380
+ text-align: center !important;
381
+ box-sizing: border-box !important;
252
382
  }
253
383
 
254
- .datex-picker .calendar-table {
255
- background-color: ${t.backgroundColor} !important;
256
- border: 1px solid ${t.backgroundColor} !important;
257
- border-radius: ${t.borderRadius} !important;
384
+ .datex-picker .calendar-table thead tr:last-child th {
385
+ text-align: center !important;
386
+ box-sizing: border-box !important;
258
387
  }
259
388
 
260
389
  .datex-picker .calendar-table th,
261
390
  .datex-picker .calendar-table td {
262
391
  min-width: 28px !important;
263
392
  width: 28px !important;
264
- height: 22px !important;
265
- line-height: 20px !important;
266
- font-size: 11px !important;
393
+ height: 28px !important;
394
+ line-height: 28px !important;
395
+ font-size: 12px !important;
267
396
  border-radius: 3px !important;
268
397
  border: 1px solid transparent !important;
269
398
  white-space: nowrap !important;
270
399
  cursor: pointer !important;
271
400
  text-align: center !important;
272
401
  vertical-align: middle !important;
402
+ padding: 0 !important;
403
+ box-sizing: border-box !important;
273
404
  }
274
405
 
275
406
  .datex-picker .calendar-table th {
@@ -576,11 +707,504 @@ class T {
576
707
  color: #fff !important;
577
708
  }
578
709
 
710
+ /* Mobile-first responsive styles */
711
+ @media (max-width: 768px) {
712
+ /* Prevent horizontal overflow and fix z-index issues */
713
+ body {
714
+ overflow-x: hidden !important;
715
+ }
716
+
717
+ .datex-picker,
718
+ .datex-picker.mobile-view {
719
+ position: fixed !important;
720
+ bottom: 0 !important;
721
+ left: 0 !important;
722
+ right: 0 !important;
723
+ top: auto !important;
724
+ width: 100% !important;
725
+ max-width: 100vw !important;
726
+ min-width: 100vw !important;
727
+ border-radius: 12px 12px 0 0 !important;
728
+ margin: 0 !important;
729
+ padding: 0 !important;
730
+ box-sizing: border-box !important;
731
+ transform: none !important;
732
+ overflow-x: hidden !important;
733
+ z-index: 999999 !important;
734
+ /* Fix for overlay issues */
735
+ isolation: isolate !important;
736
+ contain: layout style !important;
737
+ /* Better positioning */
738
+ max-height: 85vh !important;
739
+ max-height: 85dvh !important;
740
+ }
741
+
742
+ /* Mobile header with selected date and buttons */
743
+ .datex-picker .datex-mobile-header,
744
+ .datex-picker.mobile-view .datex-mobile-header {
745
+ width: 100% !important;
746
+ background-color: ${t.backgroundColor} !important;
747
+ color: ${t.textColor} !important;
748
+ border-radius: 12px 12px 0 0 !important;
749
+ box-sizing: border-box !important;
750
+ position: relative !important;
751
+ z-index: 3 !important;
752
+ border-bottom: 1px solid ${t.borderColor} !important;
753
+ display: flex !important;
754
+ flex-direction: column !important;
755
+ gap: 0 !important;
756
+ }
757
+
758
+ .datex-picker .datex-mobile-header .mobile-header-content,
759
+ .datex-picker.mobile-view .datex-mobile-header .mobile-header-content {
760
+ padding: 12px 16px 8px 16px !important;
761
+ text-align: center !important;
762
+ flex: 1 !important;
763
+ }
764
+
765
+ .datex-picker .datex-mobile-header .mobile-header-buttons,
766
+ .datex-picker.mobile-view .datex-mobile-header .mobile-header-buttons {
767
+ display: flex !important;
768
+ justify-content: space-between !important;
769
+ align-items: center !important;
770
+ padding: 8px 16px 12px 16px !important;
771
+ gap: 12px !important;
772
+ border-top: 1px solid ${t.borderColor} !important;
773
+ background-color: ${e === "dark" ? "#374151" : "#f9fafb"} !important;
774
+ }
775
+
776
+ .datex-picker .datex-mobile-header .selected-range,
777
+ .datex-picker.mobile-view .datex-mobile-header .selected-range {
778
+ display: block !important;
779
+ font-size: 16px !important;
780
+ font-weight: 600 !important;
781
+ line-height: 1.2 !important;
782
+ color: ${t.textColor} !important;
783
+ }
784
+
785
+ .datex-picker .datex-mobile-header .range-label,
786
+ .datex-picker.mobile-view .datex-mobile-header .range-label {
787
+ display: block !important;
788
+ font-size: 12px !important;
789
+ font-weight: 400 !important;
790
+ opacity: 0.7 !important;
791
+ margin-top: 2px !important;
792
+ color: ${t.textColor} !important;
793
+ }
794
+
795
+ .datex-picker .datex-mobile-header .mobile-cancelBtn,
796
+ .datex-picker .datex-mobile-header .mobile-applyBtn,
797
+ .datex-picker.mobile-view .datex-mobile-header .mobile-cancelBtn,
798
+ .datex-picker.mobile-view .datex-mobile-header .mobile-applyBtn {
799
+ flex: 1 !important;
800
+ padding: 8px 16px !important;
801
+ border-radius: 6px !important;
802
+ font-size: 14px !important;
803
+ font-weight: 600 !important;
804
+ cursor: pointer !important;
805
+ transition: all 0.2s ease !important;
806
+ color: #fff !important;
807
+ border: none !important;
808
+ }
809
+
810
+ /* Cancel button - Red/danger color */
811
+ .datex-picker .datex-mobile-header .mobile-cancelBtn,
812
+ .datex-picker.mobile-view .datex-mobile-header .mobile-cancelBtn {
813
+ background: ${t.cancelButtonColor} !important;
814
+ border: 1px solid ${t.cancelButtonColor} !important;
815
+ }
816
+
817
+ .datex-picker .datex-mobile-header .mobile-cancelBtn:hover,
818
+ .datex-picker.mobile-view .datex-mobile-header .mobile-cancelBtn:hover {
819
+ background: ${t.cancelButtonColor} !important;
820
+ opacity: 0.8 !important;
821
+ transform: translateY(-1px) !important;
822
+ box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
823
+ }
824
+
825
+ /* Apply button - Green/success color */
826
+ .datex-picker .datex-mobile-header .mobile-applyBtn,
827
+ .datex-picker.mobile-view .datex-mobile-header .mobile-applyBtn {
828
+ background: ${t.applyButtonColor} !important;
829
+ border: 1px solid ${t.applyButtonColor} !important;
830
+ }
831
+
832
+ .datex-picker .datex-mobile-header .mobile-applyBtn:hover,
833
+ .datex-picker.mobile-view .datex-mobile-header .mobile-applyBtn:hover {
834
+ background: ${t.applyButtonColor} !important;
835
+ opacity: 0.8 !important;
836
+ transform: translateY(-1px) !important;
837
+ box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
838
+ }
839
+
840
+ /* Disabled state for apply button */
841
+ .datex-picker .datex-mobile-header .mobile-applyBtn:disabled,
842
+ .datex-picker.mobile-view .datex-mobile-header .mobile-applyBtn:disabled {
843
+ background: #9ca3af !important;
844
+ border-color: #9ca3af !important;
845
+ opacity: 0.6 !important;
846
+ cursor: not-allowed !important;
847
+ transform: none !important;
848
+ box-shadow: none !important;
849
+ }
850
+
851
+ .datex-picker .datex-mobile-header .mobile-cancelBtn:active,
852
+ .datex-picker .datex-mobile-header .mobile-applyBtn:active,
853
+ .datex-picker.mobile-view .datex-mobile-header .mobile-cancelBtn:active,
854
+ .datex-picker.mobile-view .datex-mobile-header .mobile-applyBtn:active {
855
+ transform: translateY(1px) !important;
856
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
857
+ }
858
+
859
+ /* Hide arrows on mobile */
860
+ .datex-picker:before,
861
+ .datex-picker:after,
862
+ .datex-picker.mobile-view:before,
863
+ .datex-picker.mobile-view:after {
864
+ display: none !important;
865
+ }
866
+
867
+ /* Fix calendar container positioning */
868
+ .datex-picker .drp-calendar,
869
+ .datex-picker.mobile-view .drp-calendar {
870
+ width: 100% !important;
871
+ float: none !important;
872
+ padding: 6px !important;
873
+ box-sizing: border-box !important;
874
+ overflow-x: hidden !important;
875
+ position: relative !important;
876
+ z-index: 1 !important;
877
+ }
878
+
879
+ .datex-picker .drp-calendar.left,
880
+ .datex-picker .drp-calendar.right,
881
+ .datex-picker.mobile-view .drp-calendar.left,
882
+ .datex-picker.mobile-view .drp-calendar.right {
883
+ width: 100% !important;
884
+ float: none !important;
885
+ clear: both !important;
886
+ padding: 6px !important;
887
+ margin: 0 !important;
888
+ box-sizing: border-box !important;
889
+ position: relative !important;
890
+ }
891
+
892
+ /* Fix calendar table positioning */
893
+ .datex-picker .drp-calendar .calendar-table,
894
+ .datex-picker.mobile-view .drp-calendar .calendar-table {
895
+ width: 100% !important;
896
+ border: none !important;
897
+ border-radius: ${t.borderRadius} !important;
898
+ margin: 0 !important;
899
+ box-sizing: border-box !important;
900
+ overflow-x: hidden !important;
901
+ position: relative !important;
902
+ z-index: 1 !important;
903
+ }
904
+
905
+ .datex-picker .drp-calendar .calendar-table table,
906
+ .datex-picker.mobile-view .drp-calendar .calendar-table table {
907
+ width: 100% !important;
908
+ table-layout: fixed !important;
909
+ border-collapse: collapse !important;
910
+ border-spacing: 0 !important;
911
+ margin: 0 !important;
912
+ position: relative !important;
913
+ z-index: 1 !important;
914
+ }
915
+
916
+ /* CRITICAL: Uniform grid ONLY for mobile - calendar body cells (days) - SQUARE */
917
+ .datex-picker .drp-calendar .calendar-table tbody td,
918
+ .datex-picker.mobile-view .drp-calendar .calendar-table tbody td {
919
+ width: 14.285714% !important; /* Exactly 100% / 7 days */
920
+ min-width: 14.285714% !important;
921
+ max-width: 14.285714% !important;
922
+ height: 40px !important; /* Fixed height to make square-ish */
923
+ line-height: 40px !important;
924
+ padding: 0 !important;
925
+ margin: 0 !important;
926
+ text-align: center !important;
927
+ font-size: 15px !important;
928
+ font-weight: 500 !important;
929
+ box-sizing: border-box !important;
930
+ border: 1px solid transparent !important;
931
+ vertical-align: middle !important;
932
+ position: relative !important;
933
+ z-index: 2 !important;
934
+ /* Ensure clickable area */
935
+ cursor: pointer !important;
936
+ -webkit-tap-highlight-color: transparent !important;
937
+ touch-action: manipulation !important;
938
+ border-radius: 6px !important;
939
+ }
940
+
941
+ /* Header cells (days of week) - also uniform ONLY for mobile */
942
+ .datex-picker .drp-calendar .calendar-table thead tr:last-child th,
943
+ .datex-picker.mobile-view .drp-calendar .calendar-table thead tr:last-child th {
944
+ width: 14.285714% !important;
945
+ min-width: 14.285714% !important;
946
+ max-width: 14.285714% !important;
947
+ height: 28px !important;
948
+ line-height: 28px !important;
949
+ font-size: 11px !important;
950
+ font-weight: 600 !important;
951
+ color: ${t.textColor} !important;
952
+ background-color: ${t.backgroundColor} !important;
953
+ text-align: center !important;
954
+ padding: 0 !important;
955
+ margin: 0 !important;
956
+ box-sizing: border-box !important;
957
+ position: relative !important;
958
+ z-index: 2 !important;
959
+ }
960
+
961
+ /* Navigation header (month/year row) */
962
+ .datex-picker .drp-calendar .calendar-table thead tr:first-child th,
963
+ .datex-picker.mobile-view .drp-calendar .calendar-table thead tr:first-child th {
964
+ height: 36px !important;
965
+ line-height: 36px !important;
966
+ font-size: 14px !important;
967
+ font-weight: 600 !important;
968
+ padding: 0 4px !important;
969
+ text-align: center !important;
970
+ position: relative !important;
971
+ z-index: 2 !important;
972
+ }
973
+
974
+ /* Fix select dropdowns positioning */
975
+ .datex-picker select,
976
+ .datex-picker.mobile-view select {
977
+ position: relative !important;
978
+ z-index: 1000 !important;
979
+ background: ${t.backgroundColor} !important;
980
+ border: 1px solid ${t.borderColor} !important;
981
+ border-radius: 4px !important;
982
+ padding: 4px 8px !important;
983
+ font-size: 14px !important;
984
+ color: ${t.textColor} !important;
985
+ /* Fix for mobile browsers */
986
+ -webkit-appearance: menulist !important;
987
+ -moz-appearance: menulist !important;
988
+ appearance: menulist !important;
989
+ }
990
+
991
+ /* Month/year header should span full width */
992
+ .datex-picker .drp-calendar .calendar-table th.month,
993
+ .datex-picker.mobile-view .drp-calendar .calendar-table th.month {
994
+ width: auto !important;
995
+ min-width: auto !important;
996
+ max-width: none !important;
997
+ }
998
+
999
+ /* Fix for disabled dates appearing above calendar */
1000
+ .datex-picker .drp-calendar .calendar-table tbody td.off,
1001
+ .datex-picker .drp-calendar .calendar-table tbody td.disabled,
1002
+ .datex-picker.mobile-view .drp-calendar .calendar-table tbody td.off,
1003
+ .datex-picker.mobile-view .drp-calendar .calendar-table tbody td.disabled {
1004
+ position: relative !important;
1005
+ z-index: 1 !important;
1006
+ color: ${t.disabledColor} !important;
1007
+ background-color: transparent !important;
1008
+ cursor: not-allowed !important;
1009
+ pointer-events: none !important;
1010
+ }
1011
+
1012
+ /* Ensure clickable dates are properly positioned */
1013
+ .datex-picker .drp-calendar .calendar-table tbody td.available,
1014
+ .datex-picker.mobile-view .drp-calendar .calendar-table tbody td.available {
1015
+ position: relative !important;
1016
+ z-index: 2 !important;
1017
+ cursor: pointer !important;
1018
+ pointer-events: auto !important;
1019
+ -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
1020
+ }
1021
+
1022
+ /* iOS specific fixes */
1023
+ @supports (-webkit-touch-callout: none) {
1024
+ .datex-picker,
1025
+ .datex-picker.mobile-view {
1026
+ -webkit-overflow-scrolling: touch !important;
1027
+ -webkit-transform: translate3d(0,0,0) !important;
1028
+ }
1029
+
1030
+ .datex-picker .drp-calendar .calendar-table tbody td,
1031
+ .datex-picker.mobile-view .drp-calendar .calendar-table tbody td {
1032
+ -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
1033
+ -webkit-touch-callout: none !important;
1034
+ -webkit-user-select: none !important;
1035
+ }
1036
+ }
1037
+
1038
+ /* Android specific fixes */
1039
+ @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
1040
+ .datex-picker,
1041
+ .datex-picker.mobile-view {
1042
+ will-change: transform !important;
1043
+ }
1044
+ }
1045
+
1046
+ .datex-picker .ranges,
1047
+ .datex-picker.mobile-view .ranges {
1048
+ width: 100% !important;
1049
+ float: none !important;
1050
+ margin: 0 !important;
1051
+ padding: 8px 0 !important;
1052
+ box-sizing: border-box !important;
1053
+ overflow-x: auto !important;
1054
+ overflow-y: hidden !important;
1055
+ -webkit-overflow-scrolling: touch !important;
1056
+ scrollbar-width: none !important; /* Firefox */
1057
+ -ms-overflow-style: none !important; /* IE/Edge */
1058
+ }
1059
+
1060
+ /* Hide scrollbar for webkit browsers */
1061
+ .datex-picker .ranges::-webkit-scrollbar,
1062
+ .datex-picker.mobile-view .ranges::-webkit-scrollbar {
1063
+ display: none !important;
1064
+ }
1065
+
1066
+ .datex-picker .ranges ul,
1067
+ .datex-picker.mobile-view .ranges ul {
1068
+ width: auto !important;
1069
+ min-width: 100% !important;
1070
+ margin: 0 !important;
1071
+ padding: 0 8px !important;
1072
+ box-sizing: border-box !important;
1073
+ display: flex !important;
1074
+ flex-direction: row !important;
1075
+ gap: 8px !important;
1076
+ list-style: none !important;
1077
+ }
1078
+
1079
+ .datex-picker .ranges li,
1080
+ .datex-picker.mobile-view .ranges li {
1081
+ flex: 0 0 auto !important;
1082
+ white-space: nowrap !important;
1083
+ font-size: 12px !important;
1084
+ padding: 8px 12px !important;
1085
+ cursor: pointer !important;
1086
+ color: ${t.textColor} !important;
1087
+ border-radius: 20px !important; /* Pill shape */
1088
+ margin: 0 !important;
1089
+ background-color: ${t.hoverColor} !important;
1090
+ border: 1px solid ${t.borderColor} !important;
1091
+ transition: all 0.2s ease !important;
1092
+ min-width: 60px !important;
1093
+ text-align: center !important;
1094
+ user-select: none !important;
1095
+ -webkit-user-select: none !important;
1096
+ -webkit-tap-highlight-color: transparent !important;
1097
+ }
1098
+
1099
+ .datex-picker .ranges li:hover,
1100
+ .datex-picker.mobile-view .ranges li:hover {
1101
+ background-color: ${t.rangeColor} !important;
1102
+ color: ${t.textColor} !important;
1103
+ transform: translateY(-1px) !important;
1104
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
1105
+ }
1106
+
1107
+ .datex-picker .ranges li.active,
1108
+ .datex-picker.mobile-view .ranges li.active {
1109
+ background-color: ${t.selectedColor} !important;
1110
+ color: #fff !important;
1111
+ border-color: ${t.selectedColor} !important;
1112
+ font-weight: 600 !important;
1113
+ }
1114
+
1115
+ .datex-picker .ranges li.active:hover,
1116
+ .datex-picker.mobile-view .ranges li.active:hover {
1117
+ background-color: ${t.selectedColor} !important;
1118
+ color: #fff !important;
1119
+ opacity: 0.9 !important;
1120
+ transform: translateY(-1px) !important;
1121
+ }
1122
+
1123
+ .datex-picker .drp-buttons,
1124
+ .datex-picker.mobile-view .drp-buttons {
1125
+ width: 100% !important;
1126
+ padding: 8px 10px 12px 10px !important; /* Reduced bottom padding */
1127
+ box-sizing: border-box !important;
1128
+ text-align: center !important;
1129
+ overflow-x: hidden !important;
1130
+ border-top: 1px solid ${t.borderColor} !important;
1131
+ background-color: ${t.backgroundColor} !important;
1132
+ display: none !important; /* Hide on mobile - buttons are in header */
1133
+ }
1134
+
1135
+ .datex-picker .drp-buttons .btn,
1136
+ .datex-picker.mobile-view .drp-buttons .btn {
1137
+ min-width: 70px !important;
1138
+ padding: 8px 14px !important;
1139
+ margin: 0 4px !important;
1140
+ box-sizing: border-box !important;
1141
+ font-size: 14px !important;
1142
+ border-radius: 6px !important;
1143
+ }
1144
+
1145
+ .datex-picker.single,
1146
+ .datex-picker.single.mobile-view {
1147
+ width: 100% !important;
1148
+ }
1149
+
1150
+ .datex-picker.single .drp-calendar.right,
1151
+ .datex-picker.single.mobile-view .drp-calendar.right {
1152
+ display: none !important;
1153
+ }
1154
+
1155
+ .datex-picker.single .drp-calendar.left,
1156
+ .datex-picker.single.mobile-view .drp-calendar.left {
1157
+ width: 100% !important;
1158
+ }
1159
+ }
1160
+
1161
+ /* Tablet styles */
1162
+ @media (min-width: 564px) and (max-width: 768px) {
1163
+ .datex-picker {
1164
+ position: fixed !important;
1165
+ width: 90% !important;
1166
+ max-width: 500px !important;
1167
+ left: 50% !important;
1168
+ transform: translateX(-50%) !important;
1169
+ bottom: 20px !important;
1170
+ border-radius: ${t.borderRadius} !important;
1171
+ }
1172
+ }
1173
+
579
1174
  @media (min-width: 564px) {
580
1175
  .datex-picker {
581
1176
  width: auto !important;
582
1177
  }
583
1178
 
1179
+ /* Desktop: Show normal buttons, hide mobile header */
1180
+ .datex-picker .drp-buttons {
1181
+ display: block !important;
1182
+ }
1183
+
1184
+ .datex-picker .datex-mobile-header {
1185
+ display: none !important;
1186
+ }
1187
+
1188
+ /* Desktop: Restore original compact design */
1189
+ .datex-picker .calendar-table {
1190
+ width: auto !important;
1191
+ }
1192
+
1193
+ .datex-picker .calendar-table table {
1194
+ table-layout: auto !important;
1195
+ width: auto !important;
1196
+ }
1197
+
1198
+ .datex-picker .calendar-table tbody td,
1199
+ .datex-picker .calendar-table thead tr:last-child th {
1200
+ width: 28px !important;
1201
+ min-width: 28px !important;
1202
+ max-width: 28px !important;
1203
+ height: 28px !important;
1204
+ line-height: 28px !important;
1205
+ font-size: 12px !important;
1206
+ }
1207
+
584
1208
  .datex-picker .ranges ul {
585
1209
  width: 140px !important;
586
1210
  }
@@ -630,7 +1254,7 @@ class T {
630
1254
  `;
631
1255
  }
632
1256
  }
633
- class A {
1257
+ class T {
634
1258
  constructor() {
635
1259
  this.boundHandlers = /* @__PURE__ */ new Map();
636
1260
  }
@@ -665,28 +1289,58 @@ class A {
665
1289
  t.dispatchEvent(i);
666
1290
  }
667
1291
  }
668
- class F {
1292
+ class A {
669
1293
  constructor(t, e, a) {
670
- this.element = t, this.container = e, this.options = a;
1294
+ this.element = t, this.container = e, this.options = a, this.setupOrientationHandler();
1295
+ }
1296
+ setupOrientationHandler() {
1297
+ this.orientationChangeHandler = () => {
1298
+ setTimeout(() => {
1299
+ this.calculatePosition();
1300
+ }, 100);
1301
+ }, window.addEventListener("orientationchange", this.orientationChangeHandler), window.addEventListener("resize", this.orientationChangeHandler);
1302
+ }
1303
+ cleanup() {
1304
+ this.orientationChangeHandler && (window.removeEventListener(
1305
+ "orientationchange",
1306
+ this.orientationChangeHandler
1307
+ ), window.removeEventListener("resize", this.orientationChangeHandler));
671
1308
  }
672
1309
  calculatePosition() {
673
1310
  if (!this.container) return;
674
- (window.innerWidth <= 768 || "ontouchstart" in window) && this.container.classList.contains("touch-enabled") ? this.positionForMobile() : this.positionForDesktop();
1311
+ this.isMobileDevice() ? this.positionForMobile() : this.positionForDesktop();
1312
+ }
1313
+ isMobileDevice() {
1314
+ const t = navigator.userAgent.toLowerCase(), e = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|tablet/i.test(
1315
+ t
1316
+ ), a = window.innerWidth <= 768, i = "ontouchstart" in window || navigator.maxTouchPoints > 0, o = window.innerHeight > window.innerWidth;
1317
+ return e || a && i || a && o;
675
1318
  }
676
1319
  positionForMobile() {
677
- 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.borderRadius = "16px 16px 0 0", this.container.style.zIndex = "99999", this.container.classList.add("drop-up");
1320
+ 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
+ t >= 999999 && (this.container.style.zIndex = (t + 1).toString());
1323
+ }
1324
+ getHighestZIndex() {
1325
+ const t = document.querySelectorAll("*");
1326
+ let e = 0;
1327
+ for (let a = 0; a < t.length; a++) {
1328
+ const i = parseInt(window.getComputedStyle(t[a]).zIndex);
1329
+ !isNaN(i) && i > e && (e = i);
1330
+ }
1331
+ return e;
678
1332
  }
679
1333
  positionForDesktop() {
680
1334
  const t = this.element.getBoundingClientRect();
681
- this.resetContainerPosition();
682
- const e = this.container.offsetWidth, a = this.container.offsetHeight, { top: i, drops: s } = this.calculateVerticalPosition(
1335
+ this.container.classList.remove("mobile-view"), this.container.style.minWidth = "", this.container.style.boxSizing = "", this.container.style.margin = "", this.container.style.padding = "", this.container.style.transform = "", this.hideMobileHeader(), this.container.classList.add(`opens${this.options.opens}`), this.resetContainerPosition();
1336
+ const e = this.container.offsetWidth, a = this.container.offsetHeight, { top: i, drops: o } = this.calculateVerticalPosition(
683
1337
  t,
684
1338
  a
685
- ), r = this.calculateHorizontalPosition(
1339
+ ), s = this.calculateHorizontalPosition(
686
1340
  t,
687
1341
  e
688
1342
  );
689
- this.applyDropUpClass(s), this.applyFinalPosition(i, r);
1343
+ this.applyDropUpClass(o), this.applyFinalPosition(i, s);
690
1344
  }
691
1345
  resetContainerPosition() {
692
1346
  this.container.style.top = "0", this.container.style.left = "0", this.container.style.right = "auto", this.container.style.position = "fixed";
@@ -727,107 +1381,119 @@ class F {
727
1381
  applyFinalPosition(t, e) {
728
1382
  this.container.style.top = `${t}px`, this.container.style.left = `${e}px`, this.container.style.right = "auto", this.container.style.zIndex = "99999";
729
1383
  }
1384
+ showMobileHeader() {
1385
+ const t = this.container.querySelector(
1386
+ ".datex-mobile-header"
1387
+ );
1388
+ t && (t.style.display = "block");
1389
+ }
1390
+ hideMobileHeader() {
1391
+ const t = this.container.querySelector(
1392
+ ".datex-mobile-header"
1393
+ );
1394
+ t && (t.style.display = "none");
1395
+ }
730
1396
  }
731
- class H {
1397
+ class B {
732
1398
  constructor(t, e) {
733
1399
  this.options = t, this.locale = e;
734
1400
  }
735
1401
  buildCalendarMatrix(t) {
736
- const e = x(t), a = $(e, this.locale.firstDay), i = [];
737
- let s = [];
738
- const r = new Date(a);
1402
+ const e = w(t), a = $(e, this.locale.firstDay), i = [];
1403
+ let o = [];
1404
+ const s = new Date(a);
739
1405
  for (let n = 0; n < 42; n++) {
740
- n > 0 && n % 7 === 0 && (i.push(s), s = []);
741
- const o = new Date(r);
742
- o.setDate(r.getDate() + n), s.push(o);
1406
+ n > 0 && n % 7 === 0 && (i.push(o), o = []);
1407
+ const r = new Date(s);
1408
+ r.setDate(s.getDate() + n), o.push(r);
743
1409
  }
744
- return s.length > 0 && i.push(s), i;
1410
+ return o.length > 0 && i.push(o), i;
745
1411
  }
746
- renderCalendarHTML(t, e, a, i, s, r) {
747
- const n = t.month, o = n.getFullYear(), c = n.getMonth();
748
- let d = '<table class="table-condensed">';
749
- return d += this.renderHeader(e, c, o, s, r), d += this.renderDayHeaders(), d += this.renderCalendarBody(
1412
+ renderCalendarHTML(t, e, a, i, o, s) {
1413
+ const n = t.month, r = n.getFullYear(), d = n.getMonth();
1414
+ let c = '<table class="table-condensed">';
1415
+ return c += this.renderHeader(e, d, r, o, s), c += this.renderDayHeaders(), c += this.renderCalendarBody(
750
1416
  t.calendar,
751
1417
  n,
752
1418
  a,
753
1419
  i
754
- ), d += "</table>", this.options.timePicker && (d += this.renderTimeControls(
1420
+ ), c += "</table>", this.options.timePicker && (c += this.renderTimeControls(
755
1421
  e === "left" ? a : i || a
756
- )), d;
1422
+ )), c;
757
1423
  }
758
1424
  renderTimeControls(t) {
759
1425
  let e = '<div class="calendar-time">';
760
1426
  e += '<select class="hourselect">';
761
- const a = this.options.timePicker24Hour, i = a ? 23 : 12, s = a ? 0 : 1;
762
- for (let n = s; n <= i; n++) {
763
- const o = a ? n : n === 0 ? 12 : n, c = String(o).padStart(2, "0"), d = a ? t.getHours() : t.getHours() % 12 || 12;
764
- let m = !1;
1427
+ const a = this.options.timePicker24Hour, i = a ? 23 : 12, o = a ? 0 : 1;
1428
+ for (let n = o; n <= i; n++) {
1429
+ const r = a ? n : n === 0 ? 12 : n, d = String(r).padStart(2, "0"), c = a ? t.getHours() : t.getHours() % 12 || 12;
1430
+ let b = !1;
765
1431
  if (this.options.minDate || this.options.maxDate) {
766
- const D = new Date(t), M = a ? o : t.getHours() >= 12 ? o === 12 ? 12 : o + 12 : o === 12 ? 0 : o;
767
- if (D.setHours(M), this.options.minDate) {
768
- const v = new Date(D);
769
- v.setMinutes(59), v < this.options.minDate && (m = !0);
1432
+ const f = new Date(t), M = a ? r : t.getHours() >= 12 ? r === 12 ? 12 : r + 12 : r === 12 ? 0 : r;
1433
+ if (f.setHours(M), this.options.minDate) {
1434
+ const v = new Date(f);
1435
+ v.setMinutes(59), v < this.options.minDate && (b = !0);
770
1436
  }
771
1437
  if (this.options.maxDate) {
772
- const v = new Date(D);
773
- v.setMinutes(0), v > this.options.maxDate && (m = !0);
1438
+ const v = new Date(f);
1439
+ v.setMinutes(0), v > this.options.maxDate && (b = !0);
774
1440
  }
775
1441
  }
776
- e += `<option value="${o}"${o === d && !m ? ' selected="selected"' : ""}${m ? ' disabled="disabled" class="disabled"' : ""}>${c}</option>`;
1442
+ e += `<option value="${r}"${r === c && !b ? ' selected="selected"' : ""}${b ? ' disabled="disabled" class="disabled"' : ""}>${d}</option>`;
777
1443
  }
778
1444
  e += "</select>", e += " : ", e += '<select class="minuteselect">';
779
- const r = this.options.timePickerIncrement || 1;
780
- for (let n = 0; n < 60; n += r) {
781
- const o = String(n).padStart(2, "0");
782
- let c = !1;
1445
+ const s = this.options.timePickerIncrement || 1;
1446
+ for (let n = 0; n < 60; n += s) {
1447
+ const r = String(n).padStart(2, "0");
1448
+ let d = !1;
783
1449
  if (this.options.minDate || this.options.maxDate) {
784
- const p = new Date(t);
785
- if (p.setMinutes(n), this.options.minDate) {
786
- const h = new Date(p);
787
- h.setSeconds(59), h < this.options.minDate && (c = !0);
1450
+ const h = new Date(t);
1451
+ if (h.setMinutes(n), this.options.minDate) {
1452
+ const p = new Date(h);
1453
+ p.setSeconds(59), p < this.options.minDate && (d = !0);
788
1454
  }
789
1455
  if (this.options.maxDate) {
790
- const h = new Date(p);
791
- h.setSeconds(0), h > this.options.maxDate && (c = !0);
1456
+ const p = new Date(h);
1457
+ p.setSeconds(0), p > this.options.maxDate && (d = !0);
792
1458
  }
793
1459
  }
794
- const d = n === t.getMinutes() && !c ? ' selected="selected"' : "";
795
- e += `<option value="${n}"${d}${c ? ' disabled="disabled" class="disabled"' : ""}>${o}</option>`;
1460
+ const c = n === t.getMinutes() && !d ? ' selected="selected"' : "";
1461
+ e += `<option value="${n}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${r}</option>`;
796
1462
  }
797
1463
  if (e += "</select>", this.options.timePickerSeconds) {
798
1464
  e += " : ", e += '<select class="secondselect">';
799
1465
  for (let n = 0; n < 60; n++) {
800
- const o = String(n).padStart(2, "0");
801
- let c = !1;
1466
+ const r = String(n).padStart(2, "0");
1467
+ let d = !1;
802
1468
  if (this.options.minDate || this.options.maxDate) {
803
- const p = new Date(t);
804
- p.setSeconds(n), this.options.minDate && p < this.options.minDate && (c = !0), this.options.maxDate && p > this.options.maxDate && (c = !0);
1469
+ const h = new Date(t);
1470
+ h.setSeconds(n), this.options.minDate && h < this.options.minDate && (d = !0), this.options.maxDate && h > this.options.maxDate && (d = !0);
805
1471
  }
806
- const d = n === t.getSeconds() && !c ? ' selected="selected"' : "";
807
- e += `<option value="${n}"${d}${c ? ' disabled="disabled" class="disabled"' : ""}>${o}</option>`;
1472
+ const c = n === t.getSeconds() && !d ? ' selected="selected"' : "";
1473
+ e += `<option value="${n}"${c}${d ? ' disabled="disabled" class="disabled"' : ""}>${r}</option>`;
808
1474
  }
809
1475
  e += "</select>";
810
1476
  }
811
1477
  if (!a) {
812
1478
  e += " ", e += '<select class="ampmselect">';
813
1479
  const n = t.getHours() < 12;
814
- let o = !1, c = !1;
1480
+ let r = !1, d = !1;
815
1481
  if (this.options.minDate || this.options.maxDate) {
816
- const p = new Date(t);
817
- p.setHours(6, 0, 0);
818
1482
  const h = new Date(t);
819
- h.setHours(18, 0, 0), this.options.minDate && p < this.options.minDate && (o = !0), this.options.maxDate && h > this.options.maxDate && (c = !0);
1483
+ h.setHours(6, 0, 0);
1484
+ const p = new Date(t);
1485
+ p.setHours(18, 0, 0), this.options.minDate && h < this.options.minDate && (r = !0), this.options.maxDate && p > this.options.maxDate && (d = !0);
820
1486
  }
821
- const d = o ? ' disabled="disabled" class="disabled"' : "", m = c ? ' disabled="disabled" class="disabled"' : "";
822
- e += `<option value="AM"${n ? ' selected="selected"' : ""}${d}>AM</option>`, e += `<option value="PM"${n ? "" : ' selected="selected"'}${m}>PM</option>`, e += "</select>";
1487
+ const c = r ? ' disabled="disabled" class="disabled"' : "", b = d ? ' disabled="disabled" class="disabled"' : "";
1488
+ e += `<option value="AM"${n ? ' selected="selected"' : ""}${c}>AM</option>`, e += `<option value="PM"${n ? "" : ' selected="selected"'}${b}>PM</option>`, e += "</select>";
823
1489
  }
824
1490
  return e += "</div>", e;
825
1491
  }
826
- renderHeader(t, e, a, i, s) {
827
- let r = "<thead><tr>";
828
- i && (!this.options.linkedCalendars || t === "left") ? r += '<th class="prev available"><span></span></th>' : r += "<th></th>";
1492
+ renderHeader(t, e, a, i, o) {
1493
+ let s = "<thead><tr>";
1494
+ i && (!this.options.linkedCalendars || t === "left") ? s += '<th class="prev available"><span></span></th>' : s += "<th></th>";
829
1495
  let n = this.locale.monthNames[e] + " " + a;
830
- return this.options.showDropdowns && (n = this.renderDropdowns(e, a)), r += `<th colspan="5" class="month">${n}</th>`, s && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? r += '<th class="next available"><span></span></th>' : r += "<th></th>", r += "</tr>", r;
1496
+ return this.options.showDropdowns && (n = this.renderDropdowns(e, a)), s += `<th colspan="5" class="month">${n}</th>`, o && (!this.options.linkedCalendars || t === "right" || this.options.singleDatePicker) ? s += '<th class="next available"><span></span></th>' : s += "<th></th>", s += "</tr>", s;
831
1497
  }
832
1498
  renderDayHeaders() {
833
1499
  let t = "<tr>";
@@ -836,65 +1502,65 @@ class H {
836
1502
  return t += "</tr></thead>", t;
837
1503
  }
838
1504
  renderCalendarBody(t, e, a, i) {
839
- let s = "<tbody>";
840
- for (const r of t) {
841
- s += "<tr>";
842
- for (const n of r) {
843
- const o = this.getDayClasses(
1505
+ let o = "<tbody>";
1506
+ for (const s of t) {
1507
+ o += "<tr>";
1508
+ for (const n of s) {
1509
+ const r = this.getDayClasses(
844
1510
  n,
845
1511
  e,
846
1512
  a,
847
1513
  i
848
- ), c = o.includes("disabled"), d = o.join(" ") + (c ? "" : " available");
849
- s += `<td class="${d}" data-date="${C(
1514
+ ), d = r.includes("disabled"), c = r.join(" ") + (d ? "" : " available");
1515
+ o += `<td class="${c}" data-date="${k(
850
1516
  n,
851
1517
  "YYYY-MM-DD"
852
1518
  )}">${n.getDate()}</td>`;
853
1519
  }
854
- s += "</tr>";
1520
+ o += "</tr>";
855
1521
  }
856
- return s += "</tbody>", s;
1522
+ return o += "</tbody>", o;
857
1523
  }
858
1524
  renderDropdowns(t, e) {
859
- const { minYear: a, maxYear: i } = this.calculateYearRange(e), s = this.renderMonthDropdown(
1525
+ const { minYear: a, maxYear: i } = this.calculateYearRange(e), o = this.renderMonthDropdown(
860
1526
  t,
861
1527
  e,
862
1528
  a,
863
1529
  i
864
- ), r = this.renderYearDropdown(e, a, i);
865
- return s + " " + r;
1530
+ ), s = this.renderYearDropdown(e, a, i);
1531
+ return o + " " + s;
866
1532
  }
867
1533
  calculateYearRange(t) {
868
1534
  let e = this.options.minYear, a = this.options.maxYear;
869
1535
  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 };
870
1536
  }
871
1537
  renderMonthDropdown(t, e, a, i) {
872
- const s = e === a, r = e === i;
1538
+ const o = e === a, s = e === i;
873
1539
  let n = '<select class="monthselect">';
874
- for (let o = 0; o < 12; o++) {
875
- let c = !1;
876
- s && this.options.minDate && o < this.options.minDate.getMonth() && (c = !0), r && this.options.maxDate && o > this.options.maxDate.getMonth() && (c = !0), n += `<option value="${o}"${o === t ? ' selected="selected"' : ""}${c ? ' disabled="disabled"' : ""}>${this.locale.monthNames[o]}</option>`;
1540
+ for (let r = 0; r < 12; r++) {
1541
+ let d = !1;
1542
+ o && this.options.minDate && r < this.options.minDate.getMonth() && (d = !0), s && this.options.maxDate && r > this.options.maxDate.getMonth() && (d = !0), n += `<option value="${r}"${r === t ? ' selected="selected"' : ""}${d ? ' disabled="disabled"' : ""}>${this.locale.monthNames[r]}</option>`;
877
1543
  }
878
1544
  return n += "</select>", n;
879
1545
  }
880
1546
  renderYearDropdown(t, e, a) {
881
1547
  let i = '<select class="yearselect">';
882
- for (let s = e; s <= a; s++)
883
- i += `<option value="${s}"${s === t ? ' selected="selected"' : ""}>${s}</option>`;
1548
+ for (let o = e; o <= a; o++)
1549
+ i += `<option value="${o}"${o === t ? ' selected="selected"' : ""}>${o}</option>`;
884
1550
  return i += "</select>", i;
885
1551
  }
886
1552
  getDayClasses(t, e, a, i) {
887
- const s = [];
888
- return u(t, /* @__PURE__ */ new Date(), "day") && s.push("today"), (t.getDay() === 0 || t.getDay() === 6) && s.push("weekend"), t.getMonth() !== e.getMonth() && s.push("off", "ends"), this.options.minDate && g(t, w(this.options.minDate)) && s.push("off", "disabled"), this.options.maxDate && k(t, S(this.options.maxDate)) && s.push("off", "disabled"), u(t, a, "day") && s.push("active", "start-date"), i && u(t, i, "day") && s.push("active", "end-date"), i && k(t, a) && g(t, i) && s.push("in-range"), s;
1553
+ const o = [];
1554
+ return m(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 && u(t, C(this.options.minDate)) && o.push("off", "disabled"), this.options.maxDate && y(t, S(this.options.maxDate)) && o.push("off", "disabled"), m(t, a, "day") && o.push("active", "start-date"), i && m(t, i, "day") && o.push("active", "end-date"), i && y(t, a) && u(t, i) && o.push("in-range"), o;
889
1555
  }
890
1556
  canNavigatePrevious(t) {
891
- return !this.options.minDate || k(x(t), this.options.minDate);
1557
+ return !this.options.minDate || y(w(t), this.options.minDate);
892
1558
  }
893
1559
  canNavigateNext(t) {
894
- return !this.options.maxDate || g(L(t), this.options.maxDate);
1560
+ return !this.options.maxDate || u(L(t), this.options.maxDate);
895
1561
  }
896
1562
  }
897
- class I {
1563
+ class F {
898
1564
  constructor(t = {}) {
899
1565
  this.validation = t;
900
1566
  }
@@ -903,7 +1569,7 @@ class I {
903
1569
  }
904
1570
  validateDate(t) {
905
1571
  var e, a, i;
906
- return (e = this.validation.disabledDates) != null && e.some((s) => this.isSameDate(s, t)) ? {
1572
+ return (e = this.validation.disabledDates) != null && e.some((o) => this.isSameDate(o, t)) ? {
907
1573
  isValid: !1,
908
1574
  error: "Esta fecha está deshabilitada",
909
1575
  errorCode: "DISABLED_DATE"
@@ -923,7 +1589,7 @@ class I {
923
1589
  isValid: !1,
924
1590
  error: "Solo se permiten días laborables",
925
1591
  errorCode: "BUSINESS_DAYS_ONLY"
926
- } : (i = this.validation.holidays) != null && i.some((s) => this.isSameDate(s, t)) ? {
1592
+ } : (i = this.validation.holidays) != null && i.some((o) => this.isSameDate(o, t)) ? {
927
1593
  isValid: !1,
928
1594
  error: "Los días festivos están deshabilitados",
929
1595
  errorCode: "HOLIDAY_DISABLED"
@@ -987,7 +1653,7 @@ class I {
987
1653
  return ((e = this.validation.holidays) == null ? void 0 : e.some((a) => this.isSameDate(a, t))) || !1;
988
1654
  }
989
1655
  }
990
- class P {
1656
+ class I {
991
1657
  constructor(t, e = {}) {
992
1658
  this.currentFocusedDate = null, this.isActive = !1, this.container = t, this.options = {
993
1659
  enabled: !0,
@@ -1017,9 +1683,9 @@ class P {
1017
1683
  this.container.setAttribute("tabindex", "0"), this.container.addEventListener("keydown", this.handleKeyDown.bind(this)), this.container.addEventListener("focus", this.handleFocus.bind(this)), this.container.addEventListener("blur", this.handleBlur.bind(this));
1018
1684
  }
1019
1685
  handleKeyDown(t) {
1020
- var r, n, o, c;
1686
+ var s, n, r, d;
1021
1687
  if (!this.isActive || !this.currentFocusedDate) return;
1022
- const { key: e, ctrlKey: a, shiftKey: i, altKey: s } = t;
1688
+ const { key: e, ctrlKey: a, shiftKey: i, altKey: o } = t;
1023
1689
  switch (e) {
1024
1690
  case "ArrowLeft":
1025
1691
  t.preventDefault(), this.navigateDate(-1);
@@ -1050,30 +1716,30 @@ class P {
1050
1716
  case "Enter":
1051
1717
  case " ":
1052
1718
  if (t.preventDefault(), this.currentFocusedDate && this.onDateSelect) {
1053
- const d = new Date(this.currentFocusedDate.getTime());
1719
+ const c = new Date(this.currentFocusedDate.getTime());
1054
1720
  console.log("=== KEYBOARD DEBUG ==="), console.log("Original focused date:", this.currentFocusedDate), console.log(
1055
1721
  "Original focused day:",
1056
1722
  this.currentFocusedDate.getDate()
1057
- ), console.log("Copy to select:", d), console.log("Copy day:", d.getDate()), console.log(
1723
+ ), console.log("Copy to select:", c), console.log("Copy day:", c.getDate()), console.log(
1058
1724
  "Are they equal?",
1059
- this.currentFocusedDate.getTime() === d.getTime()
1060
- ), console.log("======================"), this.onDateSelect(d);
1725
+ this.currentFocusedDate.getTime() === c.getTime()
1726
+ ), console.log("======================"), this.onDateSelect(c);
1061
1727
  }
1062
1728
  break;
1063
1729
  case "Escape":
1064
1730
  t.preventDefault(), this.onClose && this.onClose();
1065
1731
  break;
1066
1732
  }
1067
- if (!a && !s)
1733
+ if (!a && !o)
1068
1734
  switch (e.toLowerCase()) {
1069
- case ((n = (r = this.options.shortcuts) == null ? void 0 : r.today) == null ? void 0 : n.toLowerCase()):
1735
+ case ((n = (s = this.options.shortcuts) == null ? void 0 : s.today) == null ? void 0 : n.toLowerCase()):
1070
1736
  t.preventDefault(), this.onToday && this.onToday();
1071
1737
  break;
1072
- case ((c = (o = this.options.shortcuts) == null ? void 0 : o.clear) == null ? void 0 : c.toLowerCase()):
1738
+ case ((d = (r = this.options.shortcuts) == null ? void 0 : r.clear) == null ? void 0 : d.toLowerCase()):
1073
1739
  t.preventDefault(), this.onClear && this.onClear();
1074
1740
  break;
1075
1741
  }
1076
- if (a && !s && !i)
1742
+ if (a && !o && !i)
1077
1743
  switch (e.toLowerCase()) {
1078
1744
  case "enter":
1079
1745
  t.preventDefault(), this.onApply && this.onApply();
@@ -1168,13 +1834,13 @@ class P {
1168
1834
  `, document.head.appendChild(t);
1169
1835
  }
1170
1836
  formatDateForSelector(t) {
1171
- const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0"), s = `${e}-${a}-${i}`;
1837
+ const e = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0"), o = `${e}-${a}-${i}`;
1172
1838
  return console.log(
1173
1839
  "Keyboard: Formatting date for selector:",
1174
1840
  t.toDateString(),
1175
1841
  "-> formatted:",
1176
- s
1177
- ), s;
1842
+ o
1843
+ ), o;
1178
1844
  }
1179
1845
  // Public methods
1180
1846
  getCurrentFocusedDate() {
@@ -1192,7 +1858,7 @@ class P {
1192
1858
  t && t.remove();
1193
1859
  }
1194
1860
  }
1195
- const Y = {
1861
+ const P = {
1196
1862
  format: "DD/MM/YYYY",
1197
1863
  separator: " - ",
1198
1864
  applyLabel: "Aplicar",
@@ -1214,7 +1880,7 @@ const Y = {
1214
1880
  "Diciembre"
1215
1881
  ],
1216
1882
  firstDay: 1
1217
- }, V = {
1883
+ }, R = {
1218
1884
  format: "DD/MM/YYYY HH:mm",
1219
1885
  separator: " - ",
1220
1886
  applyLabel: "Aplicar",
@@ -1237,10 +1903,10 @@ const Y = {
1237
1903
  ],
1238
1904
  firstDay: 1
1239
1905
  };
1240
- class O {
1906
+ class N {
1241
1907
  constructor(t, e = {}, a) {
1242
1908
  this.element = this.resolveElement(t), this.options = this.mergeWithDefaults(e), this.locale = this.options.locale, this.callback = a || (() => {
1243
- }), this.eventService = new A(), this.initializeState(), this.initializeServices(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
1909
+ }), this.eventService = new T(), this.initializeState(), this.initializeServices(), this.addDropdownArrow(), this.createContainer(), this.setupEventListeners(), this.updateElement(), this.calculateChosenLabel();
1244
1910
  }
1245
1911
  resolveElement(t) {
1246
1912
  if (typeof t == "string") {
@@ -1274,7 +1940,7 @@ class O {
1274
1940
  ranges: t.ranges || {},
1275
1941
  opens: t.opens || "center",
1276
1942
  drops: t.drops || "auto",
1277
- locale: t.locale || Y,
1943
+ locale: t.locale || P,
1278
1944
  buttonClasses: t.buttonClasses || "btn btn-sm",
1279
1945
  applyButtonClasses: t.applyButtonClasses || "btn-success",
1280
1946
  cancelButtonClasses: t.cancelButtonClasses || "btn-danger",
@@ -1287,19 +1953,22 @@ class O {
1287
1953
  initializeState() {
1288
1954
  const t = /* @__PURE__ */ new Date();
1289
1955
  this.state = {
1290
- startDate: this.options.timePicker ? this.options.startDate : w(this.options.startDate),
1956
+ startDate: this.options.timePicker ? this.options.startDate : C(this.options.startDate),
1291
1957
  endDate: this.options.timePicker ? this.options.endDate : S(this.options.endDate),
1292
- oldStartDate: this.options.timePicker ? this.options.startDate : w(this.options.startDate),
1958
+ oldStartDate: this.options.timePicker ? this.options.startDate : C(this.options.startDate),
1293
1959
  oldEndDate: this.options.timePicker ? this.options.endDate : S(this.options.endDate),
1294
1960
  isShowing: !1,
1295
1961
  leftCalendar: { month: t, calendar: [] },
1296
- rightCalendar: { month: f(t, 1), calendar: [] },
1962
+ rightCalendar: { month: g(t, 1), calendar: [] },
1297
1963
  chosenLabel: null,
1298
1964
  hoverDate: null
1299
1965
  };
1300
1966
  }
1301
1967
  initializeServices() {
1302
- this.calendarService = new H(this.options, this.locale);
1968
+ this.calendarService = new B(this.options, this.locale);
1969
+ }
1970
+ addDropdownArrow() {
1971
+ this.element.tagName === "INPUT" && this.element.classList.add("datex-input");
1303
1972
  }
1304
1973
  createContainer() {
1305
1974
  const t = this.buildContainerTemplate(), e = document.createElement("div");
@@ -1308,6 +1977,20 @@ class O {
1308
1977
  buildContainerTemplate() {
1309
1978
  return `
1310
1979
  <div class="datex-picker">
1980
+ <div class="datex-mobile-header" style="display: none;">
1981
+ <div class="mobile-header-content">
1982
+ <div class="selected-range"></div>
1983
+ <div class="range-label"></div>
1984
+ </div>
1985
+ <div class="mobile-header-buttons">
1986
+ <button class="mobile-cancelBtn ${this.options.buttonClasses} ${this.options.cancelButtonClasses}" type="button">
1987
+ ${this.locale.cancelLabel}
1988
+ </button>
1989
+ <button class="mobile-applyBtn ${this.options.buttonClasses} ${this.options.applyButtonClasses}" type="button">
1990
+ ${this.locale.applyLabel}
1991
+ </button>
1992
+ </div>
1993
+ </div>
1311
1994
  <div class="ranges"></div>
1312
1995
  <div class="drp-calendar left">
1313
1996
  <div class="calendar-table"></div>
@@ -1330,11 +2013,11 @@ class O {
1330
2013
  `;
1331
2014
  }
1332
2015
  initializeContainerServices() {
1333
- this.themeService = new T(this.container, this.options.theme), this.positionService = new F(
2016
+ this.themeService = new H(this.container, this.options.theme), this.positionService = new A(
1334
2017
  this.element,
1335
2018
  this.container,
1336
2019
  this.options
1337
- ), this.validationService = new I(this.options.validation), this.keyboardService = new P(this.container, {
2020
+ ), this.validationService = new F(this.options.validation), this.keyboardService = new I(this.container, {
1338
2021
  enabled: !0
1339
2022
  }), this.keyboardService.setHandlers({
1340
2023
  onDateSelect: (t) => {
@@ -1362,18 +2045,18 @@ class O {
1362
2045
  }
1363
2046
  // Public API methods
1364
2047
  show() {
1365
- this.state.isShowing || (this.storeOldValues(), this.themeService.applyTheme(), this.setupDocumentListeners(), this.updateView(), this.displayContainer(), this.positionContainer(), setTimeout(() => {
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"), setTimeout(() => {
1366
2049
  this.state.isShowing && this.keyboardService.activate(this.state.startDate);
1367
2050
  }, 200), this.dispatchShowEvent());
1368
2051
  }
1369
2052
  hide() {
1370
- this.state.isShowing && (this.revertIfIncomplete(), this.triggerCallbackIfChanged(), this.updateElement(), this.removeDocumentListeners(), this.keyboardService.deactivate(), this.hideContainer(), this.dispatchHideEvent());
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());
1371
2054
  }
1372
2055
  toggle() {
1373
2056
  this.state.isShowing ? this.hide() : this.show();
1374
2057
  }
1375
2058
  setStartDate(t) {
1376
- this.state.startDate = this.options.timePicker ? new Date(t) : w(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.startDate), this.updateView();
2059
+ this.state.startDate = this.options.timePicker ? new Date(t) : C(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.startDate), this.updateView();
1377
2060
  }
1378
2061
  setEndDate(t) {
1379
2062
  this.state.endDate = this.options.timePicker ? new Date(t) : S(t), this.options.timePickerIncrement && this.options.timePicker && this.roundToIncrement(this.state.endDate), this.updateView();
@@ -1442,17 +2125,31 @@ class O {
1442
2125
  this.container.style.display = "none", this.state.isShowing = !1;
1443
2126
  }
1444
2127
  positionContainer() {
1445
- setTimeout(() => this.positionService.calculatePosition(), 0);
2128
+ setTimeout(() => {
2129
+ this.positionService.calculatePosition(), this.updateMobileHeaderIfVisible();
2130
+ }, 0);
2131
+ }
2132
+ updateMobileHeaderIfVisible() {
2133
+ const t = this.container.querySelector(
2134
+ ".datex-mobile-header"
2135
+ );
2136
+ if (t && window.getComputedStyle(t).display !== "none") {
2137
+ const e = this.container.querySelector(".drp-selected");
2138
+ if (e) {
2139
+ const a = e.textContent || "";
2140
+ this.updateMobileHeader(a);
2141
+ }
2142
+ }
1446
2143
  }
1447
2144
  revertIfIncomplete() {
1448
2145
  this.state.endDate || (this.state.startDate = new Date(this.state.oldStartDate), this.state.endDate = this.state.oldEndDate ? new Date(this.state.oldEndDate) : null);
1449
2146
  }
1450
2147
  triggerCallbackIfChanged() {
1451
- const t = !u(
2148
+ const t = !m(
1452
2149
  this.state.startDate,
1453
2150
  this.state.oldStartDate,
1454
2151
  "day"
1455
- ), e = this.state.endDate && this.state.oldEndDate && !u(this.state.endDate, this.state.oldEndDate, "day");
2152
+ ), e = this.state.endDate && this.state.oldEndDate && !m(this.state.endDate, this.state.oldEndDate, "day");
1456
2153
  (t || e) && this.callback(
1457
2154
  new Date(this.state.startDate),
1458
2155
  this.state.endDate ? new Date(this.state.endDate) : new Date(this.state.startDate),
@@ -1472,7 +2169,7 @@ class O {
1472
2169
  }
1473
2170
  cleanup() {
1474
2171
  var t;
1475
- this.removeDocumentListeners(), this.themeService.cleanup(), this.eventService.cleanup(), this.keyboardService.cleanup(), (t = this.container) != null && t.parentNode && this.container.parentNode.removeChild(this.container);
2172
+ 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");
1476
2173
  }
1477
2174
  handleKeyboardDateSelect(t) {
1478
2175
  console.log("DateX: Received date from keyboard:", t.toDateString()), console.log("DateX: Received date day:", t.getDate());
@@ -1481,7 +2178,7 @@ class O {
1481
2178
  this.showValidationError(e.error, e.errorCode);
1482
2179
  return;
1483
2180
  }
1484
- this.state.hoverDate = null, this.state.endDate || g(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();
2181
+ this.state.hoverDate = null, this.state.endDate || u(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();
1485
2182
  }
1486
2183
  clearSelection() {
1487
2184
  const t = /* @__PURE__ */ new Date();
@@ -1541,7 +2238,7 @@ class O {
1541
2238
  }
1542
2239
  handleContainerClick(t) {
1543
2240
  const e = t.target;
1544
- e.tagName === "SELECT" || e.closest("select") || (e.matches(".ranges li") ? this.handleRangeClick(t) : e.matches(".applyBtn") ? this.handleApplyClick() : e.matches(".cancelBtn") ? this.handleCancelClick() : e.matches(".prev") ? this.handlePrevClick(t) : e.matches(".next") ? this.handleNextClick(t) : e.matches("td.available") && this.handleDateClick(t));
2241
+ e.tagName === "SELECT" || e.closest("select") || (e.matches(".ranges li") ? this.handleRangeClick(t) : e.matches(".applyBtn, .mobile-applyBtn") ? this.handleApplyClick() : e.matches(".cancelBtn, .mobile-cancelBtn") ? this.handleCancelClick() : e.matches(".prev") ? this.handlePrevClick(t) : e.matches(".next") ? this.handleNextClick(t) : e.matches("td.available") && this.handleDateClick(t));
1545
2242
  }
1546
2243
  handleContainerMouseOver(t) {
1547
2244
  t.target.matches("td.available") && this.handleDateHover(t);
@@ -1570,16 +2267,16 @@ class O {
1570
2267
  }, 50);
1571
2268
  }
1572
2269
  handleElementChange() {
1573
- var s;
2270
+ var o;
1574
2271
  if (!this.isInputOrButton()) return;
1575
2272
  const t = this.element;
1576
- if (!((s = t.value) != null && s.length)) return;
2273
+ if (!((o = t.value) != null && o.length)) return;
1577
2274
  const e = t.value.split(this.locale.separator), { startDate: a, endDate: i } = this.parseDateParts(e);
1578
- a && y(a) && i && y(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
2275
+ a && D(a) && i && D(i) && (this.setStartDate(a), this.setEndDate(i), this.updateView());
1579
2276
  }
1580
2277
  parseDateParts(t) {
1581
2278
  let e = null, a = null;
1582
- return t.length === 2 ? (e = b(t[0].trim(), this.locale.format), a = b(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = b(t[0].trim(), this.locale.format), a = e), { startDate: e, endDate: a };
2279
+ return t.length === 2 ? (e = x(t[0].trim(), this.locale.format), a = x(t[1].trim(), this.locale.format)) : (this.options.singleDatePicker || t.length === 1) && (e = x(t[0].trim(), this.locale.format), a = e), { startDate: e, endDate: a };
1583
2280
  }
1584
2281
  handleKeydown(t) {
1585
2282
  t.key === "Tab" || t.key === "Enter" ? this.hide() : t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.hide());
@@ -1593,8 +2290,8 @@ class O {
1593
2290
  else {
1594
2291
  const i = this.options.ranges[a];
1595
2292
  if (i) {
1596
- const [s, r] = i;
1597
- this.state.startDate = new Date(s), this.state.endDate = new Date(r), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
2293
+ const [o, s] = i;
2294
+ this.state.startDate = new Date(o), this.state.endDate = new Date(s), this.showCalendars(), this.updateView(), this.options.autoApply && this.handleApplyClick();
1598
2295
  }
1599
2296
  }
1600
2297
  }
@@ -1606,56 +2303,56 @@ class O {
1606
2303
  }
1607
2304
  handlePrevClick(t) {
1608
2305
  const a = t.target.closest(".drp-calendar");
1609
- a && (a.classList.contains("left") ? (this.state.leftCalendar.month = f(
2306
+ a && (a.classList.contains("left") ? (this.state.leftCalendar.month = g(
1610
2307
  this.state.leftCalendar.month,
1611
2308
  -1
1612
- ), this.options.linkedCalendars && (this.state.rightCalendar.month = f(
2309
+ ), this.options.linkedCalendars && (this.state.rightCalendar.month = g(
1613
2310
  this.state.rightCalendar.month,
1614
2311
  -1
1615
- ))) : this.state.rightCalendar.month = f(
2312
+ ))) : this.state.rightCalendar.month = g(
1616
2313
  this.state.rightCalendar.month,
1617
2314
  -1
1618
2315
  ), this.updateCalendars());
1619
2316
  }
1620
2317
  handleNextClick(t) {
1621
2318
  const a = t.target.closest(".drp-calendar");
1622
- a && (a.classList.contains("left") ? this.state.leftCalendar.month = f(
2319
+ a && (a.classList.contains("left") ? this.state.leftCalendar.month = g(
1623
2320
  this.state.leftCalendar.month,
1624
2321
  1
1625
- ) : (this.state.rightCalendar.month = f(
2322
+ ) : (this.state.rightCalendar.month = g(
1626
2323
  this.state.rightCalendar.month,
1627
2324
  1
1628
- ), this.options.linkedCalendars && (this.state.leftCalendar.month = f(
2325
+ ), this.options.linkedCalendars && (this.state.leftCalendar.month = g(
1629
2326
  this.state.leftCalendar.month,
1630
2327
  1
1631
2328
  ))), this.updateCalendars());
1632
2329
  }
1633
2330
  handleDateClick(t) {
1634
- var r, n;
2331
+ var s, n;
1635
2332
  const e = t.target;
1636
2333
  if (!e.classList.contains("available")) return;
1637
2334
  const a = e.dataset.date;
1638
2335
  if (!a) return;
1639
- const i = b(a, "YYYY-MM-DD");
1640
- if (!y(i)) return;
1641
- const s = this.validationService.validateDate(i);
1642
- if (!s.isValid) {
1643
- this.showValidationError(s.error, s.errorCode);
2336
+ const i = x(a, "YYYY-MM-DD");
2337
+ if (!D(i)) return;
2338
+ const o = this.validationService.validateDate(i);
2339
+ if (!o.isValid) {
2340
+ this.showValidationError(o.error, o.errorCode);
1644
2341
  return;
1645
2342
  }
1646
- if (!((r = this.options.events) != null && r.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
1647
- if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || g(i, this.state.startDate))
2343
+ if (!((s = this.options.events) != null && s.beforeDateSelect && !this.options.events.beforeDateSelect(i))) {
2344
+ if (this.applyTimeToDate(i, e), this.state.hoverDate = null, this.state.endDate || u(i, this.state.startDate))
1648
2345
  this.state.endDate = null, this.setStartDate(i);
1649
2346
  else {
1650
2347
  if (this.setEndDate(i), this.state.startDate && this.state.endDate) {
1651
- const o = this.validationService.validateDateRange(
2348
+ const r = this.validationService.validateDateRange(
1652
2349
  this.state.startDate,
1653
2350
  this.state.endDate
1654
2351
  );
1655
- if (!o.isValid) {
2352
+ if (!r.isValid) {
1656
2353
  this.showValidationError(
1657
- o.error,
1658
- o.errorCode
2354
+ r.error,
2355
+ r.errorCode
1659
2356
  ), this.state.endDate = null, this.updateDateClasses();
1660
2357
  return;
1661
2358
  }
@@ -1670,50 +2367,50 @@ class O {
1670
2367
  if (!e.classList.contains("available")) return;
1671
2368
  const a = e.dataset.date;
1672
2369
  if (!a) return;
1673
- const i = b(a, "YYYY-MM-DD");
1674
- y(i) && !this.state.endDate && !g(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
2370
+ const i = x(a, "YYYY-MM-DD");
2371
+ D(i) && !this.state.endDate && !u(i, this.state.startDate) && (this.state.hoverDate = i, this.updateDateClasses());
1675
2372
  }
1676
2373
  handleMonthYearChange(t) {
1677
2374
  const a = t.target.closest(".drp-calendar");
1678
2375
  if (!a) return;
1679
- const i = a.classList.contains("left"), s = a.querySelector(
2376
+ const i = a.classList.contains("left"), o = a.querySelector(
1680
2377
  ".monthselect"
1681
- ), r = a.querySelector(
2378
+ ), s = a.querySelector(
1682
2379
  ".yearselect"
1683
2380
  );
1684
- if (!s || !r) return;
1685
- const n = parseInt(s.value, 10), o = parseInt(r.value, 10), c = new Date(o, n, 1);
1686
- i ? (this.state.leftCalendar.month = c, this.options.linkedCalendars && (this.state.rightCalendar.month = f(c, 1))) : (this.state.rightCalendar.month = c, this.options.linkedCalendars && (this.state.leftCalendar.month = f(c, -1))), this.updateCalendars();
2381
+ if (!o || !s) return;
2382
+ const n = parseInt(o.value, 10), r = parseInt(s.value, 10), d = new Date(r, n, 1);
2383
+ 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();
1687
2384
  }
1688
2385
  handleTimeChange(t) {
1689
2386
  const a = t.target.closest(".drp-calendar");
1690
2387
  if (!a) return;
1691
- const i = a.classList.contains("left"), s = i ? this.state.startDate : this.state.endDate || this.state.startDate, r = a.querySelector(
2388
+ const i = a.classList.contains("left"), o = i ? this.state.startDate : this.state.endDate || this.state.startDate, s = a.querySelector(
1692
2389
  ".hourselect"
1693
2390
  ), n = a.querySelector(
1694
2391
  ".minuteselect"
1695
- ), o = a.querySelector(
2392
+ ), r = a.querySelector(
1696
2393
  ".secondselect"
1697
- ), c = a.querySelector(
2394
+ ), d = a.querySelector(
1698
2395
  ".ampmselect"
1699
2396
  );
1700
- if (!r || !n) return;
1701
- let d = parseInt(r.value, 10);
1702
- const m = parseInt(n.value, 10) || 0, p = o ? parseInt(o.value, 10) : 0;
1703
- if (!this.options.timePicker24Hour && c) {
1704
- const D = c.value;
1705
- D === "PM" && d < 12 && (d += 12), D === "AM" && d === 12 && (d = 0);
2397
+ if (!s || !n) return;
2398
+ let c = parseInt(s.value, 10);
2399
+ const b = parseInt(n.value, 10) || 0, h = r ? parseInt(r.value, 10) : 0;
2400
+ if (!this.options.timePicker24Hour && d) {
2401
+ const f = d.value;
2402
+ f === "PM" && c < 12 && (c += 12), f === "AM" && c === 12 && (c = 0);
1706
2403
  }
1707
- const h = new Date(s);
1708
- if (h.setHours(d), h.setMinutes(m), h.setSeconds(p), this.options.timePickerIncrement && this.roundToIncrement(h), !(this.options.minDate && h < this.options.minDate) && !(this.options.maxDate && h > this.options.maxDate)) {
2404
+ const p = new Date(o);
2405
+ if (p.setHours(c), p.setMinutes(b), p.setSeconds(h), this.options.timePickerIncrement && this.roundToIncrement(p), !(this.options.minDate && p < this.options.minDate) && !(this.options.maxDate && p > this.options.maxDate)) {
1709
2406
  if (this.validationService) {
1710
- const D = this.validationService.validateDate(h);
1711
- if (!D.isValid) {
1712
- this.showValidationError(D.error, D.errorCode);
2407
+ const f = this.validationService.validateDate(p);
2408
+ if (!f.isValid) {
2409
+ this.showValidationError(f.error, f.errorCode);
1713
2410
  return;
1714
2411
  }
1715
2412
  }
1716
- i ? (this.state.startDate = h, this.options.singleDatePicker ? this.state.endDate = h : this.state.endDate && this.state.endDate.toDateString() === h.toDateString() && this.state.endDate < h && (this.state.endDate = new Date(h))) : this.state.endDate && (this.state.endDate = h), this.updateSelectedDisplay(), this.updateCalendars(), this.updateFormInputs();
2413
+ i ? (this.state.startDate = p, this.options.singleDatePicker ? this.state.endDate = p : this.state.endDate && this.state.endDate.toDateString() === p.toDateString() && this.state.endDate < p && (this.state.endDate = new Date(p))) : this.state.endDate && (this.state.endDate = p), this.updateSelectedDisplay(), this.updateCalendars(), this.updateFormInputs();
1717
2414
  }
1718
2415
  }
1719
2416
  // View update methods
@@ -1731,10 +2428,10 @@ class O {
1731
2428
  });
1732
2429
  }
1733
2430
  updateMonthsInView() {
1734
- this.state.endDate ? (this.state.leftCalendar.month = x(this.state.startDate), !this.options.linkedCalendars && (this.state.endDate.getMonth() !== this.state.startDate.getMonth() || this.state.endDate.getFullYear() !== this.state.startDate.getFullYear()) ? this.state.rightCalendar.month = x(this.state.endDate) : this.state.rightCalendar.month = f(
2431
+ this.state.endDate ? (this.state.leftCalendar.month = w(this.state.startDate), !this.options.linkedCalendars && (this.state.endDate.getMonth() !== this.state.startDate.getMonth() || this.state.endDate.getFullYear() !== this.state.startDate.getFullYear()) ? this.state.rightCalendar.month = w(this.state.endDate) : this.state.rightCalendar.month = g(
1735
2432
  this.state.leftCalendar.month,
1736
2433
  1
1737
- )) : (this.state.leftCalendar.month = x(this.state.startDate), this.state.rightCalendar.month = f(
2434
+ )) : (this.state.leftCalendar.month = w(this.state.startDate), this.state.rightCalendar.month = g(
1738
2435
  this.state.leftCalendar.month,
1739
2436
  1
1740
2437
  ));
@@ -1749,32 +2446,51 @@ class O {
1749
2446
  e.calendar = this.calendarService.buildCalendarMatrix(
1750
2447
  e.month
1751
2448
  );
1752
- const i = this.calendarService.canNavigatePrevious(e.month), s = this.calendarService.canNavigateNext(e.month), r = this.calendarService.renderCalendarHTML(
2449
+ const i = this.calendarService.canNavigatePrevious(e.month), o = this.calendarService.canNavigateNext(e.month), s = this.calendarService.renderCalendarHTML(
1753
2450
  e,
1754
2451
  t,
1755
2452
  this.state.startDate,
1756
2453
  this.state.endDate,
1757
2454
  i,
1758
- s
2455
+ o
1759
2456
  );
1760
- a.innerHTML = r;
2457
+ a.innerHTML = s;
1761
2458
  }
1762
2459
  updateFormInputs() {
1763
2460
  const t = this.container.querySelector(
1764
2461
  ".applyBtn"
1765
- ), e = this.options.singleDatePicker || this.state.endDate && (g(this.state.startDate, this.state.endDate) || u(this.state.startDate, this.state.endDate, "day"));
1766
- t.disabled = !e;
2462
+ ), e = this.options.singleDatePicker || this.state.endDate && (u(this.state.startDate, this.state.endDate) || m(this.state.startDate, this.state.endDate, "day"));
2463
+ t.disabled = !e, this.updateMobileHeaderButtons();
1767
2464
  }
1768
2465
  updateSelectedDisplay() {
1769
2466
  const t = this.container.querySelector(".drp-selected");
1770
- let e = C(this.state.startDate, this.locale.format);
1771
- !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + C(this.state.endDate, this.locale.format)), t.textContent = e;
2467
+ let e = k(this.state.startDate, this.locale.format);
2468
+ !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + k(this.state.endDate, this.locale.format)), t.textContent = e, this.updateMobileHeader(e);
2469
+ }
2470
+ updateMobileHeader(t) {
2471
+ const e = this.container.querySelector(
2472
+ ".datex-mobile-header"
2473
+ ), a = this.container.querySelector(
2474
+ ".datex-mobile-header .selected-range"
2475
+ ), i = this.container.querySelector(
2476
+ ".datex-mobile-header .range-label"
2477
+ );
2478
+ e && a && i && (a.textContent = t, this.state.chosenLabel && this.state.chosenLabel !== this.locale.customRangeLabel ? (i.textContent = this.state.chosenLabel, i.style.display = "block") : i.style.display = "none", this.updateMobileHeaderButtons());
2479
+ }
2480
+ updateMobileHeaderButtons() {
2481
+ const t = this.container.querySelector(
2482
+ ".mobile-applyBtn"
2483
+ );
2484
+ if (t) {
2485
+ const e = this.options.singleDatePicker || this.state.endDate && (u(this.state.startDate, this.state.endDate) || m(this.state.startDate, this.state.endDate, "day"));
2486
+ t.disabled = !e;
2487
+ }
1772
2488
  }
1773
2489
  updateElement() {
1774
2490
  if (this.element.tagName === "INPUT" && this.options.autoUpdateInput) {
1775
2491
  const t = this.element;
1776
- let e = C(this.state.startDate, this.locale.format);
1777
- !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + C(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
2492
+ let e = k(this.state.startDate, this.locale.format);
2493
+ !this.options.singleDatePicker && this.state.endDate && (e += this.locale.separator + k(this.state.endDate, this.locale.format)), e !== t.value && (t.value = e, this.eventService.dispatchEvent(this.element, "change"));
1778
2494
  }
1779
2495
  }
1780
2496
  renderRanges() {
@@ -1801,13 +2517,13 @@ class O {
1801
2517
  this.container.querySelectorAll("td[data-date]").forEach((e) => {
1802
2518
  const a = e.dataset.date;
1803
2519
  if (!a) return;
1804
- const i = b(a, "YYYY-MM-DD");
1805
- if (!y(i)) return;
2520
+ const i = x(a, "YYYY-MM-DD");
2521
+ if (!D(i)) return;
1806
2522
  e.classList.remove("in-range", "end-date", "start-date", "active");
1807
- const s = this.state.startDate, r = this.state.endDate, n = this.state.hoverDate;
1808
- if (s && u(i, s, "day") && e.classList.add("active", "start-date"), r && u(i, r, "day") && e.classList.add("active", "end-date"), s && r && k(i, s) && g(i, r) && e.classList.add("in-range"), s && n && !r) {
1809
- const o = g(n, s) ? n : s, c = g(n, s) ? s : n;
1810
- u(i, n, "day") ? e.classList.add("end-date") : k(i, o) && g(i, c) && e.classList.add("in-range");
2523
+ const o = this.state.startDate, s = this.state.endDate, n = this.state.hoverDate;
2524
+ if (o && m(i, o, "day") && e.classList.add("active", "start-date"), s && m(i, s, "day") && e.classList.add("active", "end-date"), o && s && y(i, o) && u(i, s) && e.classList.add("in-range"), o && n && !s) {
2525
+ const r = u(n, o) ? n : o, d = u(n, o) ? o : n;
2526
+ m(i, n, "day") ? e.classList.add("end-date") : y(i, r) && u(i, d) && e.classList.add("in-range");
1811
2527
  }
1812
2528
  });
1813
2529
  }
@@ -1817,26 +2533,26 @@ class O {
1817
2533
  if (!a) return;
1818
2534
  const i = a.querySelector(
1819
2535
  ".hourselect"
1820
- ), s = a.querySelector(
2536
+ ), o = a.querySelector(
1821
2537
  ".minuteselect"
1822
- ), r = a.querySelector(
2538
+ ), s = a.querySelector(
1823
2539
  ".secondselect"
1824
2540
  ), n = a.querySelector(
1825
2541
  ".ampmselect"
1826
2542
  );
1827
2543
  if (i) {
1828
- let o = parseInt(i.value, 10);
2544
+ let r = parseInt(i.value, 10);
1829
2545
  if (!this.options.timePicker24Hour && n) {
1830
- const c = n.value;
1831
- c === "PM" && o < 12 && (o += 12), c === "AM" && o === 12 && (o = 0);
2546
+ const d = n.value;
2547
+ d === "PM" && r < 12 && (r += 12), d === "AM" && r === 12 && (r = 0);
1832
2548
  }
1833
- t.setHours(o);
2549
+ t.setHours(r);
1834
2550
  }
1835
- if (s) {
1836
- const o = parseInt(s.value, 10) || 0;
1837
- t.setMinutes(o);
2551
+ if (o) {
2552
+ const r = parseInt(o.value, 10) || 0;
2553
+ t.setMinutes(r);
1838
2554
  }
1839
- this.options.timePickerSeconds && r && t.setSeconds(parseInt(r.value, 10));
2555
+ this.options.timePickerSeconds && s && t.setSeconds(parseInt(s.value, 10));
1840
2556
  }
1841
2557
  createRangeService() {
1842
2558
  return {
@@ -1848,14 +2564,14 @@ class O {
1848
2564
  },
1849
2565
  calculateChosenLabel: (t, e) => {
1850
2566
  let a = null;
1851
- for (const [i, [s, r]] of Object.entries(
2567
+ for (const [i, [o, s]] of Object.entries(
1852
2568
  this.options.ranges
1853
2569
  )) {
1854
- const n = u(t, s, "day");
1855
- let o = !1;
1856
- if (e ? o = u(e, r, "day") : o = u(t, r, "day"), n && o) {
1857
- const c = Math.abs(r.getTime() - s.getTime()) / 864e5 + 1;
1858
- (!a || c > a.days) && (a = { label: i, days: c });
2570
+ const n = m(t, o, "day");
2571
+ let r = !1;
2572
+ if (e ? r = m(e, s, "day") : r = m(t, s, "day"), n && r) {
2573
+ const d = Math.abs(s.getTime() - o.getTime()) / 864e5 + 1;
2574
+ (!a || d > a.days) && (a = { label: i, days: d });
1859
2575
  }
1860
2576
  }
1861
2577
  return a ? a.label : this.options.showCustomRangeLabel ? this.locale.customRangeLabel : null;
@@ -1872,20 +2588,20 @@ class O {
1872
2588
  }
1873
2589
  }
1874
2590
  export {
1875
- B as BOOTSTRAP_THEME,
2591
+ Y as BOOTSTRAP_THEME,
1876
2592
  E as DEFAULT_THEME,
1877
- O as Datex,
1878
- R as MATERIAL_THEME,
1879
- Y as SPANISH_LOCALE,
1880
- V as SPANISH_LOCALE_WITH_TIME,
1881
- f as addMonths,
2593
+ N as Datex,
2594
+ z as MATERIAL_THEME,
2595
+ P as SPANISH_LOCALE,
2596
+ R as SPANISH_LOCALE_WITH_TIME,
2597
+ g as addMonths,
1882
2598
  S as endOfDay,
1883
- C as formatDate,
1884
- x as getStartOfMonth,
1885
- k as isAfterDate,
1886
- g as isBeforeDate,
1887
- u as isSameDate,
1888
- y as isValidDate,
1889
- b as parseDate,
1890
- w as startOfDay
2599
+ k as formatDate,
2600
+ w as getStartOfMonth,
2601
+ y as isAfterDate,
2602
+ u as isBeforeDate,
2603
+ m as isSameDate,
2604
+ D as isValidDate,
2605
+ x as parseDate,
2606
+ C as startOfDay
1891
2607
  };