@glatam/calendar-ui 1.0.5 → 1.0.6
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/components/calendar-modal.d.ts.map +1 -1
- package/dist/components/series-confirmation-modal.d.ts +19 -0
- package/dist/components/series-confirmation-modal.d.ts.map +1 -0
- package/dist/glatam-calendar-mini.d.ts.map +1 -1
- package/dist/glatam-calendar.cjs +321 -147
- package/dist/glatam-calendar.d.ts +5 -0
- package/dist/glatam-calendar.d.ts.map +1 -1
- package/dist/glatam-calendar.js +894 -596
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/styles/calendar-mini.css.d.ts +2 -0
- package/dist/styles/calendar-mini.css.d.ts.map +1 -0
- package/dist/styles/series-confirmation.css.d.ts +2 -0
- package/dist/styles/series-confirmation.css.d.ts.map +1 -0
- package/dist/types.d.ts +10 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/utils/rule-helper.d.ts +17 -0
- package/dist/utils/rule-helper.d.ts.map +1 -0
- package/dist/views/day-view.d.ts +2 -0
- package/dist/views/day-view.d.ts.map +1 -1
- package/dist/views/month-view.d.ts.map +1 -1
- package/dist/views/week-view.d.ts +2 -0
- package/dist/views/week-view.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/glatam-calendar.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { css as M, LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import {
|
|
4
|
-
import { formatISODate as
|
|
5
|
-
import { classMap as
|
|
6
|
-
const
|
|
1
|
+
import { css as M, LitElement as T, html as c } from "lit";
|
|
2
|
+
import { property as l, customElement as O, state as m } from "lit/decorators.js";
|
|
3
|
+
import { formatISODate as z, parseISODate as P, isTimeBlocked as _, generateMonthDays as Y, generateWeekDays as L } from "@glatam/calendar-core";
|
|
4
|
+
import { formatISODate as yt, isTimeBlocked as xt, parseISODate as wt } from "@glatam/calendar-core";
|
|
5
|
+
import { classMap as A } from "lit/directives/class-map.js";
|
|
6
|
+
const q = M`
|
|
7
7
|
:host {
|
|
8
8
|
/* Fonts */
|
|
9
9
|
--glatam-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -91,7 +91,7 @@ const A = M`
|
|
|
91
91
|
--glatam-padding: 24px;
|
|
92
92
|
font-size: 1.1rem;
|
|
93
93
|
}
|
|
94
|
-
`,
|
|
94
|
+
`, G = M`
|
|
95
95
|
:host {
|
|
96
96
|
display: grid;
|
|
97
97
|
min-width: 0;
|
|
@@ -348,9 +348,9 @@ const A = M`
|
|
|
348
348
|
}
|
|
349
349
|
}
|
|
350
350
|
`;
|
|
351
|
-
function
|
|
352
|
-
if (
|
|
353
|
-
const
|
|
351
|
+
function B(e, t, a) {
|
|
352
|
+
if (t === a) return 0;
|
|
353
|
+
const r = (i, s) => {
|
|
354
354
|
const o = {
|
|
355
355
|
year: "numeric",
|
|
356
356
|
month: "numeric",
|
|
@@ -360,102 +360,118 @@ function I(t, e, a) {
|
|
|
360
360
|
second: "numeric",
|
|
361
361
|
hour12: !1
|
|
362
362
|
};
|
|
363
|
-
|
|
364
|
-
const n = new Intl.DateTimeFormat("en-US", o).formatToParts(
|
|
363
|
+
s !== "local" && (o.timeZone = s);
|
|
364
|
+
const n = new Intl.DateTimeFormat("en-US", o).formatToParts(i), d = new Map(n.map((f) => [f.type, f.value])), h = Number(d.get("hour")), y = h === 24 ? 0 : h;
|
|
365
365
|
return new Date(
|
|
366
|
-
Number(
|
|
367
|
-
Number(
|
|
368
|
-
Number(
|
|
369
|
-
|
|
370
|
-
Number(
|
|
371
|
-
Number(
|
|
366
|
+
Number(d.get("year")),
|
|
367
|
+
Number(d.get("month")) - 1,
|
|
368
|
+
Number(d.get("day")),
|
|
369
|
+
y,
|
|
370
|
+
Number(d.get("minute")),
|
|
371
|
+
Number(d.get("second"))
|
|
372
372
|
);
|
|
373
373
|
};
|
|
374
374
|
try {
|
|
375
|
-
const
|
|
376
|
-
return (
|
|
375
|
+
const i = r(e, t);
|
|
376
|
+
return (r(e, a).getTime() - i.getTime()) / (60 * 1e3);
|
|
377
377
|
} catch {
|
|
378
378
|
return 0;
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
|
-
function
|
|
382
|
-
if (
|
|
383
|
-
return { start:
|
|
384
|
-
const a = (
|
|
385
|
-
const [
|
|
386
|
-
return
|
|
387
|
-
},
|
|
388
|
-
let
|
|
389
|
-
|
|
390
|
-
const
|
|
391
|
-
return `${
|
|
392
|
-
},
|
|
381
|
+
function H(e, t) {
|
|
382
|
+
if (t === 0)
|
|
383
|
+
return { start: e.start, end: e.end, dayShift: 0 };
|
|
384
|
+
const a = (d) => {
|
|
385
|
+
const [h, y] = d.split(":").map(Number);
|
|
386
|
+
return h * 60 + y;
|
|
387
|
+
}, r = (d) => {
|
|
388
|
+
let h = d % 1440;
|
|
389
|
+
h < 0 && (h += 1440);
|
|
390
|
+
const y = String(Math.floor(h / 60)).padStart(2, "0"), f = String(h % 60).padStart(2, "0");
|
|
391
|
+
return `${y}:${f}`;
|
|
392
|
+
}, i = a(e.start), s = a(e.end), o = i + t, u = s + t;
|
|
393
393
|
let n = 0;
|
|
394
394
|
return o < 0 ? n = -1 : o >= 1440 && (n = 1), {
|
|
395
|
-
start:
|
|
396
|
-
end:
|
|
395
|
+
start: r(o),
|
|
396
|
+
end: r(u),
|
|
397
397
|
dayShift: n
|
|
398
398
|
};
|
|
399
399
|
}
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
400
|
+
function V(e, t, a) {
|
|
401
|
+
let r = null;
|
|
402
|
+
return { updatedRules: e.map((s) => {
|
|
403
|
+
if (s.id !== t) return s;
|
|
404
|
+
r = s;
|
|
405
|
+
const o = s.exceptions || [], u = o.includes(a) ? o : [...o, a];
|
|
406
|
+
return {
|
|
407
|
+
...s,
|
|
408
|
+
exceptions: u
|
|
409
|
+
};
|
|
410
|
+
}), targetRule: r };
|
|
411
|
+
}
|
|
412
|
+
function F(e, t) {
|
|
413
|
+
const a = e.find((i) => i.id === t) || null;
|
|
414
|
+
return { updatedRules: e.filter((i) => i.id !== t), targetRule: a };
|
|
415
|
+
}
|
|
416
|
+
var X = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, $ = (e, t, a, r) => {
|
|
417
|
+
for (var i = r > 1 ? void 0 : r ? Z(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
418
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
419
|
+
return r && i && X(t, a, i), i;
|
|
404
420
|
};
|
|
405
|
-
let
|
|
421
|
+
let w = class extends T {
|
|
406
422
|
constructor() {
|
|
407
423
|
super(...arguments), this.days = [], this.locale = "es", this.startOfWeekDay = 0, this.selectedDates = [], this.role = "provider", this.size = "medium", this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null;
|
|
408
424
|
}
|
|
409
425
|
getWeekdayNames() {
|
|
410
|
-
const
|
|
411
|
-
for (let
|
|
412
|
-
|
|
413
|
-
return
|
|
414
|
-
}
|
|
415
|
-
handleDayClick(
|
|
416
|
-
const
|
|
417
|
-
this.role === "buyer" && (
|
|
418
|
-
detail: { dateString:
|
|
426
|
+
const e = [], t = new Date(2026, 6, 12 + this.startOfWeekDay), a = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
|
|
427
|
+
for (let r = 0; r < 7; r++)
|
|
428
|
+
e.push(a.format(t)), t.setDate(t.getDate() + 1);
|
|
429
|
+
return e;
|
|
430
|
+
}
|
|
431
|
+
handleDayClick(e) {
|
|
432
|
+
const t = this.minDate && e.dateString < this.minDate || this.maxDate && e.dateString > this.maxDate;
|
|
433
|
+
this.role === "buyer" && (e.isBlocked || t) || this.dispatchEvent(new CustomEvent("day-select", {
|
|
434
|
+
detail: { dateString: e.dateString, isBlocked: e.isBlocked },
|
|
419
435
|
bubbles: !0,
|
|
420
436
|
composed: !0
|
|
421
437
|
}));
|
|
422
438
|
}
|
|
423
439
|
render() {
|
|
424
|
-
const
|
|
425
|
-
return
|
|
426
|
-
${
|
|
440
|
+
const e = this.getWeekdayNames();
|
|
441
|
+
return c`
|
|
442
|
+
${e.map((t) => c`<div class="weekday">${t}</div>`)}
|
|
427
443
|
|
|
428
|
-
${this.days.map((
|
|
429
|
-
var
|
|
430
|
-
if (!
|
|
431
|
-
return
|
|
432
|
-
const a =
|
|
433
|
-
return
|
|
444
|
+
${this.days.map((t) => {
|
|
445
|
+
var u;
|
|
446
|
+
if (!t.isCurrentMonth && !this.showNeighboringMonth)
|
|
447
|
+
return c`<div class="day-cell empty"></div>`;
|
|
448
|
+
const a = t.dateString === z(/* @__PURE__ */ new Date()), r = this.selectedDates.includes(t.dateString), i = t.slots.filter((n) => n.isBlocked), s = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate, o = this.tileClassName ? this.tileClassName({ date: t.date, dateString: t.dateString }) : "";
|
|
449
|
+
return c`
|
|
434
450
|
<div
|
|
435
|
-
class=${
|
|
451
|
+
class=${A({
|
|
436
452
|
"day-cell": !0,
|
|
437
|
-
padding: !
|
|
438
|
-
blocked:
|
|
453
|
+
padding: !t.isCurrentMonth,
|
|
454
|
+
blocked: t.isBlocked,
|
|
439
455
|
today: a,
|
|
440
|
-
selected:
|
|
441
|
-
disabled: !!
|
|
456
|
+
selected: r,
|
|
457
|
+
disabled: !!s,
|
|
442
458
|
[o]: !!o
|
|
443
459
|
})}
|
|
444
460
|
part="day-cell ${o}"
|
|
445
|
-
@click=${() => this.handleDayClick(
|
|
461
|
+
@click=${() => this.handleDayClick(t)}
|
|
446
462
|
>
|
|
447
|
-
<div class="day-number">${
|
|
463
|
+
<div class="day-number">${t.dayNumber}</div>
|
|
448
464
|
|
|
449
465
|
<div class="slot-indicator">
|
|
450
|
-
${
|
|
451
|
-
var
|
|
452
|
-
return
|
|
453
|
-
<div class="badge blocked-slot" title=${((
|
|
454
|
-
🚫 ${((
|
|
466
|
+
${t.isBlocked ? c`<div class="badge blocked-day">${((u = t.rule) == null ? void 0 : u.description) || "Bloqueado"}</div>` : i.slice(0, 2).map((n) => {
|
|
467
|
+
var d, h;
|
|
468
|
+
return c`
|
|
469
|
+
<div class="badge blocked-slot" title=${((d = n.rule) == null ? void 0 : d.description) || ""}>
|
|
470
|
+
🚫 ${((h = n.rule) == null ? void 0 : h.description) || n.start}
|
|
455
471
|
</div>
|
|
456
472
|
`;
|
|
457
473
|
})}
|
|
458
|
-
${!
|
|
474
|
+
${!t.isBlocked && i.length > 2 ? c`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${i.length - 2} tareas</div>` : ""}
|
|
459
475
|
</div>
|
|
460
476
|
</div>
|
|
461
477
|
`;
|
|
@@ -463,7 +479,7 @@ let f = class extends E {
|
|
|
463
479
|
`;
|
|
464
480
|
}
|
|
465
481
|
};
|
|
466
|
-
|
|
482
|
+
w.styles = M`
|
|
467
483
|
:host { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
|
|
468
484
|
.weekday { font-size: 0.75rem; font-weight: 600; color: var(--glatam-text-secondary); text-transform: uppercase; text-align: center; padding: 8px 0; letter-spacing: 0.05em; }
|
|
469
485
|
.day-cell {
|
|
@@ -496,55 +512,55 @@ f.styles = M`
|
|
|
496
512
|
.day-number { margin-bottom: 0; font-size: 0.8rem; }
|
|
497
513
|
}
|
|
498
514
|
`;
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
],
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
],
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
],
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
],
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
],
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
],
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
],
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
],
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
],
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
],
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
],
|
|
532
|
-
var
|
|
533
|
-
for (var
|
|
534
|
-
(o =
|
|
535
|
-
return
|
|
515
|
+
$([
|
|
516
|
+
l({ type: Array })
|
|
517
|
+
], w.prototype, "days", 2);
|
|
518
|
+
$([
|
|
519
|
+
l({ type: String })
|
|
520
|
+
], w.prototype, "locale", 2);
|
|
521
|
+
$([
|
|
522
|
+
l({ type: Number })
|
|
523
|
+
], w.prototype, "startOfWeekDay", 2);
|
|
524
|
+
$([
|
|
525
|
+
l({ type: Array })
|
|
526
|
+
], w.prototype, "selectedDates", 2);
|
|
527
|
+
$([
|
|
528
|
+
l({ type: String })
|
|
529
|
+
], w.prototype, "role", 2);
|
|
530
|
+
$([
|
|
531
|
+
l({ type: String, reflect: !0 })
|
|
532
|
+
], w.prototype, "size", 2);
|
|
533
|
+
$([
|
|
534
|
+
l({ type: String })
|
|
535
|
+
], w.prototype, "minDate", 2);
|
|
536
|
+
$([
|
|
537
|
+
l({ type: String })
|
|
538
|
+
], w.prototype, "maxDate", 2);
|
|
539
|
+
$([
|
|
540
|
+
l({ type: Boolean })
|
|
541
|
+
], w.prototype, "showNeighboringMonth", 2);
|
|
542
|
+
$([
|
|
543
|
+
l({ attribute: !1 })
|
|
544
|
+
], w.prototype, "tileClassName", 2);
|
|
545
|
+
w = $([
|
|
546
|
+
O("glatam-calendar-month-view")
|
|
547
|
+
], w);
|
|
548
|
+
var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, k = (e, t, a, r) => {
|
|
549
|
+
for (var i = r > 1 ? void 0 : r ? K(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
550
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
551
|
+
return r && i && J(t, a, i), i;
|
|
536
552
|
};
|
|
537
|
-
let
|
|
553
|
+
let x = class extends T {
|
|
538
554
|
constructor() {
|
|
539
|
-
super(...arguments), this.days = [], this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.isDragging = !1, this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
|
|
555
|
+
super(...arguments), this.days = [], this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.minDate = "", this.maxDate = "", this.isDragging = !1, this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
|
|
540
556
|
if (!this.isDragging || this.dragDayIndex === null || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
|
|
541
557
|
this.isDragging = !1;
|
|
542
558
|
return;
|
|
543
559
|
}
|
|
544
560
|
this.isDragging = !1;
|
|
545
|
-
const
|
|
546
|
-
|
|
547
|
-
detail: { dateString: a.dateString, start:
|
|
561
|
+
const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.days[this.dragDayIndex], r = a.slots.slice(e, t + 1);
|
|
562
|
+
r.some((i) => i.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
|
|
563
|
+
detail: { dateString: a.dateString, start: r[0].start, end: r[r.length - 1].end },
|
|
548
564
|
bubbles: !0,
|
|
549
565
|
composed: !0
|
|
550
566
|
})), this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null;
|
|
@@ -556,63 +572,68 @@ let w = class extends E {
|
|
|
556
572
|
disconnectedCallback() {
|
|
557
573
|
window.removeEventListener("mouseup", this.handleMouseUp), super.disconnectedCallback();
|
|
558
574
|
}
|
|
559
|
-
handleMouseDown(
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
575
|
+
handleMouseDown(e, t, a) {
|
|
576
|
+
var s;
|
|
577
|
+
const r = (s = this.days[e]) == null ? void 0 : s.dateString;
|
|
578
|
+
if (!(this.minDate && r < this.minDate || this.maxDate && r > this.maxDate)) {
|
|
579
|
+
if (a) {
|
|
580
|
+
if (this.role === "buyer") return;
|
|
581
|
+
this.dispatchEvent(new CustomEvent("slot-click", {
|
|
582
|
+
detail: { dateString: this.days[e].dateString, slot: this.days[e].slots[t], isBlocked: !0 },
|
|
583
|
+
bubbles: !0,
|
|
584
|
+
composed: !0
|
|
585
|
+
}));
|
|
586
|
+
return;
|
|
587
|
+
}
|
|
588
|
+
this.isDragging = !0, this.dragDayIndex = e, this.dragStartSlotIndex = t, this.dragEndSlotIndex = t;
|
|
568
589
|
}
|
|
569
|
-
this.isDragging = !0, this.dragDayIndex = t, this.dragStartSlotIndex = e, this.dragEndSlotIndex = e;
|
|
570
590
|
}
|
|
571
|
-
handleMouseEnter(
|
|
572
|
-
this.isDragging &&
|
|
591
|
+
handleMouseEnter(e, t, a) {
|
|
592
|
+
this.isDragging && e === this.dragDayIndex && !a && (this.dragEndSlotIndex = t);
|
|
573
593
|
}
|
|
574
|
-
isSlotSelected(
|
|
575
|
-
return !this.selectedRange || this.selectedRange.dateString !==
|
|
594
|
+
isSlotSelected(e, t) {
|
|
595
|
+
return !this.selectedRange || this.selectedRange.dateString !== e ? !1 : t.start >= this.selectedRange.start && t.end <= this.selectedRange.end;
|
|
576
596
|
}
|
|
577
|
-
isSlotDragSelecting(
|
|
578
|
-
if (!this.isDragging ||
|
|
579
|
-
const a = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex),
|
|
580
|
-
return
|
|
597
|
+
isSlotDragSelecting(e, t) {
|
|
598
|
+
if (!this.isDragging || e !== this.dragDayIndex) return !1;
|
|
599
|
+
const a = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), r = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
|
|
600
|
+
return t >= a && t <= r;
|
|
581
601
|
}
|
|
582
602
|
render() {
|
|
583
|
-
const
|
|
584
|
-
return
|
|
603
|
+
const e = z(/* @__PURE__ */ new Date());
|
|
604
|
+
return c`
|
|
585
605
|
<div class="time-col">
|
|
586
606
|
<div class="header-cell">Hora</div>
|
|
587
|
-
${this.slots.map((
|
|
607
|
+
${this.slots.map((t) => c`<div class="slot-cell time-slot-label">${t.start}</div>`)}
|
|
588
608
|
</div>
|
|
589
609
|
|
|
590
|
-
${this.days.map((
|
|
591
|
-
const
|
|
592
|
-
return
|
|
610
|
+
${this.days.map((t, a) => {
|
|
611
|
+
const r = t.dateString === e, i = new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(t.date), s = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate;
|
|
612
|
+
return c`
|
|
593
613
|
<div class="day-col">
|
|
594
|
-
<div class="header-cell ${
|
|
595
|
-
<div>${
|
|
596
|
-
<div class="day-num">${
|
|
614
|
+
<div class="header-cell ${r ? "today" : ""}">
|
|
615
|
+
<div>${i}</div>
|
|
616
|
+
<div class="day-num">${t.dayNumber}</div>
|
|
597
617
|
</div>
|
|
598
618
|
|
|
599
|
-
${
|
|
600
|
-
var
|
|
601
|
-
const
|
|
602
|
-
return
|
|
619
|
+
${t.slots.map((o, u) => {
|
|
620
|
+
var y, f;
|
|
621
|
+
const n = o.isBlocked, d = this.isSlotSelected(t.dateString, o), h = this.isSlotDragSelecting(a, u);
|
|
622
|
+
return c`
|
|
603
623
|
<div
|
|
604
|
-
class=${
|
|
624
|
+
class=${A({
|
|
605
625
|
"slot-cell": !0,
|
|
606
|
-
available: !
|
|
607
|
-
blocked:
|
|
608
|
-
selected:
|
|
609
|
-
"drag-selecting":
|
|
626
|
+
available: !n && !s,
|
|
627
|
+
blocked: n,
|
|
628
|
+
selected: d,
|
|
629
|
+
"drag-selecting": h,
|
|
630
|
+
disabled: s
|
|
610
631
|
})}
|
|
611
|
-
@mousedown=${() => this.handleMouseDown(a,
|
|
612
|
-
@mouseenter=${() => this.handleMouseEnter(a,
|
|
613
|
-
title=${
|
|
632
|
+
@mousedown=${() => this.handleMouseDown(a, u, n)}
|
|
633
|
+
@mouseenter=${() => this.handleMouseEnter(a, u, n)}
|
|
634
|
+
title=${n && ((y = o.rule) != null && y.description) ? o.rule.description : ""}
|
|
614
635
|
>
|
|
615
|
-
${
|
|
636
|
+
${n ? ((f = o.rule) == null ? void 0 : f.description) || "Ocupado" : d ? "Reservado" : ""}
|
|
616
637
|
</div>
|
|
617
638
|
`;
|
|
618
639
|
})}
|
|
@@ -622,7 +643,7 @@ let w = class extends E {
|
|
|
622
643
|
`;
|
|
623
644
|
}
|
|
624
645
|
};
|
|
625
|
-
|
|
646
|
+
x.styles = M`
|
|
626
647
|
:host {
|
|
627
648
|
display: grid; grid-template-columns: var(--glatam-time-col-width) repeat(7, 1fr); gap: 2px;
|
|
628
649
|
width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
|
|
@@ -674,52 +695,59 @@ w.styles = M`
|
|
|
674
695
|
}
|
|
675
696
|
.slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
|
|
676
697
|
.slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
|
|
698
|
+
.slot-cell.disabled { opacity: 0.35; cursor: not-allowed; background-color: var(--glatam-surface); pointer-events: none; }
|
|
677
699
|
`;
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
],
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
],
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
],
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
],
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
],
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
],
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
],
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
],
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
],
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
],
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
700
|
+
k([
|
|
701
|
+
l({ type: Array })
|
|
702
|
+
], x.prototype, "days", 2);
|
|
703
|
+
k([
|
|
704
|
+
l({ type: Array })
|
|
705
|
+
], x.prototype, "slots", 2);
|
|
706
|
+
k([
|
|
707
|
+
l({ type: String })
|
|
708
|
+
], x.prototype, "locale", 2);
|
|
709
|
+
k([
|
|
710
|
+
l({ type: Object })
|
|
711
|
+
], x.prototype, "selectedRange", 2);
|
|
712
|
+
k([
|
|
713
|
+
l({ type: String })
|
|
714
|
+
], x.prototype, "role", 2);
|
|
715
|
+
k([
|
|
716
|
+
l({ type: String })
|
|
717
|
+
], x.prototype, "minDate", 2);
|
|
718
|
+
k([
|
|
719
|
+
l({ type: String })
|
|
720
|
+
], x.prototype, "maxDate", 2);
|
|
721
|
+
k([
|
|
722
|
+
m()
|
|
723
|
+
], x.prototype, "isDragging", 2);
|
|
724
|
+
k([
|
|
725
|
+
m()
|
|
726
|
+
], x.prototype, "dragDayIndex", 2);
|
|
727
|
+
k([
|
|
728
|
+
m()
|
|
729
|
+
], x.prototype, "dragStartSlotIndex", 2);
|
|
730
|
+
k([
|
|
731
|
+
m()
|
|
732
|
+
], x.prototype, "dragEndSlotIndex", 2);
|
|
733
|
+
x = k([
|
|
734
|
+
O("glatam-calendar-week-view")
|
|
735
|
+
], x);
|
|
736
|
+
var Q = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, R = (e, t, a, r) => {
|
|
737
|
+
for (var i = r > 1 ? void 0 : r ? tt(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
738
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
739
|
+
return r && i && Q(t, a, i), i;
|
|
712
740
|
};
|
|
713
|
-
let S = class extends
|
|
741
|
+
let S = class extends T {
|
|
714
742
|
constructor() {
|
|
715
|
-
super(...arguments), this.day = null, this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.isDragging = !1, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
|
|
743
|
+
super(...arguments), this.day = null, this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.minDate = "", this.maxDate = "", this.isDragging = !1, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
|
|
716
744
|
if (!this.isDragging || !this.day || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
|
|
717
745
|
this.isDragging = !1;
|
|
718
746
|
return;
|
|
719
747
|
}
|
|
720
748
|
this.isDragging = !1;
|
|
721
|
-
const
|
|
722
|
-
a.some((
|
|
749
|
+
const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.day.slots.slice(e, t + 1);
|
|
750
|
+
a.some((r) => r.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
|
|
723
751
|
detail: { dateString: this.day.dateString, start: a[0].start, end: a[a.length - 1].end },
|
|
724
752
|
bubbles: !0,
|
|
725
753
|
composed: !0
|
|
@@ -732,60 +760,65 @@ let S = class extends E {
|
|
|
732
760
|
disconnectedCallback() {
|
|
733
761
|
window.removeEventListener("mouseup", this.handleMouseUp), super.disconnectedCallback();
|
|
734
762
|
}
|
|
735
|
-
handleMouseDown(
|
|
736
|
-
if (
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
763
|
+
handleMouseDown(e, t) {
|
|
764
|
+
if (!this.day) return;
|
|
765
|
+
const a = this.day.dateString;
|
|
766
|
+
if (!(this.minDate && a < this.minDate || this.maxDate && a > this.maxDate)) {
|
|
767
|
+
if (t) {
|
|
768
|
+
if (this.role === "buyer") return;
|
|
769
|
+
this.dispatchEvent(new CustomEvent("slot-click", {
|
|
770
|
+
detail: { dateString: this.day.dateString, slot: this.day.slots[e], isBlocked: !0 },
|
|
771
|
+
bubbles: !0,
|
|
772
|
+
composed: !0
|
|
773
|
+
}));
|
|
774
|
+
return;
|
|
775
|
+
}
|
|
776
|
+
this.isDragging = !0, this.dragStartSlotIndex = e, this.dragEndSlotIndex = e;
|
|
744
777
|
}
|
|
745
|
-
this.isDragging = !0, this.dragStartSlotIndex = t, this.dragEndSlotIndex = t;
|
|
746
778
|
}
|
|
747
|
-
handleMouseEnter(
|
|
748
|
-
this.isDragging && !
|
|
779
|
+
handleMouseEnter(e, t) {
|
|
780
|
+
this.isDragging && !t && (this.dragEndSlotIndex = e);
|
|
749
781
|
}
|
|
750
|
-
isSlotSelected(
|
|
751
|
-
return !this.day || !this.selectedRange || this.selectedRange.dateString !== this.day.dateString ? !1 :
|
|
782
|
+
isSlotSelected(e) {
|
|
783
|
+
return !this.day || !this.selectedRange || this.selectedRange.dateString !== this.day.dateString ? !1 : e.start >= this.selectedRange.start && e.end <= this.selectedRange.end;
|
|
752
784
|
}
|
|
753
|
-
isSlotDragSelecting(
|
|
785
|
+
isSlotDragSelecting(e) {
|
|
754
786
|
if (!this.isDragging) return !1;
|
|
755
|
-
const
|
|
756
|
-
return
|
|
787
|
+
const t = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), a = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
|
|
788
|
+
return e >= t && e <= a;
|
|
757
789
|
}
|
|
758
790
|
render() {
|
|
759
|
-
if (!this.day) return
|
|
760
|
-
const
|
|
761
|
-
return
|
|
791
|
+
if (!this.day) return c`<div>Cargando...</div>`;
|
|
792
|
+
const e = this.day.dateString === z(/* @__PURE__ */ new Date()), t = this.minDate && this.day.dateString < this.minDate || this.maxDate && this.day.dateString > this.maxDate, a = new Intl.DateTimeFormat(this.locale, { weekday: "long", day: "numeric", month: "long" }).format(this.day.date);
|
|
793
|
+
return c`
|
|
762
794
|
<div class="time-col">
|
|
763
795
|
<div class="header-cell">Hora</div>
|
|
764
|
-
${this.slots.map((
|
|
796
|
+
${this.slots.map((r) => c`<div class="slot-cell time-slot-label">${r.start}</div>`)}
|
|
765
797
|
</div>
|
|
766
798
|
|
|
767
799
|
<div class="day-col">
|
|
768
|
-
<div class="header-cell ${
|
|
769
|
-
<div style="text-transform: capitalize;">${
|
|
800
|
+
<div class="header-cell ${e ? "today" : ""}">
|
|
801
|
+
<div style="text-transform: capitalize;">${a}</div>
|
|
770
802
|
</div>
|
|
771
803
|
|
|
772
|
-
${this.day.slots.map((
|
|
773
|
-
var
|
|
774
|
-
const
|
|
775
|
-
return
|
|
804
|
+
${this.day.slots.map((r, i) => {
|
|
805
|
+
var n, d;
|
|
806
|
+
const s = r.isBlocked, o = this.isSlotSelected(r), u = this.isSlotDragSelecting(i);
|
|
807
|
+
return c`
|
|
776
808
|
<div
|
|
777
|
-
class=${
|
|
809
|
+
class=${A({
|
|
778
810
|
"slot-cell": !0,
|
|
779
|
-
available: !
|
|
780
|
-
blocked:
|
|
781
|
-
selected:
|
|
782
|
-
"drag-selecting":
|
|
811
|
+
available: !s && !t,
|
|
812
|
+
blocked: s,
|
|
813
|
+
selected: o,
|
|
814
|
+
"drag-selecting": u,
|
|
815
|
+
disabled: t
|
|
783
816
|
})}
|
|
784
|
-
@mousedown=${() => this.handleMouseDown(i,
|
|
785
|
-
@mouseenter=${() => this.handleMouseEnter(i,
|
|
786
|
-
title=${
|
|
817
|
+
@mousedown=${() => this.handleMouseDown(i, s)}
|
|
818
|
+
@mouseenter=${() => this.handleMouseEnter(i, s)}
|
|
819
|
+
title=${s && ((n = r.rule) != null && n.description) ? r.rule.description : ""}
|
|
787
820
|
>
|
|
788
|
-
${
|
|
821
|
+
${s ? ((d = r.rule) == null ? void 0 : d.description) || "Ocupado" : o ? "Reservado" : ""}
|
|
789
822
|
</div>
|
|
790
823
|
`;
|
|
791
824
|
})}
|
|
@@ -822,35 +855,42 @@ S.styles = M`
|
|
|
822
855
|
}
|
|
823
856
|
.slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
|
|
824
857
|
.slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
|
|
858
|
+
.slot-cell.disabled { opacity: 0.35; cursor: not-allowed; background-color: var(--glatam-surface); pointer-events: none; }
|
|
825
859
|
`;
|
|
826
|
-
|
|
827
|
-
|
|
860
|
+
R([
|
|
861
|
+
l({ type: Object })
|
|
828
862
|
], S.prototype, "day", 2);
|
|
829
|
-
|
|
830
|
-
|
|
863
|
+
R([
|
|
864
|
+
l({ type: Array })
|
|
831
865
|
], S.prototype, "slots", 2);
|
|
832
|
-
|
|
833
|
-
|
|
866
|
+
R([
|
|
867
|
+
l({ type: String })
|
|
834
868
|
], S.prototype, "locale", 2);
|
|
835
|
-
|
|
836
|
-
|
|
869
|
+
R([
|
|
870
|
+
l({ type: Object })
|
|
837
871
|
], S.prototype, "selectedRange", 2);
|
|
838
|
-
|
|
839
|
-
|
|
872
|
+
R([
|
|
873
|
+
l({ type: String })
|
|
840
874
|
], S.prototype, "role", 2);
|
|
841
|
-
|
|
842
|
-
|
|
875
|
+
R([
|
|
876
|
+
l({ type: String })
|
|
877
|
+
], S.prototype, "minDate", 2);
|
|
878
|
+
R([
|
|
879
|
+
l({ type: String })
|
|
880
|
+
], S.prototype, "maxDate", 2);
|
|
881
|
+
R([
|
|
882
|
+
m()
|
|
843
883
|
], S.prototype, "isDragging", 2);
|
|
844
|
-
|
|
845
|
-
|
|
884
|
+
R([
|
|
885
|
+
m()
|
|
846
886
|
], S.prototype, "dragStartSlotIndex", 2);
|
|
847
|
-
|
|
848
|
-
|
|
887
|
+
R([
|
|
888
|
+
m()
|
|
849
889
|
], S.prototype, "dragEndSlotIndex", 2);
|
|
850
|
-
S =
|
|
851
|
-
|
|
890
|
+
S = R([
|
|
891
|
+
O("glatam-calendar-day-view")
|
|
852
892
|
], S);
|
|
853
|
-
const
|
|
893
|
+
const et = M`
|
|
854
894
|
dialog {
|
|
855
895
|
background: transparent;
|
|
856
896
|
border: none;
|
|
@@ -1006,35 +1046,42 @@ const V = M`
|
|
|
1006
1046
|
background: rgba(255, 69, 58, 0.18);
|
|
1007
1047
|
}
|
|
1008
1048
|
`;
|
|
1009
|
-
var
|
|
1010
|
-
for (var
|
|
1011
|
-
(o =
|
|
1012
|
-
return
|
|
1049
|
+
var at = Object.defineProperty, it = Object.getOwnPropertyDescriptor, E = (e, t, a, r) => {
|
|
1050
|
+
for (var i = r > 1 ? void 0 : r ? it(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
1051
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
1052
|
+
return r && i && at(t, a, i), i;
|
|
1013
1053
|
};
|
|
1014
|
-
let
|
|
1054
|
+
let D = class extends T {
|
|
1015
1055
|
constructor() {
|
|
1016
1056
|
super(...arguments), this.open = !1, this.dateString = "", this.startTime = "", this.endTime = "", this.isRange = !1, this.existingRule = null, this.description = "", this.blockAllDay = !0, this.isRecurring = !1, this.selectedDays = [];
|
|
1017
1057
|
}
|
|
1018
|
-
willUpdate(
|
|
1019
|
-
|
|
1058
|
+
willUpdate(e) {
|
|
1059
|
+
if (e.has("open") && this.open)
|
|
1060
|
+
if (this.existingRule)
|
|
1061
|
+
this.description = this.existingRule.description || "", this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0, this.isRecurring = this.existingRule.type === "weekly", this.selectedDays = this.existingRule.daysOfWeek || [], this.existingRule.slots && this.existingRule.slots.length > 0 && (this.startTime = this.existingRule.slots[0].start, this.endTime = this.existingRule.slots[0].end);
|
|
1062
|
+
else {
|
|
1063
|
+
this.description = "", this.blockAllDay = !this.isRange, this.isRecurring = !1;
|
|
1064
|
+
const t = P(this.dateString);
|
|
1065
|
+
this.selectedDays = [t.getDay()];
|
|
1066
|
+
}
|
|
1020
1067
|
}
|
|
1021
|
-
updated(
|
|
1022
|
-
var
|
|
1023
|
-
if (
|
|
1024
|
-
const a = (
|
|
1068
|
+
updated(e) {
|
|
1069
|
+
var t;
|
|
1070
|
+
if (e.has("open")) {
|
|
1071
|
+
const a = (t = this.shadowRoot) == null ? void 0 : t.getElementById("booking-dialog");
|
|
1025
1072
|
a && (this.open ? a.open || a.showModal() : a.open && a.close());
|
|
1026
1073
|
}
|
|
1027
1074
|
}
|
|
1028
1075
|
handleDialogClose() {
|
|
1029
1076
|
this.open && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
|
|
1030
1077
|
}
|
|
1031
|
-
toggleDay(
|
|
1032
|
-
const
|
|
1033
|
-
this.selectedDays =
|
|
1078
|
+
toggleDay(e) {
|
|
1079
|
+
const t = this.selectedDays.indexOf(e);
|
|
1080
|
+
this.selectedDays = t > -1 ? this.selectedDays.filter((a) => a !== e) : [...this.selectedDays, e];
|
|
1034
1081
|
}
|
|
1035
1082
|
handleSave() {
|
|
1036
|
-
const
|
|
1037
|
-
title: this.description
|
|
1083
|
+
const e = {
|
|
1084
|
+
title: this.description.trim(),
|
|
1038
1085
|
blockAllDay: this.blockAllDay,
|
|
1039
1086
|
isRecurring: this.isRecurring,
|
|
1040
1087
|
selectedDays: this.selectedDays,
|
|
@@ -1042,24 +1089,24 @@ let x = class extends E {
|
|
|
1042
1089
|
startTime: this.startTime,
|
|
1043
1090
|
endTime: this.endTime
|
|
1044
1091
|
};
|
|
1045
|
-
this.dispatchEvent(new CustomEvent("save-rule", { detail:
|
|
1092
|
+
this.dispatchEvent(new CustomEvent("save-rule", { detail: e, bubbles: !0, composed: !0 }));
|
|
1046
1093
|
}
|
|
1047
1094
|
handleDelete() {
|
|
1048
1095
|
this.existingRule && this.dispatchEvent(new CustomEvent("delete-rule", {
|
|
1049
|
-
detail: { id: this.existingRule.id },
|
|
1096
|
+
detail: { id: this.existingRule.id, dateString: this.dateString, rule: this.existingRule },
|
|
1050
1097
|
bubbles: !0,
|
|
1051
1098
|
composed: !0
|
|
1052
1099
|
}));
|
|
1053
1100
|
}
|
|
1054
1101
|
render() {
|
|
1055
|
-
const
|
|
1056
|
-
return
|
|
1102
|
+
const e = ["D", "L", "M", "M", "J", "V", "S"], t = this.isRange ? `${this.dateString} (${this.startTime} - ${this.endTime})` : this.dateString;
|
|
1103
|
+
return c`
|
|
1057
1104
|
<dialog id="booking-dialog" @close=${this.handleDialogClose}>
|
|
1058
1105
|
<div class="modal-content">
|
|
1059
1106
|
<h3>${this.existingRule ? "Gestionar Bloqueo" : "Crear Bloqueo"}</h3>
|
|
1060
1107
|
|
|
1061
1108
|
<div style="font-size: 0.85rem; color: var(--glatam-text-secondary);">
|
|
1062
|
-
Selección: <strong>${
|
|
1109
|
+
Selección: <strong>${t}</strong>
|
|
1063
1110
|
</div>
|
|
1064
1111
|
|
|
1065
1112
|
<div class="form-group">
|
|
@@ -1096,16 +1143,17 @@ let x = class extends E {
|
|
|
1096
1143
|
</label>
|
|
1097
1144
|
</div>
|
|
1098
1145
|
|
|
1099
|
-
${this.isRecurring ?
|
|
1146
|
+
${this.isRecurring ? c`
|
|
1100
1147
|
<div class="form-group">
|
|
1101
1148
|
<label>Repetir los días</label>
|
|
1102
1149
|
<div class="days-grid">
|
|
1103
|
-
${[1, 2, 3, 4, 5, 6, 0].map((a) =>
|
|
1150
|
+
${[1, 2, 3, 4, 5, 6, 0].map((a) => c`
|
|
1104
1151
|
<button
|
|
1152
|
+
type="button"
|
|
1105
1153
|
class="day-btn ${this.selectedDays.includes(a) ? "selected" : ""}"
|
|
1106
1154
|
@click=${() => this.toggleDay(a)}
|
|
1107
1155
|
>
|
|
1108
|
-
${
|
|
1156
|
+
${e[a]}
|
|
1109
1157
|
</button>
|
|
1110
1158
|
`)}
|
|
1111
1159
|
</div>
|
|
@@ -1113,55 +1161,303 @@ let x = class extends E {
|
|
|
1113
1161
|
` : ""}
|
|
1114
1162
|
|
|
1115
1163
|
<div class="btn-actions">
|
|
1116
|
-
${this.existingRule ?
|
|
1117
|
-
<button class="btn btn-cancel" @click=${() => this.dispatchEvent(new CustomEvent("close"))}>Cancelar</button>
|
|
1118
|
-
<button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
|
|
1164
|
+
${this.existingRule ? c`<button type="button" class="btn btn-danger" @click=${this.handleDelete}>Eliminar</button>` : ""}
|
|
1165
|
+
<button type="button" class="btn btn-cancel" @click=${() => this.dispatchEvent(new CustomEvent("close"))}>Cancelar</button>
|
|
1166
|
+
<button type="button" class="btn btn-save" @click=${this.handleSave}>Guardar</button>
|
|
1119
1167
|
</div>
|
|
1120
1168
|
</div>
|
|
1121
1169
|
</dialog>
|
|
1122
1170
|
`;
|
|
1123
1171
|
}
|
|
1124
1172
|
};
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
],
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
],
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
],
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
],
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
],
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
],
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
],
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
],
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
],
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
],
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
],
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1173
|
+
D.styles = et;
|
|
1174
|
+
E([
|
|
1175
|
+
l({ type: Boolean })
|
|
1176
|
+
], D.prototype, "open", 2);
|
|
1177
|
+
E([
|
|
1178
|
+
l({ type: String })
|
|
1179
|
+
], D.prototype, "dateString", 2);
|
|
1180
|
+
E([
|
|
1181
|
+
l({ type: String })
|
|
1182
|
+
], D.prototype, "startTime", 2);
|
|
1183
|
+
E([
|
|
1184
|
+
l({ type: String })
|
|
1185
|
+
], D.prototype, "endTime", 2);
|
|
1186
|
+
E([
|
|
1187
|
+
l({ type: Boolean })
|
|
1188
|
+
], D.prototype, "isRange", 2);
|
|
1189
|
+
E([
|
|
1190
|
+
l({ type: Object })
|
|
1191
|
+
], D.prototype, "existingRule", 2);
|
|
1192
|
+
E([
|
|
1193
|
+
m()
|
|
1194
|
+
], D.prototype, "description", 2);
|
|
1195
|
+
E([
|
|
1196
|
+
m()
|
|
1197
|
+
], D.prototype, "blockAllDay", 2);
|
|
1198
|
+
E([
|
|
1199
|
+
m()
|
|
1200
|
+
], D.prototype, "isRecurring", 2);
|
|
1201
|
+
E([
|
|
1202
|
+
m()
|
|
1203
|
+
], D.prototype, "selectedDays", 2);
|
|
1204
|
+
D = E([
|
|
1205
|
+
O("glatam-calendar-modal")
|
|
1206
|
+
], D);
|
|
1207
|
+
const rt = M`
|
|
1208
|
+
:host {
|
|
1209
|
+
display: contents;
|
|
1210
|
+
font-family: var(--glatam-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
|
|
1211
|
+
}
|
|
1212
|
+
|
|
1213
|
+
dialog {
|
|
1214
|
+
border: none;
|
|
1215
|
+
border-radius: var(--glatam-border-radius, 16px);
|
|
1216
|
+
padding: 0;
|
|
1217
|
+
background: var(--glatam-bg, #ffffff);
|
|
1218
|
+
color: var(--glatam-text, #1d1d1f);
|
|
1219
|
+
max-width: 440px;
|
|
1220
|
+
width: 90vw;
|
|
1221
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
1222
|
+
overflow: hidden;
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1225
|
+
dialog::backdrop {
|
|
1226
|
+
background: rgba(0, 0, 0, 0.4);
|
|
1227
|
+
backdrop-filter: blur(8px);
|
|
1228
|
+
-webkit-backdrop-filter: blur(8px);
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.confirmation-container {
|
|
1232
|
+
padding: 24px;
|
|
1233
|
+
display: flex;
|
|
1234
|
+
flex-direction: column;
|
|
1235
|
+
gap: 18px;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
.header {
|
|
1239
|
+
display: flex;
|
|
1240
|
+
flex-direction: column;
|
|
1241
|
+
gap: 6px;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
.title {
|
|
1245
|
+
font-size: 1.15rem;
|
|
1246
|
+
font-weight: 600;
|
|
1247
|
+
margin: 0;
|
|
1248
|
+
color: var(--glatam-text, #1d1d1f);
|
|
1249
|
+
line-height: 1.3;
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
.subtitle {
|
|
1253
|
+
font-size: 0.88rem;
|
|
1254
|
+
color: var(--glatam-text-secondary, #86868b);
|
|
1255
|
+
margin: 0;
|
|
1256
|
+
line-height: 1.4;
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
.rule-badge {
|
|
1260
|
+
display: inline-flex;
|
|
1261
|
+
align-items: center;
|
|
1262
|
+
gap: 6px;
|
|
1263
|
+
padding: 6px 12px;
|
|
1264
|
+
background: var(--glatam-surface, #f5f5f7);
|
|
1265
|
+
border-radius: 8px;
|
|
1266
|
+
font-size: 0.82rem;
|
|
1267
|
+
font-weight: 500;
|
|
1268
|
+
color: var(--glatam-text, #1d1d1f);
|
|
1269
|
+
}
|
|
1270
|
+
|
|
1271
|
+
.options-group {
|
|
1272
|
+
display: flex;
|
|
1273
|
+
flex-direction: column;
|
|
1274
|
+
gap: 10px;
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
.option-card {
|
|
1278
|
+
display: flex;
|
|
1279
|
+
align-items: flex-start;
|
|
1280
|
+
gap: 12px;
|
|
1281
|
+
padding: 14px 16px;
|
|
1282
|
+
border: 1.5px solid var(--glatam-border, #e5e5ea);
|
|
1283
|
+
border-radius: 12px;
|
|
1284
|
+
background: var(--glatam-bg, #ffffff);
|
|
1285
|
+
cursor: pointer;
|
|
1286
|
+
text-align: left;
|
|
1287
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
1288
|
+
width: 100%;
|
|
1289
|
+
box-sizing: border-box;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
.option-card:hover {
|
|
1293
|
+
border-color: var(--glatam-primary, #5856d6);
|
|
1294
|
+
background: var(--glatam-primary-light, rgba(88, 86, 214, 0.06));
|
|
1295
|
+
transform: translateY(-1px);
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
.option-card:active {
|
|
1299
|
+
transform: scale(0.99);
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
.option-icon {
|
|
1303
|
+
font-size: 1.25rem;
|
|
1304
|
+
line-height: 1;
|
|
1305
|
+
margin-top: 2px;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
.option-text {
|
|
1309
|
+
display: flex;
|
|
1310
|
+
flex-direction: column;
|
|
1311
|
+
gap: 3px;
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
.option-title {
|
|
1315
|
+
font-size: 0.92rem;
|
|
1316
|
+
font-weight: 600;
|
|
1317
|
+
color: var(--glatam-text, #1d1d1f);
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
.option-desc {
|
|
1321
|
+
font-size: 0.8rem;
|
|
1322
|
+
color: var(--glatam-text-secondary, #86868b);
|
|
1323
|
+
line-height: 1.35;
|
|
1324
|
+
}
|
|
1325
|
+
|
|
1326
|
+
.actions {
|
|
1327
|
+
display: flex;
|
|
1328
|
+
justify-content: flex-end;
|
|
1329
|
+
margin-top: 4px;
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
.btn-cancel {
|
|
1333
|
+
padding: 10px 18px;
|
|
1334
|
+
border-radius: 10px;
|
|
1335
|
+
border: 1px solid var(--glatam-border, #e5e5ea);
|
|
1336
|
+
background: var(--glatam-surface, #f5f5f7);
|
|
1337
|
+
color: var(--glatam-text, #1d1d1f);
|
|
1338
|
+
font-weight: 500;
|
|
1339
|
+
font-size: 0.88rem;
|
|
1340
|
+
cursor: pointer;
|
|
1341
|
+
transition: background 0.15s ease;
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
.btn-cancel:hover {
|
|
1345
|
+
background: var(--glatam-border, #e5e5ea);
|
|
1346
|
+
}
|
|
1347
|
+
`;
|
|
1348
|
+
var ot = Object.defineProperty, st = Object.getOwnPropertyDescriptor, N = (e, t, a, r) => {
|
|
1349
|
+
for (var i = r > 1 ? void 0 : r ? st(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
1350
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
1351
|
+
return r && i && ot(t, a, i), i;
|
|
1352
|
+
};
|
|
1353
|
+
let C = class extends T {
|
|
1354
|
+
constructor() {
|
|
1355
|
+
super(...arguments), this.open = !1, this.dateString = "", this.targetRule = null;
|
|
1356
|
+
}
|
|
1357
|
+
updated(e) {
|
|
1358
|
+
var t;
|
|
1359
|
+
if (e.has("open")) {
|
|
1360
|
+
const a = (t = this.shadowRoot) == null ? void 0 : t.getElementById("series-dialog");
|
|
1361
|
+
a && (this.open ? a.open || a.showModal() : a.open && a.close());
|
|
1362
|
+
}
|
|
1363
|
+
}
|
|
1364
|
+
handleDialogClose() {
|
|
1365
|
+
this.open && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
|
|
1366
|
+
}
|
|
1367
|
+
handleSelectOption(e) {
|
|
1368
|
+
this.targetRule && this.dispatchEvent(
|
|
1369
|
+
new CustomEvent("confirm-action", {
|
|
1370
|
+
detail: {
|
|
1371
|
+
actionType: e,
|
|
1372
|
+
dateString: this.dateString,
|
|
1373
|
+
targetRule: this.targetRule
|
|
1374
|
+
},
|
|
1375
|
+
bubbles: !0,
|
|
1376
|
+
composed: !0
|
|
1377
|
+
})
|
|
1378
|
+
);
|
|
1379
|
+
}
|
|
1380
|
+
render() {
|
|
1381
|
+
var t;
|
|
1382
|
+
const e = ((t = this.targetRule) == null ? void 0 : t.description) || "Bloqueo recurrente";
|
|
1383
|
+
return c`
|
|
1384
|
+
<dialog id="series-dialog" @close=${this.handleDialogClose}>
|
|
1385
|
+
<div class="confirmation-container">
|
|
1386
|
+
<div class="header">
|
|
1387
|
+
<h3 class="title">¿Eliminar bloqueo recurrente?</h3>
|
|
1388
|
+
<p class="subtitle">
|
|
1389
|
+
Este horario pertenece a una regla con patrón de repetición semanal.
|
|
1390
|
+
</p>
|
|
1391
|
+
<div class="rule-badge">
|
|
1392
|
+
<span>📅 ${this.dateString}</span> • <span>${e}</span>
|
|
1393
|
+
</div>
|
|
1394
|
+
</div>
|
|
1395
|
+
|
|
1396
|
+
<div class="options-group">
|
|
1397
|
+
<button
|
|
1398
|
+
type="button"
|
|
1399
|
+
class="option-card"
|
|
1400
|
+
@click=${() => this.handleSelectOption("delete_instance")}
|
|
1401
|
+
title="Anular la regla solo en esta fecha"
|
|
1402
|
+
>
|
|
1403
|
+
<span class="option-icon">🗓️</span>
|
|
1404
|
+
<div class="option-text">
|
|
1405
|
+
<span class="option-title">Eliminar / Liberar solo este día</span>
|
|
1406
|
+
<span class="option-desc">
|
|
1407
|
+
Libera el horario exclusivamente para el ${this.dateString}. El resto de semanas continuarán bloqueadas.
|
|
1408
|
+
</span>
|
|
1409
|
+
</div>
|
|
1410
|
+
</button>
|
|
1411
|
+
|
|
1412
|
+
<button
|
|
1413
|
+
type="button"
|
|
1414
|
+
class="option-card"
|
|
1415
|
+
@click=${() => this.handleSelectOption("delete_series")}
|
|
1416
|
+
title="Eliminar la regla semanal completa"
|
|
1417
|
+
>
|
|
1418
|
+
<span class="option-icon">🔄</span>
|
|
1419
|
+
<div class="option-text">
|
|
1420
|
+
<span class="option-title">Eliminar toda la serie recurrente</span>
|
|
1421
|
+
<span class="option-desc">
|
|
1422
|
+
Remueve la regla semanal completa, liberando este horario para todas las semanas pasadas y futuras.
|
|
1423
|
+
</span>
|
|
1424
|
+
</div>
|
|
1425
|
+
</button>
|
|
1426
|
+
</div>
|
|
1427
|
+
|
|
1428
|
+
<div class="actions">
|
|
1429
|
+
<button
|
|
1430
|
+
type="button"
|
|
1431
|
+
class="btn-cancel"
|
|
1432
|
+
@click=${() => this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }))}
|
|
1433
|
+
>
|
|
1434
|
+
Cancelar
|
|
1435
|
+
</button>
|
|
1436
|
+
</div>
|
|
1437
|
+
</div>
|
|
1438
|
+
</dialog>
|
|
1439
|
+
`;
|
|
1440
|
+
}
|
|
1441
|
+
};
|
|
1442
|
+
C.styles = rt;
|
|
1443
|
+
N([
|
|
1444
|
+
l({ type: Boolean })
|
|
1445
|
+
], C.prototype, "open", 2);
|
|
1446
|
+
N([
|
|
1447
|
+
l({ type: String })
|
|
1448
|
+
], C.prototype, "dateString", 2);
|
|
1449
|
+
N([
|
|
1450
|
+
l({ type: Object })
|
|
1451
|
+
], C.prototype, "targetRule", 2);
|
|
1452
|
+
C = N([
|
|
1453
|
+
O("glatam-series-confirmation-modal")
|
|
1454
|
+
], C);
|
|
1455
|
+
var lt = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, p = (e, t, a, r) => {
|
|
1456
|
+
for (var i = r > 1 ? void 0 : r ? nt(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
1457
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
1458
|
+
return r && i && lt(t, a, i), i;
|
|
1163
1459
|
};
|
|
1164
|
-
const
|
|
1460
|
+
const dt = [
|
|
1165
1461
|
{ start: "09:00", end: "10:00" },
|
|
1166
1462
|
{ start: "10:00", end: "11:00" },
|
|
1167
1463
|
{ start: "11:00", end: "12:00" },
|
|
@@ -1172,92 +1468,112 @@ const Q = [
|
|
|
1172
1468
|
{ start: "16:00", end: "17:00" },
|
|
1173
1469
|
{ start: "17:00", end: "18:00" }
|
|
1174
1470
|
];
|
|
1175
|
-
let g = class extends
|
|
1471
|
+
let g = class extends T {
|
|
1176
1472
|
constructor() {
|
|
1177
|
-
super(...arguments), this.role = "provider", this.size = "medium", this.view = "month", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedDates = [], this.selectedRange = null, this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.slots =
|
|
1473
|
+
super(...arguments), this.role = "provider", this.size = "medium", this.view = "month", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedDates = [], this.selectedRange = null, this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.slots = dt, this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.enableSeriesConfirmation = !1, this.activeDate = /* @__PURE__ */ new Date(), this.localRules = [], this.darkMode = !1, this.modalOpen = !1, this.modalDateString = "", this.modalStartTime = "", this.modalEndTime = "", this.modalIsRange = !1, this.modalExistingRule = null, this.seriesModalOpen = !1, this.seriesTargetRule = null, this.seriesTargetDateString = "";
|
|
1178
1474
|
}
|
|
1179
1475
|
firstUpdated() {
|
|
1180
1476
|
this.darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, this.localRules = [...this.rules];
|
|
1181
1477
|
}
|
|
1182
|
-
willUpdate(
|
|
1183
|
-
|
|
1478
|
+
willUpdate(e) {
|
|
1479
|
+
e.has("rules") && this.rules !== this.localRules && (this.localRules = [...this.rules || []]);
|
|
1184
1480
|
}
|
|
1185
|
-
updated(
|
|
1186
|
-
|
|
1481
|
+
updated(e) {
|
|
1482
|
+
e.has("darkMode") && this.classList.toggle("dark-mode", this.darkMode);
|
|
1187
1483
|
}
|
|
1188
1484
|
handlePrev() {
|
|
1189
|
-
const
|
|
1190
|
-
this.view === "month" ?
|
|
1485
|
+
const e = new Date(this.activeDate);
|
|
1486
|
+
this.view === "month" ? e.setMonth(e.getMonth() - 1) : this.view === "week" ? e.setDate(e.getDate() - 7) : e.setDate(e.getDate() - 1), this.activeDate = e;
|
|
1191
1487
|
}
|
|
1192
1488
|
handleNext() {
|
|
1193
|
-
const
|
|
1194
|
-
this.view === "month" ?
|
|
1489
|
+
const e = new Date(this.activeDate);
|
|
1490
|
+
this.view === "month" ? e.setMonth(e.getMonth() + 1) : this.view === "week" ? e.setDate(e.getDate() + 7) : e.setDate(e.getDate() + 1), this.activeDate = e;
|
|
1195
1491
|
}
|
|
1196
1492
|
getHeaderTitle() {
|
|
1197
|
-
const
|
|
1198
|
-
return new Intl.DateTimeFormat(this.locale,
|
|
1199
|
-
}
|
|
1200
|
-
handleDaySelect(
|
|
1201
|
-
const { dateString:
|
|
1202
|
-
this.role === "buyer" && a || (this.activeDate =
|
|
1203
|
-
}
|
|
1204
|
-
handleRangeSelect(
|
|
1205
|
-
var
|
|
1206
|
-
const { dateString:
|
|
1207
|
-
if (this.role === "buyer" && o &&
|
|
1208
|
-
const
|
|
1493
|
+
const e = this.view === "month" ? { month: "long", year: "numeric" } : this.view === "week" ? { month: "short", year: "numeric" } : { day: "numeric", month: "long", year: "numeric" };
|
|
1494
|
+
return new Intl.DateTimeFormat(this.locale, e).format(this.activeDate);
|
|
1495
|
+
}
|
|
1496
|
+
handleDaySelect(e) {
|
|
1497
|
+
const { dateString: t, isBlocked: a } = e.detail;
|
|
1498
|
+
this.role === "buyer" && a || (this.activeDate = P(t), this.view = "day", this.dispatchEvent(new CustomEvent("date-selected", { detail: { dateString: t }, bubbles: !0, composed: !0 })));
|
|
1499
|
+
}
|
|
1500
|
+
handleRangeSelect(e) {
|
|
1501
|
+
var W, U;
|
|
1502
|
+
const { dateString: t, start: a, end: r } = e.detail, i = this.activeTimezone === "local" ? B(this.activeDate, this.hostTimezone, "local") : 0, s = z(/* @__PURE__ */ new Date()), o = this.minDate || (this.role === "buyer" ? s : "");
|
|
1503
|
+
if (this.role === "buyer" && (o && t < o || this.maxDate && t > this.maxDate)) return;
|
|
1504
|
+
const u = this.getDisplaySlots(i), n = a.split(" ")[0], d = r.split(" ")[0], h = u.findIndex((j) => j.start.startsWith(n)), y = u.findIndex((j) => j.end.startsWith(d)), f = ((W = this.slots[h]) == null ? void 0 : W.start) || n, I = ((U = this.slots[y]) == null ? void 0 : U.end) || d;
|
|
1209
1505
|
if (this.role === "buyer") {
|
|
1210
|
-
this.selectedRange = { dateString:
|
|
1506
|
+
this.selectedRange = { dateString: t, start: n, end: d }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: n, end: d, hostStart: f, hostEnd: I }, bubbles: !0, composed: !0 }));
|
|
1211
1507
|
return;
|
|
1212
1508
|
}
|
|
1213
|
-
this.openModal(
|
|
1509
|
+
this.openModal(t, f, I, !0, null);
|
|
1214
1510
|
}
|
|
1215
|
-
handleSlotClick(
|
|
1216
|
-
const { dateString:
|
|
1217
|
-
if (this.role === "buyer" && (a.isBlocked || o &&
|
|
1218
|
-
const
|
|
1511
|
+
handleSlotClick(e) {
|
|
1512
|
+
const { dateString: t, slot: a } = e.detail, r = P(t), i = this.activeTimezone === "local" ? B(this.activeDate, this.hostTimezone, "local") : 0, s = z(/* @__PURE__ */ new Date()), o = this.minDate || (this.role === "buyer" ? s : "");
|
|
1513
|
+
if (this.role === "buyer" && (a.isBlocked || o && t < o || this.maxDate && t > this.maxDate)) return;
|
|
1514
|
+
const u = this.getDisplaySlots(i), n = a.start.split(" ")[0], d = u.findIndex((f) => f.start.startsWith(n)), h = this.slots[d] || a;
|
|
1219
1515
|
if (this.role === "buyer") {
|
|
1220
|
-
this.selectedRange = { dateString:
|
|
1516
|
+
this.selectedRange = { dateString: t, start: a.start, end: a.end }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a.start, end: a.end, hostStart: h.start, hostEnd: h.end }, bubbles: !0, composed: !0 }));
|
|
1221
1517
|
return;
|
|
1222
1518
|
}
|
|
1223
|
-
const
|
|
1224
|
-
this.openModal(
|
|
1519
|
+
const y = this.localRules.find((f) => _(r, h, [f]));
|
|
1520
|
+
this.openModal(t, h.start, h.end, !0, y || null);
|
|
1225
1521
|
}
|
|
1226
1522
|
handleBlockDayAction() {
|
|
1227
|
-
const
|
|
1228
|
-
this.openModal(
|
|
1523
|
+
const e = z(this.activeDate), t = this.localRules.find((a) => _(this.activeDate, void 0, [a]));
|
|
1524
|
+
this.openModal(e, "", "", !1, t || null);
|
|
1229
1525
|
}
|
|
1230
|
-
openModal(
|
|
1231
|
-
this.modalDateString =
|
|
1526
|
+
openModal(e, t, a, r, i) {
|
|
1527
|
+
this.modalDateString = e, this.modalStartTime = t, this.modalEndTime = a, this.modalIsRange = r, this.modalExistingRule = i, this.modalOpen = !0;
|
|
1232
1528
|
}
|
|
1233
|
-
handleSaveRule(
|
|
1234
|
-
|
|
1529
|
+
handleSaveRule(e) {
|
|
1530
|
+
var s;
|
|
1531
|
+
const t = e.detail, a = this.modalExistingRule ? this.modalExistingRule.id : `rule-${Date.now()}`, r = {
|
|
1235
1532
|
id: a,
|
|
1236
|
-
type:
|
|
1237
|
-
slots:
|
|
1238
|
-
daysOfWeek:
|
|
1239
|
-
startDate:
|
|
1240
|
-
endDate:
|
|
1241
|
-
description:
|
|
1242
|
-
|
|
1243
|
-
|
|
1533
|
+
type: t.isRecurring ? "weekly" : "date-range",
|
|
1534
|
+
slots: t.blockAllDay ? void 0 : [{ start: t.startTime, end: t.endTime }],
|
|
1535
|
+
daysOfWeek: t.isRecurring ? t.selectedDays : void 0,
|
|
1536
|
+
startDate: t.isRecurring ? void 0 : t.dateString,
|
|
1537
|
+
endDate: t.isRecurring ? void 0 : t.dateString,
|
|
1538
|
+
description: t.title,
|
|
1539
|
+
exceptions: (s = this.modalExistingRule) == null ? void 0 : s.exceptions
|
|
1540
|
+
}, i = this.modalExistingRule ? this.localRules.map((o) => o.id === a ? r : o) : [...this.localRules, r];
|
|
1541
|
+
this.localRules = i, this.rules = i, this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: i }, bubbles: !0, composed: !0 }));
|
|
1542
|
+
}
|
|
1543
|
+
handleDeleteRule(e) {
|
|
1544
|
+
const t = e.detail.rule || this.localRules.find((s) => s.id === e.detail.id), a = e.detail.dateString || this.modalDateString;
|
|
1545
|
+
if (this.enableSeriesConfirmation && t && t.type === "weekly") {
|
|
1546
|
+
this.modalOpen = !1, this.seriesTargetRule = t, this.seriesTargetDateString = a, this.seriesModalOpen = !0;
|
|
1547
|
+
return;
|
|
1548
|
+
}
|
|
1549
|
+
const { updatedRules: r, targetRule: i } = F(this.localRules, e.detail.id);
|
|
1550
|
+
if (this.localRules = r, this.rules = r, this.modalOpen = !1, i) {
|
|
1551
|
+
const s = { actionType: "delete_series", targetRule: i, dateString: a, updatedRules: r };
|
|
1552
|
+
this.dispatchEvent(new CustomEvent("rule-action-triggered", { detail: s, bubbles: !0, composed: !0 }));
|
|
1553
|
+
}
|
|
1554
|
+
this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: r }, bubbles: !0, composed: !0 }));
|
|
1244
1555
|
}
|
|
1245
|
-
|
|
1246
|
-
|
|
1556
|
+
handleConfirmSeriesAction(e) {
|
|
1557
|
+
const { actionType: t, dateString: a, targetRule: r } = e.detail, { updatedRules: i, targetRule: s } = t === "delete_instance" ? V(this.localRules, r.id, a) : F(this.localRules, r.id);
|
|
1558
|
+
if (this.localRules = i, this.rules = i, this.seriesModalOpen = !1, s) {
|
|
1559
|
+
const o = { actionType: t, targetRule: s, dateString: a, updatedRules: i };
|
|
1560
|
+
this.dispatchEvent(new CustomEvent("rule-action-triggered", { detail: o, bubbles: !0, composed: !0 }));
|
|
1561
|
+
}
|
|
1562
|
+
this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: i }, bubbles: !0, composed: !0 }));
|
|
1247
1563
|
}
|
|
1248
|
-
getDisplaySlots(
|
|
1249
|
-
return
|
|
1250
|
-
const a =
|
|
1251
|
-
return { start: a.start +
|
|
1564
|
+
getDisplaySlots(e) {
|
|
1565
|
+
return e === 0 ? this.slots : this.slots.map((t) => {
|
|
1566
|
+
const a = H(t, e), r = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
|
|
1567
|
+
return { start: a.start + r, end: a.end + r };
|
|
1252
1568
|
});
|
|
1253
1569
|
}
|
|
1254
1570
|
render() {
|
|
1255
|
-
var
|
|
1256
|
-
const
|
|
1257
|
-
var
|
|
1258
|
-
return { ...
|
|
1259
|
-
}) })), o = ((
|
|
1260
|
-
return
|
|
1571
|
+
var u;
|
|
1572
|
+
const e = this.activeDate.getFullYear(), t = this.activeDate.getMonth(), a = _(this.activeDate, void 0, this.localRules), r = this.activeTimezone === "local" ? B(this.activeDate, this.hostTimezone, "local") : 0, i = this.getDisplaySlots(r), s = (n) => n.map((d) => ({ ...d, slots: d.slots.map((h, y) => {
|
|
1573
|
+
var f, I;
|
|
1574
|
+
return { ...h, start: ((f = i[y]) == null ? void 0 : f.start) || h.start, end: ((I = i[y]) == null ? void 0 : I.end) || h.end };
|
|
1575
|
+
}) })), o = ((u = this.hostTimezone.split("/").pop()) == null ? void 0 : u.replace("_", " ")) || "Anfitrión";
|
|
1576
|
+
return c`
|
|
1261
1577
|
<div class="calendar-header">
|
|
1262
1578
|
<div class="nav-group">
|
|
1263
1579
|
<button class="btn" @click=${() => this.activeDate = /* @__PURE__ */ new Date()}>Hoy</button>
|
|
@@ -1267,7 +1583,7 @@ let g = class extends E {
|
|
|
1267
1583
|
</div>
|
|
1268
1584
|
|
|
1269
1585
|
<div class="view-group">
|
|
1270
|
-
${this.role === "provider" ?
|
|
1586
|
+
${this.role === "provider" ? c`
|
|
1271
1587
|
<div class="timezone-badge">
|
|
1272
1588
|
🌐 Zona:
|
|
1273
1589
|
<select class="timezone-select" @change=${(n) => this.activeTimezone = n.target.value}>
|
|
@@ -1276,7 +1592,7 @@ let g = class extends E {
|
|
|
1276
1592
|
</select>
|
|
1277
1593
|
</div>
|
|
1278
1594
|
` : ""}
|
|
1279
|
-
${this.role === "provider" && this.view === "day" ?
|
|
1595
|
+
${this.role === "provider" && this.view === "day" ? c`<button class="btn btn-primary" @click=${this.handleBlockDayAction} style="margin-right: 8px;">${a ? "Liberar Día" : "Bloquear Día"}</button>` : ""}
|
|
1280
1596
|
<button class="btn" @click=${() => this.darkMode = !this.darkMode} style="margin-right: 8px;">${this.darkMode ? "☀️" : "🌙"}</button>
|
|
1281
1597
|
<div class="btn-group">
|
|
1282
1598
|
<button class="btn ${this.view === "month" ? "active" : ""}" @click=${() => this.view = "month"}>Mes</button>
|
|
@@ -1287,7 +1603,7 @@ let g = class extends E {
|
|
|
1287
1603
|
</div>
|
|
1288
1604
|
|
|
1289
1605
|
<div class="calendar-body">
|
|
1290
|
-
${this.view === "month" ?
|
|
1606
|
+
${this.view === "month" ? c`<glatam-calendar-month-view .days=${Y(e, t, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === "buyer" ? z(/* @__PURE__ */ new Date()) : "")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? c`<glatam-calendar-week-view .days=${s(L(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${i} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} .minDate=${this.minDate || (this.role === "buyer" ? z(/* @__PURE__ */ new Date()) : "")} .maxDate=${this.maxDate} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : c`<glatam-calendar-day-view .day=${s(L(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === z(this.activeDate)) || null} .slots=${i} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} .minDate=${this.minDate || (this.role === "buyer" ? z(/* @__PURE__ */ new Date()) : "")} .maxDate=${this.maxDate} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
|
|
1291
1607
|
</div>
|
|
1292
1608
|
|
|
1293
1609
|
<glatam-calendar-modal
|
|
@@ -1295,91 +1611,159 @@ let g = class extends E {
|
|
|
1295
1611
|
.isRange=${this.modalIsRange} .existingRule=${this.modalExistingRule} @save-rule=${this.handleSaveRule}
|
|
1296
1612
|
@delete-rule=${this.handleDeleteRule} @close=${() => this.modalOpen = !1}
|
|
1297
1613
|
></glatam-calendar-modal>
|
|
1614
|
+
|
|
1615
|
+
<glatam-series-confirmation-modal
|
|
1616
|
+
.open=${this.seriesModalOpen} .dateString=${this.seriesTargetDateString} .targetRule=${this.seriesTargetRule}
|
|
1617
|
+
@confirm-action=${this.handleConfirmSeriesAction} @close=${() => this.seriesModalOpen = !1}
|
|
1618
|
+
></glatam-series-confirmation-modal>
|
|
1298
1619
|
`;
|
|
1299
1620
|
}
|
|
1300
1621
|
};
|
|
1301
|
-
g.styles = [
|
|
1622
|
+
g.styles = [q, G];
|
|
1302
1623
|
p([
|
|
1303
|
-
|
|
1624
|
+
l({ type: String })
|
|
1304
1625
|
], g.prototype, "role", 2);
|
|
1305
1626
|
p([
|
|
1306
|
-
|
|
1627
|
+
l({ type: String, reflect: !0 })
|
|
1307
1628
|
], g.prototype, "size", 2);
|
|
1308
1629
|
p([
|
|
1309
|
-
|
|
1630
|
+
l({ type: String })
|
|
1310
1631
|
], g.prototype, "view", 2);
|
|
1311
1632
|
p([
|
|
1312
|
-
|
|
1633
|
+
l({ type: String })
|
|
1313
1634
|
], g.prototype, "locale", 2);
|
|
1314
1635
|
p([
|
|
1315
|
-
|
|
1636
|
+
l({ type: Number })
|
|
1316
1637
|
], g.prototype, "startOfWeekDay", 2);
|
|
1317
1638
|
p([
|
|
1318
|
-
|
|
1639
|
+
l({ type: Array })
|
|
1319
1640
|
], g.prototype, "rules", 2);
|
|
1320
1641
|
p([
|
|
1321
|
-
|
|
1642
|
+
l({ type: Array })
|
|
1322
1643
|
], g.prototype, "selectedDates", 2);
|
|
1323
1644
|
p([
|
|
1324
|
-
|
|
1645
|
+
l({ type: Object })
|
|
1325
1646
|
], g.prototype, "selectedRange", 2);
|
|
1326
1647
|
p([
|
|
1327
|
-
|
|
1648
|
+
l({ type: String })
|
|
1328
1649
|
], g.prototype, "hostTimezone", 2);
|
|
1329
1650
|
p([
|
|
1330
|
-
|
|
1651
|
+
l({ type: String })
|
|
1331
1652
|
], g.prototype, "activeTimezone", 2);
|
|
1332
1653
|
p([
|
|
1333
|
-
|
|
1654
|
+
l({ type: Array })
|
|
1334
1655
|
], g.prototype, "slots", 2);
|
|
1335
1656
|
p([
|
|
1336
|
-
|
|
1657
|
+
l({ type: String })
|
|
1337
1658
|
], g.prototype, "minDate", 2);
|
|
1338
1659
|
p([
|
|
1339
|
-
|
|
1660
|
+
l({ type: String })
|
|
1340
1661
|
], g.prototype, "maxDate", 2);
|
|
1341
1662
|
p([
|
|
1342
|
-
|
|
1663
|
+
l({ type: Boolean })
|
|
1343
1664
|
], g.prototype, "showNeighboringMonth", 2);
|
|
1344
1665
|
p([
|
|
1345
|
-
|
|
1666
|
+
l({ attribute: !1 })
|
|
1346
1667
|
], g.prototype, "tileClassName", 2);
|
|
1347
1668
|
p([
|
|
1348
|
-
|
|
1669
|
+
l({ type: Boolean, attribute: "enable-series-confirmation" })
|
|
1670
|
+
], g.prototype, "enableSeriesConfirmation", 2);
|
|
1671
|
+
p([
|
|
1672
|
+
m()
|
|
1349
1673
|
], g.prototype, "activeDate", 2);
|
|
1350
1674
|
p([
|
|
1351
|
-
|
|
1675
|
+
m()
|
|
1352
1676
|
], g.prototype, "localRules", 2);
|
|
1353
1677
|
p([
|
|
1354
|
-
|
|
1678
|
+
m()
|
|
1355
1679
|
], g.prototype, "darkMode", 2);
|
|
1356
1680
|
p([
|
|
1357
|
-
|
|
1681
|
+
m()
|
|
1358
1682
|
], g.prototype, "modalOpen", 2);
|
|
1359
1683
|
p([
|
|
1360
|
-
|
|
1684
|
+
m()
|
|
1361
1685
|
], g.prototype, "modalDateString", 2);
|
|
1362
1686
|
p([
|
|
1363
|
-
|
|
1687
|
+
m()
|
|
1364
1688
|
], g.prototype, "modalStartTime", 2);
|
|
1365
1689
|
p([
|
|
1366
|
-
|
|
1690
|
+
m()
|
|
1367
1691
|
], g.prototype, "modalEndTime", 2);
|
|
1368
1692
|
p([
|
|
1369
|
-
|
|
1693
|
+
m()
|
|
1370
1694
|
], g.prototype, "modalIsRange", 2);
|
|
1371
1695
|
p([
|
|
1372
|
-
|
|
1696
|
+
m()
|
|
1373
1697
|
], g.prototype, "modalExistingRule", 2);
|
|
1698
|
+
p([
|
|
1699
|
+
m()
|
|
1700
|
+
], g.prototype, "seriesModalOpen", 2);
|
|
1701
|
+
p([
|
|
1702
|
+
m()
|
|
1703
|
+
], g.prototype, "seriesTargetRule", 2);
|
|
1704
|
+
p([
|
|
1705
|
+
m()
|
|
1706
|
+
], g.prototype, "seriesTargetDateString", 2);
|
|
1374
1707
|
g = p([
|
|
1375
|
-
|
|
1708
|
+
O("glatam-calendar")
|
|
1376
1709
|
], g);
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1710
|
+
const ct = M`
|
|
1711
|
+
:host {
|
|
1712
|
+
display: inline-block;
|
|
1713
|
+
background: transparent;
|
|
1714
|
+
border: none;
|
|
1715
|
+
padding: 0;
|
|
1716
|
+
box-shadow: none;
|
|
1717
|
+
width: 100%;
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
.mini-calendar-header {
|
|
1721
|
+
display: flex;
|
|
1722
|
+
justify-content: space-between;
|
|
1723
|
+
align-items: center;
|
|
1724
|
+
padding: 4px 8px;
|
|
1725
|
+
margin-bottom: 8px;
|
|
1726
|
+
user-select: none;
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.mini-month-title {
|
|
1730
|
+
font-size: 0.875rem;
|
|
1731
|
+
font-weight: 600;
|
|
1732
|
+
color: var(--glatam-text);
|
|
1733
|
+
text-transform: capitalize;
|
|
1734
|
+
letter-spacing: -0.01em;
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
.mini-nav-btn {
|
|
1738
|
+
background: transparent;
|
|
1739
|
+
border: 1px solid var(--glatam-border);
|
|
1740
|
+
border-radius: 8px;
|
|
1741
|
+
color: var(--glatam-text);
|
|
1742
|
+
width: 28px;
|
|
1743
|
+
height: 28px;
|
|
1744
|
+
display: flex;
|
|
1745
|
+
align-items: center;
|
|
1746
|
+
justify-content: center;
|
|
1747
|
+
cursor: pointer;
|
|
1748
|
+
font-size: 0.75rem;
|
|
1749
|
+
transition: background-color var(--glatam-transition-fast), border-color var(--glatam-transition-fast), transform var(--glatam-transition-fast);
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1752
|
+
.mini-nav-btn:hover:not(:disabled) {
|
|
1753
|
+
background-color: var(--glatam-surface);
|
|
1754
|
+
border-color: var(--glatam-text-secondary);
|
|
1755
|
+
}
|
|
1756
|
+
|
|
1757
|
+
.mini-nav-btn:active:not(:disabled) {
|
|
1758
|
+
transform: scale(0.95);
|
|
1759
|
+
}
|
|
1760
|
+
`;
|
|
1761
|
+
var gt = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, v = (e, t, a, r) => {
|
|
1762
|
+
for (var i = r > 1 ? void 0 : r ? pt(t, a) : t, s = e.length - 1, o; s >= 0; s--)
|
|
1763
|
+
(o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
|
|
1764
|
+
return r && i && gt(t, a, i), i;
|
|
1381
1765
|
};
|
|
1382
|
-
let b = class extends
|
|
1766
|
+
let b = class extends T {
|
|
1383
1767
|
constructor() {
|
|
1384
1768
|
super(...arguments), this.role = "buyer", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedRange = null, this.size = "medium", this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.slots = [
|
|
1385
1769
|
{ start: "09:00", end: "10:00" },
|
|
@@ -1393,239 +1777,153 @@ let b = class extends E {
|
|
|
1393
1777
|
{ start: "17:00", end: "18:00" }
|
|
1394
1778
|
], this.activeDate = /* @__PURE__ */ new Date(), this.dropdownOpen = !1, this.dropdownSelectedDateString = "", this.touchStartX = 0, this.touchStartY = 0;
|
|
1395
1779
|
}
|
|
1396
|
-
handlePrevMonth(
|
|
1397
|
-
|
|
1398
|
-
const
|
|
1399
|
-
|
|
1780
|
+
handlePrevMonth(e) {
|
|
1781
|
+
e.stopPropagation();
|
|
1782
|
+
const t = new Date(this.activeDate);
|
|
1783
|
+
t.setMonth(t.getMonth() - 1), this.activeDate = t;
|
|
1400
1784
|
}
|
|
1401
|
-
handleNextMonth(
|
|
1402
|
-
|
|
1403
|
-
const
|
|
1404
|
-
|
|
1785
|
+
handleNextMonth(e) {
|
|
1786
|
+
e.stopPropagation();
|
|
1787
|
+
const t = new Date(this.activeDate);
|
|
1788
|
+
t.setMonth(t.getMonth() + 1), this.activeDate = t;
|
|
1405
1789
|
}
|
|
1406
|
-
handleTouchStart(
|
|
1407
|
-
|
|
1790
|
+
handleTouchStart(e) {
|
|
1791
|
+
e.touches && e.touches.length > 0 && (this.touchStartX = e.touches[0].clientX, this.touchStartY = e.touches[0].clientY);
|
|
1408
1792
|
}
|
|
1409
|
-
handleTouchEnd(
|
|
1410
|
-
if (
|
|
1411
|
-
const
|
|
1412
|
-
Math.abs(
|
|
1793
|
+
handleTouchEnd(e) {
|
|
1794
|
+
if (e.changedTouches && e.changedTouches.length > 0) {
|
|
1795
|
+
const t = this.touchStartX - e.changedTouches[0].clientX, a = this.touchStartY - e.changedTouches[0].clientY;
|
|
1796
|
+
Math.abs(t) > 50 && Math.abs(t) > Math.abs(a) && (t > 0 ? this.handleNextMonth(e) : this.handlePrevMonth(e));
|
|
1413
1797
|
}
|
|
1414
1798
|
}
|
|
1415
1799
|
getFormattedMonthTitle() {
|
|
1416
|
-
const
|
|
1417
|
-
return
|
|
1800
|
+
const e = this.activeDate.toLocaleDateString(this.locale || "es", { month: "long", year: "numeric" });
|
|
1801
|
+
return e.charAt(0).toUpperCase() + e.slice(1);
|
|
1418
1802
|
}
|
|
1419
|
-
handleDropdownDaySelect(
|
|
1420
|
-
this.dropdownSelectedDateString =
|
|
1803
|
+
handleDropdownDaySelect(e) {
|
|
1804
|
+
this.dropdownSelectedDateString = e.detail.dateString;
|
|
1421
1805
|
}
|
|
1422
|
-
selectDropdownSlot(
|
|
1423
|
-
const
|
|
1806
|
+
selectDropdownSlot(e) {
|
|
1807
|
+
const t = {
|
|
1424
1808
|
dateString: this.dropdownSelectedDateString,
|
|
1425
|
-
start:
|
|
1426
|
-
end:
|
|
1427
|
-
hostStart:
|
|
1428
|
-
hostEnd:
|
|
1809
|
+
start: e.displayStart,
|
|
1810
|
+
end: e.displayEnd,
|
|
1811
|
+
hostStart: e.start,
|
|
1812
|
+
hostEnd: e.end
|
|
1429
1813
|
};
|
|
1430
|
-
this.selectedRange = { dateString: this.dropdownSelectedDateString, start:
|
|
1814
|
+
this.selectedRange = { dateString: this.dropdownSelectedDateString, start: e.displayStart, end: e.displayEnd }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: t, bubbles: !0, composed: !0 })), this.dropdownOpen = !1, this.dropdownSelectedDateString = "";
|
|
1431
1815
|
}
|
|
1432
1816
|
render() {
|
|
1433
|
-
const
|
|
1434
|
-
const
|
|
1435
|
-
return {
|
|
1436
|
-
...o,
|
|
1437
|
-
displayStart: n.start + c,
|
|
1438
|
-
displayEnd: n.end + c,
|
|
1439
|
-
isBlocked: h
|
|
1440
|
-
};
|
|
1817
|
+
const e = this.selectedRange ? `Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})` : "Seleccionar Fecha y Hora", t = this.activeDate.getFullYear(), a = this.activeDate.getMonth(), r = this.dropdownSelectedDateString ? /* @__PURE__ */ new Date(this.dropdownSelectedDateString + "T00:00:00") : null, i = r && this.activeTimezone === "local" ? B(r, this.hostTimezone, "local") : 0, s = r ? this.slots.map((o) => {
|
|
1818
|
+
const u = _(r, o, this.rules), n = H(o, i), d = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
|
|
1819
|
+
return { ...o, displayStart: n.start + d, displayEnd: n.end + d, isBlocked: u };
|
|
1441
1820
|
}) : [];
|
|
1442
|
-
return
|
|
1821
|
+
return c`
|
|
1443
1822
|
<div class="dropdown-container">
|
|
1444
1823
|
<button class="btn btn-primary dropdown-toggle" @click=${() => this.dropdownOpen = !this.dropdownOpen}>
|
|
1445
|
-
<span>${
|
|
1824
|
+
<span>${e}</span> <span>${this.dropdownOpen ? "▲" : "▼"}</span>
|
|
1446
1825
|
</button>
|
|
1447
1826
|
|
|
1448
|
-
${this.dropdownOpen ?
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
</button>
|
|
1476
|
-
<span class="mini-month-title">
|
|
1477
|
-
${this.getFormattedMonthTitle()}
|
|
1478
|
-
</span>
|
|
1479
|
-
<button
|
|
1480
|
-
type="button"
|
|
1481
|
-
class="mini-nav-btn"
|
|
1482
|
-
aria-label="Mes siguiente"
|
|
1483
|
-
@click=${this.handleNextMonth}
|
|
1484
|
-
>
|
|
1485
|
-
>
|
|
1486
|
-
</button>
|
|
1487
|
-
</div>
|
|
1488
|
-
<div
|
|
1489
|
-
class="mini-calendar-touch-wrapper"
|
|
1490
|
-
@touchstart=${this.handleTouchStart}
|
|
1491
|
-
@touchend=${this.handleTouchEnd}
|
|
1492
|
-
>
|
|
1493
|
-
<glatam-calendar-month-view
|
|
1494
|
-
.days=${P(e, a, this.rules, this.slots, this.startOfWeekDay)}
|
|
1495
|
-
.locale=${this.locale}
|
|
1496
|
-
.startOfWeekDay=${this.startOfWeekDay}
|
|
1497
|
-
.role=${this.role}
|
|
1498
|
-
size="small"
|
|
1499
|
-
.minDate=${this.minDate}
|
|
1500
|
-
.maxDate=${this.maxDate}
|
|
1501
|
-
.showNeighboringMonth=${this.showNeighboringMonth}
|
|
1502
|
-
.tileClassName=${this.tileClassName}
|
|
1503
|
-
@day-select=${this.handleDropdownDaySelect}
|
|
1504
|
-
></glatam-calendar-month-view>
|
|
1505
|
-
</div>
|
|
1506
|
-
`}
|
|
1827
|
+
${this.dropdownOpen ? c`
|
|
1828
|
+
<div class="dropdown-card" style="--glatam-day-min-height: 38px;">
|
|
1829
|
+
${this.dropdownSelectedDateString ? c`
|
|
1830
|
+
<div style="display:flex; justify-space-between; align-items:center; border-bottom: 1px solid var(--glatam-border); padding-bottom:8px;">
|
|
1831
|
+
<button class="btn" style="height:28px; padding:0 8px; font-size:0.75rem;" @click=${() => this.dropdownSelectedDateString = ""}>< Volver</button>
|
|
1832
|
+
<span style="font-size:0.8rem; font-weight:600; color: var(--glatam-text);">${this.dropdownSelectedDateString}</span>
|
|
1833
|
+
</div>
|
|
1834
|
+
<div class="slot-list">
|
|
1835
|
+
${s.map((o) => c`
|
|
1836
|
+
<button class="slot-btn ${o.isBlocked ? "blocked" : ""}" ?disabled=${o.isBlocked} @click=${() => this.selectDropdownSlot(o)}>
|
|
1837
|
+
${o.displayStart} - ${o.displayEnd} ${o.isBlocked ? "(Ocupado)" : ""}
|
|
1838
|
+
</button>
|
|
1839
|
+
`)}
|
|
1840
|
+
</div>
|
|
1841
|
+
` : c`
|
|
1842
|
+
<div class="mini-calendar-header">
|
|
1843
|
+
<button type="button" class="mini-nav-btn" aria-label="Mes anterior" @click=${this.handlePrevMonth}><</button>
|
|
1844
|
+
<span class="mini-month-title">${this.getFormattedMonthTitle()}</span>
|
|
1845
|
+
<button type="button" class="mini-nav-btn" aria-label="Mes siguiente" @click=${this.handleNextMonth}>></button>
|
|
1846
|
+
</div>
|
|
1847
|
+
<div class="mini-calendar-touch-wrapper" @touchstart=${this.handleTouchStart} @touchend=${this.handleTouchEnd}>
|
|
1848
|
+
<glatam-calendar-month-view
|
|
1849
|
+
.days=${Y(t, a, this.rules, this.slots, this.startOfWeekDay)}
|
|
1850
|
+
.locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} size="small"
|
|
1851
|
+
.minDate=${this.minDate} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth}
|
|
1852
|
+
.tileClassName=${this.tileClassName} @day-select=${this.handleDropdownDaySelect}
|
|
1853
|
+
></glatam-calendar-month-view>
|
|
1507
1854
|
</div>
|
|
1508
|
-
`
|
|
1855
|
+
`}
|
|
1856
|
+
</div>
|
|
1857
|
+
` : ""}
|
|
1509
1858
|
</div>
|
|
1510
1859
|
`;
|
|
1511
1860
|
}
|
|
1512
1861
|
};
|
|
1513
|
-
b.styles = [
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
M`
|
|
1517
|
-
:host {
|
|
1518
|
-
display: inline-block;
|
|
1519
|
-
background: transparent;
|
|
1520
|
-
border: none;
|
|
1521
|
-
padding: 0;
|
|
1522
|
-
box-shadow: none;
|
|
1523
|
-
width: 100%;
|
|
1524
|
-
}
|
|
1525
|
-
|
|
1526
|
-
.mini-calendar-header {
|
|
1527
|
-
display: flex;
|
|
1528
|
-
justify-content: space-between;
|
|
1529
|
-
align-items: center;
|
|
1530
|
-
padding: 4px 8px;
|
|
1531
|
-
margin-bottom: 8px;
|
|
1532
|
-
user-select: none;
|
|
1533
|
-
}
|
|
1534
|
-
|
|
1535
|
-
.mini-month-title {
|
|
1536
|
-
font-size: 0.875rem;
|
|
1537
|
-
font-weight: 600;
|
|
1538
|
-
color: var(--glatam-text);
|
|
1539
|
-
text-transform: capitalize;
|
|
1540
|
-
letter-spacing: -0.01em;
|
|
1541
|
-
}
|
|
1542
|
-
|
|
1543
|
-
.mini-nav-btn {
|
|
1544
|
-
background: transparent;
|
|
1545
|
-
border: 1px solid var(--glatam-border);
|
|
1546
|
-
border-radius: 8px;
|
|
1547
|
-
color: var(--glatam-text);
|
|
1548
|
-
width: 28px;
|
|
1549
|
-
height: 28px;
|
|
1550
|
-
display: flex;
|
|
1551
|
-
align-items: center;
|
|
1552
|
-
justify-content: center;
|
|
1553
|
-
cursor: pointer;
|
|
1554
|
-
font-size: 0.75rem;
|
|
1555
|
-
transition: background-color var(--glatam-transition-fast), border-color var(--glatam-transition-fast), transform var(--glatam-transition-fast);
|
|
1556
|
-
}
|
|
1557
|
-
|
|
1558
|
-
.mini-nav-btn:hover:not(:disabled) {
|
|
1559
|
-
background-color: var(--glatam-surface);
|
|
1560
|
-
border-color: var(--glatam-text-secondary);
|
|
1561
|
-
}
|
|
1562
|
-
|
|
1563
|
-
.mini-nav-btn:active:not(:disabled) {
|
|
1564
|
-
transform: scale(0.95);
|
|
1565
|
-
}
|
|
1566
|
-
`
|
|
1567
|
-
];
|
|
1568
|
-
y([
|
|
1569
|
-
s({ type: String })
|
|
1862
|
+
b.styles = [q, G, ct];
|
|
1863
|
+
v([
|
|
1864
|
+
l({ type: String })
|
|
1570
1865
|
], b.prototype, "role", 2);
|
|
1571
|
-
|
|
1572
|
-
|
|
1866
|
+
v([
|
|
1867
|
+
l({ type: String })
|
|
1573
1868
|
], b.prototype, "locale", 2);
|
|
1574
|
-
|
|
1575
|
-
|
|
1869
|
+
v([
|
|
1870
|
+
l({ type: Number })
|
|
1576
1871
|
], b.prototype, "startOfWeekDay", 2);
|
|
1577
|
-
|
|
1578
|
-
|
|
1872
|
+
v([
|
|
1873
|
+
l({ type: Array })
|
|
1579
1874
|
], b.prototype, "rules", 2);
|
|
1580
|
-
|
|
1581
|
-
|
|
1875
|
+
v([
|
|
1876
|
+
l({ type: Object })
|
|
1582
1877
|
], b.prototype, "selectedRange", 2);
|
|
1583
|
-
|
|
1584
|
-
|
|
1878
|
+
v([
|
|
1879
|
+
l({ type: String, reflect: !0 })
|
|
1585
1880
|
], b.prototype, "size", 2);
|
|
1586
|
-
|
|
1587
|
-
|
|
1881
|
+
v([
|
|
1882
|
+
l({ type: String })
|
|
1588
1883
|
], b.prototype, "hostTimezone", 2);
|
|
1589
|
-
|
|
1590
|
-
|
|
1884
|
+
v([
|
|
1885
|
+
l({ type: String })
|
|
1591
1886
|
], b.prototype, "activeTimezone", 2);
|
|
1592
|
-
|
|
1593
|
-
|
|
1887
|
+
v([
|
|
1888
|
+
l({ type: String })
|
|
1594
1889
|
], b.prototype, "minDate", 2);
|
|
1595
|
-
|
|
1596
|
-
|
|
1890
|
+
v([
|
|
1891
|
+
l({ type: String })
|
|
1597
1892
|
], b.prototype, "maxDate", 2);
|
|
1598
|
-
|
|
1599
|
-
|
|
1893
|
+
v([
|
|
1894
|
+
l({ type: Boolean })
|
|
1600
1895
|
], b.prototype, "showNeighboringMonth", 2);
|
|
1601
|
-
|
|
1602
|
-
|
|
1896
|
+
v([
|
|
1897
|
+
l({ attribute: !1 })
|
|
1603
1898
|
], b.prototype, "tileClassName", 2);
|
|
1604
|
-
|
|
1605
|
-
|
|
1899
|
+
v([
|
|
1900
|
+
l({ type: Array })
|
|
1606
1901
|
], b.prototype, "slots", 2);
|
|
1607
|
-
|
|
1608
|
-
|
|
1902
|
+
v([
|
|
1903
|
+
m()
|
|
1609
1904
|
], b.prototype, "activeDate", 2);
|
|
1610
|
-
|
|
1611
|
-
|
|
1905
|
+
v([
|
|
1906
|
+
m()
|
|
1612
1907
|
], b.prototype, "dropdownOpen", 2);
|
|
1613
|
-
|
|
1614
|
-
|
|
1908
|
+
v([
|
|
1909
|
+
m()
|
|
1615
1910
|
], b.prototype, "dropdownSelectedDateString", 2);
|
|
1616
|
-
b =
|
|
1617
|
-
|
|
1911
|
+
b = v([
|
|
1912
|
+
O("glatam-calendar-mini")
|
|
1618
1913
|
], b);
|
|
1619
1914
|
export {
|
|
1620
1915
|
g as GlatamCalendar,
|
|
1621
1916
|
S as GlatamCalendarDayView,
|
|
1622
1917
|
b as GlatamCalendarMini,
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1918
|
+
D as GlatamCalendarModal,
|
|
1919
|
+
w as GlatamCalendarMonthView,
|
|
1920
|
+
x as GlatamCalendarWeekView,
|
|
1921
|
+
C as GlatamSeriesConfirmationModal,
|
|
1922
|
+
G as calendarStyles,
|
|
1923
|
+
F as deleteSeries,
|
|
1924
|
+
V as deleteSingleInstance,
|
|
1925
|
+
yt as formatISODate,
|
|
1926
|
+
xt as isTimeBlocked,
|
|
1927
|
+
wt as parseISODate,
|
|
1928
|
+
q as variablesStyles
|
|
1631
1929
|
};
|