@glatam/calendar-ui 1.0.4 → 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/README.md +5 -1
- 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 +7 -0
- package/dist/glatam-calendar-mini.d.ts.map +1 -1
- package/dist/glatam-calendar.cjs +321 -80
- package/dist/glatam-calendar.d.ts +5 -0
- package/dist/glatam-calendar.d.ts.map +1 -1
- package/dist/glatam-calendar.js +825 -437
- 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.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),i=require("lit/decorators.js"),m=require("@glatam/calendar-core"),R=require("lit/directives/class-map.js"),G=s.css`
|
|
2
2
|
:host {
|
|
3
3
|
/* Fonts */
|
|
4
4
|
--glatam-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
--glatam-padding: 24px;
|
|
87
87
|
font-size: 1.1rem;
|
|
88
88
|
}
|
|
89
|
-
`,
|
|
89
|
+
`,E=s.css`
|
|
90
90
|
:host {
|
|
91
91
|
display: grid;
|
|
92
92
|
min-width: 0;
|
|
@@ -342,24 +342,24 @@
|
|
|
342
342
|
min-width: 32px;
|
|
343
343
|
}
|
|
344
344
|
}
|
|
345
|
-
`;function k(
|
|
345
|
+
`;function k(c,t,e){if(t===e)return 0;const a=(r,o)=>{const l={year:"numeric",month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",hour12:!1};o!=="local"&&(l.timeZone=o);const g=new Intl.DateTimeFormat("en-US",l).formatToParts(r),n=new Map(g.map(y=>[y.type,y.value])),p=Number(n.get("hour")),u=p===24?0:p;return new Date(Number(n.get("year")),Number(n.get("month"))-1,Number(n.get("day")),u,Number(n.get("minute")),Number(n.get("second")))};try{const r=a(c,t);return(a(c,e).getTime()-r.getTime())/(60*1e3)}catch{return 0}}function T(c,t){if(t===0)return{start:c.start,end:c.end,dayShift:0};const e=n=>{const[p,u]=n.split(":").map(Number);return p*60+u},a=n=>{let p=n%1440;p<0&&(p+=1440);const u=String(Math.floor(p/60)).padStart(2,"0"),y=String(p%60).padStart(2,"0");return`${u}:${y}`},r=e(c.start),o=e(c.end),l=r+t,d=o+t;let g=0;return l<0?g=-1:l>=1440&&(g=1),{start:a(l),end:a(d),dayShift:g}}function I(c,t,e){let a=null;return{updatedRules:c.map(o=>{if(o.id!==t)return o;a=o;const l=o.exceptions||[],d=l.includes(e)?l:[...l,e];return{...o,exceptions:d}}),targetRule:a}}function M(c,t){const e=c.find(r=>r.id===t)||null;return{updatedRules:c.filter(r=>r.id!==t),targetRule:e}}var V=Object.defineProperty,_=Object.getOwnPropertyDescriptor,x=(c,t,e,a)=>{for(var r=a>1?void 0:a?_(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&V(t,e,r),r};exports.GlatamCalendarMonthView=class extends s.LitElement{constructor(){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}getWeekdayNames(){const t=[],e=new Date(2026,6,12+this.startOfWeekDay),a=new Intl.DateTimeFormat(this.locale,{weekday:"short"});for(let r=0;r<7;r++)t.push(a.format(e)),e.setDate(e.getDate()+1);return t}handleDayClick(t){const e=this.minDate&&t.dateString<this.minDate||this.maxDate&&t.dateString>this.maxDate;this.role==="buyer"&&(t.isBlocked||e)||this.dispatchEvent(new CustomEvent("day-select",{detail:{dateString:t.dateString,isBlocked:t.isBlocked},bubbles:!0,composed:!0}))}render(){const t=this.getWeekdayNames();return s.html`
|
|
346
346
|
${t.map(e=>s.html`<div class="weekday">${e}</div>`)}
|
|
347
347
|
|
|
348
|
-
${this.days.map(e=>{var
|
|
348
|
+
${this.days.map(e=>{var g;if(!e.isCurrentMonth&&!this.showNeighboringMonth)return s.html`<div class="day-cell empty"></div>`;const a=e.dateString===m.formatISODate(new Date),r=this.selectedDates.includes(e.dateString),o=e.slots.filter(n=>n.isBlocked),l=this.minDate&&e.dateString<this.minDate||this.maxDate&&e.dateString>this.maxDate,d=this.tileClassName?this.tileClassName({date:e.date,dateString:e.dateString}):"";return s.html`
|
|
349
349
|
<div
|
|
350
|
-
class=${
|
|
351
|
-
part="day-cell ${
|
|
350
|
+
class=${R.classMap({"day-cell":!0,padding:!e.isCurrentMonth,blocked:e.isBlocked,today:a,selected:r,disabled:!!l,[d]:!!d})}
|
|
351
|
+
part="day-cell ${d}"
|
|
352
352
|
@click=${()=>this.handleDayClick(e)}
|
|
353
353
|
>
|
|
354
354
|
<div class="day-number">${e.dayNumber}</div>
|
|
355
355
|
|
|
356
356
|
<div class="slot-indicator">
|
|
357
|
-
${e.isBlocked?s.html`<div class="badge blocked-day">${((
|
|
358
|
-
<div class="badge blocked-slot" title=${((
|
|
359
|
-
🚫 ${((
|
|
357
|
+
${e.isBlocked?s.html`<div class="badge blocked-day">${((g=e.rule)==null?void 0:g.description)||"Bloqueado"}</div>`:o.slice(0,2).map(n=>{var p,u;return s.html`
|
|
358
|
+
<div class="badge blocked-slot" title=${((p=n.rule)==null?void 0:p.description)||""}>
|
|
359
|
+
🚫 ${((u=n.rule)==null?void 0:u.description)||n.start}
|
|
360
360
|
</div>
|
|
361
361
|
`})}
|
|
362
|
-
${!e.isBlocked&&
|
|
362
|
+
${!e.isBlocked&&o.length>2?s.html`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${o.length-2} tareas</div>`:""}
|
|
363
363
|
</div>
|
|
364
364
|
</div>
|
|
365
365
|
`})}
|
|
@@ -395,27 +395,27 @@
|
|
|
395
395
|
.slot-indicator { display: none; }
|
|
396
396
|
.day-number { margin-bottom: 0; font-size: 0.8rem; }
|
|
397
397
|
}
|
|
398
|
-
`;
|
|
398
|
+
`;x([i.property({type:Array})],exports.GlatamCalendarMonthView.prototype,"days",2);x([i.property({type:String})],exports.GlatamCalendarMonthView.prototype,"locale",2);x([i.property({type:Number})],exports.GlatamCalendarMonthView.prototype,"startOfWeekDay",2);x([i.property({type:Array})],exports.GlatamCalendarMonthView.prototype,"selectedDates",2);x([i.property({type:String})],exports.GlatamCalendarMonthView.prototype,"role",2);x([i.property({type:String,reflect:!0})],exports.GlatamCalendarMonthView.prototype,"size",2);x([i.property({type:String})],exports.GlatamCalendarMonthView.prototype,"minDate",2);x([i.property({type:String})],exports.GlatamCalendarMonthView.prototype,"maxDate",2);x([i.property({type:Boolean})],exports.GlatamCalendarMonthView.prototype,"showNeighboringMonth",2);x([i.property({attribute:!1})],exports.GlatamCalendarMonthView.prototype,"tileClassName",2);exports.GlatamCalendarMonthView=x([i.customElement("glatam-calendar-month-view")],exports.GlatamCalendarMonthView);var B=Object.defineProperty,j=Object.getOwnPropertyDescriptor,v=(c,t,e,a)=>{for(var r=a>1?void 0:a?j(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&B(t,e,r),r};exports.GlatamCalendarWeekView=class extends s.LitElement{constructor(){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=()=>{if(!this.isDragging||this.dragDayIndex===null||this.dragStartSlotIndex===null||this.dragEndSlotIndex===null){this.isDragging=!1;return}this.isDragging=!1;const t=Math.min(this.dragStartSlotIndex,this.dragEndSlotIndex),e=Math.max(this.dragStartSlotIndex,this.dragEndSlotIndex),a=this.days[this.dragDayIndex],r=a.slots.slice(t,e+1);r.some(o=>o.isBlocked)||this.dispatchEvent(new CustomEvent("range-select",{detail:{dateString:a.dateString,start:r[0].start,end:r[r.length-1].end},bubbles:!0,composed:!0})),this.dragDayIndex=null,this.dragStartSlotIndex=null,this.dragEndSlotIndex=null}}connectedCallback(){super.connectedCallback(),window.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){window.removeEventListener("mouseup",this.handleMouseUp),super.disconnectedCallback()}handleMouseDown(t,e,a){var l;const r=(l=this.days[t])==null?void 0:l.dateString;if(!(this.minDate&&r<this.minDate||this.maxDate&&r>this.maxDate)){if(a){if(this.role==="buyer")return;this.dispatchEvent(new CustomEvent("slot-click",{detail:{dateString:this.days[t].dateString,slot:this.days[t].slots[e],isBlocked:!0},bubbles:!0,composed:!0}));return}this.isDragging=!0,this.dragDayIndex=t,this.dragStartSlotIndex=e,this.dragEndSlotIndex=e}}handleMouseEnter(t,e,a){this.isDragging&&t===this.dragDayIndex&&!a&&(this.dragEndSlotIndex=e)}isSlotSelected(t,e){return!this.selectedRange||this.selectedRange.dateString!==t?!1:e.start>=this.selectedRange.start&&e.end<=this.selectedRange.end}isSlotDragSelecting(t,e){if(!this.isDragging||t!==this.dragDayIndex)return!1;const a=Math.min(this.dragStartSlotIndex,this.dragEndSlotIndex),r=Math.max(this.dragStartSlotIndex,this.dragEndSlotIndex);return e>=a&&e<=r}render(){const t=m.formatISODate(new Date);return s.html`
|
|
399
399
|
<div class="time-col">
|
|
400
400
|
<div class="header-cell">Hora</div>
|
|
401
401
|
${this.slots.map(e=>s.html`<div class="slot-cell time-slot-label">${e.start}</div>`)}
|
|
402
402
|
</div>
|
|
403
403
|
|
|
404
|
-
${this.days.map((e,a)=>{const r=e.dateString===t,
|
|
404
|
+
${this.days.map((e,a)=>{const r=e.dateString===t,o=new Intl.DateTimeFormat(this.locale,{weekday:"short"}).format(e.date),l=this.minDate&&e.dateString<this.minDate||this.maxDate&&e.dateString>this.maxDate;return s.html`
|
|
405
405
|
<div class="day-col">
|
|
406
406
|
<div class="header-cell ${r?"today":""}">
|
|
407
|
-
<div>${
|
|
407
|
+
<div>${o}</div>
|
|
408
408
|
<div class="day-num">${e.dayNumber}</div>
|
|
409
409
|
</div>
|
|
410
410
|
|
|
411
|
-
${e.slots.map((
|
|
411
|
+
${e.slots.map((d,g)=>{var y,f;const n=d.isBlocked,p=this.isSlotSelected(e.dateString,d),u=this.isSlotDragSelecting(a,g);return s.html`
|
|
412
412
|
<div
|
|
413
|
-
class=${
|
|
414
|
-
@mousedown=${()=>this.handleMouseDown(a,
|
|
415
|
-
@mouseenter=${()=>this.handleMouseEnter(a,
|
|
416
|
-
title=${
|
|
413
|
+
class=${R.classMap({"slot-cell":!0,available:!n&&!l,blocked:n,selected:p,"drag-selecting":u,disabled:l})}
|
|
414
|
+
@mousedown=${()=>this.handleMouseDown(a,g,n)}
|
|
415
|
+
@mouseenter=${()=>this.handleMouseEnter(a,g,n)}
|
|
416
|
+
title=${n&&((y=d.rule)!=null&&y.description)?d.rule.description:""}
|
|
417
417
|
>
|
|
418
|
-
${
|
|
418
|
+
${n?((f=d.rule)==null?void 0:f.description)||"Ocupado":p?"Reservado":""}
|
|
419
419
|
</div>
|
|
420
420
|
`})}
|
|
421
421
|
</div>
|
|
@@ -472,25 +472,26 @@
|
|
|
472
472
|
}
|
|
473
473
|
.slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
|
|
474
474
|
.slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
|
|
475
|
-
|
|
475
|
+
.slot-cell.disabled { opacity: 0.35; cursor: not-allowed; background-color: var(--glatam-surface); pointer-events: none; }
|
|
476
|
+
`;v([i.property({type:Array})],exports.GlatamCalendarWeekView.prototype,"days",2);v([i.property({type:Array})],exports.GlatamCalendarWeekView.prototype,"slots",2);v([i.property({type:String})],exports.GlatamCalendarWeekView.prototype,"locale",2);v([i.property({type:Object})],exports.GlatamCalendarWeekView.prototype,"selectedRange",2);v([i.property({type:String})],exports.GlatamCalendarWeekView.prototype,"role",2);v([i.property({type:String})],exports.GlatamCalendarWeekView.prototype,"minDate",2);v([i.property({type:String})],exports.GlatamCalendarWeekView.prototype,"maxDate",2);v([i.state()],exports.GlatamCalendarWeekView.prototype,"isDragging",2);v([i.state()],exports.GlatamCalendarWeekView.prototype,"dragDayIndex",2);v([i.state()],exports.GlatamCalendarWeekView.prototype,"dragStartSlotIndex",2);v([i.state()],exports.GlatamCalendarWeekView.prototype,"dragEndSlotIndex",2);exports.GlatamCalendarWeekView=v([i.customElement("glatam-calendar-week-view")],exports.GlatamCalendarWeekView);var P=Object.defineProperty,N=Object.getOwnPropertyDescriptor,w=(c,t,e,a)=>{for(var r=a>1?void 0:a?N(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&P(t,e,r),r};exports.GlatamCalendarDayView=class extends s.LitElement{constructor(){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=()=>{if(!this.isDragging||!this.day||this.dragStartSlotIndex===null||this.dragEndSlotIndex===null){this.isDragging=!1;return}this.isDragging=!1;const t=Math.min(this.dragStartSlotIndex,this.dragEndSlotIndex),e=Math.max(this.dragStartSlotIndex,this.dragEndSlotIndex),a=this.day.slots.slice(t,e+1);a.some(r=>r.isBlocked)||this.dispatchEvent(new CustomEvent("range-select",{detail:{dateString:this.day.dateString,start:a[0].start,end:a[a.length-1].end},bubbles:!0,composed:!0})),this.dragStartSlotIndex=null,this.dragEndSlotIndex=null}}connectedCallback(){super.connectedCallback(),window.addEventListener("mouseup",this.handleMouseUp)}disconnectedCallback(){window.removeEventListener("mouseup",this.handleMouseUp),super.disconnectedCallback()}handleMouseDown(t,e){if(!this.day)return;const a=this.day.dateString;if(!(this.minDate&&a<this.minDate||this.maxDate&&a>this.maxDate)){if(e){if(this.role==="buyer")return;this.dispatchEvent(new CustomEvent("slot-click",{detail:{dateString:this.day.dateString,slot:this.day.slots[t],isBlocked:!0},bubbles:!0,composed:!0}));return}this.isDragging=!0,this.dragStartSlotIndex=t,this.dragEndSlotIndex=t}}handleMouseEnter(t,e){this.isDragging&&!e&&(this.dragEndSlotIndex=t)}isSlotSelected(t){return!this.day||!this.selectedRange||this.selectedRange.dateString!==this.day.dateString?!1:t.start>=this.selectedRange.start&&t.end<=this.selectedRange.end}isSlotDragSelecting(t){if(!this.isDragging)return!1;const e=Math.min(this.dragStartSlotIndex,this.dragEndSlotIndex),a=Math.max(this.dragStartSlotIndex,this.dragEndSlotIndex);return t>=e&&t<=a}render(){if(!this.day)return s.html`<div>Cargando...</div>`;const t=this.day.dateString===m.formatISODate(new Date),e=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);return s.html`
|
|
476
477
|
<div class="time-col">
|
|
477
478
|
<div class="header-cell">Hora</div>
|
|
478
|
-
${this.slots.map(
|
|
479
|
+
${this.slots.map(r=>s.html`<div class="slot-cell time-slot-label">${r.start}</div>`)}
|
|
479
480
|
</div>
|
|
480
481
|
|
|
481
482
|
<div class="day-col">
|
|
482
483
|
<div class="header-cell ${t?"today":""}">
|
|
483
|
-
<div style="text-transform: capitalize;">${
|
|
484
|
+
<div style="text-transform: capitalize;">${a}</div>
|
|
484
485
|
</div>
|
|
485
486
|
|
|
486
|
-
${this.day.slots.map((
|
|
487
|
+
${this.day.slots.map((r,o)=>{var n,p;const l=r.isBlocked,d=this.isSlotSelected(r),g=this.isSlotDragSelecting(o);return s.html`
|
|
487
488
|
<div
|
|
488
|
-
class=${
|
|
489
|
-
@mousedown=${()=>this.handleMouseDown(
|
|
490
|
-
@mouseenter=${()=>this.handleMouseEnter(
|
|
491
|
-
title=${
|
|
489
|
+
class=${R.classMap({"slot-cell":!0,available:!l&&!e,blocked:l,selected:d,"drag-selecting":g,disabled:e})}
|
|
490
|
+
@mousedown=${()=>this.handleMouseDown(o,l)}
|
|
491
|
+
@mouseenter=${()=>this.handleMouseEnter(o,l)}
|
|
492
|
+
title=${l&&((n=r.rule)!=null&&n.description)?r.rule.description:""}
|
|
492
493
|
>
|
|
493
|
-
${
|
|
494
|
+
${l?((p=r.rule)==null?void 0:p.description)||"Ocupado":d?"Reservado":""}
|
|
494
495
|
</div>
|
|
495
496
|
`})}
|
|
496
497
|
</div>
|
|
@@ -523,7 +524,8 @@
|
|
|
523
524
|
}
|
|
524
525
|
.slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
|
|
525
526
|
.slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
|
|
526
|
-
|
|
527
|
+
.slot-cell.disabled { opacity: 0.35; cursor: not-allowed; background-color: var(--glatam-surface); pointer-events: none; }
|
|
528
|
+
`;w([i.property({type:Object})],exports.GlatamCalendarDayView.prototype,"day",2);w([i.property({type:Array})],exports.GlatamCalendarDayView.prototype,"slots",2);w([i.property({type:String})],exports.GlatamCalendarDayView.prototype,"locale",2);w([i.property({type:Object})],exports.GlatamCalendarDayView.prototype,"selectedRange",2);w([i.property({type:String})],exports.GlatamCalendarDayView.prototype,"role",2);w([i.property({type:String})],exports.GlatamCalendarDayView.prototype,"minDate",2);w([i.property({type:String})],exports.GlatamCalendarDayView.prototype,"maxDate",2);w([i.state()],exports.GlatamCalendarDayView.prototype,"isDragging",2);w([i.state()],exports.GlatamCalendarDayView.prototype,"dragStartSlotIndex",2);w([i.state()],exports.GlatamCalendarDayView.prototype,"dragEndSlotIndex",2);exports.GlatamCalendarDayView=w([i.customElement("glatam-calendar-day-view")],exports.GlatamCalendarDayView);const W=s.css`
|
|
527
529
|
dialog {
|
|
528
530
|
background: transparent;
|
|
529
531
|
border: none;
|
|
@@ -678,7 +680,7 @@
|
|
|
678
680
|
.btn-danger:hover {
|
|
679
681
|
background: rgba(255, 69, 58, 0.18);
|
|
680
682
|
}
|
|
681
|
-
`;var
|
|
683
|
+
`;var A=Object.defineProperty,L=Object.getOwnPropertyDescriptor,S=(c,t,e,a)=>{for(var r=a>1?void 0:a?L(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&A(t,e,r),r};exports.GlatamCalendarModal=class extends s.LitElement{constructor(){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=[]}willUpdate(t){if(t.has("open")&&this.open)if(this.existingRule)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);else{this.description="",this.blockAllDay=!this.isRange,this.isRecurring=!1;const e=m.parseISODate(this.dateString);this.selectedDays=[e.getDay()]}}updated(t){var e;if(t.has("open")){const a=(e=this.shadowRoot)==null?void 0:e.getElementById("booking-dialog");a&&(this.open?a.open||a.showModal():a.open&&a.close())}}handleDialogClose(){this.open&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}toggleDay(t){const e=this.selectedDays.indexOf(t);this.selectedDays=e>-1?this.selectedDays.filter(a=>a!==t):[...this.selectedDays,t]}handleSave(){const t={title:this.description.trim(),blockAllDay:this.blockAllDay,isRecurring:this.isRecurring,selectedDays:this.selectedDays,dateString:this.dateString,startTime:this.startTime,endTime:this.endTime};this.dispatchEvent(new CustomEvent("save-rule",{detail:t,bubbles:!0,composed:!0}))}handleDelete(){this.existingRule&&this.dispatchEvent(new CustomEvent("delete-rule",{detail:{id:this.existingRule.id,dateString:this.dateString,rule:this.existingRule},bubbles:!0,composed:!0}))}render(){const t=["D","L","M","M","J","V","S"],e=this.isRange?`${this.dateString} (${this.startTime} - ${this.endTime})`:this.dateString;return s.html`
|
|
682
684
|
<dialog id="booking-dialog" @close=${this.handleDialogClose}>
|
|
683
685
|
<div class="modal-content">
|
|
684
686
|
<h3>${this.existingRule?"Gestionar Bloqueo":"Crear Bloqueo"}</h3>
|
|
@@ -727,6 +729,7 @@
|
|
|
727
729
|
<div class="days-grid">
|
|
728
730
|
${[1,2,3,4,5,6,0].map(a=>s.html`
|
|
729
731
|
<button
|
|
732
|
+
type="button"
|
|
730
733
|
class="day-btn ${this.selectedDays.includes(a)?"selected":""}"
|
|
731
734
|
@click=${()=>this.toggleDay(a)}
|
|
732
735
|
>
|
|
@@ -738,13 +741,209 @@
|
|
|
738
741
|
`:""}
|
|
739
742
|
|
|
740
743
|
<div class="btn-actions">
|
|
741
|
-
${this.existingRule?s.html`<button class="btn btn-danger" @click=${this.handleDelete}>Eliminar</button>`:""}
|
|
742
|
-
<button class="btn btn-cancel" @click=${()=>this.dispatchEvent(new CustomEvent("close"))}>Cancelar</button>
|
|
743
|
-
<button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
|
|
744
|
+
${this.existingRule?s.html`<button type="button" class="btn btn-danger" @click=${this.handleDelete}>Eliminar</button>`:""}
|
|
745
|
+
<button type="button" class="btn btn-cancel" @click=${()=>this.dispatchEvent(new CustomEvent("close"))}>Cancelar</button>
|
|
746
|
+
<button type="button" class="btn btn-save" @click=${this.handleSave}>Guardar</button>
|
|
744
747
|
</div>
|
|
745
748
|
</div>
|
|
746
749
|
</dialog>
|
|
747
|
-
`}};exports.GlatamCalendarModal.styles=
|
|
750
|
+
`}};exports.GlatamCalendarModal.styles=W;S([i.property({type:Boolean})],exports.GlatamCalendarModal.prototype,"open",2);S([i.property({type:String})],exports.GlatamCalendarModal.prototype,"dateString",2);S([i.property({type:String})],exports.GlatamCalendarModal.prototype,"startTime",2);S([i.property({type:String})],exports.GlatamCalendarModal.prototype,"endTime",2);S([i.property({type:Boolean})],exports.GlatamCalendarModal.prototype,"isRange",2);S([i.property({type:Object})],exports.GlatamCalendarModal.prototype,"existingRule",2);S([i.state()],exports.GlatamCalendarModal.prototype,"description",2);S([i.state()],exports.GlatamCalendarModal.prototype,"blockAllDay",2);S([i.state()],exports.GlatamCalendarModal.prototype,"isRecurring",2);S([i.state()],exports.GlatamCalendarModal.prototype,"selectedDays",2);exports.GlatamCalendarModal=S([i.customElement("glatam-calendar-modal")],exports.GlatamCalendarModal);const U=s.css`
|
|
751
|
+
:host {
|
|
752
|
+
display: contents;
|
|
753
|
+
font-family: var(--glatam-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
dialog {
|
|
757
|
+
border: none;
|
|
758
|
+
border-radius: var(--glatam-border-radius, 16px);
|
|
759
|
+
padding: 0;
|
|
760
|
+
background: var(--glatam-bg, #ffffff);
|
|
761
|
+
color: var(--glatam-text, #1d1d1f);
|
|
762
|
+
max-width: 440px;
|
|
763
|
+
width: 90vw;
|
|
764
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
765
|
+
overflow: hidden;
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
dialog::backdrop {
|
|
769
|
+
background: rgba(0, 0, 0, 0.4);
|
|
770
|
+
backdrop-filter: blur(8px);
|
|
771
|
+
-webkit-backdrop-filter: blur(8px);
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
.confirmation-container {
|
|
775
|
+
padding: 24px;
|
|
776
|
+
display: flex;
|
|
777
|
+
flex-direction: column;
|
|
778
|
+
gap: 18px;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.header {
|
|
782
|
+
display: flex;
|
|
783
|
+
flex-direction: column;
|
|
784
|
+
gap: 6px;
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
.title {
|
|
788
|
+
font-size: 1.15rem;
|
|
789
|
+
font-weight: 600;
|
|
790
|
+
margin: 0;
|
|
791
|
+
color: var(--glatam-text, #1d1d1f);
|
|
792
|
+
line-height: 1.3;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.subtitle {
|
|
796
|
+
font-size: 0.88rem;
|
|
797
|
+
color: var(--glatam-text-secondary, #86868b);
|
|
798
|
+
margin: 0;
|
|
799
|
+
line-height: 1.4;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.rule-badge {
|
|
803
|
+
display: inline-flex;
|
|
804
|
+
align-items: center;
|
|
805
|
+
gap: 6px;
|
|
806
|
+
padding: 6px 12px;
|
|
807
|
+
background: var(--glatam-surface, #f5f5f7);
|
|
808
|
+
border-radius: 8px;
|
|
809
|
+
font-size: 0.82rem;
|
|
810
|
+
font-weight: 500;
|
|
811
|
+
color: var(--glatam-text, #1d1d1f);
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.options-group {
|
|
815
|
+
display: flex;
|
|
816
|
+
flex-direction: column;
|
|
817
|
+
gap: 10px;
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
.option-card {
|
|
821
|
+
display: flex;
|
|
822
|
+
align-items: flex-start;
|
|
823
|
+
gap: 12px;
|
|
824
|
+
padding: 14px 16px;
|
|
825
|
+
border: 1.5px solid var(--glatam-border, #e5e5ea);
|
|
826
|
+
border-radius: 12px;
|
|
827
|
+
background: var(--glatam-bg, #ffffff);
|
|
828
|
+
cursor: pointer;
|
|
829
|
+
text-align: left;
|
|
830
|
+
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
831
|
+
width: 100%;
|
|
832
|
+
box-sizing: border-box;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.option-card:hover {
|
|
836
|
+
border-color: var(--glatam-primary, #5856d6);
|
|
837
|
+
background: var(--glatam-primary-light, rgba(88, 86, 214, 0.06));
|
|
838
|
+
transform: translateY(-1px);
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
.option-card:active {
|
|
842
|
+
transform: scale(0.99);
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.option-icon {
|
|
846
|
+
font-size: 1.25rem;
|
|
847
|
+
line-height: 1;
|
|
848
|
+
margin-top: 2px;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.option-text {
|
|
852
|
+
display: flex;
|
|
853
|
+
flex-direction: column;
|
|
854
|
+
gap: 3px;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
.option-title {
|
|
858
|
+
font-size: 0.92rem;
|
|
859
|
+
font-weight: 600;
|
|
860
|
+
color: var(--glatam-text, #1d1d1f);
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
.option-desc {
|
|
864
|
+
font-size: 0.8rem;
|
|
865
|
+
color: var(--glatam-text-secondary, #86868b);
|
|
866
|
+
line-height: 1.35;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.actions {
|
|
870
|
+
display: flex;
|
|
871
|
+
justify-content: flex-end;
|
|
872
|
+
margin-top: 4px;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
.btn-cancel {
|
|
876
|
+
padding: 10px 18px;
|
|
877
|
+
border-radius: 10px;
|
|
878
|
+
border: 1px solid var(--glatam-border, #e5e5ea);
|
|
879
|
+
background: var(--glatam-surface, #f5f5f7);
|
|
880
|
+
color: var(--glatam-text, #1d1d1f);
|
|
881
|
+
font-weight: 500;
|
|
882
|
+
font-size: 0.88rem;
|
|
883
|
+
cursor: pointer;
|
|
884
|
+
transition: background 0.15s ease;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
.btn-cancel:hover {
|
|
888
|
+
background: var(--glatam-border, #e5e5ea);
|
|
889
|
+
}
|
|
890
|
+
`;var F=Object.defineProperty,q=Object.getOwnPropertyDescriptor,C=(c,t,e,a)=>{for(var r=a>1?void 0:a?q(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&F(t,e,r),r};exports.GlatamSeriesConfirmationModal=class extends s.LitElement{constructor(){super(...arguments),this.open=!1,this.dateString="",this.targetRule=null}updated(t){var e;if(t.has("open")){const a=(e=this.shadowRoot)==null?void 0:e.getElementById("series-dialog");a&&(this.open?a.open||a.showModal():a.open&&a.close())}}handleDialogClose(){this.open&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleSelectOption(t){this.targetRule&&this.dispatchEvent(new CustomEvent("confirm-action",{detail:{actionType:t,dateString:this.dateString,targetRule:this.targetRule},bubbles:!0,composed:!0}))}render(){var e;const t=((e=this.targetRule)==null?void 0:e.description)||"Bloqueo recurrente";return s.html`
|
|
891
|
+
<dialog id="series-dialog" @close=${this.handleDialogClose}>
|
|
892
|
+
<div class="confirmation-container">
|
|
893
|
+
<div class="header">
|
|
894
|
+
<h3 class="title">¿Eliminar bloqueo recurrente?</h3>
|
|
895
|
+
<p class="subtitle">
|
|
896
|
+
Este horario pertenece a una regla con patrón de repetición semanal.
|
|
897
|
+
</p>
|
|
898
|
+
<div class="rule-badge">
|
|
899
|
+
<span>📅 ${this.dateString}</span> • <span>${t}</span>
|
|
900
|
+
</div>
|
|
901
|
+
</div>
|
|
902
|
+
|
|
903
|
+
<div class="options-group">
|
|
904
|
+
<button
|
|
905
|
+
type="button"
|
|
906
|
+
class="option-card"
|
|
907
|
+
@click=${()=>this.handleSelectOption("delete_instance")}
|
|
908
|
+
title="Anular la regla solo en esta fecha"
|
|
909
|
+
>
|
|
910
|
+
<span class="option-icon">🗓️</span>
|
|
911
|
+
<div class="option-text">
|
|
912
|
+
<span class="option-title">Eliminar / Liberar solo este día</span>
|
|
913
|
+
<span class="option-desc">
|
|
914
|
+
Libera el horario exclusivamente para el ${this.dateString}. El resto de semanas continuarán bloqueadas.
|
|
915
|
+
</span>
|
|
916
|
+
</div>
|
|
917
|
+
</button>
|
|
918
|
+
|
|
919
|
+
<button
|
|
920
|
+
type="button"
|
|
921
|
+
class="option-card"
|
|
922
|
+
@click=${()=>this.handleSelectOption("delete_series")}
|
|
923
|
+
title="Eliminar la regla semanal completa"
|
|
924
|
+
>
|
|
925
|
+
<span class="option-icon">🔄</span>
|
|
926
|
+
<div class="option-text">
|
|
927
|
+
<span class="option-title">Eliminar toda la serie recurrente</span>
|
|
928
|
+
<span class="option-desc">
|
|
929
|
+
Remueve la regla semanal completa, liberando este horario para todas las semanas pasadas y futuras.
|
|
930
|
+
</span>
|
|
931
|
+
</div>
|
|
932
|
+
</button>
|
|
933
|
+
</div>
|
|
934
|
+
|
|
935
|
+
<div class="actions">
|
|
936
|
+
<button
|
|
937
|
+
type="button"
|
|
938
|
+
class="btn-cancel"
|
|
939
|
+
@click=${()=>this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}
|
|
940
|
+
>
|
|
941
|
+
Cancelar
|
|
942
|
+
</button>
|
|
943
|
+
</div>
|
|
944
|
+
</div>
|
|
945
|
+
</dialog>
|
|
946
|
+
`}};exports.GlatamSeriesConfirmationModal.styles=U;C([i.property({type:Boolean})],exports.GlatamSeriesConfirmationModal.prototype,"open",2);C([i.property({type:String})],exports.GlatamSeriesConfirmationModal.prototype,"dateString",2);C([i.property({type:Object})],exports.GlatamSeriesConfirmationModal.prototype,"targetRule",2);exports.GlatamSeriesConfirmationModal=C([i.customElement("glatam-series-confirmation-modal")],exports.GlatamSeriesConfirmationModal);var Y=Object.defineProperty,H=Object.getOwnPropertyDescriptor,h=(c,t,e,a)=>{for(var r=a>1?void 0:a?H(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&Y(t,e,r),r};const X=[{start:"09:00",end:"10:00"},{start:"10:00",end:"11:00"},{start:"11:00",end:"12:00"},{start:"12:00",end:"13:00"},{start:"13:00",end:"14:00"},{start:"14:00",end:"15:00"},{start:"15:00",end:"16:00"},{start:"16:00",end:"17:00"},{start:"17:00",end:"18:00"}];exports.GlatamCalendar=class extends s.LitElement{constructor(){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=X,this.minDate="",this.maxDate="",this.showNeighboringMonth=!0,this.tileClassName=null,this.enableSeriesConfirmation=!1,this.activeDate=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=""}firstUpdated(){this.darkMode=window.matchMedia("(prefers-color-scheme: dark)").matches,this.localRules=[...this.rules]}willUpdate(t){t.has("rules")&&this.rules!==this.localRules&&(this.localRules=[...this.rules||[]])}updated(t){t.has("darkMode")&&this.classList.toggle("dark-mode",this.darkMode)}handlePrev(){const t=new Date(this.activeDate);this.view==="month"?t.setMonth(t.getMonth()-1):this.view==="week"?t.setDate(t.getDate()-7):t.setDate(t.getDate()-1),this.activeDate=t}handleNext(){const t=new Date(this.activeDate);this.view==="month"?t.setMonth(t.getMonth()+1):this.view==="week"?t.setDate(t.getDate()+7):t.setDate(t.getDate()+1),this.activeDate=t}getHeaderTitle(){const t=this.view==="month"?{month:"long",year:"numeric"}:this.view==="week"?{month:"short",year:"numeric"}:{day:"numeric",month:"long",year:"numeric"};return new Intl.DateTimeFormat(this.locale,t).format(this.activeDate)}handleDaySelect(t){const{dateString:e,isBlocked:a}=t.detail;this.role==="buyer"&&a||(this.activeDate=m.parseISODate(e),this.view="day",this.dispatchEvent(new CustomEvent("date-selected",{detail:{dateString:e},bubbles:!0,composed:!0})))}handleRangeSelect(t){var O,z;const{dateString:e,start:a,end:r}=t.detail,o=this.activeTimezone==="local"?k(this.activeDate,this.hostTimezone,"local"):0,l=m.formatISODate(new Date),d=this.minDate||(this.role==="buyer"?l:"");if(this.role==="buyer"&&(d&&e<d||this.maxDate&&e>this.maxDate))return;const g=this.getDisplaySlots(o),n=a.split(" ")[0],p=r.split(" ")[0],u=g.findIndex($=>$.start.startsWith(n)),y=g.findIndex($=>$.end.startsWith(p)),f=((O=this.slots[u])==null?void 0:O.start)||n,D=((z=this.slots[y])==null?void 0:z.end)||p;if(this.role==="buyer"){this.selectedRange={dateString:e,start:n,end:p},this.dispatchEvent(new CustomEvent("booking-selected",{detail:{dateString:e,start:n,end:p,hostStart:f,hostEnd:D},bubbles:!0,composed:!0}));return}this.openModal(e,f,D,!0,null)}handleSlotClick(t){const{dateString:e,slot:a}=t.detail,r=m.parseISODate(e),o=this.activeTimezone==="local"?k(this.activeDate,this.hostTimezone,"local"):0,l=m.formatISODate(new Date),d=this.minDate||(this.role==="buyer"?l:"");if(this.role==="buyer"&&(a.isBlocked||d&&e<d||this.maxDate&&e>this.maxDate))return;const g=this.getDisplaySlots(o),n=a.start.split(" ")[0],p=g.findIndex(f=>f.start.startsWith(n)),u=this.slots[p]||a;if(this.role==="buyer"){this.selectedRange={dateString:e,start:a.start,end:a.end},this.dispatchEvent(new CustomEvent("booking-selected",{detail:{dateString:e,start:a.start,end:a.end,hostStart:u.start,hostEnd:u.end},bubbles:!0,composed:!0}));return}const y=this.localRules.find(f=>m.isTimeBlocked(r,u,[f]));this.openModal(e,u.start,u.end,!0,y||null)}handleBlockDayAction(){const t=m.formatISODate(this.activeDate),e=this.localRules.find(a=>m.isTimeBlocked(this.activeDate,void 0,[a]));this.openModal(t,"","",!1,e||null)}openModal(t,e,a,r,o){this.modalDateString=t,this.modalStartTime=e,this.modalEndTime=a,this.modalIsRange=r,this.modalExistingRule=o,this.modalOpen=!0}handleSaveRule(t){var l;const e=t.detail,a=this.modalExistingRule?this.modalExistingRule.id:`rule-${Date.now()}`,r={id:a,type:e.isRecurring?"weekly":"date-range",slots:e.blockAllDay?void 0:[{start:e.startTime,end:e.endTime}],daysOfWeek:e.isRecurring?e.selectedDays:void 0,startDate:e.isRecurring?void 0:e.dateString,endDate:e.isRecurring?void 0:e.dateString,description:e.title,exceptions:(l=this.modalExistingRule)==null?void 0:l.exceptions},o=this.modalExistingRule?this.localRules.map(d=>d.id===a?r:d):[...this.localRules,r];this.localRules=o,this.rules=o,this.modalOpen=!1,this.dispatchEvent(new CustomEvent("rules-changed",{detail:{rules:o},bubbles:!0,composed:!0}))}handleDeleteRule(t){const e=t.detail.rule||this.localRules.find(l=>l.id===t.detail.id),a=t.detail.dateString||this.modalDateString;if(this.enableSeriesConfirmation&&e&&e.type==="weekly"){this.modalOpen=!1,this.seriesTargetRule=e,this.seriesTargetDateString=a,this.seriesModalOpen=!0;return}const{updatedRules:r,targetRule:o}=M(this.localRules,t.detail.id);if(this.localRules=r,this.rules=r,this.modalOpen=!1,o){const l={actionType:"delete_series",targetRule:o,dateString:a,updatedRules:r};this.dispatchEvent(new CustomEvent("rule-action-triggered",{detail:l,bubbles:!0,composed:!0}))}this.dispatchEvent(new CustomEvent("rules-changed",{detail:{rules:r},bubbles:!0,composed:!0}))}handleConfirmSeriesAction(t){const{actionType:e,dateString:a,targetRule:r}=t.detail,{updatedRules:o,targetRule:l}=e==="delete_instance"?I(this.localRules,r.id,a):M(this.localRules,r.id);if(this.localRules=o,this.rules=o,this.seriesModalOpen=!1,l){const d={actionType:e,targetRule:l,dateString:a,updatedRules:o};this.dispatchEvent(new CustomEvent("rule-action-triggered",{detail:d,bubbles:!0,composed:!0}))}this.dispatchEvent(new CustomEvent("rules-changed",{detail:{rules:o},bubbles:!0,composed:!0}))}getDisplaySlots(t){return t===0?this.slots:this.slots.map(e=>{const a=T(e,t),r=a.dayShift>0?" (+1d)":a.dayShift<0?" (-1d)":"";return{start:a.start+r,end:a.end+r}})}render(){var g;const t=this.activeDate.getFullYear(),e=this.activeDate.getMonth(),a=m.isTimeBlocked(this.activeDate,void 0,this.localRules),r=this.activeTimezone==="local"?k(this.activeDate,this.hostTimezone,"local"):0,o=this.getDisplaySlots(r),l=n=>n.map(p=>({...p,slots:p.slots.map((u,y)=>{var f,D;return{...u,start:((f=o[y])==null?void 0:f.start)||u.start,end:((D=o[y])==null?void 0:D.end)||u.end}})})),d=((g=this.hostTimezone.split("/").pop())==null?void 0:g.replace("_"," "))||"Anfitrión";return s.html`
|
|
748
947
|
<div class="calendar-header">
|
|
749
948
|
<div class="nav-group">
|
|
750
949
|
<button class="btn" @click=${()=>this.activeDate=new Date}>Hoy</button>
|
|
@@ -759,7 +958,7 @@
|
|
|
759
958
|
🌐 Zona:
|
|
760
959
|
<select class="timezone-select" @change=${n=>this.activeTimezone=n.target.value}>
|
|
761
960
|
<option value="local" ?selected=${this.activeTimezone==="local"}>Mi Hora</option>
|
|
762
|
-
<option value="host" ?selected=${this.activeTimezone==="host"}>Hora ${
|
|
961
|
+
<option value="host" ?selected=${this.activeTimezone==="host"}>Hora ${d}</option>
|
|
763
962
|
</select>
|
|
764
963
|
</div>
|
|
765
964
|
`:""}
|
|
@@ -774,7 +973,7 @@
|
|
|
774
973
|
</div>
|
|
775
974
|
|
|
776
975
|
<div class="calendar-body">
|
|
777
|
-
${this.view==="month"?s.html`<glatam-calendar-month-view .days=${
|
|
976
|
+
${this.view==="month"?s.html`<glatam-calendar-month-view .days=${m.generateMonthDays(t,e,this.localRules,this.slots,this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate||(this.role==="buyer"?m.formatISODate(new Date):"")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>`:this.view==="week"?s.html`<glatam-calendar-week-view .days=${l(m.generateWeekDays(this.activeDate,this.localRules,this.slots,this.startOfWeekDay))} .slots=${o} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} .minDate=${this.minDate||(this.role==="buyer"?m.formatISODate(new Date):"")} .maxDate=${this.maxDate} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>`:s.html`<glatam-calendar-day-view .day=${l(m.generateWeekDays(this.activeDate,this.localRules,this.slots,this.startOfWeekDay)).find(n=>n.dateString===m.formatISODate(this.activeDate))||null} .slots=${o} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} .minDate=${this.minDate||(this.role==="buyer"?m.formatISODate(new Date):"")} .maxDate=${this.maxDate} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
|
|
778
977
|
</div>
|
|
779
978
|
|
|
780
979
|
<glatam-calendar-modal
|
|
@@ -782,55 +981,97 @@
|
|
|
782
981
|
.isRange=${this.modalIsRange} .existingRule=${this.modalExistingRule} @save-rule=${this.handleSaveRule}
|
|
783
982
|
@delete-rule=${this.handleDeleteRule} @close=${()=>this.modalOpen=!1}
|
|
784
983
|
></glatam-calendar-modal>
|
|
785
|
-
|
|
984
|
+
|
|
985
|
+
<glatam-series-confirmation-modal
|
|
986
|
+
.open=${this.seriesModalOpen} .dateString=${this.seriesTargetDateString} .targetRule=${this.seriesTargetRule}
|
|
987
|
+
@confirm-action=${this.handleConfirmSeriesAction} @close=${()=>this.seriesModalOpen=!1}
|
|
988
|
+
></glatam-series-confirmation-modal>
|
|
989
|
+
`}};exports.GlatamCalendar.styles=[G,E];h([i.property({type:String})],exports.GlatamCalendar.prototype,"role",2);h([i.property({type:String,reflect:!0})],exports.GlatamCalendar.prototype,"size",2);h([i.property({type:String})],exports.GlatamCalendar.prototype,"view",2);h([i.property({type:String})],exports.GlatamCalendar.prototype,"locale",2);h([i.property({type:Number})],exports.GlatamCalendar.prototype,"startOfWeekDay",2);h([i.property({type:Array})],exports.GlatamCalendar.prototype,"rules",2);h([i.property({type:Array})],exports.GlatamCalendar.prototype,"selectedDates",2);h([i.property({type:Object})],exports.GlatamCalendar.prototype,"selectedRange",2);h([i.property({type:String})],exports.GlatamCalendar.prototype,"hostTimezone",2);h([i.property({type:String})],exports.GlatamCalendar.prototype,"activeTimezone",2);h([i.property({type:Array})],exports.GlatamCalendar.prototype,"slots",2);h([i.property({type:String})],exports.GlatamCalendar.prototype,"minDate",2);h([i.property({type:String})],exports.GlatamCalendar.prototype,"maxDate",2);h([i.property({type:Boolean})],exports.GlatamCalendar.prototype,"showNeighboringMonth",2);h([i.property({attribute:!1})],exports.GlatamCalendar.prototype,"tileClassName",2);h([i.property({type:Boolean,attribute:"enable-series-confirmation"})],exports.GlatamCalendar.prototype,"enableSeriesConfirmation",2);h([i.state()],exports.GlatamCalendar.prototype,"activeDate",2);h([i.state()],exports.GlatamCalendar.prototype,"localRules",2);h([i.state()],exports.GlatamCalendar.prototype,"darkMode",2);h([i.state()],exports.GlatamCalendar.prototype,"modalOpen",2);h([i.state()],exports.GlatamCalendar.prototype,"modalDateString",2);h([i.state()],exports.GlatamCalendar.prototype,"modalStartTime",2);h([i.state()],exports.GlatamCalendar.prototype,"modalEndTime",2);h([i.state()],exports.GlatamCalendar.prototype,"modalIsRange",2);h([i.state()],exports.GlatamCalendar.prototype,"modalExistingRule",2);h([i.state()],exports.GlatamCalendar.prototype,"seriesModalOpen",2);h([i.state()],exports.GlatamCalendar.prototype,"seriesTargetRule",2);h([i.state()],exports.GlatamCalendar.prototype,"seriesTargetDateString",2);exports.GlatamCalendar=h([i.customElement("glatam-calendar")],exports.GlatamCalendar);const Z=s.css`
|
|
990
|
+
:host {
|
|
991
|
+
display: inline-block;
|
|
992
|
+
background: transparent;
|
|
993
|
+
border: none;
|
|
994
|
+
padding: 0;
|
|
995
|
+
box-shadow: none;
|
|
996
|
+
width: 100%;
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
.mini-calendar-header {
|
|
1000
|
+
display: flex;
|
|
1001
|
+
justify-content: space-between;
|
|
1002
|
+
align-items: center;
|
|
1003
|
+
padding: 4px 8px;
|
|
1004
|
+
margin-bottom: 8px;
|
|
1005
|
+
user-select: none;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.mini-month-title {
|
|
1009
|
+
font-size: 0.875rem;
|
|
1010
|
+
font-weight: 600;
|
|
1011
|
+
color: var(--glatam-text);
|
|
1012
|
+
text-transform: capitalize;
|
|
1013
|
+
letter-spacing: -0.01em;
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
.mini-nav-btn {
|
|
1017
|
+
background: transparent;
|
|
1018
|
+
border: 1px solid var(--glatam-border);
|
|
1019
|
+
border-radius: 8px;
|
|
1020
|
+
color: var(--glatam-text);
|
|
1021
|
+
width: 28px;
|
|
1022
|
+
height: 28px;
|
|
1023
|
+
display: flex;
|
|
1024
|
+
align-items: center;
|
|
1025
|
+
justify-content: center;
|
|
1026
|
+
cursor: pointer;
|
|
1027
|
+
font-size: 0.75rem;
|
|
1028
|
+
transition: background-color var(--glatam-transition-fast), border-color var(--glatam-transition-fast), transform var(--glatam-transition-fast);
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.mini-nav-btn:hover:not(:disabled) {
|
|
1032
|
+
background-color: var(--glatam-surface);
|
|
1033
|
+
border-color: var(--glatam-text-secondary);
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
.mini-nav-btn:active:not(:disabled) {
|
|
1037
|
+
transform: scale(0.95);
|
|
1038
|
+
}
|
|
1039
|
+
`;var J=Object.defineProperty,K=Object.getOwnPropertyDescriptor,b=(c,t,e,a)=>{for(var r=a>1?void 0:a?K(t,e):t,o=c.length-1,l;o>=0;o--)(l=c[o])&&(r=(a?l(t,e,r):l(r))||r);return a&&r&&J(t,e,r),r};exports.GlatamCalendarMini=class extends s.LitElement{constructor(){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=[{start:"09:00",end:"10:00"},{start:"10:00",end:"11:00"},{start:"11:00",end:"12:00"},{start:"12:00",end:"13:00"},{start:"13:00",end:"14:00"},{start:"14:00",end:"15:00"},{start:"15:00",end:"16:00"},{start:"16:00",end:"17:00"},{start:"17:00",end:"18:00"}],this.activeDate=new Date,this.dropdownOpen=!1,this.dropdownSelectedDateString="",this.touchStartX=0,this.touchStartY=0}handlePrevMonth(t){t.stopPropagation();const e=new Date(this.activeDate);e.setMonth(e.getMonth()-1),this.activeDate=e}handleNextMonth(t){t.stopPropagation();const e=new Date(this.activeDate);e.setMonth(e.getMonth()+1),this.activeDate=e}handleTouchStart(t){t.touches&&t.touches.length>0&&(this.touchStartX=t.touches[0].clientX,this.touchStartY=t.touches[0].clientY)}handleTouchEnd(t){if(t.changedTouches&&t.changedTouches.length>0){const e=this.touchStartX-t.changedTouches[0].clientX,a=this.touchStartY-t.changedTouches[0].clientY;Math.abs(e)>50&&Math.abs(e)>Math.abs(a)&&(e>0?this.handleNextMonth(t):this.handlePrevMonth(t))}}getFormattedMonthTitle(){const t=this.activeDate.toLocaleDateString(this.locale||"es",{month:"long",year:"numeric"});return t.charAt(0).toUpperCase()+t.slice(1)}handleDropdownDaySelect(t){this.dropdownSelectedDateString=t.detail.dateString}selectDropdownSlot(t){const e={dateString:this.dropdownSelectedDateString,start:t.displayStart,end:t.displayEnd,hostStart:t.start,hostEnd:t.end};this.selectedRange={dateString:this.dropdownSelectedDateString,start:t.displayStart,end:t.displayEnd},this.dispatchEvent(new CustomEvent("booking-selected",{detail:e,bubbles:!0,composed:!0})),this.dropdownOpen=!1,this.dropdownSelectedDateString=""}render(){const t=this.selectedRange?`Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})`:"Seleccionar Fecha y Hora",e=this.activeDate.getFullYear(),a=this.activeDate.getMonth(),r=this.dropdownSelectedDateString?new Date(this.dropdownSelectedDateString+"T00:00:00"):null,o=r&&this.activeTimezone==="local"?k(r,this.hostTimezone,"local"):0,l=r?this.slots.map(d=>{const g=m.isTimeBlocked(r,d,this.rules),n=T(d,o),p=n.dayShift>0?" (+1d)":n.dayShift<0?" (-1d)":"";return{...d,displayStart:n.start+p,displayEnd:n.end+p,isBlocked:g}}):[];return s.html`
|
|
786
1040
|
<div class="dropdown-container">
|
|
787
1041
|
<button class="btn btn-primary dropdown-toggle" @click=${()=>this.dropdownOpen=!this.dropdownOpen}>
|
|
788
1042
|
<span>${t}</span> <span>${this.dropdownOpen?"▲":"▼"}</span>
|
|
789
1043
|
</button>
|
|
790
1044
|
|
|
791
1045
|
${this.dropdownOpen?s.html`
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
.maxDate=${this.maxDate}
|
|
819
|
-
.showNeighboringMonth=${this.showNeighboringMonth}
|
|
820
|
-
.tileClassName=${this.tileClassName}
|
|
821
|
-
@day-select=${this.handleDropdownDaySelect}
|
|
822
|
-
></glatam-calendar-month-view>
|
|
823
|
-
`}
|
|
1046
|
+
<div class="dropdown-card" style="--glatam-day-min-height: 38px;">
|
|
1047
|
+
${this.dropdownSelectedDateString?s.html`
|
|
1048
|
+
<div style="display:flex; justify-space-between; align-items:center; border-bottom: 1px solid var(--glatam-border); padding-bottom:8px;">
|
|
1049
|
+
<button class="btn" style="height:28px; padding:0 8px; font-size:0.75rem;" @click=${()=>this.dropdownSelectedDateString=""}>< Volver</button>
|
|
1050
|
+
<span style="font-size:0.8rem; font-weight:600; color: var(--glatam-text);">${this.dropdownSelectedDateString}</span>
|
|
1051
|
+
</div>
|
|
1052
|
+
<div class="slot-list">
|
|
1053
|
+
${l.map(d=>s.html`
|
|
1054
|
+
<button class="slot-btn ${d.isBlocked?"blocked":""}" ?disabled=${d.isBlocked} @click=${()=>this.selectDropdownSlot(d)}>
|
|
1055
|
+
${d.displayStart} - ${d.displayEnd} ${d.isBlocked?"(Ocupado)":""}
|
|
1056
|
+
</button>
|
|
1057
|
+
`)}
|
|
1058
|
+
</div>
|
|
1059
|
+
`:s.html`
|
|
1060
|
+
<div class="mini-calendar-header">
|
|
1061
|
+
<button type="button" class="mini-nav-btn" aria-label="Mes anterior" @click=${this.handlePrevMonth}><</button>
|
|
1062
|
+
<span class="mini-month-title">${this.getFormattedMonthTitle()}</span>
|
|
1063
|
+
<button type="button" class="mini-nav-btn" aria-label="Mes siguiente" @click=${this.handleNextMonth}>></button>
|
|
1064
|
+
</div>
|
|
1065
|
+
<div class="mini-calendar-touch-wrapper" @touchstart=${this.handleTouchStart} @touchend=${this.handleTouchEnd}>
|
|
1066
|
+
<glatam-calendar-month-view
|
|
1067
|
+
.days=${m.generateMonthDays(e,a,this.rules,this.slots,this.startOfWeekDay)}
|
|
1068
|
+
.locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} size="small"
|
|
1069
|
+
.minDate=${this.minDate} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth}
|
|
1070
|
+
.tileClassName=${this.tileClassName} @day-select=${this.handleDropdownDaySelect}
|
|
1071
|
+
></glatam-calendar-month-view>
|
|
824
1072
|
</div>
|
|
825
|
-
|
|
1073
|
+
`}
|
|
1074
|
+
</div>
|
|
1075
|
+
`:""}
|
|
826
1076
|
</div>
|
|
827
|
-
`}};exports.GlatamCalendarMini.styles=[
|
|
828
|
-
:host {
|
|
829
|
-
display: inline-block;
|
|
830
|
-
background: transparent;
|
|
831
|
-
border: none;
|
|
832
|
-
padding: 0;
|
|
833
|
-
box-shadow: none;
|
|
834
|
-
width: 100%;
|
|
835
|
-
}
|
|
836
|
-
`];b([l.property({type:String})],exports.GlatamCalendarMini.prototype,"role",2);b([l.property({type:String})],exports.GlatamCalendarMini.prototype,"locale",2);b([l.property({type:Number})],exports.GlatamCalendarMini.prototype,"startOfWeekDay",2);b([l.property({type:Array})],exports.GlatamCalendarMini.prototype,"rules",2);b([l.property({type:Object})],exports.GlatamCalendarMini.prototype,"selectedRange",2);b([l.property({type:String,reflect:!0})],exports.GlatamCalendarMini.prototype,"size",2);b([l.property({type:String})],exports.GlatamCalendarMini.prototype,"hostTimezone",2);b([l.property({type:String})],exports.GlatamCalendarMini.prototype,"activeTimezone",2);b([l.property({type:String})],exports.GlatamCalendarMini.prototype,"minDate",2);b([l.property({type:String})],exports.GlatamCalendarMini.prototype,"maxDate",2);b([l.property({type:Boolean})],exports.GlatamCalendarMini.prototype,"showNeighboringMonth",2);b([l.property({attribute:!1})],exports.GlatamCalendarMini.prototype,"tileClassName",2);b([l.property({type:Array})],exports.GlatamCalendarMini.prototype,"slots",2);b([l.state()],exports.GlatamCalendarMini.prototype,"activeDate",2);b([l.state()],exports.GlatamCalendarMini.prototype,"dropdownOpen",2);b([l.state()],exports.GlatamCalendarMini.prototype,"dropdownSelectedDateString",2);exports.GlatamCalendarMini=b([l.customElement("glatam-calendar-mini")],exports.GlatamCalendarMini);Object.defineProperty(exports,"formatISODate",{enumerable:!0,get:()=>y.formatISODate});Object.defineProperty(exports,"isTimeBlocked",{enumerable:!0,get:()=>y.isTimeBlocked});Object.defineProperty(exports,"parseISODate",{enumerable:!0,get:()=>y.parseISODate});exports.calendarStyles=G;exports.variablesStyles=M;
|
|
1077
|
+
`}};exports.GlatamCalendarMini.styles=[G,E,Z];b([i.property({type:String})],exports.GlatamCalendarMini.prototype,"role",2);b([i.property({type:String})],exports.GlatamCalendarMini.prototype,"locale",2);b([i.property({type:Number})],exports.GlatamCalendarMini.prototype,"startOfWeekDay",2);b([i.property({type:Array})],exports.GlatamCalendarMini.prototype,"rules",2);b([i.property({type:Object})],exports.GlatamCalendarMini.prototype,"selectedRange",2);b([i.property({type:String,reflect:!0})],exports.GlatamCalendarMini.prototype,"size",2);b([i.property({type:String})],exports.GlatamCalendarMini.prototype,"hostTimezone",2);b([i.property({type:String})],exports.GlatamCalendarMini.prototype,"activeTimezone",2);b([i.property({type:String})],exports.GlatamCalendarMini.prototype,"minDate",2);b([i.property({type:String})],exports.GlatamCalendarMini.prototype,"maxDate",2);b([i.property({type:Boolean})],exports.GlatamCalendarMini.prototype,"showNeighboringMonth",2);b([i.property({attribute:!1})],exports.GlatamCalendarMini.prototype,"tileClassName",2);b([i.property({type:Array})],exports.GlatamCalendarMini.prototype,"slots",2);b([i.state()],exports.GlatamCalendarMini.prototype,"activeDate",2);b([i.state()],exports.GlatamCalendarMini.prototype,"dropdownOpen",2);b([i.state()],exports.GlatamCalendarMini.prototype,"dropdownSelectedDateString",2);exports.GlatamCalendarMini=b([i.customElement("glatam-calendar-mini")],exports.GlatamCalendarMini);Object.defineProperty(exports,"formatISODate",{enumerable:!0,get:()=>m.formatISODate});Object.defineProperty(exports,"isTimeBlocked",{enumerable:!0,get:()=>m.isTimeBlocked});Object.defineProperty(exports,"parseISODate",{enumerable:!0,get:()=>m.parseISODate});exports.calendarStyles=E;exports.deleteSeries=M;exports.deleteSingleInstance=I;exports.variablesStyles=G;
|